1. yum install nodejs
2.npm 淘寶鏡像配置 參考 http://blog.csdn.net/wangweiscsdn/article/details/53414965
3.node -v
4.npm -v
5. 項目目錄搭建
//package.json
{
"name": "chatme",
"version": "1.0.0",
"description": "",
"author": "weiwei",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
"build": "webpack --progress --colors --minimize"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
},
"license": ""
}
//webpack.config.js
var webpack = require('webpack');
var path = require('path')
module.exports = {
entry: ['./app/main.js'],
output: {
path: path.resolve(__dirname, '/build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
},
{
test: /\.(jsx|js)$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
//index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>weiwei</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
</head>
<body>
<div id="weiwei"></div>
<script src="./bundle.js"></script>
</body>
</html>
//main.js
import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'
ReactDOM.render (
<ReactStack />,
document.getElementById('weiwei')
);
//ReactStack.js
import React from 'react' //模塊引入
//import '../styles/reactStack.scss'
class ReactStack extends React.Component { //class特性
render() {
const learner = {name: 'WEIWEI', age: 18} //const定義變量
const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
const extraSkills = ['Git', 'Postman']
const skillSet = [...mainSkills, ...extraSkills]
const { name } = learner //解構賦值
let greetings = null //let定義變量
if (name) {
greetings = `${name},歡迎來到${mainSkills[0]}的世界！` //字符模版
}
//以下用了箭頭函數
return (
<div className="skills">
<div>{greetings}</div>
<ol>
{skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
</ol>
</div>
)
}
}
export default ReactStack //模塊導出
6.npm install
7.啓動 npm start