Adding React to a Website

Let’s do something really simple here and add the like button example with React.js to our page! If you are seeing an interactive like button here, then React is fully functional!

---

This is the code that produced the like button:

<!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

<!-- Load our React component. -->
    <script>
      
      'use strict';

      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');
      const root = ReactDOM.createRoot(domContainer);
      root.render(e(LikeButton));

    </script>