在js文件夹下新建component文件夹，项目的组件都保存在里面；
一、PC端页头组件
1、建立文件
在component文件夹之外，新建indx.js文件，名称要对应在webpack-config.js中设置的entry（入口）文件的名称。index.js用来设置路由
2、新建pc_header文件，存放PC端页头组件。
3、将页头组件{PCHeader}引入index.js
4、定义入口
5、组件参数化
组件可以通过参数的形式进行传递，这样子可以对情况进行判断（例如三元表达式），然后向用户展示不同的组件。
ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。
ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。
6、disabled禁用事件
disabled 表示禁用此 input 元素。被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
7、html代码在JSX中显示
HTML代码参数要传到JSX中，并能以正确的状态渲染出来，有两种办法：
1 用Unicode转码，将html代码转为Unicode代码
2 用dagerouslySetInnerHTML 属性
dagerouslySetInnerHTML 属性，通过__html接收参数
<p dangerouslySetInnerHTML={{__html : html对象}}></p> 注意：用此方法可能会存在XSS攻击
8、生命周期函数 （钩子）
生命周期函数，属于内置函数，有固定的名称。
生命周期函数加载的顺序：先父组件的will，子组件的will，子组件的did ，父组件的did
网站搭建采用Flex布局（弹性布局）
引入AntD框架中的Layout（布局），快速实现Flex布局。AntD 中的Layout将页面横向上分为24格。行为Row，列为Col，Col标签中用span属性来划分24格
<Row>
<Col span={12}>col-12</Col>
<Col span={12}>col-12</Col>
</Row>
注意：在AntD 3 中Grid用作栅格，Layout用作布局
页头图标网站，推荐 ICONFINDER
