Complete Intro to React

·

Before we can introduce JSX to React, we are going to have to send it through a compilation step. So we are going to take a brief repose from React here to start working on our tooling a bit.

Prettier

Prettier is an amazing tool from the brain of James Long. James, like many of us, was sick of having to constantly worried about the style of his code: where to stick indents, how many, when to break lines, etc etc. Coming from languages like Go, Reason, or Elm where all that is just taken care of by the tooling for the language, this quickly wears. James did something about it and made a tool to take care of it: Prettier.

Prettier is a really fancy pretty printer. It takes the code you write, breaks it down in to an abstract syntax tree (AST) which is just a representation of your code. It then takes that AST, throws away all of your code style you made and prints it back out using a predefined style. While this sounds a little scary, it's actually really cool. Since you no longer have control of the style of your code, you no longer have to think at all about it. Your code is always consistent, as is the code from the rest of your team. No more bikeshedding!! As I like to put it: if your brain is a processor, you get to free up the thread of your brain that worries about code styles and readability: it just happens for you. Don't like semicolons? Don't write them! It puts them in for you. I love Prettier.

Need to tool around a bit with it before you trust it? Go here. You can see how it works.

Let's go integrate this into our project. It's pretty easy (lol.)

Either install Prettier globally yarn global add prettier (I'm using v0.22 as of writing) or replace when I run prettier with (from the root of your project) ./node_modules/.bin/prettier. From there, run prettier script.js. This will output the formatted version of your file. If you want to actually write the file, run prettier --write script.js. Go check script.js and see it has been reformatted a bit. I will say for non-JSX React, prettier makes your code less readable. Luckily Prettier supports JSX! We'll get to that shortly.

Prettier has a few configurations but it's mostly meant to be a tool everyone uses and doesn't argue/bikeshed about the various code style rules. Here they are. I'm going to use a print-width of 120 and single quotes because I like that better but you're welcome to leave it as-is too. Prettier also can understand flow if you switch the parser but we're not going to worry about that. TypeScript support is coming.

npm/Yarn scripts

So it can be painful to try to remember the various CLI commands to run on your project, especially with Prettier because it doesn't have a config object yet (they're making one.) npm/Yarn scripts to the rescue! You can put CLI commands into it and then run the name of the tag and it'll run that script. Let's go see how that works. Put the following into your package.json.

"scripts": {
	"format": "prettier --list-different --single-quote --print-width=120 \"js/**/*.{js,jsx}\"",
},

Now you can run yarn format or npm run format and it will run that command. This means we don't have to remember that mess of a command and just have to remember format. Nice, right? We'll be leaning on this a lot during this course.

Editor Integration

This is all fun, but it's very manual. Let's go make this run automatically on save. This makes the whole process super seamless. For your editor's instructions, go here. Once you've enabled it and put it run on autosave then we're good to go! Here's the config I used for Sublime:

{
	"prettier_cli_path": "/Users/brholt/.nvm/versions/node/v6.9.5/bin/prettier",
	"node_path": "/Users/brholt/.nvm/versions/node/v6.9.5/bin/node",
	"auto_format_on_save": true
	"prettier_options": {
		"parser": "babylon",
		"singleQuote": true,
		"printWidth": 120,
	}
}

ESLint

On top of Prettier which takes of all the formatting, you may want to enforce some code styles which pertain more to usage: for example you may want to force people never use with which is valid JS but illadvised to use. ESLint comes into play here. It will lint for this problems. There are dozens of present configs for ESLint and you're welcome to use any one of them. The Airbnb config is very popular, as is the standard config (which I teach in previous versions of this class.) We're going to use the Airbnb one since it's likely the most popular one. Let's create an .eslintrc.json file to start linting our project.

Create this file called .eslintrc.json.

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

This is a combination of the recommended configs of Airbnb and Prettier. This will lint for both normal JS stuff as well as JSX stuff. Run eslint script.js now and you should see we have a few errors. Run it again with the --fix flag and see it will fix some of it for us! Go fix the rest of your errors and come back. Let's go add this to our npm scripts. If you haven't checked out Airbnb's style guide it's worth a read.

lint": "eslint **/*.{js,jsx} --quiet"

Worth adding three things here:

  • With npm scripts, you can pass additional parameters to the command if you want. Just add a -- and then put whatever else you want to tack on after that. For example, if I wanted to get the debug output from ESLint, I could run yarn lint -- --debug which would translate to eslint **/*.js --debug.
  • We can use our fix trick this way: yarn lint -- --fix.
  • We're going to both JS and JSX.

You can linting and fixing to your editor too but I'll leave that to you. It can be a bit finnicky to get going. I'll be using SublimeLinter and sublimelinter-contrib-eslint (you need both.)