组件：网页可以分为多个模块，比如头部，底部，分享等各种模块，这些模块在其他页面也可能会用到，我们把这些分开，每一个模块当作一个组件，进行复用。
接下来直接以头部 header作为一个组件来进行demo演示组件。
下面是整体的一个项目的框架：
到现在，项目的文件夹里面有两个文件 package.json 和 webpack.config.js
1. 在项目文件夹中创建 src文件夹（源代码放这里面）
2. src文件中创建app.html文件 和 js文件夹
3. js文件夹中创建 index.js文件（入口文件夹） 和 components文件夹（用来放一些组件）
4. components文件夹中创建header.js文件（头部的一个组件，可以公用/复用）
（以上文件夹的框架是我自己练习的框架，可根据不同需要进行命名，只需要注意在配置文件中相应修改）
这个时候项目文件框架应该是这样：
解析以及各个文件的代码：
1. app.html------最后内容会放在这里
<div id="test"> 123 </div>
2. index.js------首先写最基本引入包
var React = require('react');
var ReactDOM = require('react-dom');
3. header.js------写头部组件
import React from 'react';
import ReactDOM from 'react-dom';
//创建一个类 ComponentHeader 相当于继承react里component的子类
//export default 输出这个类
export default class ComponentHeader extends React.Component{
//render() 解析类的一个输出
render(){
return(
<div>
<h1>这里是头部</h1>
</div>
)
}
}
代码的意思：创建了一个ComponentHeader的类，通过render方法解析这个类，我们要将 return返回的内容插入到入口JS文件中，也就是index.js；
需要注意，可以给外部使用的组件定义要写：export default
4. index.js------与组件header.js关联
var React = require('react');
var ReactDOM = require('react-dom');
//把刚才定义的头部引用进来 from后面写路径
import ComponentHeader from './components/header.js'
class Index extends React.Component{
render(){
return(
<div>
<ComponentHeader></ComponentHeader>
</div>
)
}
}
//与app.html进行一个绑定，即：入口的定义
ReactDOM.render(<Index/>,document.getElementById('test'));
5. CMD进入到项目文件夹 运行webpack的热加载：（在js中修改后按保存，会自动在浏览器中刷新）
webpack-dev-server
在浏览器 运行：http://localhost:8080
一个小的react-demo就运行完成了。
注意：
组件的render方法，return返回的HTML节点必须是一个。
下面是一个错误示范，出现了两个节点，会报错。
render(){
return(
//错误示范
<ComponentHeader></ComponentHeader>
<h2>这里头部2</h2>
)
}
解决方法：放到一个节点里面<div></div>,如下：
render(){
return(
//正确示范
<div>
<ComponentHeader></ComponentHeader>
<h2>这里头部2</h2>
</div>
)
}