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

这就是组件的组合和嵌套。