Cristiam Da Silva | Incremental Learning and Migration with React JS: A Guide to Rendering Components in HTML

You have a legacy app — vanilla HTML, CSS, maybe some jQuery. Everyone says "rewrite it in React." But a full rewrite means months of work, a parallel codebase, and a risky switchover day. Nobody has time for that.

Here's what most teams don't realize: you don't have to rewrite anything. You can drop React into a single <div> on one page and leave everything else untouched. Then another <div>. Then another. The migration happens gradually, and the app never breaks.

React in a Script Tag

Include React and ReactDOM from a CDN. Pick one element on the page. Render into it. That's it.

<!DOCTYPE html>
<html>
  <head>
    <title>My React Page</title>
    <!-- Import React and ReactDOM libraries -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  </head>
  <body>
    <!-- Element where React will render -->
    <div id="myReactApp"></div>

    <script>
      // Your React code here
    </script>
  </body>
</html>

Render Into Any Element

ReactDOM.render takes a component and a DOM node. That DOM node can be anywhere on the page — in the header, the sidebar, a single widget. The rest of the page doesn't know React exists.

// Define a simple React component
const MyComponent = () => {
  return <h1>Hello, React!</h1>;
};

// Use ReactDOM to render the component into the div with id 'myReactApp'
ReactDOM.render(<MyComponent />, document.getElementById('myReactApp'));

React and Vanilla, Side by Side

The two worlds coexist without conflict. Vanilla sections stay vanilla. React sections are React. One page, two paradigms, zero problems.

<div id="vanillaSection">
  <!-- Vanilla JS or another library -->
</div>

<div id="reactSection">
  <!-- React will render here -->
</div>

// React code
const ReactSection = () => {
  return <p>This is a React-powered section.</p>;
};

ReactDOM.render(<ReactSection />, document.getElementById('reactSection'));

Each section you convert teaches you more about React — components, props, state — without the pressure of a full rewrite. By the time you've migrated enough sections, the "big rewrite" is already done. You just never had to stop and do it all at once.

The safest migration is the one that happens one <div> at a time.