NO.1 新建react項目，進入項目目錄
npm init
然后一鍵安裝需要的npm包
npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev
注：其中react-hot-loader為react模塊熱替換的功能
NO.2 安裝react和react-dom
npm install react react-dom --save-d
NO.3 配置webpack.config.js
新建webpack.config.js配置文件
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'react-hot!babel'},
{test: /\.css$/, loader: 'style!css'}
]
}
}`
在處理js的時候，需要把react-hot這個東西加載進去,exclude: /node_modules/為需要忽略處理的模塊
然后創(chuàng)建修改.babelrc文件橱健，配置babel
{
"presets": ["es2015", "react"]
}
加入react預(yù)設(shè)
NO.4
新建entry.js文件
導(dǎo)入react和react-dom
'use strict';
import React from 'react';
import ReactDom from 'react-dom';
import Name from './name';
ReactDom.render(
<Name />,
document.getElementById('app')
);
意思是把Name這個組件放入到app這個div中
NO.5 編寫一個測試組件
新建一個name.js
'use strict';
import React from "react";
class Name extends React.Component {
render () {
return (
<div>
hello~ <input />
</div>
);
}
}
export { Name as default };
NO.6 在package.json配置快捷啟動命令
在script選擇中加入：
"watch": "webpack-dev-server --inline --hot"
NO.7 環(huán)境搭建完畢
在項目目錄中焰轻，運行npm run watch
項目成功的跑起來，環(huán)境搭建完畢
