Блог экспериментатора инженера-разработчика: Infanty.
Я пишу 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, поэтому он отсутствует в списке на установку.

Для настройки 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
} 

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

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "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 готова к использованию.