Lean React Project With Parcel

Published in

DailyJS

3 min readMar 3, 2018

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

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

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

Config

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

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

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>

… 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

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

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.

Lean React Project With Parcel

Scaffolding

Config

Hello World

Bonus: SASS

Written by Henrik Fogelberg