ReactJS+Webpack+npm的环境搭建material

一直在做后端，最近由于前端资源紧张不得不学习一下前端知识，前端目前比较火的就是React，所以自己也尝试了一下，先从环境搭建开始吧。

1.首先到http://nodejs.cn/download/ 下载安装，然后试试node -v  和 npm -v 命令是否正常

    这样我们就安装好了nodejs和npm。

    nodejs是JS允许的容器，可以理解为后端的tomcat和java的关系，npm是一个前端的包管理工具，这个类似于maven，maven依赖pom.xml，npm是依赖package.json文件。

2.初始化React开发环境：

首先在本地机器创建目录【testdir】，进入该目录（cd testdir），执行【npm init】然后一路默认下去，这样会自动生成好package.json文件。

3.引入material-ui库（google的前端库）

npm install --save-dev material-ui（这样会自动添加到package.json文件的devDependencies），别人用的时候只需要npm install就可以了。

npm install --save-dev jquery

npm install --save-dev react

npm install --save-dev react-tap-event-plugin

npm install -g webpack

npm install --save-dev webpack

npm install --save-dev babel

npm install --save-dev css-loader

npm install --save-dev style-loader

npm install --save-dev react-flexbox-grid

这样在node_modules目录下就生成了依赖的库

4.由于采用的是webpack打包，所以我们需要在根目录新建webpack.config.js，内容参照后面的样例工程

5.我的源码文件都放在src目录下，页面文件在src/page目录，自定义组件在src/compenents目录，最后编译后的文件在build目录，只有page中的js文件才需要到webpack.config.js中添加对应的编译配置，components是不需要添加的，直接在page中引用即可。

6.写好代码以后执行webpack打包到build，开发阶段可以通过webpack -w来监听文件变化自动build

7.同时开启另外一个窗口执行webpack-dev-server来启动服务

样例代码：https://github.com/zrlwoaini/materialUi

gulp其实是没有使用的