이전 기사에서 쓴 것처럼 Redux는 조금 귀찮습니다.
업무에서는 Redux 사용하고 있지만, 프라이빗에서는 React만으로 사이트 만들려고 합니다.

간단했습니다.
React의 편지지를 쉽게 만들 수 있는 create-react-app를 이용합니다.

소개

create-react-app 명령을 설치, 앱 만들기

npm install -g create-react-app
create-react-app hello-world

서버 시작

만든 앱 디렉토리 (이번에는 hello-world)로 이동하여 다음 명령을 실행합니다.
서버가 시작되고 http://localhost:3000 등의 URL로 앱을 볼 수 있습니다.

npm start

eslint 설정

eslint 및 prettier 모듈 설치

yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier
yarn add -D eslint-plugin-react eslint-config-react-app eslint-plugin-import eslint-plugin-flowtype eslint-plugin-jsx-a11y
yarn add -D eslint-plugin-standard eslint-config-standard eslint-plugin-node eslint-plugin-promise

eslint 구성 파일 추가

cat<<EOF > .eslintrc.json
{
  "extends": [
    "standard",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react",
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {},
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {
    "it": false
  },
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "no-console": "warn",
    // warning  Definition for rule 'jsx-a11y/href-no-hash' was not found に対応
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/anchor-is-valid": "off"
  }
}
EOF



cat<<EOF > .eslintignore
node_modules
**/*.min.js
src/registerServiceWorker.js
EOF

cat<<EOF > .prettierrc
{
  "singleQuote": false,
  "trailingComma": "es5",
  "semi": false
}
EOF

참고

Intellij 설정

プログラム：　eslint のPATH　（プロジェクトのディレクトリ/node_modules/.bin/eslint )
引数：　--fix $FileDir$

확장 옵션
Auto-save edited files to trigger the watcher의 체크를 해제합니다.