React.js environment for development


Prepare docker container for development

Prepare docker container for development


React


.ENV

.env

NODE_PATH=src/


Prettier

$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier


package.json

"format": "prettier --write src/**/*.{js,jsx,css,json}",
"format:check": "prettier --list-different src/**/*.{js,jsx,css,json}"


.prettierrc

{
  "singleQuote": true,
  "arrowParens": "always",
  "bracketSpacing": true
}


.prettierignore

node_modules
*.test.js
*.spec.js


Lint

$ npm install --save-dev eslint-config-react-app eslint-plugin-react
$ npm install --save-dev eslint-plugin-jsx-a11y
$ npm install --save-dev eslint-plugin-flowtype
$ npm install --save-dev babel-eslint


.eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "jsx-a11y/label-has-for": 0,
    "no-console": 1
  },
  "plugins": ["react", "import", "jsx-a11y"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}


$ npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier

$ npm install --save-dev babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react


package.json


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


.eslintignore


/node_modules/


lint-staged husky

$ npm install --save-dev lint-staged husky

package.json


  "scripts": {
    ******
    "precommit": "lint-staged"
  },
  "devDependencies": {
    ********
  },
  "lint-staged": {
    "*.{js, jsx}": ["node_modules/.bin/eslint --max-warnings=0", "prettier --write", "git add"]
  }
}


Babel

$ npm install --save-dev babel-eslint babel-core babel-preset-env babel-plugin-transform-class-properties


.babelrc


{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }
    ]
  ],
  "plugins": ["transform-class-properties"]
}


.eslintrc

{
  
  "parser": "babel-eslint",
  
}


taken it here:


https://btholt.github.io/complete-intro-to-react-v4/async-and-events-in-react


JSHINT (Possible not needed)

.jshintrc

{
  "predef": ["angular"]
}

"undef" : true, // Require all non-global variables be declared before they are used.
"strict" : true // Require `use strict` pragma in every file.