How to Add React to an Existing Website

You can add React to an existing website without rewriting it. Install two packages, give an element an id, and render a component into that element with createRoot. The rest of your page stays exactly as it is.

React works well in small pieces, which is how many teams adopted it. The guide on what React is explains the model behind this approach.

When this makes sense

Add React to an existing site when one part of the page needs real interactivity, such as a search box, a live filter, or a widget that updates without reloading.

It is also a low-risk way to try React in a project you already understand. You keep your current HTML, CSS, and server, and replace one piece with a React component.

Install React

Run this in your project folder:

bash

npm install react react-dom

react provides the component model, and react-dom provides createRoot, which mounts your components into the page. Both are required for the browser to render anything.

Add a mount point

Open your existing HTML and give an element an id. React renders into this element and leaves the surrounding content alone.

html

<div id="like-button"></div>

This empty div is the mount point. You can place it anywhere in the page, and React will fill it with your component.

Render a component

Create a file that imports createRoot, defines a component, and attaches it to the mount point:

App.jsx

import { createRoot } from "react-dom/client";
import { useState } from "react";
 
function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? "Liked" : "Like"}</button>;
}
 
createRoot(document.getElementById("like-button")).render(<LikeButton />);

Because this file contains JSX, your page loads the version the build tool produces rather than the source file. Vite covers that wiring for an existing server in its backend integration guide, which points a script tag at the dev server while you work and at the built asset in production.

Once the script loads, the button appears inside the div. Clicking it toggles the label between "Like" and "Liked" without touching any other part of the page.

Grow from one component

Start with one interactive widget, then convert more of the page over time. Each new component gets its own mount point until eventually the whole page can be built with React. This gradual path lets you ship React without a big-bang rewrite.

When you reach that point, the guide on creating a React app with Vite shows how to move to a full React project instead of individual mount points.

What to learn next

Now that React renders into your page, make the component more useful with state and event handling. The counter guide is a good next exercise, and the useState guide explains the hook you just used.