React 组件化

return函数中只能有一个节点

引入方式有两种：

• < ComponentFooter />
• 变量，便于有判断条件下，加载不同的组件

// header.jsimport React from 'react'export default class ComponentHeader extends React.Component{  render () {    return (      <header><h1>头部</h1></header>    )  }}

// body.jsimport React from 'react'export default class ComponentHeader extends React.Component{  render () {    return (      <footer><h1>尾部</h1></footer>    )  }}

// index.jsvar React = require('react')var ReactDom = require('react-dom')import ComponentHeader from './components/header'import ComponentFooter from './components/footer'class Index extends React.Component {  render() {    var component = <ComponentHeader />    return (      <div>        {component}        <ComponentFooter />      </div>    )  }}ReactDom.render(<Index />, document.getElementById('app'))