Обзор вспомогательных инструментов и функций
React - одна из (если не самая) популярных библиотек JavaScript. Есть веские причины, по которым React так любим среди разработчиков Javascript. Во-первых, он отдает приоритет UI (пользовательскому интерфейсу) части веб-сайта; это включает в себя любой аспект, с которым взаимодействует пользователь, например экранные меню, кнопки и панели поиска.
React решает многие проблемы с производительностью, связанные с манипуляциями с DOM (объектной моделью документа). Это достигается с помощью процесса согласования, в котором он создает копию модели DOM, называемую текущим деревом, при начальной визуализации. По мере внесения обновлений в DOM они отображаются во втором дереве, называемом деревом workInProgress; именно на этом дереве накапливаются все изменения. Наконец, когда обновления обрабатываются, дерево workInProgress используется для обновления фактической модели DOM, а текущее дерево обновляется для представления самой последней модели DOM.
Дополнительную информацию о лучших практиках React можно найти в хорошо написанной и сжатой документации React. Чтобы помочь вам улучшить свой рабочий процесс, этот пост в блоге содержит обзоры популярных инструментов, которые в сочетании с React предоставят вам наиболее оптимальный опыт программирования.
Создать приложение React
Create React App - это пакет сборки; он предлагает современную настройку сборки без какой-либо конфигурации. Это самый простой и удобный способ начать изучать React. Он предоставляет вам оптимизированную отправную точку, настраивая предварительно сконфигурированную среду разработки, чтобы вы могли использовать новейшие функции JavaScript. Есть много вещей, которые Create React App делает под капотом, объясняя все, что это делает, потребует целой статьи, поэтому мы просто собираемся включить некоторые из наиболее важных его частей.
Важно отметить, что для запуска Create React App вам потребуется Node v8.10 или выше на вашем локальном компьютере для разработки.
Создать приложение React предоставляет вам несколько методов для создания сборки приложения React. Перейдите в каталог, в котором вы хотите разместить новое приложение React, затем выполните любую из следующих команд:
npx create-react-app my-app (npx is available in npm v5.2 or higher) npm init react-app my-app (npm init is available in npm v6 or higher) yarn create react-app my-app (yarn create is available in yarn v0.25 or higher)
Это единственные шаги, которые вам нужно предпринять, все остальное сделает Create React App. Довольно круто, правда.
Набор инструментов Создать приложение React состоит в основном из трех инструментов: диспетчера пакетов, сборщика и компилятора.
- Диспетчер пакетов, как следует из названия, - это инструмент, который помогает вам управлять зависимостями, которые необходимы вашему проекту для правильной работы. Он позволяет вам использовать преимущества обширной экосистемы сторонних пакетов и эффективно устанавливать или обновлять их. Есть два основных менеджера пакетов: Yarn и npm. И пряжа, и нпм обладают схожими характеристиками.
- Компоновщик, который позволяет вам писать модульный код и объединять его в небольшие пакеты для использования в браузере. Двумя наиболее популярными сборщиками являются Webpack и Parcel. Стоит отметить, что Parcel намного проще настроить, чем Webpack. Create React App использует Webpack в качестве сборщика по умолчанию, и он уже настроен для вас заранее.
- Компилятор JavaScript , который преобразует современный код JavaScript (ES6 +) в обратно совместимую версию JavaScript, которую могут запускать старые механизмы JS. Самый популярный компилятор - Babel, который использует новейшие функции JavaScript и по умолчанию входит в состав Create React App.
Есть два очень важных инструмента, которые Create React App включает в вашу сборку и которые будут важной частью этой статьи: линтер (ESLint) и форматированный ( Красивее).
Красивее
(Средство форматирования кода)
Prettier - это удивительное средство форматирования стилей кода, которое упрощает форматирование. Использование Prettier в команде помогает обеспечить единообразие стиля, а также экономит ваше время от разногласий по поводу форматирования. Это позволяет вам сделать акцент на содержании кода и важных идеях, а не на банальном форматировании.
Как работает Prettier? Я рада, что вы спросили!
Prettier берет код, который вы пишете, и разбивает его на абстрактное синтаксическое дерево, которое является просто представлением вашего кода. После этого он берет это абстрактное синтаксическое дерево, отбрасывает весь ваш стиль форматирования, а затем заменяет его предопределенным стилем. Это все.
Prettier был создан талантливым Джеймсом Лонгом, который стремился свести к минимуму трудности, с которыми приходится сталкиваться разработчикам при форматировании. Приступим к созданию красивого кода!
Установка Prettier
Чтобы установить Prettier в свой проект, перейдите в корневой каталог проекта в Терминале и выполните следующую команду:
npm install -D prettier
Это позволит установить prettier в качестве зависимости разработчика, добавив его в файл package.json. Причина, по которой мы хотим, чтобы это была зависимость разработчика, заключается в том, что при развертывании нашего кода в производственной среде Prettier не подходит.
Если вы перейдете в свой файл package.json, вы должны увидеть что-то вроде этого:
Поздравляю! Теперь в вашем проекте установлен Prettier.
Чтобы использовать Prettier из вашего терминала, мы можем создать скрипт npm / yarn, который мы собираемся добавить в наш файл package.json.
Скопируйте следующую строку и добавьте ее в раздел «scripts» в файле package.json.
"format": "prettier --write \"src/**/*.{js,jsx}\""Это создает сценарий, который мы назовем «формат», который лучше работает в любом файле с расширением «.js» или «. jsx », который находится в каталоге« src »нашего проекта. Если у вашего проекта другая структура, вы всегда можете ее изменить. Однако, если вы следуете соглашениям, все ваши файлы js и jsx должны находиться в каталоге с именем «src».
--write allows prettier to write the files instead of just reading them, if we would omit "--write", prettier would just display the formatted code in our Terminal.
Вот и все, теперь каждый раз, когда мы запускаем «npm run format» или «yarn run format», Prettier форматирует все наши файлы js, jsx.
Кроме того, вы также можете запустить Prettier, установив его глобально с помощью команды:
npm install --global prettier
и запустив его командой:
prettier --write src/script-name.js //change "script-name.js" to any file name you want to format.
Теперь весь этот процесс достаточно полезен, но что, если бы мы могли сделать его еще проще для нас.
Если вы используете Visual Studio Code, вы можете скачать расширение Prettier.
Я покажу вам, как настроить его так, чтобы каждый раз, когда мы сохраняем файл, Prettier форматировал его.
Перейдите в Настройки с помощью сочетания клавиш:
"cmd+," on macOS or "Ctrl+," on Windows
или путем перехода вручную через:
Code>Preferences>Settings //macOS File>Preferences>Settings //Windows
В настройках найдите «Форматировать при сохранении» и установите соответствующий флажок. Это настраивает VS Code так, что каждый раз, когда вы сохраняете файл, он форматирует его с помощью Prettier.
Однако предположим, что мы не хотим использовать функцию Prettier format-on-save в каждом проекте. Мы можем потребовать, чтобы для Prettier to Format при сохранении нам понадобился файл конфигурации в нашем проекте. Для этого выполните следующие действия:
Перейдите к настройкам VS Code, найдите «Prettier: Require Config» и установите соответствующий флажок. Затем создайте файл с именем «.prettierrc» в корневом каталоге проекта и внутри этого файла добавьте пустые фигурные скобки «{}». Это укажет VS Code использовать предопределенную конфигурацию для Prettier.
Ура! Теперь вы можете убрать форматирование из своего списка вещей, о которых нужно беспокоиться!
ESLint
(ЛИНТЕР на JavaScript)
JS Linters - это инструменты, которые помогут вам в процессе отладки.
Они сканируют ваш код на наличие ошибок и сообщают вам обратную связь с указанными номерами строк, в которых возникают подозрительные ошибки. Внутри редактора кода, такого как VS Code, с включенным расширением ESLint ошибки подсвечиваются. ESLint также отображает список ошибок на вашей консоли. Линтеров очень мало, и самый популярный из них - ESLint. ESLint чрезвычайно настраиваемый, и самая важная часть, которая нас беспокоит, - это то, что он поддерживает JSX. Мы можем использовать несколько предустановленных конфигураций, например, довольно популярную на Airbnb. Однако мы собираемся использовать ту же конфигурацию, которую использует гуру React Брайан Холт.
Установка ESLint
Мы устанавливаем ESLint, перейдя в корневой каталог проекта и выполнив следующую команду:
npm install -D eslint eslint-config-prettier
Как вы можете видеть выше, мы также включаем eslint-config-prettier, который говорит ESLint не беспокоиться о стилях, потому что Prettier уже делает это.
Следующим шагом будет создание файла конфигурации для ESLint в корневом каталоге. Создайте новый файл и назовите его «.eslintrc.json». Внутри этого файла будет добавлена куча вещей.
{
"extends": ["eslint:recommended", "prettier", "prettier/react"],
"plugins": [],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
}
}Теперь нам нужно настроить ESLint, чтобы он распознавал React.
Вернитесь к своей консоли и выполните следующую команду:
npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
После завершения установки вам необходимо обновить файл .eslintrc.json со следующей конфигурацией:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0
},
"plugins": ["react", "import", "jsx-a11y"],
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}До этого момента ESLint настроен для React. Теперь нам нужно добавить конфиг для хуков.
В консоли выполните следующую команду:
npm install -D eslint-plugin-react-hooks
после этого мы вернемся к нашему .eslintrc.json и обновим его следующим образом:
{ "extends": [ "eslint:recommended", "plugin:import/errors", "plugin:react/recommended", "plugin:jsx-a11y/recommended", "prettier", "prettier/react" ], "rules": { "react/prop-types": 0, "no-console": 1,"react-hooks/rules-of-hooks": 2, "react-hooks/exhaustive-deps": 1}, "plugins": ["react", "import", "jsx-a11y","react-hooks"], "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", "ecmaFeatures": { "jsx": true } }, "env": { "es6": true, "browser": true, "node": true }, "settings": { "react": { "version": "detect" } } }
Вот как в итоге должен выглядеть ваш файл .eslintrc.json.
Последний шаг, который нам нужно сделать, - это создать новый скрипт внутри нашего файла package.json, а также установить расширение ESLint в нашей среде VS Code.
Перейдите в свой package.json и добавьте следующий скрипт:
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",Теперь у вас есть доступ к командам «npm run lint» или «yarn run lint».
Чтобы завершить его, давайте установим расширение ESLint для VS Code.
И вы сделали.
Наличие ESLint в вашем арсенале инструментов поможет сохранить ваш код React кратким и свободным от надоедливых ошибок, которых можно избежать!
Эммет
Emmet - это расширение, которое предустановлено в популярных редакторах кода, таких как VS Code, что делает программирование более эффективным с помощью сочетаний клавиш и фрагментов кода. Его синтаксис основан на CSS-селекторах, что упрощает освоение.
Emmet уже "из коробки" поддерживает JSX; не требует длительной установки! Чтобы убедиться, что Emmet включен в файлах React, перейдите в настройки VS Code, найдите «Emmet: Preferences» и выберите «Изменить в settings.json».
Внутри settings.json убедитесь, что есть «javascript »:« Javascriptreact »включен как часть« emmet.includeLanguages », например:
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
Вот и все! Чтобы помочь вам познакомиться с синтаксисом Emmet, включена ссылка на официальную шпаргалку Emmet:
Давайте посмотрим на это в действии!
В сочетании с другими фрагментами, такими как:
Мы можем сгенерировать код намного быстрее, даже не пытаясь.
Как разработчики, мы всегда стремимся к написанию чистого, понятного и эффективного кода. Однако нести на себе нагрузку, в которой мы не нуждаемся, когда такие инструменты, как Emmet, ESLint и Prettier, уже существуют, чтобы облегчить нам жизнь! Научитесь использовать их, и ваше будущее обязательно скажет вам миллион.
Ресурсы
