React.js是幫助前端構(gòu)建頁(yè)面的UI庫(kù)。.React.js將前端的頁(yè)面分成獨(dú)立的小塊，每一個(gè)小塊就是一個(gè)組件，我們將組件進(jìn)行組合和嵌套，顯示在頁(yè)面上，形成我們的前端界面。
1.React.js組件描述
我們使用JSX描述組件。html雖然可以用Javascript對(duì)象描述，但是語(yǔ)言不清晰。JSX就是將javascript語(yǔ)言擴(kuò)展了一下，允許在javascript里面寫類似html標(biāo)簽結(jié)構(gòu)的語(yǔ)言。
class Title extends Component {
render () {
return (
<h1>Hello world!</h1>
)
}
}
ReactDOM.render(
<Title />,
document.getElementById('root')
)
這個(gè)一個(gè)基礎(chǔ)的組件，在頁(yè)面上顯示Hello world!一個(gè)組件類必須要實(shí)現(xiàn)一個(gè) render 方法，這個(gè) render 方法必須要返回一個(gè) JSX 元素。JSX要用外層的元素包起來(lái)，多個(gè)的元素返回是不允許的。另外，在命名時(shí)，組件元素首字母大寫，這點(diǎn)區(qū)別于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')
)
我們?cè)谇岸私缑嫔巷@示Index組件，該組件包含Header、Main和Footer這三個(gè)組件。組件Header中包含Title這個(gè)組件，我們npm start后顯示的前端界面為
QQ圖片20180204004722.png
這就是組件的組合和嵌套。
