How to Embed React Components in HTML Pages

Home Q&A How to Embed React Components in HTML Pages

React is one of the most popular libraries for building interactive user interfaces. While most tutorials focus on creating full React applications with build tools like Webpack or Vite, there are situations where you might want to embed a React component into an existing HTML page without setting up a full project.

This guide explains how to embed React components in regular HTML pages using a simple and effective approach.

Why MyComponent Tag Does Not Work in HTML

You cannot directly place a React component like: inside standard HTML. The reason is rooted in how React works under the hood.

JSX is Not HTML

JSX is a special syntax extension for JavaScript, not HTML.
JSX is transpiled into JavaScript code using tools like Babel.
Browsers cannot interpret JSX directly without this transformation step.

For example:  <MyComponent /> is transpiled to: React.createElement(MyComponent);

React then uses this JavaScript to generate and render real HTML on the page.

HTML Inside JSX Works

You can embed regular HTML within JSX:

function MyComponent() {
       return (
                <div>
                       <h2>HTML inside JSX works</h2>
                       <othercomponent>
                  </othercomponent></div>
          );
      }

However, you cannot embed JSX directly into raw HTML:

<code><body>
  <div>
    <JsxInHtmlDoesNotWork />
  </div>
</body></code>

The Correct Approach to Embedding React in HTML

To embed React into an existing HTML page, you should:

Add a container element where React will mount.
Include React and ReactDOM libraries via CDN.
Use Babel to transpile JSX in the browser (for small projects or prototypes).
Write your React components in a block.

Example: Embedding React in an HTML Page

<!DOCTYPE html>
<html>
  <head>
    <title>Embed React Example</title>
  </head>
  <body>
    <h1>Existing Website Title</h1>
    <p>This is some static HTML content.</p>

    <div id="react-root"></div>

    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      class MyComponent extends React.Component {
        render() {
          return <div>This is a React component embedded in HTML.</div>;
        }
      }

      const root = ReactDOM.createRoot(document.getElementById('react-root'));
      root.render(<MyComponent />);
    </script>
  </body>
</html>

Code snippet compatible for React version 18:

<!DOCTYPE html>
<html>
  <head>
    <title>Embed React Example with Hooks</title>
  </head>
  <body>
    <h1>Existing Website Title</h1>
    <p>This is some static HTML content.</p>
    <div id="react-root"></div>
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      const { useState } = React;
      function MyComponent() {
        const [count, setCount] = useState(0);
        return (
          <div>
            <p>This is a React component embedded in HTML.</p>
            <p>Counter: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
          </div>
        );
      }
      const rootElement = document.getElementById('react-root');
      const root = ReactDOM.createRoot(rootElement);
      root.render(<MyComponent />);
    </script>
  </body>
</html>

Key Points to Remember

JSX is JavaScript, not HTML.
React components must be rendered into the DOM using ReactDOM.render() or ReactDOM.createRoot().render() in React 18+.
Adding React to existing HTML is best suited for small features, widgets, or gradual upgrades to legacy systems.
For larger or production-ready projects, using a build tool (like Vite, Webpack, or Create React App) is strongly recommended for better performance, maintainability, and scalability.

Conclusion

Embedding React into a static HTML page is a practical solution for adding interactive features to existing websites without committing to a full single-page application architecture. While it works well for small-scale use cases or legacy integration, modern development workflows should leverage proper build tools to maximize efficiency and maintainability.