Обновление проектов на основе приложений Create React до версии 4 (CRA 4)

Подробное руководство по обновлению проектов на основе приложения Create React до последней версии.

Create React App - это быстрый способ создать проект React. Его легко сгенерировать командой npx create-react-app <project name>. Затем у вас есть последние пакеты и среда выполнения для проекта React. Это удобно и эффективно.

Все отлично, когда оно свежее.

Со временем появятся новые версии приложения Create React с новыми функциями и внутренними улучшениями. Что тогда?

В этой статье мы будем использовать Create React App 4 (CRA 4) в качестве примера, чтобы пройти процесс обновления проектов на основе Create React App.

Обновите скрипты реакции

Официальная документация рекомендует для обновления выполнить следующую команду:

npm install --save react-scripts@latest

react-scripts включает скрипты и конфигурацию. Выполнив эту команду, мы плавно обновим react-scripts с версии 3.4.3 до версии 4.0.0.

Вот разница в package.json:

Да, мы обновили версию react-scripts. Однако есть еще кое-что, о чем нужно позаботиться, если сравнивать package.json с package.json недавно установленного приложения Create React App 4:

Обновите версии React

Наиболее заметное отличие - это версии React. react и react-scripts остаются ^16.13.1, а в последней версии приложения Create React они есть по адресу ^17.0.1.

Мы должны вручную обновить версии React в package.json зависимостях:

"dependencies": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  ...
}

React 17 устанавливается путем выполнения npm i.

Мы представили React 17 в другой статье. В этом выпуске нет новых функций, но [email protected] предлагает возможность отложенной загрузки и глубокой интеграции нескольких версий React. Эта не-функция больше, чем любая другая функция, которая является отправной точкой для парадигмы, позволяющей современным новым приложениям сосуществовать с существующими устаревшими.

Помимо этого радикального изменения, есть и другие изменения:

React 16 подключает обработчики событий на уровне document под капотом. React 17 прикрепляет их к корневому контейнеру DOM, в котором отображается дерево React:

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

С этим изменением можно безопасно встроить дерево React, управляемое одной версией, в дерево, управляемое другой версией React. Это также упрощает встраивание React в приложения, созданные с использованием других технологий.

React обеспечивает поддержку нового преобразования JSX. С новым преобразованием при использовании JSX не нужно импортировать React. Он также компилирует вывод с немного уменьшенным размером пакета.

Этот пример взят из официальной документации:

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

Приведенный выше код был преобразован в:

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

С новым преобразованием он становится:

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Следующий код в src/App.js больше не нуждается в строке 1:

Обновить версию TypeScript

Если вы используете TypeScript, вы можете создать новый проект, выполнив следующую команду:

npx create-react-app --template typescript <project name>

В этом разница между приложением Create React App package.json в JavaScript и Create React App package.json в TypeScript:

TypeScript поддерживает новое преобразование JSX в версии 4.1.0 и выше. В приложении Create React от TypeScript есть открытая ошибка:

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>

Сначала необходимо удалить tsconfig.json, а затем выполнить npm start. Вновь сгенерированный tsconfig.json работает.

Обновить ESLint

С [email protected] до версии [email protected] ESLint был обновлен с версии 6 до версии 7.

Добавлены новые правила для Jest и библиотеки тестирования React. Конфигурация ESLint в package.json выполняется путем обновления react-scripts. Никаких дополнительных шагов не требуется.

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest"
  ]
},

Обновите библиотеку Jest и тестирования

С [email protected] до версии [email protected] Jest был обновлен с версии 24 до версии 26. Никаких дополнительных действий не требуется.

Однако обновление не включает обновление библиотеки тестирования. Мы должны вручную внести изменения в package.json:

"dependencies": {
  "@testing-library/jest-dom": "^5.11.6",
  "@testing-library/react": "^11.2.2",
  "@testing-library/user-event": "^12.2.2",
  ...
}

Пакеты библиотеки тестирования устанавливаются путем выполнения npm i.

Принять быстрое обновление

Fast Refresh заменил React Hot Loader. Он сохраняет состояния компонентов во время горячей перезагрузки.

Это модифицированный src/App.js:

Мы видим следующий пользовательский интерфейс и вводим aaa в поле ввода:

Затем в строке 8 измените Random Text и сохраните. Состояние aaa сохраняется независимо от горячей перезагрузки.

Разве это не круто?

Улучшения PWA / Workbox

Create React App 4 переключается на подключаемый модуль InjectManifest Workbox. Это позволяет лучше контролировать сервисных работников. Эта страница GitHub предоставляет подробную информацию об изменениях. Это усовершенствование для PWA.

При сравнении каждого src/index.js мы видим, что serviceWorker был удален. Шаблоны PWA перемещены в собственное хранилище.

Поддержка Web Vitals

Из сравнения src/index.js выше мы также видим, что было добавлено reportWebVitals.

Web Vitals - это библиотека от команды Google Chrome, цель которой - улавливать пользовательский опыт веб-страницы. Web Vitals прямо из коробки поддерживается для Create React App 4. Однако для обновленного проекта web-vitals необходимо вручную установить в package.json:

"dependencies": {
  ...
  "web-vitals": "^0.2.4"
}

После добавления зависимости выполните npm i.

Это модифицированный src/index.js. Строка 17 отправляет отчеты в функцию console.log:

На консоли отображаются следующие измерения:

Мы использовали эти показатели с Lighthouse в Chrome DevTools. Теперь Create React App 4 предоставляет возможность измерять их непосредственно из приложений.

Время до первого байта (TTFB): измеряет время, в течение которого браузер получает первый байт содержимого страницы.
First Contentful Paint (FCP): измеряет время с момента начала загрузки страницы до момента, когда любая часть содержимого страницы отображается на экране.
Накопительный сдвиг макета (CLS): он измеряет визуальную стабильность - смещаются ли элементы на странице неожиданным для пользователей образом и потенциально мешают их взаимодействиям.
Самая большая Contentful Paint (LCP): измеряет воспринимаемую скорость загрузки, так как отмечает момент на временной шкале загрузки страницы, когда основное содержимое страницы, вероятно, загружено.

Заключение

Пришло приложение Create React App 4. Он предоставляет нам новые функции и улучшения производительности.

Мы рассмотрели процесс обновления до Create React App 4. Пришло время опробовать его на существующих проектах.

Спасибо за прочтение. Я надеюсь, что это было полезно. Вы можете увидеть другие мои публикации в Medium здесь.