<div id="app"></div>
html,body{
  width: 100vw;
  height: 100vh;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
header {
  background: orange;
  padding: 1vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
main {
  flex: 1;
  background: #f46;
  padding: 1vw;
}
footer {
  background: #010101;
  color: #fff;
  padding: 1vw;
}
View Compiled
// 创建Title组件
class Title extends React.Component {
  render() {
    return (
      <h1>React 小书</h1>
    )
  }
}

// 创建Header组件
class Header extends React.Component {
  render () {
    return (
      <header>
        <Title />
        <h2>This is Header</h2>
      </header>
    )
  }
}

// 创建 Main 组件
class Main extends React.Component {
  render () {
    return (
      <main>
        <h2>This is main content</h2>
      </main>
    )
  }
}

// 创建Footer组件
class Footer extends React.Component {
  render () {
    return (
      <footer>
        <h2>This is footer</h2>
      </footer>
    )
  }
}

// 创建Index 组件
class Index extends React.Component {
  render () {
    return (
      <div className='wrapper'>
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }
}

// 渲染Index组件
ReactDOM.render(
  <Index />,
  document.getElementById('app')
)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js