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

От автора: 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. К счастью, 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.