Tooling for React

Prettier

  1. Install nodejs and npm
  2. npm init -y
  3. npm install -D prettier
  4. in root directory add file named .prettierrc, this is Prttier configuration file. in this file just type empty object {}, which means you accept all the defaults,
  5. in package.json, in scripts secton type "format": "prettier --write \"src/**/*.{js,jsx}\""
  6. now you can run npm run format
  7. install prettier extension if you are using vs code.
  8. open settings.config file and search for Editor: format on save , turn on by clicking checkbox
  9. open settings.config file and search for Prettier: require config, turn on by clicking checkbox
  10. Editor: Default Formatter should be Prettier

Eslint

  1. npm install -D eslint@7.18.0 eslint-config-prettier@8.1.0
  2. create a file eslintrc.json in root.
  3. eslintrc.json config
{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  // turing off the rules
  "rules": {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0
  },
  // improve the capibilities of eslint with the following plugins
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}
  1. install vs code eslint extension

  2. close all the vs code windows and reopen them to eslint work.

  3. if eslint still not run click on ESlint in right bottom of vscode. and allow it to run.

  4. in package.json, in scripts secton type "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"

  5. /* global React ReactDOM */ adding this line remove the errors. because the app.js file don’t know about React libaray that we are loading through cdn.

  6. Eslint plugins for react. npm install -D eslint-plugin-import@2.22.1 eslint-plugin-jsx-a11y@6.4.1 eslint-plugin-react@7.22.0

Git

  1. git init
  2. add .gitignore file.
node_modules/
.cache/
dist/
.env
.DS_Store
coverage/
.vscode/

Parcel

  1. npm install -D parcel@1.12.3 .
  2. In package.json, in scripts secton type "dev": "parcel src/index.html"

Installing React

npm install react@17.0.2 react-dom@17.0.2

Run build server npm run dev

babel

  1. .babelrc
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

npm install -D @babel/core@7.12.16 @babel/preset-react@7.12.13

Package.json file

https://browserslist.dev

{
  "name": "fem",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/preset-react": "^7.12.13",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^8.1.0",
    "parcel": "^1.12.3",
    "prettier": "^2.2.1"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "browserslist": ["last 2 chrome versions", "last 2 firefox versions"]
}
Previous