DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Using Parcel to create a React app
Darren
Darren

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

and now install react, and react-dom.

npm i react react-dom
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

Step 7) Check everything works

From terminal run

npm start
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

🌚 Life is too short to browse without dark mode