2017-2-3（第一个ReactDemo）
第一次写博客，近段时间在学React，刚接触JS的时候还是在写JQ时代。时移世易，现在前端已经翻天覆地的变化。各种不知名的工具：grunt glup webpack karma各种各样脚手架。
现在就用webpack写一个React的Demo：
首先需要在电脑安装npm ：
由于本人是Windows系统，在命令行输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
成功安装后输入：
npm -version
会输出版本号代表成功安装。
新建一个项目：React_Demo
项目结构如下图：
app里面的components是存放React写的组件
main.js是封装React写好的组件。
build文件夹是输出打包后的文件
node_modules文件夹是该项目需要依赖module，通过命令行安装；
其余的稍候再说明；
1、先说package.json
该文件是通过命令行创建的：先在命令行“cd”到在该项目的根目录，然后输入命令：
npm init
这样就自动创建 package.json 文件
2、根目录下有一个webpack.config.js文件
1、安装webpack命令：npm install -g webpack
这里为全局安装
2、webpack.config.js里面的内容：
里面也有注释，说明每行代码的作用；
本项目是基于webpack构建的react_demo
3、根目录.babelrc
bael是用于编译ES6、ES7和JS的拓展语言如现在的JSX。在根目录配置.baelrc文件。是单独把babel的配置选项放在一个名为 ".babelrc" 的配置文件中。
4、react代码
这是其中一种封装react组件的写法。
Component1 extends React.Component是继承React的Component
render方法是react的渲染方法，现在返回一个div标签
最后一行代码：export default Component1;是导出该组件Component1给其他模块使用;
5、app文件夹的main.js
代码中import是导入三个模块，分别是React、ReactDom、还有Component1
ReactDom.render方法是渲染在html上，传入两个参数
第一个参数是一个标签：react组件或者普通的html标签，切记是一个；
第二个蚕食是html中的元素，如图是id为content的元素
6、启动热启动测试第一个React_Demo
在该项目根目录下输入命令：
npm run dev
待命令行执行完，在浏览器输入http://localhost:9191就会显示刚才写的react的div标签“Hello World!123”
至此该React_Demo项目完成，由于第一次写技术博客，有很多错漏，敬请各位指点见谅。
最后该篇文章参考了如下文章：
