Привет, меня зовут Infanty, мой профиль в LinkedIn.
Я пишу how-to статьи на редкие темы или статьи обзоры - для себя и тех кто со мной работает.

Создание базового приложения

Установим Node.js, скачав его по URL: https://nodejs.org/en/download/ и Git, скачав его по URL: https://git-scm.com/downloads.

Создадим скелет проекта с именем: my-app, на базе Create React App (https://facebook.github.io/create-react-app/) в текущей папке пользователя, набрав в консоли (в консоли Linux или в консоли git-bash в Windows):

npx create-react-app my-app

Перейдём в папку проекта и запустим его, набрав в консоли:

cd my-app
npm start

В браузере откроется URL: http://localhost:3000/, по которому будет доступно разрабатываемое приложение.

Почему я рекомендую использовать при создании проекта CRA - потому что при каждом изменении в файлах внутри директории: src - будет автоматически перезагружаться страница с приложением в браузере.

Файловая структура базового (CRA) приложения

  • node_modules - папка пакетов Node.js модулей, необходимых для работы приложения.
  • public - папка публичных файлов, таких как index.html и favicon.
  • src - папка компонент App (разрабатываемого приложения).
  • .gitignore - файл необходимый для Git.
  • package.json - файл с описанием зависимостей проекта.
  • package-lock.json - файл хранит сведения о версии каждого установленного пакета.
  • README.md - файл описания проекта.

Настройка автоматической проверки кода проекта

Для этого нам понадобятся библиотеки:

  • eslint - для проверки кода (например на не используемые переменные).
  • prettier - автоматический форматер кода.
  • нusky - упрощает работу с git hooks и необходим для lint-staged.
  • lint-staged - позволяет обрабатывать только те файлы которые будут отправлены в коммит (в Git).

Работа автоматической проверки кода проекта будет выглядеть следующим образом: в момент пре-коммита (в Git) будет запускаться lint-staged проверка в которой eslint и prettier обработают все файлы, готовящиеся к коммиту. Если проверка не будет пройдена, то не удастся совершить коммит (в Git).

Установим необходимые библиотеки, перейдя в папку проекта и набрав в консоли:

npm install eslint-config-prettier eslint-plugin-prettier prettier lint-staged husky --save-dev

Eslint уже встроен в create-react-app, поэтому он отсутствует в списке на установку.

Внимание: если производится настройка проекта основано не на create-react-app, то необходимо установить дополнительные пакеты:

npm install eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x --save-dev

Для настройки eslint, создадим файл ".eslintrc" в корне проекта:

{
  "extends": [
    "react-app",
    "prettier"
  ],
  "rules": {
    "jsx-quotes": [
      1,
      "prefer-double"
    ]
  },
  "plugins": [
    "prettier"
  ]
}

Для настройки prettier, создадим файл ".prettierrc" в корне проекта:

{
  "useTabs": false,
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "es5",
  "jsxBracketSameLine": false,
  "parser": "flow",
  "semi": false,
  "endOfLine": "lf"
}

Изменим файл "package.json" в корне проекта, в секции scripts добавим команду precommit, а так же добавим свойство lint-staged с настройками:

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

После этого для проверки всей папки: src - на наличие ошибок или предупреждений, достаточно лишь запустить в консоли команду:

npm run eslint

Установка и настройка IDE

Установим редактор исходного кода - VS Code, скачав его по URL: https://code.visualstudio.com/download.

Нажмём в редакторе - CTRL + SHIFT + X и установим необходимые плагины:

  • ESLint
  • Prettier
  • Bracket Pair Colorizer
  • GitLens
  • Polacode
  • Simple React Snippets

Изменим файл настроек:

  • Windows: %APPDATA%\Code\User\settings.json
  • macOS: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

до вида:

{
  "window.zoomLevel": 1,
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": true,
  },
  "[html]": {
    "editor.formatOnSave": false,
  },
  "[json]": {
    "editor.formatOnSave": false,
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
}

IDE готова к использованию.