How can I automate tasks for React development?

When developing a React application, you may find that you repeat several common tasks to help ensure the integrity of your code. At a minimum, whenever I write a React application, I have ESLint, Prettier, and automated testing set up. While ESLint and Prettier setup take more effort and could have dedicated posts of their own, a new React app out of the box comes with basic scripts already set up for automating some basic tasks. To create a new React app run the following command in the directory you want your React app created:

npx create-react-app <name_of_new_app>

There are more options for creating a React app with certain configurations (such as using TypeScript instead of JavaScript, but this basic command will give you something to work with out of the box.

The package.json file contains a section called “scripts” where you can define actions that can be taken by typing in simple commands. Here is an example of this section from one of my apps under development.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "validate": "npm run prettify && npm run lint:fix && npm run test",
    "lint:fix": "eslint src/**/*.ts* --fix",
    "lint": "eslint src/**/*.ts*",
    "prettify": "prettier src/**/*.ts* --write"
  },

Each of these scripts can be called by entering a command of the form in the terminal inside the directory of your project:

npm run <name_of_script>

For example, if I want to run the automated tests, I would enter:

npm run test

I typically use the terminal included with Visual Studio code which can be opened using ctrl + `

The scripts: “start,” “build,” “test,” “eject,” and “validate” are all provided out of the box when using create-react-app. In my example, I modified “validate” to call multiple scripts when run (more on this below). I added three more scripts that can be run individually: “lint:fix,” “lint,” and “prettify.” The first one runs the linter and attempts to automatically fix all lint errors. It works fairly well, but there are plenty of cases in which I need to go in and fix them myself. “lint” just runs the linter and reports all of the lint errors. “prettier” runs prettier and automatically fixes all prettier errors found in the solution.

As part of my validation, I wanted to make sure that all prettier errors and linter errors are fixed (and those that can’t be automatically fixed are reported so that I can fix them), and so I updated the “validate” script to be as follows:

"validate": "npm run prettify && npm run lint:fix && npm run test"

This is just a series of commands that runs each of the scripts in order after the other (very similar to running a series of commands in bash on Linux. You can see from this entry that I’m really just running the prettify script, followed by the lint:fix script, followed by the test script.

This is a really simple example, but the idea is that as you build your development environment and grab more tools to automate more of your work, you can wire these up together so that you can automate several of the simple tasks you run into as part of your development process on your local environment.