Using Parcel to create a React app

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.

1. A div where React will be inserted
2. 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.