Optimizing Your React Experience

An Overview of Supporting Tools and Features

React is one of (if not the most) popular JavaScript library. There are good reasons why React is so beloved among Javascript developers. For one, it prioritizes the UI (User Interface) part of a website; this includes any aspect that a user interacts with, such as on-screen menus, buttons, and search bars.

React solves many performance issues involving manipulation of the DOM(Document Object Model). It achieves this via the process of reconciliation, in which it builds a copy of the DOM called the current tree on initial render. As updates on the DOM are made, they are rendered on a second tree called a workInProgress tree; it is on this tree that all changes are accumulated. Finally, when updates are processed, the workInProgress tree is used to update the actual DOM, and the current tree becomes updated to represent the most up-to-date DOM.

Additional information regarding React’s best practices could be found via the very well-written and succinct React documentation. To guide you on improving your workflow, this blog post comprises overviews of popular tools that when paired with React will give you the most optimal coding experience.

Create React App

Create React App is a build pack; it offers a modern build setup with no configuration. It’s the easiest and the most comfortable way to start learning React. It provides you with an optimized starting point by setting up a preconfigured development environment so you can use the latest features of JavaScript. There are a lot of things that Create React App is doing under the hood, explaining everything that it does would take a whole article, so we’re just going to include some of the most important parts of it.

It’s important to state that in order to run Create React App you need to have Node v8.10 or higher on your local development machine.

Create React App provides you with a few methods to create a React Application Build. Navigate to the directory you would like to house your new React app, then run any of the commands below:

npx create-react-app my-app
(npx is available in npm v5.2 or higher)
npm init react-app my-app
(npm init is available in npm v6 or higher)
yarn create react-app my-app
(yarn create is available in yarn v0.25 or higher)

These are the only steps you need to take, Create React App does the rest. Pretty cool, right.

Create React App toolchain consists mainly of three tools: Package Manager, Bundler, and a Compiler.

• A package manager, as the name suggests, is a tool that helps you manage the dependencies that your project needs to work correctly. It lets you take advantage of a broad ecosystem of third-party packages and efficiently install or update them. There are two main package managers: Yarn and npm. Both yarn and npm offer similar features.
• A bundler which lets you write modular code and bundle it together in small packages for usage in a browser. The two most popular bundlers are Webpack and Parcel. It’s worth mentioning that Parcel is much easier to configure than Webpack. Create React App uses Webpack as its default bundler and it’s already preconfigured for you.
• A JavaScript compiler that converts modern javascript code (ES6+) into a backward-compatible version of JavaScript that can be run by older JS engines. The most popular compiler is Babel which uses the latest features of JavaScript and it comes by default with Create React App.

There are two very important tools that Create React App includes in your build, which are going to be an important part of this article: A linter (ESLint) and a formatted (Prettier).

Prettier

(Code Formatter)

Prettier is an amazing code style formatter that makes formatting a no-brainer. Using Prettier within a team helps with style consistency, as well as saves you time from disagreements regarding formatting. This allows you to put the emphasis on code content and important ideas rather than trivial formatting.

How does Prettier work? I’m glad you asked!

Prettier takes the code that you write and breaks it down into an abstract syntax tree, which is simply a representation of your code. After that, it takes that abstract syntax tree, throws away your whole formatting style, and then replaces it with its predefined style. That’s all.

Prettier was built by the talented James Long, who aimed to minimize the struggle that developers go through when it comes to formatting. Let’s get started on making your code Prettier!

Installing Prettier

In order to install Prettier in your project, navigate to your project root directory in your Terminal and run the following command:

npm install -D prettier

This will install prettier as a developer dependency by adding it to your package.json file. The reason why we want it to be a developer dependency is so that when we deploy our code to production, “Prettier” doesn’t go with it.

If you go to your package.json file you should see something like this:

Congrats! Now you have Prettier installed in your project.

In order to use Prettier from your Terminal, we can create a npm/yarn script that we’re going to add inside our package.json file.

Copy the following line and add it under “scripts” in your package.json file.

"format": "prettier --write \"src/**/*.{js,jsx}\""

This creates a script which we’re going to call “ format” that runs prettier in any file with the extension “.js” or “.jsx” that lives inside the “src” directory of our project. If your project’s structure is different, you can always change it. If you follow conventions, however, all your js and jsx files should be inside a directory named “src”.

--write allows prettier to write the files instead of just reading them, if we would omit "--write", prettier would just display the formatted code in our Terminal.

This is it, now every time we run “npm run format” or “yarn run format”, Prettier formats all of our js, jsx files.

Alternatively, you can also run Prettier by installing it globally with the command:

npm install --global prettier

and running it with the command:

prettier --write src/script-name.js
//change "script-name.js" to any file name you want to format.

Now, this whole process is helpful enough, but what if we could make it even easier for us.

If you’re using Visual Studio Code, you can download “Prettier” extension

Prettier — Code formatter — Visual Studio Marketplace

I’ll show you how to configure it so that every time we save a file, “Prettier” formats it

Go to Settings by using the keyboard shortcut:

"cmd+," on macOS or "Ctrl+," on Windows

or by navigating manually through:

Code>Preferences>Settings //macOS
File>Preferences>Settings  //Windows

While in settings, search for “Format on save” and check the corresponding checkbox. This configures VS Code so that every time you save a file it formats it with Prettier.

However, say we don’t want to use Prettier format-on-save feature in every project. We can require that in order for Prettier to Format on save, we would need a config file in our project. Follow the below steps to do so:

Navigate to VS Code Settings, search for “Prettier: Require Config”, and check the corresponding checkbox. Next, create a file named “.prettierrc” in the project’s root directory and inside that file add empty curly brackets “{}”. Doing so will specify to VS Code to use the predefined config for Prettier.

Hurray! Now you can take formatting out of your list of things to worry about!

ESLint

(A JavaScript Linter)

JS Linters are tools that guide you on the debugging process.

They scan your code for errors and give you feedback with specified line numbers where suspecting errors occur. Inside a code editor like VS Code, with the ESLint extension enabled, errors get highlighted. ESLint also displays a list of errors on your console. There are few Linters out there, and the most popular one is ESLint. ESLint is extremely configurable, and the most important part that concerns us is that it supports JSX. There are multiple preset configs we can use, such as the one from Airbnb, which is quite popular. However, we’re going to use the same configuration that React guru Brian Holt uses.

Installing ESLint

We install ESLint by navigating to the project root directory and running the following command:

npm install -D eslint eslint-config-prettier

As you can see above, we also include eslint-config-prettier, which tells ESLint not to worry about styling because Prettier does that already.

The next step will be to create the config file for ESLint in your root directory. Create a new file and name it “.eslintrc.json”. Inside that file will add a bunch of stuff.

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

Now we need to configure ESLint so it recognizes React.

Go back to your console and run the following command:

npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

After the installation is finished you need to update your .eslintrc.json file with the following configuration:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0
  },
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Up to this point, ESLint is configured for React. Now we need to add config for Hooks as well.

In your console, run the following command:

npm install -D eslint-plugin-react-hooks

after that we’ll go back to our .eslintrc.json and update it with the following:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "no-console": 1,
    "react-hooks/rules-of-hooks": 2,
    "react-hooks/exhaustive-deps": 1
  },
  "plugins": ["react", "import", "jsx-a11y","react-hooks"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

This is how your .eslintrc.json file should look like in the end.

The last step we have to take is to create a new script inside our package.json file and also install ESLint extension inside our VS Code environment.

Go to your package.json and add the following script:

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

Now you have access to the “npm run lint” or “yarn run lint” command.

To finish it, let’s install the ESLint extension for VS Code.

ESLint — Visual Studio Marketplace

And you’re done.

Having ESLint in your arsenal of tools will help keep your React code concise and free of pesky avoidable bugs!

Emmet

Emmet is an extension that comes pre-installed in popular code editors such as VS Code, which makes programming more efficient via keyboard shortcuts and code snippets. Its syntax is inspired by CSS Selectors, making it quite easy to pick up.

Emmet already supports JSX out of the box; no lengthy installation is required! To make sure that Emmet is enabled in React files, go to VS Code settings, search for “Emmet: Preferences” and select “Edit in settings.json.”
Inside settings.json make sure there’s “javascript”:“javascriptreact” included as part of “emmet.includeLanguages”, like so:

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

That’s all there is to it! To help you get acquainted with Emmet syntax, included is a reference to Emmet’s official cheat-sheet:

Cheat Sheet

Let’s see it in action!

Combined with other snippets such as:

ES7 React/Redux/GraphQL/React-Native snippets — Visual Studio Marketplace

We can generate code much faster, without even trying.

As developers, we forever strive for the goal of writing clean, clear, and efficient code. However, carry the load ourselves we need not, when tools such as Emmet, ESLint, and Prettier already exist to make our lives easier! Learn to utilize them, and your future self will surely thank you a million.

Resources

• Configuring ESLint — User Guide
• Getting started with Parcel
• Airbnb ESLint configuration
• Prettier Configuration
• Javascript Mental Models — Dan Abramov