Getting Started with Create React App

1. Make a git repository (or clone an empty repository from a remote).

   mkdir -p ~/git/react-app
   cd ~/git/react-app
   git init

2. Install Yarn.

   npm install --global yarn

3. Create a React app.

   yarn create react-app .

4. Configure ESLint.

   $ yarn create @eslint/config
   yarn create v1.22.17
   [1/4] Resolving packages...
   [2/4] Fetching packages...
   [3/4] Linking dependencies...
   [4/4] Building fresh packages...
   success Installed "@eslint/create-config@0.1.2" with binaries:
       - create-config

   1. Choose a usage option.

      ? How would you like to use ESLint? … 
        To check syntax only
        To check syntax and find problems
      ▸ To check syntax, find problems, and enforce code style
      

   2. Choose a module type.

      ? What type of modules does your project use? … 
      ▸ JavaScript modules (import/export)
        CommonJS (require/exports)
        None of these
      

   3. Choose a framework.

      ? Which framework does your project use? … 
      ▸ React
        Vue.js
        None of these
      

   4. Choose a TypeScript option.

      ? Does your project use TypeScript? ‣ No / Yes
      

   5. Choose where the code will run.

      ? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
      ✔ Browser
        Node
      

   6. Choose how to define a style.

      ? How would you like to define a style for your project? … 
      ▸ Use a popular style guide
        Answer questions about your style
      

   7. Choose a style guide.

      ? Which style guide do you want to follow? … 
        Airbnb: https://github.com/airbnb/javascript
        Standard: https://github.com/standard/standard
      ▸ Google: https://github.com/google/eslint-config-google
        XO: https://github.com/xojs/eslint-config-xo
      

   8. Choose a config file format.

      ? What format do you want your config file to be in? … 
        JavaScript
        YAML
      ▸ JSON
      

   9. Choose to install dependencies now.

      ? Would you like to install them now with npm? ‣ No / Yes
      

5. Move any ESLint configuration from package.json to .eslintrc.json and add recommended extensions.

   • Delete eslintConfig from package.json.

     "eslintConfig": {
         "extends": [
         "react-app",
         "react-app/jest"
         ]
     },

   • Add extensions to .eslintrc.json.

     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
         "google",
         "react-app",
         "react-app/jest"
     ],

6. Add a lint script to package.json.

   "scripts": {
       "start": "react-scripts start",
       "build": "react-scripts build",
       "test": "react-scripts test",
       "lint": "eslint src",
       "eject": "react-scripts eject"
   },

7. Delete package-lock.json, which is not required by Yarn.

   rm package-lock.json

8. Commit and push.