How to Set up React in a HTML File | Code Boost
Description: 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...

Article

# How to Set up React in a HTML File

By Matt · Mar 23, 2024

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

Click here for the simplest cloud platform. Get started with a $200 credit.

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)

Click here for expert-led courses for sharpening coding skills...free trial...

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.