How to add react to an existing website?

React is a JavaScript library for building user interfaces. Generally we use react to create standalone single page applications.

But what if you already have a large scale web application built on a different technology or framework and you want to test out react for some part of the your application without touching the other features.

For such scenarios you can add react to your web application for specific part of your UI without affecting rest of the application. React has been designed from the start for gradual adoption

Let's jump into handson

We will create a small application where we have a post and we can add comments on that post.

To start the Demonstration create an index.html file in your root folder.
Since index.html is an existing page of your web application it can contain lot of other html as well.
Our existing html file might look like this:

<div class="post-container">
  <h1 class="post-header">T-shirt for sale</h1>
    <div class="post-body">
      <img src="t-shirt.jpg" alt="img" width="300px" height="300px" />
    </div>
</div>

Now wherever you want to inject your react application just add a html tag with a unique ID (you can use class if the same react application has to be added at multiple places in your application).
Add a html element just below .post-body div with any id

<div id="post-comments-root"></div> <!--This is a react root node-->

Now you need to add react scripts to your index.html at the end of body tag. (when deploying, replace development.js with production.min.js)

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

To use jsx syntax you need to add babel script otherwise you will have to use React.createElement() in the return of react component.

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

Now create a javascript file which will contain your react component code. and include that in your index.html. This file will be the entry point of your react app.

<script src="react/components/post-comments.js" type="text/babel"></script>

This way you have completed the index.html configuration and you can go ahead and write your react code.

After writing all the component code, query your root react DOM node in index.html using id post-comments-root and render your root element using createRoot api just like a normal index.js file of any react app.

const domNode = document.getElementById("post-comments-root");
const root = ReactDOM.createRoot(domNode);
root.render(<PostComments />);

Congratulations! You have integrated a react app in your existing front end project.

Thanks for reading my article. In case of any questions let me know in the comment.

You can find the complete code on my github.

Comments

[Medea]

really helpful post for beginners!

[Nadeem]

Thanks Medea!

[Abhay Singh Rathore]

Great guide on how to add React to an existing web application!

[Nadeem]

Thanks Abhay!