React From Scratch(with Parcel)

I have been using React for the last 3 years. And every time I need to create a front-end project with React, I would open a terminal, run the create-react-app command and it would magically create a whole react project. I have also used vite to create react projects but never understood how these tools create and configure a react app.

Today I will try to understand how all of these tool chain that creates a react project scaffolding with ready to go configuration. And possibly create a react project from scratch too.

React Project Toolchain Anatomy
#

Let’s understand the anatomy of the react toolchain.

Firstly, the toolchain consists of a package manager, such as npm, pnpm or Yarn. We need a package manager for installing or updating third-party packages.
Secondly it consists of a bundler, such as webpack. It combines many Javascript code files and dependencies into a single one that can be loaded into the browser easily.
Finally, it consists of a compiler, such as Babel. It compiles modern Javascript code into legacy browser runnable code.

Now that we understand the anatomy of any react toolchain let’s build one.

Building Time
#

In this blog post, I am going to take a very easy route to build the react app from scratch. Instead of using two different tools for bundling and compiling the react code, I’ll be using a tool called Parcel that can handle both tasks efficiently and quickly. I’ll also be using npm as my package manager. Let’s get started!

Setup
#

Let’s start by creating a folder for our react project. Then, initialize a node project using npm init and open it in VSCode. Now let’s create two folders public and src in our project. The public folder will hold all the static assets and the src folder will hold all the react codes including the html file. Next create the index.html file inside the src folder.

.
├── public
├── src/
│   └── index.html
└── package.json

This index.html file will be used by react to render the react codes. Inside this html file let’s create a <div> with a unique id so that react can grab the html element and render react components inside. Next add a <script> tag that will link to the react source file.

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

Installing React
#

Before we can write any react code, we need to install react itself. Run this command in the terminal to install react and react-dom.

npm install react
npm install react-dom

Writing React Code
#

Before we write any react code, we need to create the index.jsx file. Inside this file we will grab the html and render our react app inside that element.

// index.jsx file
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container)
root.render(<App />);

We are importing the main react component App and then rendering it inside the html element. For this example, let’s create a very basic react app that shows ‘Hello World’.

// App.jsx file
const App = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}
export default App;

Installing Parcel
#

As mentioned earlier, I’ll be using Parcel. So, let’s go ahead and install it.

npm install --save-dev parcel

Configuring Parcel
#

Configuring Parcel is very easy. We just need to add some fields in the package.json file. Add the followings in the package.json.

{
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  }
}

Running the App
#

That’s it! We have configured a react app from scratch. Now it’s time to run our app. Run the following command. It will run parcel and parcel will handle the bundling and compiling of our react app.

npm run start

Open http://localhost:1234/ in a browser and we can see our react app running.

If we want to change the port then do following changes in the package.json.

{
  ...
  "scripts": {
    "start": "parcel -p 3000",
    ...
  },
  ...
}

We can also configure that every time we run the start command it will automatically open a browser.

{
  ...
  "scripts": {
    "start": "parcel --open firefox",
    ...
  },
  ...
}

Final Project Structure
#

If you have done everything correctly then your project structure will be similar.

.
├── .parcel-cache/
├── dist/
├── node_modules/
├── public/
├── src/
│   ├── App.jsx
│   ├── index.html
│   └── index.jsx
├── package-lock.json
└── package.json

Final Thought
#

In this blog we used Parcel and that did most of the heavy lifting. In future I will try to do a “React From Scratch with webpack and Babel”.

Cover photo by Lautaro Andreani on Unsplash

React Project Toolchain Anatomy#

Building Time#

Setup#

Installing React#

Writing React Code#

Installing Parcel#

Configuring Parcel#

Running the App#

Final Project Structure#

Final Thought#