Одним из наиболее распространенных инструментов командной строки для создания нового приложения React является Create React App (CRA). Create React App предоставляет разработчикам структуру проекта React, возможность использовать новейшие функции и инструменты JavaScript для оптимизации вашего приложения для производства. Когда я запускаю npx в качестве средства запуска пакетов с помощью команды create-react-app, в настоящее время установлено 1392 пакета. Но что мне на самом деле дает Create React App?

Что такое приложение Create React?

CRA — это, прежде всего, шаблонный генератор для запуска в терминале. Его можно установить глобально через npm, но он поставляется только с последними версиями всех установленных пакетов, если вы используете средство запуска пакетов npx. Он поставляется с npm версии 5.2 или более поздней и создает первоначальную структуру проекта в вашей локальной папке, введя npx create-react-app имя вашего проекта реакции в терминале. Вы также можете указать определенную версию, добавив точный номер версии (например, [email protected]) или использовать все еще нестабильную бета-версию, введя командуcreate-react- app@next в терминал.

В отличие от других CLI-инструментов, таких как Angular-CLI, Create React App сопровождает только процесс создания приложения, а не весь цикл разработки. Генератор шаблонов обычно связан с определенным инструментом сборки (в случае CRA это webpack) и автоматически создает файлы для определенного типа сборки.

Таким образом, вы можете избежать утомительной работы в начале проекта React, используя CRA. Вы также можете выбрать из множества шаблонов, которые включают в себя другие пакеты, помимо обычных предустановленных. Например, — -template typescript дает вам файлы приложения React в формате TypeScript. По сути, CRA поставляется со всеми инструментами и файлами сборки, готовыми к работе и предварительно настроенными, когда вы начинаете разработку своего приложения, и автоматически выполняет объединение, минимизацию и автоматическое добавление префиксов с помощью одной команды.

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

Предварительно настроенные сценарии React

После запуска команды CRA и перехода во вновь созданную папку мы видим множество сгенерированных для нас файлов.

Начнем с файла package.json, где мы видим не так уж много. Всего несколько зависимостей, скриптов, список поддерживаемых браузеров и объект конфигурации ESLint, но ничего особенного.

В нашем файле package.json для нас настроены несколько сценариев: start, который запускает сервер разработки webpack, build, который запускает процесс сборки с помощью webpack, >test, который запускает средство запуска тестов Jest, и eject, который экспортирует все конфигурации, зависимости и сценарии, чтобы вы могли настроить их в соответствии со своими потребностями.

Команду eject не рекомендуется использовать, если вы хотите сэкономить время и усилия, поскольку она необратима, и версии ваших зависимостей больше не обновляются реактивными скриптами. Эта команда создает новую папку «config» с копией вашей конфигурации, обычно настроенной в package.json. Package.json становится раздутым, поскольку зависимости обычно включаются в реагирующие сценарии, где вы их не видите, но они автоматически обновляются и всегда совместимы с другими зависимостями. Таким образом, вам придется обновлять номера версий вручную. Вы можете просмотреть все устаревшие версии ваших пакетов npm с помощью npm old и обновить их с помощью npx npm-check -u.

Файл reportWebVitals.js импортирует стороннюю библиотеку под названием web-vitals, которая проверяет производительность вашего приложения по пяти наиболее распространенным показателям Web Vitals (CLS, FID, FCP, LCP, TTFB). . Вам просто нужно передать функцию, которую вы хотите проверить, функции reportWebVitals в файле index.js.

Файл setupTests.js импортирует сопоставители из Jest-DOM и позволяет нам использовать их в наших тестах. Jest-DOM устанавливается генератором шаблонов, как и другие библиотеки тестирования Jest и React Testing Library, в начале нашего приложения. Это также место, где вы можете включить другие параметры, такие как конфигурация других служебных библиотек тестирования, таких как Enzyme и его адаптеры.

Шаблонные файлы в общей и исходной папках

Общая папка содержит все статические ресурсы, такие как HTML, CSS, JavaScript и медиафайлы. Там вы найдете файл index.html, который является единственным файлом HTML, который вам понадобится в вашем приложении React при создании одностраничного приложения. Внутри элемента head вы можете найти много информации о метаданных. Этот файл имеет очень простую структуру, так как он содержит только div внутри элемента body с ID "root", который используется компонентами React. подключится, как только они будут связаны. Все ресурсы желательно поместить в общую папку, имена файлов которой не должны меняться в процессе сборки.

Каталог src — это место, где вы будете проводить большую часть времени, работая во время разработки, так как это местонахождение вашего фактического исходного кода. Это также единственная папка, файлы которой будут обрабатываться webpack для производственной сборки. index.js формирует корневой файл входа всех файлов JavaScript и отображает корень всех компонентов React, которые, как рекомендуется, все должны быть собраны в файле App.js.

Нам нужно указать нашему приложению React, где подключиться к DOM (в нашем index.html). Поэтому файл index.js создается в нашей папке src. Это очень маленький файл, который много делает с точки зрения нашего приложения React. Когда вы проверите это, вы найдете это:

В React 18 внесено несколько изменений, касающихся обработки корня приложения. Вместо того, чтобы использовать ReactDOM.render для простого рендеринга нашего App.js в Virtual DOM React, мы теперь сначала создаем корневую переменную (ReactDOM.createRoot()), но по-прежнему отображать все наше приложение в одном и том же узле DOM. Мы находим этот узел по ID «root», который находится в файле index.html. Затем мы помещаем компонент приложения, который является родителем всех компонентов, которые мы хотим визуализировать, внутри метода рендеринга этого объекта DOM.

Приложение Create React включает строгий режим, чтобы оно могло проверять устаревший код и выдавать предупреждения о них в консоли. В новейшей версии React команда React также внесла изменения в импорт в том же файле. Вам больше не нужно импортировать ReactDOM из «react-dom», а вместо этого из подпапки «react-dom/client». Только после этого вы сможете использовать новую структуру подключения к корню приложения, как описано выше.

App.css содержит определения стилей, которые загружаются в App.js. Файл index.css также можно использовать в качестве глобальной таблицы стилей всего приложения.

В корне папки только что созданного проекта есть еще другие файлы: в файле .gitignore перечислены все файлы, которые не следует помещать в наш репозиторий git. Сюда по умолчанию входит каталог node_modules. В этой папке хранятся все пакеты, которые использует наш проект. Вы не должны манипулировать ими вручную, так как они не будут переданы членам вашей команды и, следовательно, будут потеряны. Предопределенный файл README.md содержит документацию по приложению, и вы также найдете там объяснение предоставленных скриптов из первых рук. Файл package-lock.json содержит точный номер версии установленных зависимостей и их подзависимостей.

Тестирование файлов

Когда вы переходите на веб-сайт Create React App и в документацию, там есть целый раздел, посвященный запуску тестов. Это связано с тем, что приложение Create React предоставляет нам удобную для начинающих среду тестирования. Зависимости тестирования перечислены в файле package.json в разделе devDependencies, а тесты можно запустить с помощью предварительно настроенного скрипта npm run test, который запустит средство выполнения тестов в интерактивном режиме наблюдения.

По умолчанию вы получаете React Testing Library и Jest из коробки, но мы также можем запускать все тесты с другими тестовыми библиотеками. Все тестировщики заглянут в папку с именем __test__ и перейдут к файлам с расширением «.test.js» или «.spec.js». Они используются для модульных и интеграционных тестов, сквозное тестирование не покрывается приложением Create React.

Библиотека React Testing помогает нам визуализировать компоненты, перемещаться и взаимодействовать с виртуальной DOM React. В нашем распоряжении даже есть первый тестовый файл. С первым тестовым примером, уже созданным в App.test.js, мы можем сделать «тест-драйв», чтобы протестировать наш базовый компонент App.js.

Мы любим PWA

В январе 2015 года Фрэнсис Берриман и Алекс Рассел, два сотрудника Google, представили новую веб-технологию под названием Progressive Web App (PWA). Они хотели получить лучшее из обоих миров: обычных веб-приложений и нативных (мобильных) приложений, устранив при этом все их недостатки, и сделали это, используя ряд новых инструментов, которые мы также можем использовать в нашем шаблонном приложении React. .

В общей папке есть еще один предварительно сгенерированный файл, это файл manifest.json, который используется, когда мы хотим преобразовать наше веб-приложение в гибридное прогрессивное веб-приложение. Он работает вместе с файлом Service Worker, о котором я расскажу позже. Файл manifest.json должен быть указан в нашем файле index.html, где должна быть строка:

‹link rel="manifest" href="%PUBLIC_URL%/manifest.json" /›

присутствует в заголовке этого самого файла. Чтобы сделать наше приложение PWA, приложению нужен этот JSON-файл с необходимыми свойствами, который удобно сгенерировал Create React App на лету, нам осталось его немного подправить.

Чтобы пройти как PWA, наше приложение должно соответствовать некоторым критериям:

  • Происходить из безопасного источника (т. е. иметь URL-адрес «https»).
  • Загружать в автономном режиме (с помощью сервисного работника)
  • Приложение должно устанавливаться через манифест веб-приложения с определенными необходимыми свойствами (имя, краткое_имя и значки необходимых размеров для разных размеров экрана).

Вы должны иметь возможность найти файл манифеста в общедоступной папке, в которой перечислены данные о значках, названиях приложений и URL-адресах, а также фирменные цвета, используемые при отображении веб-приложения на главном экране. Вы можете изменить свойства заполнителя в соответствии с потребностями вашего собственного приложения. Манифест поддерживается в Chrome, Edge, Firefox, UC Browser, Opera и браузере Samsung. Safari имеет частичную поддержку. Более подробную информацию о настройке вы можете найти здесь.

Убедитесь, что ваш manifest.json связан с index.html следующим образом:

‹link rel="manifest" href="%PUBLIC_URL%/manifest.json" /›

Иконки также можно использовать на устройствах Apple, обновив тег ссылки в заголовке документа index.html следующим образом:

‹link rel="apple-touch-icon" href="%PUBLIC_URL%/имя-соответствующего-значка.png" /›

Вторая часть PWA — для работы даже тогда, когда пользователь находится в автономном режиме — выполняется нашими рабочими файлами службы, которые используют кеш. Файлы сервис-воркеров настраиваются только в том случае, если вы запустили шаблонный генератор с помощью команды шаблона PWA, например:

npx create-react-app name of project folder --template cra-template-pwa

В предыдущих версиях React CRA уже создавал для нас файлы для управления сервис-воркером, но теперь, после перехода на 18-ю версию React, нам нужно самим установить эти пакеты (вы должны получить «service-worker.js» и «serviceWorkerRegistration. js», сгенерированный в корневой папке), а затем вручную зарегистрируйте сервис-воркер.

Сначала вам нужно перейти внутрь index.js, затем изменить функцию serviceWorkerRegistration.unregister() на serviceWorkerRegistration.register(). Внутри В файле serviceWorkerRegistration.js вы найдете логику if-else, которая запускает различное поведение сервисного работника в зависимости от того, должен ли он работать в разных браузерах. Это относится к навигатору, что означает, по сути, браузер и операционную систему пользователя. Файл также проверяет, является ли среда рабочей или нет, перед регистрацией, поскольку сервисные работники работают только в производственном режиме.

Заключение

Что хорошо в CRA, так это то, что вы можете сосредоточиться на самом коде и не нужно тратить много времени на настройку. Минус в том, что из-за того, что все, что связано с процессом сборки, скрыто внутри React-скриптов, вы не научитесь отдельно устанавливать библиотеки и смотреть, как они работают, особенно webpack-бандер и компилятор Babel со всеми его плагинами для совместимости со старыми браузеры. Если вы хотите стать более продвинутым программистом, вы должны иметь представление о том, что такое папка dist и как ее настроить. И, наконец, вы не должны слишком уж привыкать к тому, что машины генерируют весь код за вас. Вместо этого поработайте над своей мышечной памятью и время от времени печатайте некоторые функции самостоятельно😉.