Parcel is a zero configuration bundler for React apps. By default, it applies transforms like Babel and is capable of bundling styles and images. It is much easier and faster to scaffold a React app with Parcel compared to create-react-app or CRA. In this tutorial, I will provide step-by-step instructions to scaffold a React app using Parcel bundler. The tutorial helps to build demo React apps for learning or reproducing a bug. This tutorial is not meant for scaffolding a production app.
Install Parcel
The first step is to install parcel globally. This is because we shall use it as our default bundler for most demo apps.
yarn global add parcel-bundlerCreate a new Project
Create a new project using Yarn or NPM. Accept defaults.
yarn initInstall dependencies
Install React and React DOM.
yarn add react react-domTo install the latest version of React, you may want to use @next tag. For example, React Hooks is available in react@next as of now.
yarn add react@next react-dom@nextCreate index.html
Create an index.html. This HTML file contains a div tag with an id named root. We mount the entire React component tree on the root element.
<html>
<body>
<div id="root" />
<script src="./index.js"></script>
</body>
</html>Create index.js
Create an index.js. The file has the code for mounting React components on the DOM node. As explained above, we mount the entire component tree on the root element using React DOM.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div>Hello world</div>, document.getElementById('root'));Add .gitignore
Add a .gitignore. We do not want track changes in the below folders.
node_modules/
.cache/
dist/Run the app
Parcel is zero configuration. But strangely for running it, we need to provide the location of index.html.
parcel index.htmlThe app is available at localhost:1234.
With just seven steps, we were able to scaffold a React app. Time taken for doing all the above steps is minimal. CRA takes a long time to download relevant packages. With Parcel, we only install the packages we need. And for most demo apps, it is just React and React DOM. Personally, I find these steps intuitive and easy to do.