Create a React App with No Config Using Parcel js

Are you new to the Reactjs or You still confused about using web pack configurations?

For new people to the react webpack code looks like something hard to understand so that today I'm showing how to use the Parceljs to build a react app.

Parceljs is also a module bundler similar to webpack By using Parceljs
You can build a react app from scratch with zero configuration.

As we all know first we need to install some packages

mkdir react-parcel
cd react-parcel 

npm init -y
npm i --save-dev parcel-bundler
npm i --save react react-dom

Next, we need to install some babel packages.

Just copy these code and paste into your package.json file and run
npm install to install the dependencies.

Create a .babelrc file

Copy and paste the code into your .babelrc file

That's it we are done with the setup.

Folder structure.

create an index.html file in root directory like below.

That's it now you can write a react code in the index.js file.
Parcel does bundling behind the scenes.

Now in your terminal run npm start we already defined in our package.json
file.

Parcel creates the dev server with hot module replacement

If you want to bundle your code for production. Parceljs also does the code minification with zero configuration.

Just run npm run build ->Parcel generates the production-ready code.

Code repository

Comments

[Anuj Sharma]

How does this compare with create react app? From what I heard it also allows do create react apps without much burden on configuration.

[Sai gowtham]

In create react app you have no control over the packages untill you need to eject the scripts.if your app grows you need to tweak the web pack configurations based on your requirements.

[Anuj Sharma]

Thanks for the clarification.