Создайте приложение React с полезными библиотеками

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

Пример репо

Вот ссылка на полную базу кода для справки:



manakuro / самоуверенный-создать-реагировать-приложение-пример
Этот проект был загружен с помощью приложения Create React. TypeScript react-app-rewired / customize-cra Styled-components… github.com



Настроить приложение Create React

Для большинства своих проектов React я использую TypeScript, потому что:

  • Статические типы позволяют легко понять кодовую базу (самодокументируются).
  • Компоненты позволяют узнать, какие реквизиты требуются, а какие нет.
  • Если необходимые реквизиты не переданы, TypeScript сразу предупредит вас.
  • TypeScript предупредит вас, если вы используете переменную, которая может иметь значение null, чтобы вы могли избежать ненужных ошибок времени выполнения, таких как undefined.
  • Редактор может подсказать вам предложения по коду, что сделает вашу разработку невероятно быстрой.

Сначала код TypeScript может показаться вам незамедлительным, но, как только вы к нему привыкнете, вы найдете его очень полезным.

Итак, давайте настроим приложение create response с шаблоном TypeScript:

npx create-react-app my-react-app --typescript

Библиотеки

Среда разработки

Прежде всего, я представлю несколько библиотек для эффективной разработки. Вот некоторые из них:

commitzen

Commitzen позволяет вам заполнять обязательные поля фиксации с помощью интерактивного интерфейса командной строки.

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

Хотя вы можете настроить шаблон сообщения фиксации, если вы не придирчивы к этому, вы можете использовать соглашение о сообщениях фиксации AngularJS, которое известно как популярное соглашение во интерфейсной разработке среди других библиотек, таких как Vue.js.

Итак, давайте посмотрим, как это работает.

Установите commitzen и cz-конвенциональный журнал изменений:

yarn add -D commitizen cz-conventional-changelog

И настройте его в package.json:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "commit": "git-cz"
},
...
"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

Запускаем git add . и yarn commit:

реагировать-приложение-перепрограммировано / настроить-Cra

Приложение Create React не позволяет настраивать плагины babel, настройки eslint или jest без извлечения по умолчанию. Чтобы не выбрасывать его, можно использовать react-app-rewired и customize-cra.

Установите response-app-rewired и customize-cra:

yarn add -D react-app-rewired customize-cra

Создайте config-overrides.js в корневом каталоге:

И измените сценарии start, build и test в package.json следующим образом:

eslint / prettier / lint-staged

После настройки response-app-rewired вы можете использовать eslintrc.js в своем проекте.

Итак, установим eslint и prettier.

yarn add -D eslint eslint-config-prettier eslint-plugin-prettier prettier

И добавьте eslintrc.js:

Приложение Create React предоставляет предустановку базовой конфигурации, по умолчанию react-app. Поэтому я настоятельно рекомендую вам расширить его и добавить в него свои правила.

Prettier также был включен в настройках этого eslint. Итак, когда вы запустите команду eslint —fix, eslint и prettier обнаружат и исправят код.

В своем редакторе я обычно подключаю eslint — fix для сохранения файлов. Итак, каждый раз, когда я сохраняю файлы, он автоматически форматирует код.

В VS Code вы можете включить линтер при сохранении, как в этой статье Линия на сохранение с помощью Visual Studio Code и ESLint.

Затем мы настроим lint-staged, чтобы проверить, соответствует ли код правильному формату перед фиксацией.

yarn add -D lint-staged

И добавляем конфигурацию и скрипты в package.json:

Перед запуском фиксации lint-stage будет запускаться только для поэтапных файлов и принудительно применять форматирование eslint.

UI

Я боролся с такими проблемами, как ошибка компонентов пользовательского интерфейса или спагетти-код CSS при разработке интерфейса. Это происходит потому, что каждый разработчик создает свои собственные компоненты пользовательского интерфейса и код CSS, не замечая, что аналогичный компонент уже был создан. И если это будет продолжаться какое-то время, вы столкнетесь с такими проблемами, как:

  • Множество несовместимых стилей
  • Множество дублированных компонентов пользовательского интерфейса
  • Много ненужного времени на проектирование и разработку

Чтобы избежать этих проблем, вам необходимо поддерживать согласованность наших компонентов пользовательского интерфейса. Создание повторно используемых компонентов значительно ускоряет вашу разработку, а также обеспечивает согласованный пользовательский интерфейс, который помогает вашим пользователям ориентироваться и взаимодействовать с веб-сайтом без путаницы.

Для этого я использую styled-system, потому что:

  • вы можете писать CSS без конфликтов имен (для спагетти CSS)
  • вы можете писать код на основе системы дизайна (для проблем с несовместимыми стилями)
  • вы можете писать повторно используемые компоненты (для проблемы с дублированными компонентами пользовательского интерфейса)

Итак, давайте посмотрим, как это работает.

стилизованная система

Styled-system разработана с набором утилит, которые сопоставляют реквизиты с системой дизайна, а также имеет набор API с функциями для CSS. Он работает с библиотеками CSS-in-JS, такими как styled-component, Emotion, и даже поддерживает Vue.js.

Пользовательский интерфейс темы

Theme UI - это следующая эволюция style-системы для создания многоразовых компонентов, основанная на принципах дизайна. Вот особенности пользовательского интерфейса темы:

  • Следующая эволюция стилизованной системы
  • От создателей атомарных методологий CSS на основе служебных программ.
  • Стиль на основе темы с опорой sx
  • Создавайте MDX контент с помощью простого и выразительного API.
  • Работает с темами Typography.js.
  • Совместимость практически с любой библиотекой компонентов пользовательского интерфейса
  • Работает с существующими компонентами Стилизованной системы
  • Быстрые адаптивные стили, ориентированные на мобильные устройства
  • Встроенная поддержка темных режимов
  • Компоненты примитивного макета страницы
  • Плагин для использования на сайтах и ​​в темах Гэтсби
  • Полностью настраиваемый с надежной тематикой
  • Создан со стандартной Спецификацией темы для взаимодействия
  • Создан с Emotion для стилей с ограниченным обзором

Опора sx позволяет вам стилизовать любые встроенные элементы, а также использовать значения из темы. Итак, если вы добавите значение bg: highlight к опоре, пользовательский интерфейс темы будет ссылаться на значение colors: { highlight: “#663399”} в теме, что очень полезно, потому что вы можете сделать его более общим, вместо того, чтобы использовать конкретное значение для каждого компонента.

Установить пользовательский интерфейс темы:

yarn add theme-ui
yarn add -D @types/theme-ui

Настройте поставщика тем в App.tsx:

ThemeProvider - это встроенный поставщик в пользовательском интерфейсе темы, который предоставляет тему для всех компонентов React под собой через контекстный API.

Компонент <Global /> применяет базовый CSS к HTML в качестве глобального стиля.

Давайте добавим тему в src/styles/theme.ts:

Это основано на предустановке из them-ui / presets, но вы можете настроить в своем проекте все, что захотите. Если ваша команда использует дизайн-систему, вы можете применить ее к теме.

В этом пакете также доступны следующие предустановки:

Воспроизвести пресет можно на странице Демо.

Итак, давайте перепишем страницу приветствия, используя компоненты пользовательского интерфейса темы:

Что мне нравится в написании кода таким образом:

  • Вам больше не нужно думать о конфликтах именования CSS
  • Вы можете сохранить стиль, определив тему
  • Вы можете избежать создания дублированных компонентов, используя базовые компоненты, такие как Box, Flex, Text и т. Д. Даже если есть небольшая разница, просто добавьте к ней свойства стиля, создавать новый не нужно.

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

Тестирование

Вот несколько библиотек для тестирования, которые я использую в своих проектах:

реагировать-тестирование-библиотека

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

Enyzme позволяет нам сосредоточиться на реализации, предоставляя API для имитации поведения реальных пользователей.

Мокирующие функции и компоненты легко позволяют мне написать тест, но я тоже:

  • проблемы с обновлением тестового кода насмешки при рефакторинге реализации.
  • неуверенность в освещении реального поведения пользователей.

Так недавно я изменил свое мнение о написании тестов. Я сосредотачиваюсь на поведении большего количества пользователей, потому что, если ожидаемый результат обеспечен, вы можете легко реорганизовать реализацию и изменить код. А также это позволяет вам быть уверенным в своем продукте и предоставлять пользователям хорошее качество.

Библиотека react-testing-library подходит для этого, потому что они предоставляют полезный API, который позволяет нам больше сосредоточиться на поведении пользователя.

Утилиты имеют дело с DOM, а не с экземплярами компонентов, и поощряют тесты, которые используют компоненты так, как они предназначены для использования.

Руководящие принципы гласят:

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

А также javascript-testing-best-практики побуждают вас полностью рендерить компоненты для проверки поведения пользователей:

При разумном размере протестируйте свой компонент извне, как это делают ваши пользователи, полностью визуализируйте пользовательский интерфейс, действуйте в соответствии с ним и подтвердите, что визуализированный пользовательский интерфейс ведет себя так, как ожидалось. Избегайте всевозможных имитаций, частичного и неглубокого рендеринга - такой подход может привести к невыявленным ошибкам из-за отсутствия деталей и усложнить обслуживание, так как тесты портят внутреннее устройство (см. Пункт «Используйте тестирование черного ящика»). Если один из дочерних компонентов значительно замедляет работу (например, анимацию) или усложняет настройку - рассмотрите возможность явной замены его поддельным

Несмотря на то, что между ними есть плюсы и минусы, и на самом деле, если у вас есть трудности с тестированием, как у меня, вы можете попробовать его.

Wallaby.js

Wallaby.js - это инструмент тестирования, который запускает ваши тесты JavaScript или TypeScript сразу же, как вы меняете, и невероятно быстро показывает результат в вашем редакторе кода.

Когда вы меняете тестовый код, Wallaby.js автоматически обнаруживает ошибку и показывает то, что ожидается.

Это очень полезно и увеличивает продуктивность разработки.

Я рассказывал о том, как использовать Wallaby.js, в статье Невероятно быстрое тестирование с Wallaby.js, чтобы вы могли это проверить.

Заключение

Вот и все. Я выделил библиотеки для разработки, пользовательского интерфейса и тестирования. Я собираюсь поговорить об API и обработке форм в более позднем посте.

Надеюсь, эта статья заинтересует вас.

Примечание от JavaScript In Plain English:

Мы всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в JavaScript In Plain English, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора.