react的基础搭建

新建文件夹，然后在命令窗口中进入到文件夹目录下，输入npm init --创建package.json文件，

然后安装全局的 webpack 

也就是输入  npm install -g webpack

再安装项目依赖的 npm install --save-dev webpack

在项目文件下，创建webpack.config.js,这个文件是webpack工作的参考。

webpack官方文档是  https://webpack.js.org/concepts/,我们进入的是第二个。

因为是es6，所以以上的内容有的浏览器会不识别，所以我们要用babel来翻译

官方文件https://www.npmjs.com/package/babel-loader，直接复制

在webpack.config.js 中粘贴以上内容，并且做一定的修改。

友情提醒：webpack1和webpack2在配置上差别最大的就是loader的书写方法。module->rules->test/use属性，这就是webpack2的标准写法

 

安装： 

npm install --save-dev babel-loader

npm install --save-dev babel-core

npm install --save-dev babel-preset-es2015

此时运行

webpack

命令，将自动的使用CMD构建app文件夹中main.js文件，并且使用babel翻译。

下面继续开始配置 react   非常简单！

npm install --save-dev react

npm install --save-dev react-dom

npm install --save-dev babel-preset-react

你可能会问：

（1）react为什么不是bower来安装，而是npm来安装

（2）为什么是save-dev 而不是save，也就是说为什么是开发依赖，而不是运行依赖。

改变webpack.config.jswen文件，增加一个babel翻译的配置项presets项

并且在webpack.config.js最后输入    witch:true,这样的话，当你输入webpack命令时，不会跳出来，可以在.js文件中想怎么输出都可以

 至此我们已经配置完毕react起步的所有依赖，我们目前的package.json文件：