Tutorial: Setting up React with Parcel. A comparison with Webpack 3

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

You’re not supposed to switch from a tool to another one every week. But I feel like Parcel it’s worth a look.

Let’s see why.

Setting up React with Parcel bundler: why Parcel?

Webpack is a powerful tool. Recently I made the switch from Gulp to Webpack 3. I know, webpack can’t be compared to Gulp but I didn’t look back since then.

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

Start off by creating a directory for the project:

mkdir react-parcel && cd react-parcel

Create a minimal directory structure for holding up the code:

mkdir -p src/js

Inizialize the project by running:

npm init -y

and you’re good to go.

Next up install Parcel with NPM:

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

Before processing any HTML in webpack you must install two dependencies: the HTML plugin and the HTML loader.

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

To test things out we’ll build a super simple 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

React components are mostly written in Javascript ES6.

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:

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

At the beginning of this guide I’ve configured package.jsonto use Parcel’s development server.

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:

npm start

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

Setting up React with Parcel

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:

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

Parcel is a new module bundler for Javascript that promises blazing fast speed and zero configuration bundling.

At the time of this writing the project has already 11k 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.

Now what? Should you ditch Webpack?

No.

Let’s face that: the Javascript scene moves at a speed that it’s hard to keep up with.

That’s not a bad thing. More tools equals more specialized tools. Webpack is indeed a powerful and versatile one. It won’t die anytime soon.

Parcel on the other hand is incredibly fast and immediate. You can start building right away without worrying about loaders and plugins.

Take your time to explore both and see which feels more natural to you.

I would love to hear your voice in the comments below!

Thanks for reading!

Stay tuned on this blog for more about React.

Valentino Gagliardi

Valentino Gagliardi

Consultant, Developer Coach. Are you stuck on a project? Let's talk!
Valentino Gagliardi

9 Replies to “Tutorial: Setting up React with Parcel. A comparison with Webpack 3”

  1. Amazing post. I’ve tried Parcel and found very easy and super fast. I wonder that is that any way to generate sourcemaps for JSX files? Can we do this with Parcel itself or do we have to use any Babel plugin? I think it’s a necessary thing to work with sourcemaps while developing any app.

  2. Very good article, How do we add multiple entry points ,does it need configuration file like webpack.config.js in webpack.Also can we add js files as entry points

Leave a Reply

Your email address will not be published. Required fields are marked *