Adding React to a Web Page (Learning ReactJS17)

Add a DOM container anywhere inside the ‘<body>’ of a web site and give it a unique ‘id’ attribute. This allows React to find the container and display a React component inside it. You may have as many independent DOM containers on one page as you need. They should be empty; React will place content inside of them.

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

Add two ‘<script>’ tags for React and ReactDOM. The third one will load your component code.

<body>
  <!-- ... other HTML ... -->

  <!-- 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>

Create a React component in the file like_button.js.

This code defines a React component called ‘LikeButton’.

'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'
    );
  }
}

Mount the component in the ‘<div>’ ‘like_button_container’. After the starter code, add two lines to the bottom of like_button.js. These two lines of code find the <div> we added to our HTML in the first step, and then display our “Like” button React component inside of it.

// ... the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

You have just added the first React component to your website.

Minify JavaScript for production. Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. Use the following script sources for production code:

<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>

Add JSX. The quickest way to try JSX in your project is to add this ‘<script>’ tag to your page:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Now you can use JSX in any ‘<script>’ tag by adding type="text/babel" attribute to it. Change the "Like" button code as follows:

// const e = React.createElement;

// // Display a "Like" <button>
// return e(
//   'button',
//   { onClick: () => this.setState({ liked: true }) },
//   'Like'
// );

// Display a "Like" <button>
return (
    <button onClick={() => this.setState({ liked: true })}>
      Like
    </button>
);

These two code snippets are equivalent. JSX is completely optional.

1.1 Adding React to a Web Page