Lean React Project With Parcel

Henrik Fogelberg
Mar 3, 2018 · 3 min read

The sample code is available on Github.

When I first tried React a couple of years ago it was a nightmare setting up a new project. You either had a full day’s job ahead of you doing it from scratch or googled for a starter kit on Github. Finding the right one could of course require a full day too, since everyone who was in to React had a couple of different versions lying around, ever so often with messed up dependencies.

Then along came the create-react-app cli and everything changed over night. However, I was never really happy with having a pretty big webpack config file sitting there without really being sure of what all of it was doing. Besides, I’m pretty opinionated about structuring my projects so I found myself messing around quite a lot renaming folders and deleting files.

A few months ago version 1 of a new bundler called Parcel was introduced. Could this be a good approach to setting up a new project from scratch?

Scaffolding

$ 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

Parcel bundler can be installed globally, but for just trying it out I prefer to keep it in the project.

Config

First of all, open the project in your text editor and add these scripts to the package.json file:

"scripts": {
"dev": "parcel ./src/index.html",
"build": "parcel build ./src/index.html/"
},

Running the dev script will launch a dev server which watches the code for changes and refreshes the browser, pretty much like Webpack’s dev server. The build script builds the app for production.

The second bit of setup is Babel which transpiles ES6 or whatever to regular old school JS. Just add these two settings to .babelrc:

{
"presets": ["env", "react"]
}

Hello World

<!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>

… and then a few lines of React:

import React from "react";
import { render } from "react-dom";
const App = () =>{
return (
<div>
<h1>Hello Parcel</h1>
</div>
)
};
render(<App />, document.getElementById("app"));

If you head back to the terminal and type in $ yarn run dev the project should build. Just open a tab in your browser and navigate to localhost:1234. I don’t think I’ve ever used that port before …

Bonus: SASS

$ yarn add -D node-sass
$ mkdir src/sass
$ touch src/sass/main.scss
$ touch src/main.css

For the demo we’ll stick to some really minimal styling. This piece of junk doesn’t make any use SASS of course, but whatever. Personally I rather use the scss-syntax, which I find easier to read than sass.

*,
*::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;
}

Next, import the sass file in to index.js

import “./sass/main.scss”

And that’s it! Parcel will recognize that you have some sass/scss styling and will happily build it and inject for you.

DailyJS

JavaScript news and opinion.

DailyJS

JavaScript news and opinion.

Henrik Fogelberg

Written by

Web developer, book lover and apprentice hippy. https://henrikfogelberg.com

DailyJS

JavaScript news and opinion.