Beginners Guide To Setup React Project With Parcel Tutorial is the topic. In this example, you will see how we can use Parcel as a module bundler for React.js development. Most of the time, we have used webpack as a module bundler. It is very famous right now. But to configure the webpack is tedious. You need to have some knowledge about webpack plugins and configuration. Parcel solves this problem. It arrives with Zero configuration. That is why today I am showing you how you can use Parcel for your next React.js project. If you are new to a parcel, webpack, react.js, then please check out following tutorials on this blog.

If you want to learn more about React.js then check out this React 16 – The Complete Guide (incl. React Router 4 & Redux) Guide. It has a very brief intro about React and Redux.

React 16 – The Complete Guide (incl. React Router 4 & Redux) check out

Setup React Project With Parcel

First, we will start our project by creating a package.json file.

npm init

Okay, now, we need to install parceljs globally in our system.

npm install -g parcel-bundler

Now, parcel needs to take an entry file, which is JavaScript file. In our case it is app.js. So let us create that file in the root. Also, create one HTML file inside root called index.html. Now write the javascript code inside an app.js file.

//app.js export const project = (x, y) => { return x + y + 2*x; } alert(project(2,4));

In above example, I have used ES6 arrow functions. Now, include this file in the index.html file and we need to start the server.

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Setup React.js with Parcel</title> </head> <body> <h1>Welcome to React.js Environment With Parcel</h1> <div id="app"></div> <script data-src="app.js" type="text/javascript"></script> </body> </html>

Now start the development server with the following command.

parcel index.html

It will start the server at port: 1234. Now you can see that our application is running on port: 1234. Switch to the browser and hit the following URL: http://localhost:1234/

Though we have not use any es6 plugin, it still compiles the ES6 version of JS to ES5, and that is the central power of Parcel that we do not need to configure the ES6 plugin for the project. It by default comes with Parceljs.

Parcel and React

To work with React.js, we need to install the following dependencies.

npm install react react-dom --save

As React.js is written in ES6; we will need a way to transpile the code. Parcel does that for you with no need for configs, all you have to do is install its presets. We do need a presets, but we do not need to configure it as we have configured in webpack. Parcel does it for us, and that is the main advantage of it. We just install the dependencies, and that is it.

npm i babel-preset-react --save-dev

Create a .babelrc file and add the following code.

{ "presets": ["react"] }

Okay, now create a div with the id of an app.

Create one folder called src. Move the app.js file inside src folder and also update the path inside an index.html file.

<script src="src/app.js" type="text/javascript"></script>

If your server gives an error in the console, then please restart the server.

Create React Components.

Inside the src folder, create the new folder called components. In the components, make a new component called Dashboard.js.

// Dashboard.js import React, { Component } from 'react'; export class Dashboard extends Component { render() { return ( <div> Dashboard Component </div> ); } }

Include this component inside src >> app.js file.

// app.js import React from 'react'; import { render } from 'react-dom'; import { Dashboard } from './components/Dashboard'; render(<Dashboard />, document.getElementById('app'));

It will target the dom element of id app. If you got any error, please recheck this code or restart the server. Now you can see that our dashboard component is rendering inside the index.html page. Now, you can build any shape of your application structure as you want. Just keep in mind that it is scalable for a long term.

Parcel For Production Use case

For production use, we just need to run the following command.

parcel build index.html

It will generate following files.

dist\442edaf38c9be10b18d7b9c1cdf8f2c8.js

dist\index.html

They are minified and production ready files.

Now, add development and production both of the scripts in the package.json file.

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

Now, hit the following command to ready for production build.

npm run prod

Also, for development mode, hit the following command.

npm run dev

Finally, our Beginners Guide To Setup React Project With Parcel Tutorial is over. Thanks. Hope you will find useful.

Fork Me On Github