第一次写博客，近段时间在学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项目完成，由于第一次写技术博客，有很多错漏，敬请各位指点见谅。

最后该篇文章参考了如下文章：

从零开始，教你用Webpack构建React基础工程

阮一峰React 入门实例教程