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! 🎉