React with Parcel ?

It’s said by many of the developers that Webapack configurations are very hard.Lot’s ofboilerplate configurations are confusing and complex.

After all thes complains Facebook came forward to provide a solution for this issue,and they came up with a preconfigured React-app.

npx create-react-app my-app

However this might be a best solution for this Webpack issue ,but this command installs many unwanted dependancies to node_modules and take lot of space for a React-app.

What is parcel ?

Parcel is a zero configuration web application bundler ,it’s very simple than webpack and is less confusing and easy to get the setup work on.

Step 1

Create a new folder for you project.

Step 2

Create a node project as usual.

npm init

Step 3

install the parcel dependency next,

npm install — save-dev parcel-bundler
or
npm parcel

The only difference of these 2 command is that,

They are identical only difference is that plugins usually rely on parcel-bundler, so it’s better to use that one.

step 4

Then install React and React DOM to your node project.

npm install react react-dom

Step 5

Then add a “Start” script to your package.json.

Step 6

Then create an index.html file.

1. Then add a <div> tag in the body tag of index.html

2. Secondly enter a script to include the javascript entry file taht we are going to make in the next step.

Step 7

Create the index.js file,and include the below code

Step 8

Finally start the project as npm start.

If you are really interested in using ‘parcel’ in your project, please don’t think twice to refer thh parcel documentation
https://parceljs.org/getting_started.html