React with Parcel 📦

Thibaud Ducasse
ITNEXT
Published in
3 min readMar 21, 2018

Click here to share this article on LinkedIn »

I remember the days where we had to write approximately one thousand .config files to get some Javascript app up and running. Nowadays, everyone I know is using browserify or webpack, either directly or through a boilerplate of some sort, like create-react-app.

A few months ago, another one entered the competition:

https://cdn-images-1.medium.com/max/2000/1*Gjhk6qvPM5zAy1iPPS1ttg.png
Parceljs

There are many web application bundlers out there with huge adoption, including webpack and browserify. So, why do we need another one? The main reasons are around developer experience.

Don’t get me wrong, webpack is fine. But when I see these kinds of benchmarks, I feel like I’m missing out on something big:

Benchmark for a build with different bundlers

Their main goal is to give you a really simple work-out-of-the-box bundler. So I decided to try it out and create a minimal React app with it. For those in a hurry, you can find the code here, otherwise keep reading!

Install

As usual, use your favorite package manager to download and install parcel globally.

With npm:

npm install -g parcel-bundler

Or with yarn:

yarn global add parcel-bundler

Once that’s done, you should have the parcel command available in your terminal path.

Dependencies

Then, we’ll npm init the project (keep pressing enter to accept the defaults):

npm init

Or if you’re lazy you can do what Darren suggested in the comments to automatically accept all the defaults:

npm init -y

And install the dependencies:

npm install --save react react-domoryarn add react react-dom

You can also add parcel (as a devDependency):

npm install --save-dev parcel-bundleroryarn add -D parcel-bundler

We are now ready to create our react files!

index.html

Create a file called index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>

index.js

Create a file called index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));

App.js

Create a file called App.js:

import React, { Component } from "react";class App extends Component {
render() {
return <div>Hello from React!</div>;
}
}
export default App;

Start script

You can then add a new script command to your package.json in order to start the dev server:

"scripts": {
"start": "parcel index.html"
},

And that’s it! The zero-conf grail!

Just run

npm run startor yarn start

and voilà:

The magic happening

While the first build can be a little longer than later on, since Parcel uses a caching system, the subsequent ones will be wayyyyy shorter.

I’ve pushed a version of this minimal example on github. Note that it’s a bit different, because I was trying to mirror the architecture I’m used to, but everything should be pretty self explanatory.

Conclusion

It’s arguably an even easier way to create a react app than the actual create-react-app.

I’m yet to discover what you can do exactly and how well it scales with large apps, but I think that for small projects where you don’t want to dive into the config for hours, Parcel is perfect!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in ITNEXT

ITNEXT is a platform for IT developers & software engineers to share knowledge, connect, collaborate, learn and experience next-gen technologies.

Written by Thibaud Ducasse

Software Engineer· Boston, Massachusets · @tducasse

Responses (1)

What are your thoughts?

I encountered the glorious simplicity of Parcel setup for a non-React but previously Webpack-based side-project of mine and I was *very* impressed.
Thanks for writing up this guide to getting the same joy with React! What’s great here is that once…...

--