Creating a React App from scratch with Parcel

Photo by Filiberto Santillán on Unsplash

This article is inspired by the Creating a React App… From Scratch article written by Jedai Saboteur that is referenced in the official React documentation.

The entire package for a bare-bones React development toolchain using Parcel.

Developing apps using React requires a relatively complex toolchain. You need to set up, among other things, a compiler, bundler, linter and formatter. The create-react-app tool simplifies and abstracts all this stuff for you. But it is an abstraction, meaning lots of configuration and customisation options are hidden away or handled for you. There are many reasons to unpack this abstraction and do it all by yourself: full control of configuration, learning the toolchain, OCD, etc.

This article attempts to outline how to set up such a toolchain yourself from scratch. For each step in the toolchain, there are several different tools available, choosing one usually comes down to your own preference and opinion. The tools I have chosen here are of my own preference which is: keeping things as simple as possible.

I mainly expand on the Creating a Toolchain from Scratch section in React’s official documentation, which suggests that a JavaScript toolchain typically consists of:

• A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
• A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimise load time.
• A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.

And I’ve added a fourth tool:

• A linter/formatter such as ESLint and Prettier. A linter checks your JavaScript code for syntax or stylistic errors. A formatter then automatically formats your code into a standard coding style.

00 | Node.js

First of all, it goes without saying, you need Node.js installed. Download Node.js from their website, or consult your operating system to find an OS-specific package. All command-line examples I write here uses Bash (i.e. on a unix-like OS like Linux or MacOS)

01 | Package Manager

A package manager lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.

The choices here are either npm or Yarn. Npm is the package manager bundled with Node.js itself. Yarn is a package manager that purports to be a faster, stabler alternative. Lets keep things simple and go with npm.

Initialise your project

Create a project folder and run npm init inside it. This will start several interactive prompts where you enter your project name, description, version, author, etc. and generate a package.json file.

$ mkdir blank-react
$ cd blank-react
$ npm init

Also, create a src directory, where you put your source files:

$ mkdir src

02 | Bundler

A bundler lets you write modular code and bundle it together into small packages to optimise load time.

Either Webpack or Parcel. Parcel looks to be the simpler tool. According to their website, it is a “blazing fast, zero configuration web application bundler.” Zero configuration might be a misnomer (in my opinion) as there is a small addition to your package.json file that is needed.

$ npm install --save-dev parcel-bundler

Open your package.json file, and add this field:

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

03 | Compiler

A compiler lets you write modern JavaScript code that still works in older browsers.

There’s only one choice here, and that is Babel. Babel transforms your modern JavaScript code into a form that is compatible with “older” browsers. Fortunately, Parcel comes built-in with a default Babel configuration that uses the babel-env and browserslist.

The browserlist target defaults to: > 0.25% (Meaning, support every browser that has 0.25% or more of the total amount of active web users).

The only thing missing is the configuration for compiling React-specific stuff like JSX. For that, we just need to install two packages:

$ npm install --save-dev @babel/core @babel/preset-react

And add a .babelrc.json file:

{
  "presets": ["@babel/preset-react"]
}

04 | Linter and Formatter

For linting, you can either choose a language-level static type checking (like TypeScript or Flow), or a static analysis linter (ESLint). Let’s start with the simpler option: plain old JavaScript with ESLint.

For code formatting, I chose Prettier, because it comes with a set of default rules that works well out of the box. Also, it can format many other file types like HTML, CSS, and JSON.

Linting with ESLint

The official React documentation has no guides or recommendations on how to configure ESLint for React development. Mainly because (I guess) the create-react-app tool comes built-in with all the needed configuration. Reading their README and browsing their source code, this is what I gather to be the most bare-bones setup for linting React apps written in plain JavaScript and JSX, using only the built-in recommended settings.

Install these packages:

• eslint: The ESLint linter CLI.
• eslint-plugin-jsx-a11y: Checks accessibility rules on JSX elements.
• eslint-plugin-import: Check import/export syntax, and prevent issues with misspelling of file paths and import names.
• eslint-plugin-react: React specific linting rules.
• eslint-plugin-react-hooks: Enforces React’s Rules of Hooks, when you’re using the hooks feature of React.

$ npm install --save-dev eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

Add the .eslintrc.js configuration file:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended"
  ],
  plugins: ["react-hooks"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: "module"
  },
  rules: {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  },
  settings: {
    react: {
      version: "detect"
    }
  }
};

Code formatting with prettier

For formatting, we use Prettier. It is a separate CLI tool used to automatically format your source code into a consistent style. Now, because ESLint can also be used for code formatting, we need to properly integrate both ESLint and Prettier so that their rules don’t conflict.

Reading Prettier’s documentation on this, setting this up is pretty straightforward. First, install Prettier and its ESLint plugins:

$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

And add Prettier’s recommended configuration in .eslintrc.js:

module.exports = {
  ...
  extends: [
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:import/recommended",
    "plugin:prettier/recommended"    // <-- add this last
  ],
  ...
}

Now, to format your code, use the command eslint --fix, instead of using Prettier’s CLI (more on that in the next section).

05 | Your Workflow

Your typical edit-save-refresh workflow would look something like this:

1. In a Bash terminal run the command npm run dev. This starts Parcel’s development server and hot module replacement.
2. Open your local site (defaults to http://localhost:1234) in your browser.
3. Add, edit source files in the src folder using your editor/IDE.
4. As you change and save files, Parcel will automatically refresh the browser.

Integrating linting/formatting with your IDE

For linting and formatting, you can manually run eslint and eslint --fix in a separate Bash terminal. But this is cumbersome, so there are many IDE plugins for ESLint and Prettier that can do this automatically for you.

• VS Code: ESLint, prettier
• VIM: Use an all-in-one syntax checker like Syntastic or ALE.

Building for production

When you’re ready to build your project for production, run the command npm run build. And you’re done!

06 | The Repo

I’ve open sourced all the above to a GitHub repository. To use this toolchain in your development cycle, I recommend not cloning my repo directly, instead, use the following workflow:

1. Fork the repo on GitHub.
2. Clone that forked repo into your development computer:
   git clone YOUR_REPO_URL.
3. Change any necessary configuration (such as my name in package.json and LICENSE.md files).
4. Whenever you want to start a new React project, clone that local repo:
   git clone blank-react my-new-react-app.

👉 Check out the repo at: zzzaim/blank-parcel-react

🐦 Say hi on Twitter: @zzaim