No-Config React With Parcel
By: Gabriel Tan
Tags: Nodejs, JavaScript, Programming, Reactjs, React

No-Config React With Parcel

It’s time to ditch Webpack

When I was starting with React, one thing that bugged me was the complexity of configuration files that came with building React applications. Want to import SVG files? You need to install another dependency and edit your Webpack config file again. For many toy projects, the time required to create and configure a new project made it hard to get started actually making stuff. When I finally learned about Parcel, a no-config bundler for React, I was sold. Here’s a short guide on getting started with Parcel.

At a glance, Parcel just requires you to install one dependency, parcel-bundler and you’re good to go. Let’s start by creating a new folder for our project. You can use NPM, but I prefer to use Yarn as my package manager.

mkdir parcel-playground

cd parcel-playground

yarn init -y

Next, add Parcel and React as project dependencies.

yarn add parcel-bundler --dev

yarn add react react-dom

You’ll need a couple of files to start with, but it mainly boils down to having an entry point ( index.html ) and your React entry point ( index.js )

Add an index.html to the root of the folder and put this in the content of the file:

The meta tag makes your page responsive, so mobile users have a better experience. If you’re new to React, the div element with the root ID is conventionally used to mount the application.

Next, we create the index.js which allows our React application to mount.

Now we just need a way to run the program! Since parcel is only installed as a dependency of this project, we’re only able to use parcel commands when they’re run through a command in the package.json file.

Let’s add a start command that will run the Parcel bundler when we run yarn start :

Now, if you run yarn start , you should see the bundler doing its magic, and your application will be served on localhost:1234 . It’s looking a bit plain right now, so let’s add some more content to it.

Let’s make a new folder, components , in the root folder, then create another folder in it, MyPage , and finally, create an index.js file in that folder. Ideally, we want to separate the mounting of the application from the actual application, so let’s move the content from index.js to components/MyPage/index.js .

You should also notice that if you change the content of MyPage from Hello World! to something else, the bundler will automatically reload the page with the new text. This is a convenience that Parcel brings to you without any configuration. Isn’t that cool?

Let’s add some more content to our page and a little styling. First, save this CSS file as sakura.css and place it in the MyPage folder. This CSS file is a no-config stylesheet — all you need to do is to import it.

The state of the Parcel Playground page right now

Much better! No additional configuration required to handle CSS files, and everything just works — it’s very conducive to a beginner’s learning. Later on, when you need more fine-grained control, you can use Webpack, or other bundlers, to fine-tune your application. As for learning, I believe that using Parcel is the way to go.

I have come to the end of my tutorial. I hope that you’ve learned how to use Parcel to speed up your learning and development. If you’re interested, check out Parcel’s awesome documentation here.