<div id="wrapper"></div>
<div id="wrapper1"></div>
<div id="wrapper2"></div>
<script type="text/babel">

  // first
  function MyApp() {
    return <h1>Hello, world!</h1>;
  }
  const container = document.getElementById('wrapper');
  const root = ReactDOM.createRoot(container);
  root.render(<MyApp />);

  // second
  class Header1 extends React.Component {

    renderGoodWord (arg1, arg2) {
      const isTrue = true
      return isTrue ? arg1 : arg2
    }

    render () {
      const word = 'is word'
      const isGoodWord = true
      const goodWord = <strong> is good</strong>
      const badWord = <span> is not good</span>
      return (
        <div>
          <h1>React 小书</h1>
          <h1>React 小书 {word}</h1>
          <h1>React 小书 {1+3}</h1>
          <h1>React 小书 {(function () { return 'is function'})()}</h1>
          <h1>React 小书 {isGoodWord ? goodWord : badWord} </h1>
          <h1>
            React 小书
            {this.renderGoodWord(
              <strong> renderGoodWord first arg </strong>,
              <span> renderGoodWord second arg </span>
            )}
          </h1>
        </div>
      )
    }
  }
  const container1 = document.getElementById('wrapper1');
  const root1 = ReactDOM.createRoot(container1);
  root1.render(<Header1 />)

  // third
  class Title extends React.Component {
    render () {
      return (
        <h1>React 小书</h1>
      )
    }
  }

  class Header extends React.Component {
    render () {
      return (
      <div>
        <Title />
        <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 container2 = document.getElementById('wrapper2');
  const root2 = ReactDOM.createRoot(container2);
  root2.render(<Index />)
</script>