React.js环境搭建，第一个react.js项目

           React.js环境搭建，第一个react.js项目

         作为一个Android开发，一只想尝试一下react.js的使用，最近项目都比较忙一直没时间，还好项目已经上线，新的版本还在规划中，所有抽空学习了一下react.js，就是想写篇文件记录下搭建环境的过程，免得自己后面项目忙起来没时间看忘记了，然后下次想学习的时候又要重新搭建换进，我想很多人都有这个情况吧，闲下来的时候学点东西，刚学一点项目来了一阵忙碌之后，想想全忘了，然后不得不又重新开始，这个时候不仅枯燥无聊，最重要的时候会打击新鲜感，积极性。

话不多说，开始搭建环境。由于搭建react.js需要node.js环境，这里只作react.js环境搭建，关于node.js的安装，自行搜索。

1，首先去定自己安装了node.js，没办法，使用react.js的时候需要安装很多的工具包这些包需要使用npm安装，npm又是基于node.js的，所以。。。

首先确定自己安装了node.js环境

2，随便新建一个项目文件夹，比如我建的项目文件名称是react_init。

3，使用cd命令进入react-init文件下面。

4，使用npm init初始化init，用于后面使用npm安装各种react插件（插图如下）

执行npm init之后一值enter键，知道最后一步，此时查看当前所有在react_init文件夹下面会看到生成了一个package.json文件，这时候表示npm初始化完成，后面就可以使用npm命令安装各种react.js需要的插件

5，开始使用npm命令安装各种需要react.js的插件，下面的命令你可以一次性执行，也可以一个一个执行

npm install --save react react-dom 

npm install --save react babelify babel-preset-react

npm install babel-preset-es2015 --save

npm install webpack-dev-server —save

npm install wegpack —save

npm install babel-loader --save

命令太多了，不做解释，需要了解具体安装什么的，可以自行搜索

6，以上命令执行之后你可以在react-init文件夹下面看到生成了一个

这是npm帮你自动生成的插件包，里面都是使用npm安装的插件，用于统一管理，在你第一次执行上面的任何一个命令的时候下面的软件包就会自己生成，不仅可以在node_module下面查看你安装了那些插件还可以在package.json

下面查看你安装了多少插件包

5，关于react的插件基本上安装完成，由于我们使用的webpack打包，所有我们还需要一个webpack的配置文件

webpack是一个打包react.js语法的文件生成浏览器可以认识es5的语法，其配置和功能的使用都相当负责，具体了解可以自行搜索。

上面截图中的entry: "./js/index.js",  表示输入路径，就是把当前路径下的index.js的react.js代码进行打包，生成可以被浏览器识别的js代码，生成代码之后自动输出到

output: {

  path: __dirname + '/src/',

  filename: 'bundle.js'

}

当前目录下面，文件名称就是bundle.js。

7，这个生成的bundle.js就是可以被浏览器识别的es5的js代码，新建一个html文件，引入bundle.js之后就可以打开你用react.js写的代码了。

8，有了webpack打包的之后，你就可以只关心自己的react.js的代码了，不管你写了多少组件化的react.js代码，最后都被打包成这样一个js文件，然后一次引入就可以了

9，下一节我说一下webpack的其他更好用的插件，可以直接监视你的react.js文件的改变，自动生成改变之后的bundle.js文件，实时生成，实时预览，非常的方便。