От автора: Create React App — это инструмент, который упрощает создание приложений React без необходимости иметь дело со сложными настройками. Недавняя версия Create React App v2 — отличный повод, чтобы пройтись по Руководству для пользователей еще раз и найти интересные функции, о которых вы не знали. Вот те, о которых не знала я.
1. Отображение линтов ошибок в редакторе
Я люблю линты! Они помогают мне выявлять потенциальные проблемы, когда я пишу код, прежде чем я запущу его. Create React App уже поставляется с установленным ESLint и некоторыми правилами, настроенными по умолчанию, но в нем отображаются только линты предупреждений и ошибок в терминале:
Я же хочу видеть эти предупреждения и ошибки непосредственно в редакторе, чтобы иметь возможность исправить их немедленно, не переключая контексты.
Оказывается Create React App позволяет очень легко это сделать, просто добавьте файл .eslintrc в корень проекта с этим контентом:
{ "extends": "react-app"
}
Если у вас правильно настроен редактор (я использую расширение 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 и эти два модуля:
npm install --save-dev prettier husky lint-staged
Затем мы добавим следующие разделы в конец файла package.json в нашем приложении:
{ // ... "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,jsx,json,css}": [ "prettier --write", "git add" ] }
}
Теперь каждый раз, когда мы выполняем что-то, мы увидим, что husky вызывает lint-staged, который, в свою очередь, вызовет prettier для всех файлов, которые мы изменяем.
Красиво, не правда ли?
3. Разработка компонентов изолированно
Если мы работаем над сложным приложением со многими компонентами и разными состояниями для каждого, всякий раз, когда мы вносим изменения, мы должны перезагружать все приложение и взаимодействовать с ним, пока не получим нужное состояние.
Другой способ работы — использовать такие инструменты, как Storybook и Styleguidist, которые позволяют разрабатывать каждый компонент в отдельности. Мне особенно нравится Storybook, потому что он очень просто интегрируется с Create React App:
npm install --global @storybook/cli getstorybook
После того как мастер завершит свою работу, нам просто нужно запустить npm run storybook и начать писать сторисы для наших компонентов в папках stories/, созданных мастером. Мы можем добавить новый сторис для компонента Header следующим образом:
import React from 'react';
import { storiesOf } from '@storybook/react';
import Header from '../Header'; storiesOf('Header', module) .add('default theme', () => <Header />) .add('light theme', () => <Header theme="light" />) .add('dark theme', () => <Header theme="dark" />);
Это создаст новый раздел с заголовком Header в storybook:
После этого мы продолжим разрабатывать с этой точки!
4. Создание прогрессивного веб-приложения
Требованиями для приложения, которое будет рассматриваться как PWA, следующие:
Оно должно обслуживаться через HTTPS
Оно должно предоставить манифест
Оно должно регистрировать ServiceWorker
Возможно, вы уже обслуживаете свое приложение через HTTPS, поэтому остались только манифест и ServiceWorker. К счастью, Create React App уже сгенерировало для нас манифест, расположенный в public/manifest.json. Вам просто нужно настроить его значения.
Он также создает ServiceWorker, но не регистрирует его по умолчанию по причинам, изложенным в Руководстве пользователя. После того, как ознакомитесь с этой информацией и поймете их логику, если захотите продолжить, откройте файл src/index.js и найдите следующие строки:
// If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister();
Теперь измените serviceWorker.unregister() на serviceWorker.register(), и все готово. У вас есть PWA, и Chrome будет предлагать вашим пользователям добавлять его на главный экран!
5. Разделение кода
Разделение кода — это функция современных буферов JavaScript, которая позволяет разделить приложение на более мелкие фрагменты, которые затем могут быть загружены по требованию.
Create React App v2 поддерживает разделение кода с помощью динамических операторов import(). То есть, если при создании приложения он встречает вызов импорта («./someModule»), то создает новый фрагмент для someModule и всех его зависимостей, полностью отделенный от вашего набора записей.
Давайте рассмотрим пример. Представьте, что у нас сложная форма, которая отображается только тогда, когда пользователь нажимает кнопку. Мы можем использовать разделение кода, чтобы избежать загрузки, парсинга и выполнения всего этого кода при загрузке страницы, а вместо этого отложить загрузку формы до тех пор, пока пользователь не нажмет на эту кнопку. Вот наша сложная форма с использованием formik и yup:
import React, { Component } from "react";
import { Formik } from "formik";
import * as Yup from "yup"; const formValidator = Yup.object().shape({ /* ... */ }); export default class Form extends Component { render() { return ( <Formik validationSchema={formValidator}> {/* ... */} </Formik> ); }
}
И вот наше приложение использует динамический импорт для загрузки формы по требованию:
import React, { Component } from "react"; export default class App extends Component { constructor() { super(); this.state = { Form: undefined }; } render() { const { Form } = this.state; return ( <div className="app"> {Form ? <Form /> : <button onClick={this.showForm}>Show form</button>} </div> ); } showForm = async () => { const { default: Form } = await import("./Form"); this.setState({ Form }); };
}
Только когда пользователь нажимает кнопку, загружается форма. После того, как promise import() будет обработан, мы вызываем setState и выполняем принудительный ререндеринг приложения с загруженным компонентом.
Если вы внимательно посмотрите на выполненные сетевые запросы, то увидите два новых фрагмента (0.chunk.js и 1.chunk.js), которые будут запрошены после нажатия кнопки. Они содержат форму и ее зависимости formik и yup, поэтому нам удалось избежать добавления всего этого кода при начальной загрузке страницы, что ускорит приложение!
Заключение
Create React App — замечательный инструмент, который позволяет легко начать работу с React. Он также содержит массу функций, поэтому стоит прочитать официальную документацию, чтобы ознакомиться с ними.
Автор: Blanca Mendizábal Perelló
Источник: https://www.telerik.com/
Редакция: Команда webformyself.
