When I first began to use the React framework, the go-to guide that is ubiquitous is a tool called create-react-app, it helps you set up a react project with just one command isn't that great?😃 It's great I know, but as a software dev, sometimes there's that feeling that probes you to want to learn why some things work the way they should and what actually happens behind the scenes, that was how I got to know about parcel-js.
Parcel is a bundler that is used in building apps, it requires zero-configuration unlike the other app bundlers out there, like webpack which gives you the freedom to do as you wish with your configurations, but sometimes what we need is a simple tool that helps us get started with running our apps as fast and soon as possible, and since it is a tool with no-configs at all, all that is required of you is to point at the entry point of your application.
Parcel has some nice features, which actually depicts why you should use it, which includes but not limited to;
- Automatic transformation of your code using Babel, PostCSS, and PostHTML.
- parcel logs (displays) syntax highlighted code on your terminal when it encounters errors to help you locate the actual line or file that the error is emanating from.
- parcel also supports the bundling of different file extensions like JS, CSS, HTML, jpg, raw, json. etc.
- one of the features that I prefer the most, is the ability for developers to use an
index.htmlfile as an entry point.
Okay, enough talk, let's see how we can actually use parcel.
To begin, create a new directory on your machine by running the command below.
$ mkdir name-of-directory
Then you'd have to install parcel in your project directory, using the command below
$ npm install parcel-bundler
Next, we'll create a package.json file in our project, a package.json file is a file that contains descriptions, scripts and the dependencies that we're using in our project.
npm init -y
{
"name": "react-with-parcel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" &&
exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Since our main(entry point) file as index.js we'd have to link it in our HTML file, now we'd go ahead to create a src directory and inside we'd add index.html and index.js files there.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React app</title>
</head>
<body>
<div id="root">
// Our react components will be rendered here
</div>
<script src="index.js"></script>
</body>
</html>
Now let's install the react and react-dom packages.
$ npm i react react-dom
The packages that we've installed above would allow us to write react, and since React is written in ES6 (EcmaScript 6), we'd have to look for a way to transpile our code to what the browser understands, all we have to do is to install the presets
$ npm i install babel-preset-env babel-preset-react --save-dev
the flag --save-dev enables us to add these presets as dev dependencies in our project.
once we're done installing the presets, let's create a .babelrc file which would contain the following;
{
"presets": ["env", "react"]
}
Now let's edit the content of the index.js file we created before.
import React from 'react'
import ReactDOM from 'react-dom'
import './scss/app'
const App = () => {
return (
<div className="app">
<div className="h2-light">
<h2>Congratulations on making it this far! 🤝 </h2>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
Now let's style our component, we'd be using scss which to our advantage, parcel has a support for scss, to use files with the .scss extension let's install the node-sass package;
npm i node-sass
Once we've had node-sass installed we can import scss files from our components, let's create a scss directory and then create app.scss in it.
$ mkdir scss && cd scss
$ touch app.scss
Now let's edit the content of index.js by adding snippet below.
import './scss/app.scss'
So now let's edit our app.css file
body {
background: rgb(10, 57, 144);
}
.app {
display: flex;
justify-content: center;
}
.h2-light {
height: 150px;
width: 80%;
background: #597ed3;
margin-top: 20%;
text-align: center;
padding: 40px;
border-radius: 7px;
box-shadow: 2px 1px 5px #eee;
}
h2 {
color: #eee;
font-size: 50px;
}
Wow! if you got to this point, I appreciate you 🙌 Now that we've got to this point in setting up our application, running it would require us to configure our package.json file by adding the code below.
"start": "parcel src/index.html --open"
The --open flag enables your script to open the app in your browser.
The snippet above shows that whenever we run npm start command, we are communicating with parcel to start a dev server using the index.html as an entry point, when you run the command you'd be able to view the App at http://localhost:1234
When we want to build the app for production we'd have to run parcel build index.html command, so we'll then add that to the scripts object in our package.json file.
"scripts": {
"start": "parcel src/index.html --open",
"build": "parcel build src/index.html"
},
We also have some other options which we can choose on how our app is prepared for production.
Normally dist is the default directory in which the production files are kept, but you can specify another directory of your choice, by adding --out-dir directory-name at the end of the build property in package.json
"scripts": {
"start": "parcel src/index.html --open",
"build": "parcel build src/index.html --out-dir directory-name"
},
Thanks for reading this article, I hope you've fully understood how to use parcel to make a react project, if you don't get it right now, you'd have to keep using parcel till when you're super comfortable with it.
Cheers 🍸
Latest comments (4)
Thanks a lot for this starter tutorial for a React with parcel app.
I was following this using Parcel 2 and ran into some problems with the Babel configuration. I think things have changed both with Babel and Parcel since the article was written.
If anyone reading the article is using Parcel 2, simply skip past the Babel installation section and everything should work just fine.
Thank you so much for this information.
I'll look for a way to update this article.
That'll be very helpful since Parcel 2 is the more widely-used bundler today (far as I know). Or you might consider writing a separate article for Parcel 2, and rename this article accordingly, specifying that it's for Parcel 1. Two birds with a stone and half.
But really, thank you very much for this. I only started learning React yesterday and this was very handy.
Wow!!
Thank you so much for this feedback. It means a lot to me.
I'll write about setting up a React app with the new version of parcel and share it with you and the community.
Once again, thank you so much!