<div id="wrapper"></div>
<script type="text/babel">
  class Title extends React.Component {
    handleClickOnTitle (e) {
      alert('Click on title.')
      console.log(e.target.innerHTML)
    }
    render () {
      return (
        <h1 onClick={this.handleClickOnTitle}>React 小书 1</h1>
      )
    }
  }

  class Title2 extends React.Component {
    handleClickOnTitle (word, e) {
      console.log(this, word)
    }
    handleClickOnTitle2 (word, e) {
      console.log(this, word)
    }
    render () {
      return (
        <div>
          <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>React 小书 2</h1>
          <h1 onClick={this.handleClickOnTitle2.bind(this, 'Hello')}>React 小书 2-2</h1>
        </div>
      )
    }
  }

  class Header extends React.Component {
    render () {
      return (
      <div>
        <Title />
        <Title2 />
        <h2>This is Header</h2>
      </div>
      )
    }
  }

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

  class Footer extends React.Component {
    render () {
      return (
      <div>
        <h2>This is footer</h2>
      </div>
      )
    }
  }

  class Index extends React.Component {
    render () {
      return (
        <div>
          <Header />
          <Main />
          <Footer />
        </div>
      )
    }
  }
  const container = document.getElementById('wrapper');
  const root = ReactDOM.createRoot(container);
  root.render(<Index />)
</script>