React.js是帮助前端构建页面的UI库。.React.js将前端的页面分成独立的小块，每一个小块就是一个组件，我们将组件进行组合和嵌套，显示在页面上，形成我们的前端界面。
1.React.js组件描述
我们使用JSX描述组件。html虽然可以用Javascript对象描述，但是语言不清晰。JSX就是将javascript语言扩展了一下，允许在javascript里面写类似html标签结构的语言。
class Title extends Component {
render () {
return (
<h1>Hello world!</h1>
)
}
}
ReactDOM.render(
<Title />,
document.getElementById('root')
)
这个一个基础的组件，在页面上显示Hello world!一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。JSX要用外层的元素包起来，多个的元素返回是不允许的。另外，在命名时，组件元素首字母大写，这点区别于html元素。
2.React.js组合和嵌套
class Title extends Component {
render () {
return (
<h1>Hello world!</h1>
)
}
}
class Header extends Component {
render () {
return (
<div>
<Title />
<h2>This is Header</h2>
</div>
)
}
}
class Main extends Component {
render () {
return (
<div>
<h2>This is main content</h2>
</div>
)
}
}
class Footer extends Component {
render () {
return (
<div>
<h2>This is footer</h2>
</div>
)
}
}
class Index extends Component {
render () {
return (
<div>
<Header />
<Main />
<Footer />
</div>
)
}
}
ReactDOM.render(
<Index />,
document.getElementById('root')
)
我们在前端界面上显示Index组件，该组件包含Header、Main和Footer这三个组件。组件Header中包含Title这个组件，我们npm start后显示的前端界面为
QQ图片20180204004722.png
这就是组件的组合和嵌套。
