Lean React Project With Parcel

Henrik Fogelberg
Mar 3, 2018 · 3 min read

Scaffolding

Open the terminal and run the commands bellow. I use Yarn, but obviously npm works just as well if you want to follow along.

$ mkdir react-parcel-demo
$ cd react-parcel-demo
$ yarn init -y
$ yarn add react react-dom
$ yarn add -D parcel-bundler babel-preset-react babel-preset-env
$ mkdir src
$ touch src/index.html
$ touch src/index.js
$ touch .babelrc

Config

Parcel’s tag line is “zero configuration”. This is pretty much true, but two things need to be done.

"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html/"
},
{
"presets": ["env", "react"]
}

Hello World

And now for a wee bit of code. First of all a minimal html page …

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<title>React Parcel Demo</title>
</head>
<body>
<div id=”app”></div>
<script src=”./index.js”></script>
</body>
</html>
import React from "react";
import { render } from "react-dom";
const App = () =>{
return (
<div>
<h1>Hello Parcel</h1>
</div>
)
};
render(<App />, document.getElementById("app"));

Bonus: SASS

I normally use SASS for styling and here Parcel really shines when it comes to simplicity! Obviously you need to install sass and add some styling:

$ yarn add -D node-sass
$ mkdir src/sass
$ touch src/sass/main.scss
$ touch src/main.css
*,
*::after
,*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
background-color: #ecf0f1;
color: #d35400;
font-family: sans-serif;
font-size: 16px;
line-height: 1.7rem;
padding: 3rem;
}
h1 {
text-align: center;
margin-top: 5rem;
font-size: 6rem;
}
import “./sass/main.scss”

DailyJS

JavaScript news and opinion.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store