Чего ждать от релиза
Create-React-App позволяет нам создавать новые приложения React. Это невероятно полезный инструмент для создания приложений React. Он сохраняет все наши зависимости разработчиков, такие как webpack, ESLint и babel, внутри сценариев реакции. Это означает, что для обновления этих зависимостей нам нужно дождаться обновления Create-React-App. К счастью для нас, этот день настал.
Вчера была выпущена версия 4 Create-React-App.
Давайте рассмотрим новые функции, которые вы можете ожидать от обновления, и шаги по миграции, которые вам, возможно, придется пройти для успешного обновления.
Особенности
• Быстрое обновление
Если вы работали с NextJS, то знаете, насколько крута Fast Refresh. Fast Refresh - это замена React Hot Loader. Его большие преимущества включают потрясающую производительность и сохранение состояния при перезагрузке компонента. Это определенно отличное дополнение к Create-React-App.
• React 17
Несмотря на то, что React 17 - это переходный выпуск, в котором нет новых функций, приятно видеть, что приложение Create React поддерживает его. С поддержкой React 17 идет поддержка нового преобразования JSX.
Преимущество нового преобразования JSX в том, что нам больше не нужно импортировать React в наши компоненты, чтобы использовать JSX. Пользователи TypeScript должны учитывать, что им нужно подождать до версии 4.10, чтобы использовать эту новую функцию.
Чтобы узнать больше о новом преобразовании JSX, ознакомьтесь с публикацией в официальном блоге React по этой теме.
• Машинопись 4, ESLint 7 и Jest 26
Последняя версия приложения Create React теперь поддерживает последние версии этих зависимостей.
• Прогрессивные улучшения веб-приложений
Create React App 4 поддерживает Workbox, мощную библиотеку от Google. С Workbox вы можете использовать проповеди и кэширование во время выполнения, чтобы ваши PWA выглядели как собственные приложения.
• Поддержка Web Vitals
Измерение производительности вашего приложения стало еще проще благодаря Web Vitals. Эта библиотека позволяет точно измерять такие показатели, как задержка первого ввода (FID), самая большая отрисовка содержимого (LCP) и совокупный сдвиг макета (CLS).
Стратегии миграции
Чтобы обновить существующее приложение CRA, которое не было извлечено, просто выполните следующую команду.
yarn add --exact [email protected]С основным выпуском происходят критические изменения. Обновление ESLint 7 и различных плагинов ESLint требует изменения вашей конфигурации или кода. Обновление Jest 26 может нарушить некоторые из ваших тестов, особенно если вы полагаетесь на то, что моки не сбрасываются.
Пользователям TypeScript может потребоваться исправить типы, поскольку каждая новая версия TypeScript становится лучше при проверке типов.
Дальнейшее чтение
Для получения всех мельчайших подробностей о выпуске ознакомьтесь с официальными примечаниями к выпуску здесь.
Если вы не уверены, что лучше подходит для вашего варианта использования - Create React App или NextJS, ознакомьтесь с нашей прошлой статьей на эту тему.
Еще раз спасибо за чтение и за поддержку Frontend Digest.
