実行

「Reactはじめ」

Reactを使ってみます。

変化する場所です

プログラム

/*HTML*/
<body>
  <h2>「Reactのはじめ」</h2>
  <p>Reactを使ってみます。</p>
  <div id="like_button_container">123</div>
  <!-- ... other HTML Reactを埋め込む場所... -->
  <!-- Load React. -->
  
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

/*like_button.js*/
const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

考察

DOM = Document Object Model