How to Set up React in a HTML File

Published March 23, 2024 | By Matt

Most React projects rely on complex build tools. But did you know you can set up simple React components directly within an HTML file? This approach is ideal for rapid prototyping or adding interactive elements to existing pages.

Step 1: Include the Libraries

Add the following CDN scripts inside the <head> of your HTML file:

HTML

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Quick Explanation: (Provide a sentence or two about what each library does – React, ReactDOM, Babel.)

Step 2: Prepare Your HTML

Create a div to hold your React app:

HTML

<body>
  <div id="root"></div>
</body>

Step 3: Write React Code (with Babel)

Embed this inside <script type="text/babel"> tags:

JavaScript

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>React Setup</h1>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Step 4: Production Mode

Important: Replace the development CDN links with production-ready versions.