Getting started in React with parcel js

If you're familiar with React, you might have used the below command to create the boilerplate code

npx create-react-app my-app

This command is great! Also it is officially created by Facebook developers to make our lives easier. But the problem that arises with this approach is... you guessed it. The boilerplate code is too much that it takes so much of memory for a simple app. The Node Modules is easily over 200MB for a basic project!

So, what's the solution? Well, here comes parceljs
Parcel has no setup in the initial steps so the amount of boilerplate code is reduced so much.
Now let us see how to get started with it!

Initialize a project

Run the below command to create a package file

yarn init --yes

npm init --y

Adding parcel to project

Now install parcel as a dev dependency

yarn add parcel-bundler -D

Setup Babel

Run the following command

yarn add @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties -D

Now create a .babelrc file in root directory and add the below code

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Setup React and React DOM

Now let's install react
run the below command

yarn add react react-dom

Adding entry point file

For parcel the entry file doesn't needed to be a js file, so create index.html file in src directory

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    />

    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

Connecting React component to HTML File

create a index.js file in src folder and add the following code

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main.js";

ReactDOM.render(<Main />, document.getElementById("root"));

Creating root component

create a Main.js file in src and add the below code

const Main = () => {
  return (
    <div>
      <h1>Hello World from parcel</h1>
    </div>
  );
};

export default Main;

Adding scripts

paste the below code to package.json file

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

Development server

yarn dev

Production build

yarn build

That's it folks, hope you liked it :)

How to setup a React Project with no boilerplate