Create Your React App with Parcel

ParcelJS is a relatively new bundler when it comes to bundling web applications. Parcel is presented as a web application with zero configuration, which offers blazing speed performance utilizing multicore processing.

True that Webpack is the most popular bundler out there as it’s an awesome tool that gives you the power to configure but most of the time what you need is a simple tool that gets the job done for you.

That's how create-react-app was designed by the team at Facebook. they made it possible to create a react app by running just one command

How cool is that! But… this comes as a fairly large app as there’s a lot of dependencies, loaders, plugins automatically installed as node-modules and they take up a lot of space for each app.

So this is where Parcel comes into the picture and states that building apps with Javascript bundlers are a lot easier than you think, by introducing the fastest bundling tool with zero configuration.

Also, Parcel offers some cool features like

• Assets Bundling — out-of-the-box support given for JS, CSS, HTML file assets.
• Fast bundle times — it offers a considerably faster time than other bundling tools out there.
• Code Splitting — you are allowed to split your output bundle by using the dynamic import() syntax.
• Error Logging — Parcel prints syntax highlighted code frames upon encountering errors and helps you to pinpoint the problem.
• Hot module replacement (HMR) — modules are automatically updated in the browser as you make changes during development, no configuration needed.

So, let’s see what it takes to set up a React app and display “Hello to React” in an h1 element.

How To Set Up a React Project With Parcel

Step 1: Genarating package.jason file

After creating a new folder for your project you can use cd <folder name> to navigate to your folder.

then you just have to run the command npm init or npm init -y in terminal. using npm init will prompt you to follow the following sequence and adding -y will skip that for you.

As this process ends your package.json file will be generated as shown below.

Step 2: Install Parcel, React, and ReactDOM

Above dependencies will install React and react-dom to your application.

Once it’s done installing your package.json file will list all the dependencies as shown below.

Step 3: Add a “start” script to package .jason file

Now you need to add the following code to the start script.

Step 4: Create the index.html file and write some code

You can create a new file called index.html and use the built-in shortcut to create a standard boilerplate HTML file by typing an Exclamation point (!) and hitting the Tab key on your keyboard.

we need to add two lines of code in order to display the message and to import index.js into index.html.

➊ Add a <div> to the HTML with the id “app”

➋ Add the script tag After the </body>close tag and before the </html>close tag.

Step 5: Create the index.js file

Create a new file called index.js and enter your bare-bones React code as shown below.

Adding the above code to your index.js, You are creating your first React element and mounting it to the <div> tag created.

Step 6: Now your React app is ready to start!

All you’ve gotta do is, hit the terminal with the npm start command and Parcel will handle the rest.

Visiting the server running at the given port above, you will be able to see the message displayed as shown below.

So this is how you generate a fully functional react app in just 6 steps!

Conclusion

I hope you found this article useful! Give claps if you liked this as it would encourage me to write more. 👏

Thank you,

See you soon 😊