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

這就是組件的組合和嵌套。