How to add React to an existing website or web project

Use as little or as much React as you need in your web project as mentioned in react official docs.

Photo by Ferenc Almasi on Unsplash

In this tutorial we also the react official way to add bare minimum react to our project. As an example, I'm going to add a simple Medium Blog Post Display Component on my website https://rajdeep-das.github.io. So it will be a real-world example and production website it will give you minimum knowledge about how to add React to an existing website.

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, try to React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic components.

Add React in Exiting Website

In this section, we will add a React component to an existing HTML page of my website. 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.

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:

Example Container

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.

You can place a “container” <div> like this anywhere inside the <body> tag. You may have as many independent DOM containers on one page as you need. They are usually empty — 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:

React CDN

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

The React CDN Links or you can google it for the latest version if newly released when you reading the post.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>

</script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Step 3: Create a React Component

Create a file called medium_post_component.js next to your HTML page.

This code defines a React component called MediumPost . Don’t worry if you don’t understand it yet — You can check out the building blocks of React later in the hands-on tutorial and main concepts guide. For now, let’s just get it showing on the screen!

If you don’t want to build your own component but try out this tutorial you can use below code example in your project. React has two flavors with JSX and without JSX. The example below is without JSX, it can directly run on the browser.

const domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(e(MediumPost), domContainer);

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.

That’s It!

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

If you don’t want to use JSX you can Stop here. If you are interested you can follow along, in the real-world project almost every developer use JSX.