Using Parcel to create a React app

Yip — Thu, 28 Jan 2021 13:07:37 +0000

Parcel is a fast application bundler that allows you to create a more lean and lightweight setup of React (as well as other types of app) with zero configuration. Over the last few months it has become my personal favourite method of creating a React app.

Let's create a bare-bones "Hello, world!" app using Parcel.

Step 1) Create a new folder for your project

Yeah, probably able to do that bit yourself

Step 2) Create a `package.json` file

In Terminal, cd into your new folder and run

npm init -y

This will automatically create a new fresh package.json file.

Step 3) Installing Parcel, React and ReactDOM

First let's install the Parcel bundler as a dev-dependancy.

npm i -D parcel-bundler

and now install react, and react-dom.

npm i react react-dom

Step 4) Adding a "start" script

Open the package.json file, and in the "scripts" section add the following "start" script.

"start": "parcel index.html --open"

Step 5) Create the initial `index.html`

In your chosen text editor create a new file called index.html and create the standard HTML boilerplate.

Now we need to add a couple of things.

A div where React will be inserted
A script which will act as the javaScript entry point

In the body of the index.html, add

<div id="root"></div>
<script src="./index.js"></script>

Step 6) Create the `index.js` file

Now create the index.js so we can add React

import React from 'react'
import { render } from 'react-dom'

render(<p>Hello, world!</p>, document.getElementById('root'))

Step 7) Check everything works

From terminal run

npm start

Yes, that is it. Parcel will now do its magic and you will be sat in front of a fully functional React app.

Next Steps

Create a base component (App.js or similar), import it into index.js and replace the paragraph tags and 'Hello, world!' with your base component
Have a read of the parcel documentation to understand how awesome Parcel is and what Parcel supports right out of the box.

DEV Community: Yip