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 intoindex.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)