跟我一起学习React（一）

React如今已经非常流行了，不论你去哪里进行面试web前端开发，面试官都会问你会不会react、vue、angularjs之类的。搞得好像作为一个前端开发者，必会的东西就是jQuery、react、vue、angularjs、CSS3、HTML5、nodejs等等技术。工作的需要，自己没有办法不去努力学习。因此，下面我们就一起来学习下react吧，如果你还不知道如何在nodejs下配置react开发环境，那么请看我这篇文章《ReactJS环境搭建》
本系列课程都是使用ES6进行开发，因此你需要了解相应的ES6基本知识

一、安装React Developer Tools

建议大家都使用chrome浏览器进行安装，下载地址：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi，如果打不开的童鞋，请自行翻墙（更改hosts，或者使用goproxy）。

二、创建一个react组件

react组件：其实就是一个js文件。因此，我们可以将一个页面分为很多个不同的组件，比如header组件、body组件以及footer组件，正如你使用div+css进行布局一样。

1、在src/components目录下，新建Header.js、Body.js、Foot.js这三个文件，并且删除原来的main.js
Header.js中，打入下面的代码：

'use strict';
require('styles/App.css');
import React from 'react';
class Header extends React.Component{
render(){
return(

);
}
}
export {Header as default}

2、Body.js代码

'use strict';
import React from 'react';
class Body extends React.Component{
render(){
return(

);
}
}
export {Body as default}
3、Foot.js代码

'use strict';
import React from 'react';
class Foot extends React.Component{
render(){
return(

);
}
}
export {Foot as default}
4、整合
现在三个组件的代码都完成了，可是我们需要将3个组件整合到一起，并在浏览器端输出三个组件的所有代码，因此，我们需要在Header.js中使用import来导入相应的组件

import Body from 'Body';
import Foot from 'Foot';

并且在需要的地方使用组件，最终的Header.js代码如下：
'use strict';
require('styles/App.css');
import React from 'react';
import Body from 'Body';
import Foot from 'Foot';
class Header extends React.Component{
reden(){
render(

);
}
}
export {Header as default}

5、输出浏览器
我们现在需要打开src/index.js，将里面的内容修改下

import App from './components/Main';//删除这句，增加如下一句代码
import Header from './components/Header';
//然后再修改如下的语句
ReactDOM.render(, document.getElementById('app'));
//将修改为