Setting up React Project with Parcel zero configuration approach.

Learn how to configure React with Parcel module bundler in this brief tutorial

Parcel is a new module bundler for Javascript applications. It offers faster compilation times and zero configuration bundling.

Setting up React with Parcel bundler: why Parcel?

However webpack has its own way of doing things:

  1. it requires a configuration file
  2. loader and transformer must be declared explicitly

In other words, if you want to transform Javascript, or if you need an HTML file, webpack must be instructed with a corresponding configuration.

The configuration file is usually copied over and over into different projects. That could lead to errors, inconsistencies, and other issues.

Parcel aims at solving this problem with a zero configuration approach.

Setting up React with Parcel bundler: installing Parcel

  1. mkdir react-parcel && cd react-parcel

Create a minimal directory structure for holding up the code:

  1. mkdir -p src/js

Inizialize the project by running:

  1. npm init -y

and you’re good to go.

Next up install Parcel with NPM:

  1. npm i parcel-bundler — save-dev

Parcel’s docs suggest installing the bundler globally. I recommend doing so only after configuring the NPM global default directory.

After the installation configure Parcel into package.json:

“scripts”: {

“start”: “parcel ./src/index.html”

}

The above configuration is exactly the same thing as installing and configuring the webpack dev server. In Parcel you don’t need to install additional dependencies: the development server is already there.

Setting up React with Parcel bundler: HTML and friends

In Parcel you are not supposed to install anything else.

Also with webpack the resulting bundle will be placed automagically inside a <script></script>tag.

Parcel works the other way around: the source HTML must include a <script></script>tag with a reference to the Javascript bundle.

Let’s see the following example: it’s a super simple HTML page (feel free to use whichever CSS library you prefer).

Create an HTML file named ./src/index.html:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8">
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
<title>Setting up React with Parcel bundler</title>
</head>

<body>
<div class=”container”>
<div class=”row mt-5">
<div class=”col-md-4 offset-md-1">
<div id=”app”>
<! — REACT COMPONENT →
</div>

</div>

</div>
</div>

<script src=’./js/index.js’></script>
</body>

</html>

and you’re ready to go.

With the HTML in place let’s move on to setting up React.

Setting up React with Parcel bundler: writing a React component

In our example Parcel expects the entry point to be ./src/js/index.js.

But before touching any code let’s pull in React by running:

npm i react react-dom — save-dev

Then create the React component into ./src/js/index.js.

The component should look like the following:

import React from “react”;
import { render } from “react-dom”;

const App = () => <h1>Setting up React with Parcel bundler</h1>;

const wrapper = document.getElementById(“app”);
wrapper ? render(<App />, wrapper) : false;

That’s a contrived example but it’s enough to illustrate how Parcel works.

In the next section we’ll configure Babel for transforming the React component down to ES5.

Setting up React with Parcel bundler: setting up Babel

As with webpack, Parcel should transform raw React components into a meaningful Javascript bundle.

In webpack you would install and configure babel-loader.

Parcel is different. You are not required to explicitly configure the loader.

As long as you provide a configuration file for Babel, Parcel will do the heavy lifting for you.

You should just install the presets:

  1. babel-preset-env for compiling Javascript ES6 code down to ES5 (babel-preset-es2015 is deprecated)
  2. babel-preset-react for compiling JSX and other stuff down to Javascript

Let’s pull in the dependencies with:

  1. npm i babel-preset-env babel-preset-react — save-dev

Next up configure Babel by creating a new file named .babelrcinside the project folder:

{
“presets”: [“env”, “react”]
}

Take a moment now. Compare the webpack way of setting up React, Webpack, and Babel with the Parcel’s workflow.

What do you see here?

Parcel does not require a configuration file.

Time to wire things up.

Setting up React with Parcel bundler: development and production

Let’s add the buildcommand for building the bundle in production:

“scripts”: {
“start”: “parcel ./src/index.html”,
“build”: “parcel build ./src/index.html”
}

In Parcel you don’t need to install additional dependencies: the development server is already there, ready to run.

It’s a matter of running:

  1. npm start

to have our React component displayed at http://localhost:3000:

The buildcommand on the other hand is used for building in production. I suggest investing some time to learn about Parcel production mode.

For now you can quickly test things out with:

  1. npm run build

then, take a look at the dist folder: no plugins involved, no loaders to configure. Just a single command for having our bundle ready to be deployed.

Setting up React with Parcel bundler: wrapping up

At the time of this writing the project has already 18822 stars on Github.

Getting started with Parcel is incredibly easy. No plugins involved, no loaders to configure. You can get up and running in no time.

Developer