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/为需要忽略处理的模块
然后创建修改.babelrc文件，配置babel
{
"presets": ["es2015", "react"]
}
加入react预设
NO.4
新建entry.js文件
导入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 环境搭建完毕
在项目目录中，运行npm run watch
项目成功的跑起来，环境搭建完毕
