创建一个 React 项目，我们可以使用 babel 去处理项目里的 es2015 的代码，还有 React 的 JSX ，然后用 webpack 打包，还想有一个模块热替换的功能。下面我们一起去为 React 项目准备一些工具 ...

进入到项目的根目录的下面 .. 先去安装点东西 .. npm install .. 先安装一下 babel-core .. 还需要两个插件预设 .. babel-preset-es2015 .. 还有 babel-preset-react .. 再安装一下 webpack ... 还有 webpack-dev-server .. 创建开发用的服务器 ..

再去安装两个 webpack 的 loader， babel-loader .. 它可以让我们在 webpack 里使用 babel 去处理文件 .. 因为我们还想使用 react 的模块热替换，所以还得去安装一下 react-hot-loader ..

npm install babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

把它们都保存到项目的开发依赖里 ..

完成以后再去安装一下 react ... 还有 react-dom ..

npm install react react-dom --save

编辑一下 webpack 的配置文件 .. 在所有 js 文件里面，除了使用 baebl 这个 loader，再用一下 react-hot 这个 loader ..

{ test: /\.js$/, exclude: /node_modules/, loader: 'react-hot!babel' },

这里还需要再添加一个额外的东西 .. 用一个 exclude .. 排除不想使用 loader 的目录 .. 排除的是 node_modules 这个目录 ..

再配置一下 babel .. 打开 .babelrc 这个文件 ... 没有这个文件可以去创建一个 .. 这里除了要使用 es2015 这个预设以后，我们还要使用一下 react 这个预设 .. 保存 ..

再去改造一下项目里的代码，打开 name.js .. 在这个文件里我们可以去定义一个 React 组件 .. 它做的事儿就是显示一个 hello ~ ninghao.net ，后面带个文本框 ..

再打开 entry.js .. 再改造一下它里面的东西 .. 先是导入 React ，ReactDOM ，还有 Name 这个组件 .. 然后用 ReactDOM 的 render 方法，把 Name 这个组件放到页面上的 id 是 app 的这个元素里面显示 ...

现在我们就基本上准备好了需要的东西 .. 下面可以去运行一下 webpack-dev-server .. 如果你嫌这个命令太长了，我们可以这样改造一下 .. 打开 package.json .. npm 的配置文件 .. 在它的 scripts 里面，添加一个命令 .. 比如 watch .. 它的值就是要执行的命令 .. webpack-dev-server --inline --hot ..

"watch": "webpack-dev-server --inline --hot"

保存 .. 回到命令行 .. 现在我们可以执行一下 npm run watch .. 运行 scripts 里面的那个 watch 命令 ..

在浏览器上打开创建的这个开发服务器 .. localhost:8080 .. 页面上会显示在 name.js 里面创建的那个组件的内容 ..

打开浏览器的控制台 .. 下面我们可以再去试一下模块的热替换功能 .. 在这个页面上的文本框里输入点内容 .. 然后打开 name.js 修改一下要显示的文字 .. 保存 ..

在页面上会显示修改之后的结果 .. 而且并没有刷新整个页面，只是替换了有变化的地方 ...