5 вещей, которые я не знала о Create React App

5 вещей, которые я не знала о Create React App

От автора: Create React App — это инструмент, который упрощает создание приложений React без необходимости иметь дело со сложными настройками. Недавняя версия Create React App v2 — отличный повод, чтобы пройтись по Руководству для пользователей еще раз и найти интересные функции, о которых вы не знали. Вот те, о которых не знала я.

1. Отображение линтов ошибок в редакторе

Я люблю линты! Они помогают мне выявлять потенциальные проблемы, когда я пишу код, прежде чем я запущу его. Create React App уже поставляется с установленным ESLint и некоторыми правилами, настроенными по умолчанию, но в нем отображаются только линты предупреждений и ошибок в терминале:

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

Оказывается Create React App позволяет очень легко это сделать, просто добавьте файл .eslintrc в корень проекта с этим контентом:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Если у вас правильно настроен редактор (я использую расширение ESLint для VSCode), вы сразу увидите результаты:

2. Автоматическое форматирование кода с помощью Prettier

Prettier — это продуманный формат кода, который обеспечивает согласованный стиль во всех файлах. Я начала использовать его во всех своих проектах, потому что это позволяет мне сосредоточиться на самом коде и забыть о форматировании.

Вы можете запустить его из командной строки (установить его с помощью npm install -global, а затем запустить в своем проекте более корректно) или из редактора (я использую расширение Prettier для VSCode). Но другой популярный способ запуска Prettier — через хуки Git.

Если вы никогда не слышали о хуках, это скрипты, которые Git запускает, когда происходят определенные действия. Например, хук pre-commit запускается каждый раз, когда вы выполняете git commit, до того, как будет создан сам commit. Мы можем вызывать Prettier из хука pre-commit для форматирования всех файлов и обеспечения того, чтобы все, что мы передаем в репозиторий, было должным образом отформатировано.

Хотя мы могли бы написать этот хук вручную (посмотрите свою папку .git/hooks, там вы можете найти некоторые примеры), есть два модуля npm, которые помогут нам в этом, husky и lint-staged, и они прекрасно интегрируются с Create React App. Давайте установим Prettier и эти два модуля:

Затем мы добавим следующие разделы в конец файла package.json в нашем приложении:

Теперь каждый раз, когда мы выполняем что-то, мы увидим, что husky вызывает lint-staged, который, в свою очередь, вызовет prettier для всех файлов, которые мы изменяем.

Красиво, не правда ли?

3. Разработка компонентов изолированно

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

Другой способ работы — использовать такие инструменты, как Storybook и Styleguidist, которые позволяют разрабатывать каждый компонент в отдельности. Мне особенно нравится Storybook, потому что он очень просто интегрируется с Create React App:

После того как мастер завершит свою работу, нам просто нужно запустить npm run storybook и начать писать сторисы для наших компонентов в папках stories/, созданных мастером. Мы можем добавить новый сторис для компонента Header следующим образом:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Это создаст новый раздел с заголовком Header в storybook:

После этого мы продолжим разрабатывать с этой точки!

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

Требованиями для приложения, которое будет рассматриваться как PWA, следующие:

Оно должно обслуживаться через HTTPS

Оно должно предоставить манифест

Оно должно регистрировать ServiceWorker

Возможно, вы уже обслуживаете свое приложение через HTTPS, поэтому остались только манифест и ServiceWorker. К счастью, Create React App уже сгенерировало для нас манифест, расположенный в public/manifest.json. Вам просто нужно настроить его значения.

Он также создает ServiceWorker, но не регистрирует его по умолчанию по причинам, изложенным в Руководстве пользователя. После того, как ознакомитесь с этой информацией и поймете их логику, если захотите продолжить, откройте файл src/index.js и найдите следующие строки:

Теперь измените serviceWorker.unregister() на serviceWorker.register(), и все готово. У вас есть PWA, и Chrome будет предлагать вашим пользователям добавлять его на главный экран!

5. Разделение кода

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

Create React App v2 поддерживает разделение кода с помощью динамических операторов import(). То есть, если при создании приложения он встречает вызов импорта («./someModule»), то создает новый фрагмент для someModule и всех его зависимостей, полностью отделенный от вашего набора записей.

Давайте рассмотрим пример. Представьте, что у нас сложная форма, которая отображается только тогда, когда пользователь нажимает кнопку. Мы можем использовать разделение кода, чтобы избежать загрузки, парсинга и выполнения всего этого кода при загрузке страницы, а вместо этого отложить загрузку формы до тех пор, пока пользователь не нажмет на эту кнопку. Вот наша сложная форма с использованием formik и yup:

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

Только когда пользователь нажимает кнопку, загружается форма. После того, как promise import() будет обработан, мы вызываем setState и выполняем принудительный ререндеринг приложения с загруженным компонентом.

Если вы внимательно посмотрите на выполненные сетевые запросы, то увидите два новых фрагмента (0.chunk.js и 1.chunk.js), которые будут запрошены после нажатия кнопки. Они содержат форму и ее зависимости formik и yup, поэтому нам удалось избежать добавления всего этого кода при начальной загрузке страницы, что ускорит приложение!

Заключение

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

Автор: Blanca Mendizábal Perelló

Источник: https://www.telerik.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree