Если вам нужен готовый шаблон React, приложение Create React отлично подходит, но в нем отсутствуют некоторые полезные функции. Посмотрим, как их добавить.

Примечание. в этом руководстве предполагается, что вы знакомы с Create React App, поэтому предполагается, что у вас уже есть готовый локальный проект и вы знаете все основы.

1. Расширьте конфигурацию ESLint с помощью правил линтинга AirBnB и Prettier.

AirBnB создал действительно популярное Руководство по стилю Javascript. Использование его в ваших проектах гарантирует, что ваш код будет иметь такой уровень ясности, который облегчит чтение и сопровождение для всех, кто должен над ним работать.
В дополнение к этому, использование Prettier обеспечит возможность автоматического исправления и улучшения вашего код после конфигурации ESLint.

Приложение Create React уже поставляется с ESLint, поэтому нам нужно только расширить его конфигурацию. В своем проекте запустите следующее:

yarn add -D eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier

или, если вы предпочитаете npm:

npm i eslint-config-airbnb eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier --save-dev

Теперь создайте .eslintrc файл в корневой папке вашего проекта, добавив следующую конфигурацию:

{
  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "prettier/prettier": [
      "error", {
        "semi": false
      }
    ]
  }
}

Этот файл в основном сообщает esLint, что нужно использовать airbnb правила и, как правило, как линтировать код.

Я добавил несколько простых пользовательских правил поверх конфигурации AirBnB, вы можете увидеть их вrules ключе:

  1. Semi установлен в 0: не используйте точку с запятой в конце каждого оператора (ИМХО очень раздражает);
  2. Response / jsx-filename-extension разрешает и .jsx, и .js в качестве расширения для файлов (вместо только .jsx).

Не стесняйтесь полностью удалить их, если вам это не нравится.

Добавьте в проект сценарий для линтинга файлов.

Чтобы добавить кодовую базу в ваш package.json, вам нужно добавить команду lint следующим образом:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint": "eslint ."
},

Теперь вы можете запустить свой код:

yarn lint

… Или с npm:

npm run lint

Примечание: если вы используете VSCode или другие подобные популярные редакторы, вы можете установить соответствующие плагины как для ESLint, так и для Prettier. Это позволяет запускать анализ кода и исправления непосредственно в редакторе кода, используя указанную выше конфигурацию.

Еще один шаг (необязательно, но рекомендуется): автоматизировать запуск eslint и prettify перед каждой командой GIT COMMIT

Если вы используете GIT в своем проекте (и я не могу понять, почему вы этого не делаете), вы можете выполнять линтинг и предварительные проверки и исправления перед каждой фиксацией.

Установите Хаски и Lint Staged:

yarn add -D husky lint-staged
# At this point of the tutorial, I think
# it should be clear how to use npm instead of yarn,
# isn’t it 😉?

В корневой папке проекта добавьте конфигурацию для Husky:

.huskyrc.json

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

… И один для Lint Staged:

.lintstagedrc.json

{
  "*.+(js|jsx)": ["eslint --fix", "git add"],
  "*.+(json|css|md)": ["prettier --write", "git add"]
}

Я думаю, что они говорят сами за себя: короче говоря, перед каждой фиксацией Husky вызывает Lint Staged, который запускает команду eslint и prettier только для промежуточных файлов. Это все, действительно просто, и вам больше не нужно заниматься линтингом 🙂.

2. Добавьте Flow в качестве средства проверки статического типа по умолчанию.

Цитата из официальных документов Create React App:

Flow - это средство проверки статического типа, которое помогает писать код с меньшим количеством ошибок.

На мой взгляд, вы не можете начать новый проект Javascript, не чувствуя необходимости использовать средство проверки статического типа. Вы также можете использовать Typescript, но если вы предпочитаете старый добрый синтаксис ES6, Flow - ваш выбор.

Ознакомьтесь с этим введением в использование статических типов в JavaScript, если вы новичок в этой концепции.

Как только вы будете готовы, установите Flow running:

yarn add -D flow-bin flow-typed

И добавляем его конфигурационный файл .flowconfig в корень проекта:

[ignore]
<PROJECT_ROOT>/node_modules/.*
[include]
[libs]
[lints]
[options]
[strict]

Расширьте свой lint-скрипт в package.json, включив в него Flow:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint": "eslint . && flow"
},

Теперь вы можете начать использовать Flow, добавляя // @flow поверх любых файлов, которые вы хотите ввести check.

Чтобы узнать больше о Flow и Flow Typed, ознакомьтесь с официальной документацией:
https://flow.org/
https: //github.com/flow-typed/flow-typed

3. Добавить библиотеку тестирования React

Форма Официальная документация библиотеки тестирования React:

Библиотека тестирования React - это простая и полная утилита тестирования React DOM, которая поощряет хорошие методы тестирования. Он предоставляет легкие служебные функции поверх react-dom и react-dom / test-utils, что способствует более совершенным методам тестирования.

Я настоятельно рекомендую вам использовать эту библиотеку вместо Enzyme, если вы разрабатываете проекты на основе React, но мне не нужно убеждать, кто читает эту статью, в Интернете действительно полно статей, объясняющих, почему, погуглите, чтобы пройти через содержание 😉.

Устанавливаем обычной командой:

yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/react-hooks

Если вы не хотите импортировать React Testing Library jest-dom настраиваемые сопоставления в какой-либо тестовый файл, вы можете создать src/setupTests.js:

// react-testing-library renders your components to document.body,
// this adds jest-dom's custom assertions
import '@testing-library/jest-dom/extend-expect'

Теперь вы готовы заменить Тест React Create App по умолчанию App.js на новый, основанный на библиотеке тестирования React:

src/App.test.js

import React from 'react'
import { render } from '@testing-library/react'
import App from './App'
it('renders without crashing', () => {
  const { getByText } = render(<App />)
  expect(getByText('Learn React')).toBeInTheDocument()
})

И вы можете проверить результат запустив:

yarn test

Вот и все, теперь вы готовы создать свое следующее приложение React с использованием надежной базовой конфигурации, стильного кодирования, правильных действий с проверкой статического типа и тестирования - все в соответствии с последними стандартами.

Если вам понравился этот пост, пожалуйста, похлопайте по нему и следите за мной, чтобы следить за новыми историями и учебниками.