Создание сайтов в Краснодаре, на Кубани. Создайте приложение React: быстро подготовьте проекты React

Начать новый проект React не так просто. Вместо того, чтобы погружаться прямо в код и воплощать свое приложение в жизнь, вам придется потратить время на настройку правильных инструментов сборки, чтобы настроить локальную среду разработки, модульное тестирование и производственную сборку. К счастью, помощь всегда под рукой в ​​виде приложения Create React.

Create-React-App — это инструмент командной строки от Facebook, который позволяет создавать новый проект React и использовать предварительно настроенную сборку веб-пакета для разработки. Он уже давно стал неотъемлемой частью экосистемы React, что устраняет необходимость поддерживать сложные конвейеры сборки в вашем проекте, позволяя вам сосредоточиться на самом приложении.

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

Create React App — это автономный инструмент, который можно запустить с помощью npm или Yarn.

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

npx create-react-appnew-app

cd new-app

npm start

Если вы предпочитаете Yarn, вы можете сделать это следующим образом:

yarn create react-appnew-app

cd new app

yarn start

Create React App установит следующую структуру проекта:

new-app

├──.gitignore

├── node_modules

├── package.json

├── public

│ ├── favicon.ico

│ ├── index.html

│ ├── logo192.png

│ ├── logo512.png

│ ├── manifest.json

│ └── robots.txt

├── README.md

├── src

│ ├── App.css

│ ├── App.js

│ ├── App.test.js

│ ├── index.css

│ ├── index.js

│ ├── logo.svg

│ ├── reportWebVitals.js

│ └── setupTests.js

└── yarn.lock

Он также добавит react-scriptsв ваш проект пакет, который будет содержать все сценарии конфигурации и сборки. Другими словами, ваш проект зависит от react-scripts, а не от create-react-appсамого себя. После завершения установки вы можете запустить сервер разработки и начать работу над своим проектом.

Основные характеристики

Локальный сервер разработки

Первое, что вам понадобится, это локальная среда разработки. Запуск npm startзапустит сервер разработки веб-пакетов с наблюдателем, который автоматически перезагрузит приложение, как только вы что-то измените. Начиная с версии 4, приложение Create React поддерживает быстрое обновление React в качестве альтернативы горячей замене модуля. Как и его предшественник, это позволяет нам быстро обновлять части приложения после внесения изменений в кодовую базу, но также имеет некоторые новые функции. Fast Reload попытается перезагрузить только измененную часть приложения, сохранит состояние функциональных компонентов и хуков и автоматически перезагрузит приложение после исправления синтаксической ошибки.

Вы также можете обслуживать свое приложение через HTTPS, установив HTTPSпеременную trueперед запуском сервера.

Приложение будет создано со многими встроенными функциями.

ЭС6 и ЭС7

Приложение поставляется с собственной предустановкой Babel — babel-preset-react-app — для поддержки набора функций ES6 и ES7. Некоторые из поддерживаемых функций:

Асинхронно/ждите

Свойства остатка/расширения объекта

Динамический импорт ()

Поля класса и статические свойства

Обратите внимание, что Create React App не предоставляет никаких полифилов для функций времени выполнения, поэтому, если вам нужны какие-либо из них, вам нужно включить их самостоятельно.

Импорт активов

Вы можете импортировать CSS-файлы, изображения или шрифты из модулей JavaScript, которые позволяют объединять файлы, используемые в вашем приложении. После сборки приложения Create React App скопирует эти файлы в папку сборки. Вот пример импорта изображения:

import image from '. /image.png’;

console.log (image) ; // image will contain the public URL of the image

Вы также можете использовать эту функцию в CSS:

.image {

background-image: url (. /image.png) ;

}

Стайлинг

Как упоминалось в предыдущем разделе, приложение Create React позволяет добавлять стили, просто импортируя необходимые файлы CSS. При сборке приложения все файлы CSS будут объединены в один пакет и добавлены в папку сборки.

Приложение Create React также поддерживает модули CSS. По соглашению файлы с именем as *.module.cssрассматриваются как модули CSS. Этот метод позволяет нам избежать конфликтов селекторов CSS, поскольку приложение Create React создаст уникальные селекторы классов в результирующих файлах CSS.

В качестве альтернативы, если вы предпочитаете использовать препроцессоры CSS, вы можете импортировать файлы Sass...scssОднако вам нужно будет установить node-sassпакет отдельно.

Кроме того, приложение Create React позволяет добавлять сбросы CSS, добавляя их @import-normalize; в любом месте ваших файлов CSS. Стили также подвергаются постобработке, которая минимизирует их, добавляет префиксы поставщиков с помощью Autoprefixer и заполняет неподдерживаемые функции, такие как allсвойство, настраиваемые свойства и диапазоны запросов мультимедиа.

Запуск модульных тестов

Executing npm testзапустит тесты с использованием Jest и запустит наблюдатель, чтобы повторно запускать их всякий раз, когда вы что-то меняете:

PASS src/App.test.js

✓ renders learn react link (19 ms)

Test Suites: 1 passed, 1 total

Tests: 1 passed, 1 total

Snapshots: 0 total

Time: 0.995 s

Ran all test suites.

Watch Usage

› Press f to run only failed tests.

› Press o to only run tests related to changed files.

› Press q to quit watch mode.

› Press p to filter by a filename regex pattern.

› Press t to filter by a test name regex pattern.

› Press Enter to trigger a test run.

Jest — это средство запуска тестов, также разработанное Facebook в качестве альтернативы Mocha или Karma. Он запускает тесты в среде Node вместо реального браузера, но предоставляет некоторые специфичные для браузера глобальные переменные с помощью jsdom.

Jest также интегрирован с вашей системой контроля версий и по умолчанию запускает тесты только для файлов, измененных с момента вашего последнего коммита. Подробнее об этом читайте в «Как тестировать компоненты React с помощью Jest «.

ESLint

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

Создание производственного пакета

Когда у вас, наконец, появится что-то для развертывания, вы можете создать рабочий пакет, используя файлы npm run build. Это создаст оптимизированную сборку вашего приложения, готовую к развертыванию в вашей среде. Сгенерированные артефакты будут помещены в папку сборки:

build

├── asset-manifest.json

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

└── static

├── css

│ ├── main.ab7136cd.chunk.css

│ └── main.ab7136cd.chunk.css.map

├── js

│ ├── 2.8daf1b57.chunk.js

│ ├── 2.8daf1b57.chunk.js.LICENSE.txt

│ ├── 2.8daf1b57.chunk.js.map

│ ├── 3.d75458f9.chunk.js

│ ├── 3.d75458f9.chunk.js.map

│ ├── main.1239da4e.chunk.js

│ ├── main.1239da4e.chunk.js.map

│ ├── runtime-main.fb72bfda.js

│ └── runtime-main.fb72bfda.js.map

└── media

└── logo.103b5fa1.svg

Развертывание

Поскольку сборка вашего приложения Create React App состоит только из статических файлов, вы можете развернуть их в удаленной среде разными способами. Вы можете использовать сервер Node.js, если работаете в среде Node.js, или обслуживать приложение с помощью другого веб-сервера, например NGINX.

Раздел развертывания в официальной документации содержит обзор того, как развернуть приложение в Azure, AWS, Heroku, Netlify и других популярных средах хостинга.

Особенности разработки

Переменные среды

Вы можете использовать переменные среды Node для ввода значений в код во время сборки. Приложение Create React автоматически ищет любые переменные среды, начинающиеся с REACT_APP_и делает их доступными в глобальном файле process.env. Эти переменные могут быть в.envфайле для удобства:

REACT_APP_BACKEND=http: //my-api.com

REACT_APP_BACKEND_USER=root

Затем вы можете ссылаться на них в своем коде:

fetch ({process.env.REACT_APP_SECRET_CODE}/endpoint)

Проксирование на серверную часть

Если ваше приложение будет работать с удаленной серверной частью, вам может потребоваться возможность прокси-запросов во время локальной разработки, чтобы обойти CORS. Это можно настроить, добавив поле прокси в ваш package.jsonфайл:

«proxy»: «http: //localhost:4000»,

Таким образом, сервер будет пересылать любой запрос, который не указывает на статический файл, на указанный адрес.

Разделение кода

Приложение Create React поддерживает разделение кода с помощью динамической директивы import (). Вместо того, чтобы возвращать значения, экспортированные модулем, он возвращает обещание, которое разрешается в эти значения. В результате модули, импортированные таким образом, не будут включены в окончательный комплект, а будут встроены в отдельные файлы. Это позволяет уменьшить размер конечного пакета и загружать контент по требованию.

Поддержка машинописного текста

Вы можете включить TypeScript, чтобы получить преимущества статического анализа типов при создании нового проекта. Это можно сделать, используя другой шаблон, отличный от стандартного, для создания проекта:

npx create-react-appmy-app —template typescript

Вы также можете добавить поддержку TypeScript в существующий проект, как описано в документации.

Прогрессивные веб-приложения

Точно так же вы можете добавить прогрессивную поддержку веб-приложений. Вы можете использовать сервис-воркеры, добавив src/service-worker.jsфайл. Начиная с v4, это будет внедряться в приложение с помощью библиотеки Workbox.

Чтобы включить сервис-воркеры в новый проект, их необходимо сгенерировать из пользовательского шаблона:

npx create-react-appmy-app —template cra-template-pwa

# or with TypeScript support

npx create-react-appmy-app —template cra-template-pwa-typescript

Веб-виталы

Приложение Create React позволяет измерить производительность и скорость отклика вашего приложения. Это делается путем отслеживания метрик, определяемых web Vitals и измеряемых с помощью библиотеки web-vitals. Метрики включают в себя наибольшую отрисовку содержимого, которая измеряет производительность загрузки, задержку первого ввода и совокупное смещение макета для скорости отклика.

Приложение Create React предоставляет удобную функцию для отслеживания всех доступных метрик:

// index.js

reportWebVitals (console.log) ;

Не принимая участия

Если в какой-то момент вы почувствуете, что предоставленных функций уже недостаточно для вашего проекта, вы всегда можете отказаться от использования react-scripts, запустив npm run eject. Это скопирует конфигурацию веб-пакета и создаст скрипты react-scriptsв ваш проект и удалит зависимость. После этого вы можете изменить конфигурацию по своему усмотрению.

В качестве альтернативы вы также можете разветвить react-scriptsи поддерживать свою ветку с нужными вам функциями. Это может быть проще, если вам нужно поддерживать много проектов.

В заключение

Если вы хотите начать новый проект React, не ищите дальше. Create React App позволит вам быстро начать работу над вашим приложением вместо того, чтобы писать еще одну конфигурацию веб-пакета. Это также упрощает обновление инструментов сборки с помощью одной команды (npm install react-scripts@latest) — обычно это сложная и трудоемкая задача.

Приложение Create React стало неотъемлемой частью экосистемы React. Независимо от того, используете ли вы его для создания быстрого прототипа или для создания следующего крупного проекта, он сэкономит вам много часов времени разработчиков.