DEV Community

loading...
Cover image for Using Parcel to create a React app

Using Parcel to create a React app

darpots profile image Darren ・2 min read

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.

Discussion (0)

pic
Editor guide