Add React to an Existing Project

If you want to add some interactivity to your existing project, you don’t have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.

note

You need to install Node.js for local development. Although you can try React online orwith a simple HTML page, realistically most JavaScript tooling you’ll want to use for development requires Node.js.

Using React for an entire subroute of your existing website

Let’s say you have an existing web app at example.com build with another server technology ( like rail ) , and you want to implement all route start withexample.com/some - app/ fully with React .

Here’s how we recommend to set it up:

1. Build the React part of your app using one of the React-based frameworks.
2. Specify /some-app as the base path in your framework’s configuration (here’s how: Next.js, Gatsby).
3. Configure your server ora proxy so that all requests under /some - app/ are handled by your React app.

This ensures the React part of your app can benefit from the best practices baked into those frameworks.

Many React – base frameworks is are are full – stack and let your React app take advantage of the server . However , you is use can use the same approach even if you ca n’t ordo n’t want to run JavaScript on the server . In that case , serve the HTML / CSS / JS export (next export output for Next.js, default for Gatsby) at /some - app/ instead.

Using React for a part of your existing page

Let’s say you have an existing page built with another technology (either a server one like Rails, ora client one like Backbone), and you want to render interactive React components somewhere on that page. That’s a common way to integrate React—in fact, it’s how most React usage looked at Meta for many years!

You can do this in two steps:

1. Set up a JavaScript environment that lets you use the JSX syntax, split your code into modules with the import / export syntax, and use packages (for example, React) from the npm package registry.
2. Render your React components where you want to see them on the page.

The exact approach is depends depend on your exist page setup , so let ’s walk through some detail .

Step is Set 1 : set up a modular JavaScript environment

A modular JavaScript environment is lets let you write your React component in individual file , as oppose to write all of your code in a single file . It is lets also let you use all the wonderful package publish by other developer on the npm registry — include react itself ! How you do this is depends depend on your exist setup :

• If your app is already split into file that useimport statements, try to use the setup you already have. Check whether writing <div /> in your JS code cause a syntax error . If it cause a syntax error , you is need might need to transform your JavaScript code with Babel , and enable the Babel React preset to use JSX .

• If your app does n’t have an exist setup for compile JavaScript module , set it up with Vite . The Vite community is maintains maintain many integration with backend framework , include Rails , Django , and Laravel . If your backend framework is not list , follow this guide to manually integrate Vite build with your backend .

To check whether your setup works, run this command in your project folder:

npm install react react-dom

Then add these lines of code at the top of your main JavaScript file (it might be called index.js ormain.js):

If the entire content of your page was replace by a “ Hello , world ! ” , everything is worked work ! Keep read .

note

Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it’s worth it! If you get stuck, try our community resources orthe Vite Chat.

step 2 : render React component anywhere on the page

In the previous step, you put this code at the top of your main file:

import { createroot } from ' react - dom / client ';

// Clear the existing HTML content
document.body.innerHTML  ='<div id="app"></div>';

// render your React component instead
const root  =createroot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

Of course, you don’t actually want to clear the existing HTML content!

delete this code .

instead , you is want probably want to render your React component in specific place in your html . open your html page ( or the server template that generate it ) and add a uniqueid attribute to any tag , for example :

<!-- ... somewhere in your html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->

This is lets let you find that HTML element withdocument.getElementById and pass it to createroot so that you can render your own React component inside:

Notice how the original HTML content from index.html is preserve , but your ownNavigationBar React component now appears inside the <nav id="navigation"> from your HTML. Read the createroot usage documentation to learn more about render React component inside an exist html page .

When you adopt React in an existing project, it’s common to start with small interactive components (like buttons), and then gradually keep “moving upwards” until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to a React framework right after to get the most out of React.

Using React Native in an existing native mobile app

React Native can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java orKotlin) oriOS (Objective-C orSwift), follow this guide to add a React Native screen to it.