w3resource
React Tutorial

Add React to a Website

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that.

The majority of websites aren't, and don't need to be, single-page apps. With a few lines of code and no build tooling, you can try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

In this tutorial, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.

There will be no complicated tools or install requirements - to complete this section, you only need an internet connection, and a minute of your time.

Step 1: Add a DOM Container to the HTML

First, open the HTML page you want to edit. Add an empty <div> tag to mark the spot where you want to display something with React. For example:

```
<!-- ... existing HTML ... -->
<div id="the_react_container"></div>
<!-- ... existing HTML ... -->
```

We gave this <div> a unique id HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.

Note: You can place this container <div>anywhere inside the <body> tag, just ensure it has a unique id, and avoid putting things inside of it, as react will replace any existing content inside DOM containers.

Step 2: Add the Script Tags

Next, add three <script> tags to the HTML page right before the closing </body>tag:

<!-- ... other HTML ... -->
<!-- Load React. -->
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<!?then load our React component. -->
<script src="my_component.js"></script>
</body>

The first two tags load React. The third one will load your component code.

Step 3: Create a React Component

Create a file called my_component.js next to your HTML page and paste the code snippet below in the js file you just created.

```
'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('#the_react_container);
ReactDOM.render(e(LikeButton), domContainer);
```

In the code snippet above, the two last lines of code finds the <div > with the id "the_react_container " which we created initially, and then display our "Like" button React component inside of it.

That's It!

There is no step four. You have just added the first React component to your website.

Check out the next sections for more tips on integrating React.