Building a Reactjs project with Parceljs

Parcel.js is the new javascript bundler in town. Being less than 2 weeks old, it already has 11k+ stars on github. This will guide you to build your first React project with Parcel.js

Parcel.js boasts to be the fastest javascript bundler till date offering blazing fast performance utilizing multicore processing, and requires zero configuration. Head over to Parceljs.org to know more about.

1. We will jump right into using it by installing Parceljs

npm install -g parcel-bundler

2. Create a package.json file in your project directory using

npm init -y

3. Install react and react-dom

npm install --save react react-dom

4. Install dev dependencies

npm install --save-dev parcel-bundler babel-preset-env babel-preset-react

5. Create a .babelrc file to use react preset

// .babelrc
{
  "presets": ["env", "react"]
} 

6. Add Start script to package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

7. Create an index.html with a script tag pointing to our index.js

index.html

8. Create an index.js that imports our Component and renders it on the page

index.js

9. Create the component and its styles file.

• ExampleApp.js simply returns a simple component with an image and a title.

ExampleApp.js

• ExampleApp.css

ExampleApp.css

10. Done! You can now start the Parcel dev server which watches and hot reloads on changes.

npm run start

You can also find the code for this project on my github repository and check it out live here.

Thanks for reading. I am Vignesh M, JavaScript & Python Developer and Mentor. I go by the username @vigzmv everywhere. Follow me to keep reading more.