I recently had to use react-window in a project. I did not want to use a full fledged framework for such a small task. I was looking for a way to add a few React components to an HTML page. My search ended at Parcel

In this guide, we’ll walk through how to set up a simple React app using Parcel, a fast and zero-config bundler. Let’s jump in!

Step 1: Setting Up the Project

Before we start, we’ll need to create a project folder and initialize it with a basic package manager configuration.

  1. Create a new directory for the project:

    mkdir react-parcel-demo
cd react-parcel-demo

  2. Initialize the project with npm (or yarn if that’s your style):

    npm init -y

This will create a package.json file that manages all your project dependencies.

Step 2: Install React and Parcel

Next, let’s install the necessary dependencies: React, ReactDOM, and Parcel. React and ReactDOM are the core libraries for building and rendering React components, while Parcel will handle the bundling for us.

Run this command in your project folder:

npm install react react-dom
npm install --save-dev parcel

We are installing Parcel as a development dependency. It’s only needed during the build process, so we don’t need it in production.

Step 3: Create The Files

Let’s start writing the code!

  1. Create an index.html file:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React with Parcel</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

Here, the <div id="root"></div> is where our React app will be injected. The script tag at the end links to the JavaScript file where our React code will live.

  1. Create an index.js file:

    import React from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.jsx";
const domNode = document.getElementById("root");
const root = createRoot(domNode);
root.render(<App />);

Here, we’re importing React and ReactDOM, defining a basic App component, and rendering it inside the #root div we created in the HTML file.

  1. Create the App component:

    import React from "react";
const App = () => {
  return (
    <div>
      <h1>Hello, React with Parcel!</h1>
      <p>This is a simple React app bundled with Parcel.</p>
    </div>
  );
};

Step 4: Run Your Project

We are almost there! Now, let’s see our project in action.

  1. Run the following command to start the development server:

    parcel index.html

This will launch Parcel’s development server, and we’ll see something like this:

Server running at http://localhost:1234

Step 6: Build for Production

We can build the production version by running:

parcel build index.html

Parcel will bundle the app into a dist folder, ready to be deployed. The best part? No extra configuration needed—Parcel does it all for you.

Adding React to an HTML page with Parcel is surprisingly simple, and we’ve just done it! 🎉