Настройка проекта React с помощью Create React App

React — одна из самых популярных библиотек JavaScript для разработки фронтенд-приложений. Это библиотека с открытым исходным кодом, которая изначально была разработана Facebook. React быстро стал популярным для создания быстрых приложений с JSX – парадигмой программирования, которая сочетает в себе JavaScript с HTML-подобным синтаксисом.

Раньше настройка проекта React была сложным процессом. Она требовала ручной настройки следующих компонентов:

• Система сборки
• Транспилятор кода (преобразует современный синтаксис в код, читаемый браузером)
• Базовая структура каталогов для проекта

К счастью, те времена давно прошли благодаря Create React App. Это замечательный инструмент, который автоматизирует все эти шаги. Create React App берет на себя транспиляцию кода, линтинг, тестирование и сборку систем. Кроме того, он поставляется с сервером, поддерживающим горячую перезагрузку (hot reloading), что означает обновление веб-страниц по мере внесения изменений. Конечно, все это делается в рамках организованной структуры каталогов.

Короче говоря, нет необходимости вручную настраивать системы сборки, такие как Webpack, или транспиляторы, такие как Babel. Теперь, когда поводов для беспокойства стало меньше, вы можете полностью сосредоточиться на фронтенд-разработке. Create React App позволяет начать работу с React с минимальной подготовкой.

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

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

Для выполнения шагов, описанных в этом руководстве, вам потребуется предварительно настроить следующее программное обеспечение.

• • Правильно настроенный сервер Ubuntu. Вы можете выполнить шаги по настройке сервера Ubuntu на CloudSigma.
  • Установленная последняя версия Node.js. Вот пошаговое руководство по установке Node.js на Ubuntu.

Шаг 1: Создание выделенного каталога проекта npm

Для пакетов Node.js npm является менеджером пакетов по умолчанию. Мы будем использовать npm для создания выделенного каталога проекта. В нем будут размещаться важные файлы, такие как package.json, в которых хранятся все метаданные о проекте и дополнительные модули зависимостей Node.js. JSON — это стандартный формат обмена данными, основанный на объектах JavaScript. Обратитесь к этому руководству, если хотите узнать больше о JSON.

Сначала создайте выделенный каталог:

Затем мы укажем npm инициализировать среду разработки внутри файла. Это создаст файл package.json , необходимый для проекта. Измените текущий каталог:

Запустите команду npm init:

Обратитесь к тому, что если вы хотите, чтобы этот каталог был частью репозитория git, рекомендуется сначала настроить его. Скрипт инициализации автоматически обнаружит его и настроит все соответствующим образом. По завершении в каталоге должен появиться файл package.json в каталоге. Откройте его в текстовом редакторе:

Шаг 2: Создание проекта React с помощью Create React App

На этом шаге мы вызовем Create React App для создания нашего демонстрационного проекта React. Этот скрипт скопирует все необходимое в новый каталог вместе со всеми зависимостями. Менеджер пакетов npm также поставляется с инструментом npx. Он используется для запуска исполняемых пакетов. Мы будем использовать его для запуска скрипта Create React App без фактической загрузки проекта.

При выполнении будет запущен create-react-app в указанном каталоге. Он также запустит команды npm install для установки зависимостей. Для простоты мы будем использовать имя cloudsigma-react-react-tutorial. Запустите следующую команду:

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

Шаг 3: Применение React-Scripts

Теперь мы кратко рассмотрим различные react-scripts которые были установлены во время установки.

• • Мы запустим test скрипт для выполнения тестового кода.
  • Скрипт build создаст минифицированную версию нашего проекта (для продакшн-окружения).
  • Наконец, скрипт eject предоставляет полный контроль над кастомизацией.

Сначала проверьте содержимое директории проекта React:

Вот описание каждого файла:

• • node_modules/: Эта директория содержит все внешние библиотеки JavaScript, которые будут использоваться приложением. Сюда редко приходится заглядывать.
  • public/: Здесь находятся базовые файлы HTML, JSON и изображений. Она служит корнем проекта.
  • src/: Эта директория содержит код React JavaScript для нашего проекта. Здесь мы проведем большую часть времени. Мы подробнее изучим эту директорию в следующей части руководства.
  • .gitignore: Это файл, который описывает, какие директории git будет игнорировать, например, директорию node_modules. Как правило, лучше исключать директории, содержащие большие файлы или файлы логов, которые не нужно включать в систему контроля версий. В данном случае он также будет включать некоторые специфичные для React директории.
  • README.md: Это файл разметки markdown, содержащий много полезной информации о Create React App. Например, он включает сводку команд и ссылки для расширенной настройки. Пока что он нам не нужен. Однако по мере развития проекта вы будете добавлять в него больше документации.

Файлы package.json и package-lock.json используются npm. При запуске первоначальной команды npx был создан базовый проект. Когда были установлены дополнительные зависимости, был создан package-lock.json. npm использует package-lock.json для обеспечения точного соответствия версий пакетов. Таким образом, если кто-то другой установит ваш проект, он получит абсолютно идентичные зависимости. Поскольку этот файл создается и управляется автоматически, вам редко придется его трогать.

Последний файл, о котором нам нужно поговорить, — это package.json. Он содержит метаданные о проекте. Например, метаданные могут включать название проекта, номер версии и зависимости. Он также содержит скрипты, которые можно использовать для запуска проекта. Ознакомьтесь с содержимым файла package.json file:

Это JSON-файл с различными объектами. Посмотрите на объект scripts. Он содержит четыре разных скрипта:

• • start
  • build
  • test
  • eject

Эти скрипты перечислены в соответствии с их важностью. Скрипт start запускает локальный сервер разработки. Далее мы подробно расскажем о том, как использовать остальные скрипты.

• • Скрипт сборки

Для запуска скрипта npm структура команды выглядит следующим образом:

Чтобы запустить скрипт build скрипт, используйте следующую команду:

Это запустит процесс компиляции кода в готовый к использованию бандл. По завершении проверьте выходную директорию:

Обратите внимание, что появилась новая директория build/ доступна. Она содержит минифицированную и оптимизированную версию остальных файлов. Рекомендуется добавить её в файл .gitignore, так как мы всегда можем сгенерировать её с помощью скрипта build скрипта.

• • Скрипт тестирования

Скрипт test — один из тех скриптов, которые не требуют параметра run для запуска через npm. Тем не менее, с ним он тоже будет работать нормально. При запуске этот скрипт запустит инструмент для тестирования под названием Jest. Тестер ищет любые файлы проекта с расширениями .spec.js или test.js и запускает их.

Следующая команда npm запустит скрипт test скрипт:

В выводе стоит обратить внимание на несколько вещей. Помните, что инструмент тестирования ищет только файлы с определенными расширениями? В данном случае есть только один набор тестов (всего один файл с .test.js расширение). Он содержит только один тест. Jest может автоматически обнаруживать тесты в иерархии кода, поэтому вы можете свободно вкладывать тесты в каталог.

Кроме того, Jest не просто запускает тест один раз и завершает работу. Он продолжает выполнять тест в терминале. Если в исходный код были внесены какие-либо изменения, он запустит тесты снова. Jest также позволяет ограничить список запускаемых тестов. Например, нажав 0, вы можете указать Jest тестировать только те файлы, которые были изменены. По мере роста наборов тестов эта опция экономит много времени. Чтобы выйти из программы запуска тестов Jest, нажмите q.

• • Скрипт Eject

Скрипт eject копирует все зависимости и конфигурационные файлы в проект, предоставляя вам полный контроль над кодом. Однако тем самым вы удаляете проект из интегрированной цепочки инструментов Create React App. После запуска это действие невозможно отменить.

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

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

Шаг 4: Запуск сервера

Теперь мы запустим локальный сервер и откроем проект в веб-браузере. Для запуска сервера у нас есть еще один скрипт. Его выполнение не требует команды npm run . При запуске скрипт запускает локальный сервер, выполняет код проекта, запускает наблюдатель и отслеживает изменения в коде. Изменения сразу же отображаются в браузере. Следующая команда запустит сервер:

В выводе будет показан URL-адрес для перехода к проекту в браузере. Также будет показана различная информация о запущенном проекте. Откройте этот URL-адрес в браузере:

Как показывает вывод, Create React App использует порт 3000 для обслуживания проекта. Если порт уже используется, Create React App будет использовать следующий доступный порт. Если у вас настроен брандмауэр, он должен разрешать трафик на порт 3000 (или порт, о котором сообщает Create React App). Вы можете узнать больше об управлении брандмауэром UFW здесь.

Чтобы выйти из сервера, нажмите Ctrl+C в окне терминала. Это завершит запущенный процесс (экземпляр сервера).

Шаг 5: Изменение домашней страницы

Далее мы узнаем, как изменять код, хранящийся в каталоге public/. Он содержит базовую HTML-страницу и служит корнем проекта. Хотя в будущем вам, возможно, не потребуется его редактировать, он служит основой проекта.

Сначала запустите сервер с помощью npm, затем перейдите в каталог public/ :

Каталог будет содержать такие файлы, как favicon.ico, logo192.png, logo512.png и т. д. Это иконки, которые пользователь, посещающий веб-страницу, увидит на своей вкладке, в браузере или на телефоне. Браузер автоматически выберет иконку подходящего размера. Со временем вы замените их на иконки, подходящие для вашего проекта. Пока мы оставим их как есть.

Файл manifest.json содержит структурированный набор метаданных. Он описывает проект, перечисляет доступные иконки и многое другое.

Файл robots.txt содержит информацию для поисковых роботов. Поисковые роботы “сканируют” Всемирную паутину, индексируя страницы для поисковых систем. Нет необходимости изменять этот файл, если у вас нет для этого конкретной причины. Например, вы можете захотеть сделать определенные URL-адреса для конкретного контента труднодоступными. Добавьте это местоположение в robots.txt, и оно не будет индексироваться поисковыми системами.

Файл index.html — это корень нашего приложения. При доступе к приложению отдается именно этот файл. Это тот файл, который вы видите на экране. Давайте быстро взглянем на него. Откройте его в текстовом редакторе:

Это довольно короткий файл. Обратите внимание, что в <body> нет ни изображений, ни слов. React создает это содержимое с помощью собственного движка и внедряет его с помощью JavaScript. Однако React должен знать, куда внедрять код. Файл index.html служит этой цели.

Давайте изменим <title> на My React App:

Затем сохраните файл и закройте редактор. Теперь проверьте веб-страницу в браузере:

Как видите, заголовок вкладки изменился на My React App. Если он не изменился автоматически, перезагрузите страницу, нажав F5 или Ctrl+R.

Давайте вернемся в текстовый редактор. Все проекты React должны начинаться с корневого элемента. На одной странице их может быть несколько. Однако как минимум один является обязательным. Он указывает React, куда поместить весь сгенерированный HTML-код. В нашем index.html, найдите расположение элемента <div id="root">. Именно этот <div> React будет использовать для будущих изменений. Попробуйте изменить значение id с root на base:

 

 

После этого перезагрузите страницу в браузере. Содержимое не отобразится. Как показывают Инструменты веб-разработчика в Firefox, возникает ошибка:

Вернитесь в текстовый редактор и измените значение id обратно на root:

Шаг 6: Тег заголовка и изменения стилей

Итак, мы запустили локальный сервер и внесли небольшие изменения в корневой HTML-файл. Теперь мы будем работать с компонентами React, расположенными в директории src/ директории. Мы внесем изменения в код CSS и JavaScript. Изменения будут применены автоматически с помощью горячей перезагрузки.

Если сервер был остановлен, запустите его с помощью npm. Затем посмотрите на содержимое директории src/ :

Здесь есть несколько файлов JavaScript и CSS. Мы разберем их один за другим.

• ServiceWorker.js

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

• SetupTests.js и App.test.js

Как следует из названия этих файлов, они используются для тестирования. Каждый раз, когда мы запускали скрипт test с помощью npm, он запускал эти файлы. Файл setupTests.js содержит несколько пользовательских методов expect.

Давайте взглянем на App.test.js. Откройте его в текстовом редакторе:

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

• CSS Files

Доступны различные файлы стилей: App.css, index.css, и logo.svg. В React можно использовать несколько методов стилизации. Самый простой способ — писать обычный CSS, так как для этого не требуется дополнительная настройка.

Вы можете импортировать CSS напрямую в компонент. Это позволяет разделять CSS-файлы, чтобы они применялись только к отдельному компоненту. На самом деле вы не отделяете CSS от JavaScript. Скорее, вы группируете все связанные элементы (CSS, JavaScript, изображения и разметку) вместе.

Откройте App.css в текстовом редакторе:

Это стандартный CSS-файл без специальных препроцессоров CSS. При желании вы можете добавить их позже. Create React App стремится быть нейтральным, предлагая при этом надежное готовое решение.

Давайте внесем изменения и посмотрим на них в действии. Измените значение background-color на blue:

Проверьте изменения в браузере:

• • Index.js

Теперь пришло время внести изменения в код React JavaScript. Откройте index.js с помощью текстового редактора:

В самом верху импортируются React, ReactDOM, index.css, App, и serviceWorker. Импортируя React, мы подключаем код, необходимый для преобразования JSX в JavaScript. ReactDOM — это код, который связывает наш код React с базовым элементом ( index.html, например). Посмотрите на следующую строку:

Она указывает React найти id с меткой root и внедрить туда код React. <App/> является корневым элементом, и все остальное разветвляется от него.

Обратите внимание, что мы также импортировали файлы CSS (например, index.css) но на самом деле ничего с ними не делали. Импортируя их, мы фактически сообщаем Webpack через скрипты React, что нужно включить CSS-код в итоговый скомпилированный бандл. В противном случае стили CSS не отобразятся.

• App.js

Далее мы рассмотрим App.js. Откройте его в текстовом редакторе:

 

Давайте посмотрим, как изменение его содержимого повлияет на наш проект. Измените содержимое тега <p>:

Затем сохраните файл и проверьте изменения в браузере:

Вуаля! Вы внесли свои первые изменения в компонент React!

Обратите внимание еще на одну вещь. Посмотрите на элемент <img>:

Обратите внимание, что logo передается в фигурных скобках. При передаче атрибутов (которые не являются строками или числами), они должны передаваться в фигурных скобках. Тогда React будет обрабатывать их как объекты JavaScript, а не как строки.

В данном случае приложение на самом деле не импортирует изображение. Вместо этого оно ссылается на него. Когда Webpack собирает проект, он помещает изображение в соответствующее место. Мы можем проверить это в браузере. Откройте Инструменты веб-разработчика в Firefox:

Webpack стремится назначать уникальные пути к файлам для всех изображений. Поэтому, даже если изображения были импортированы с одинаковым именем, они будут иметь разные пути.

Шаг 7: Сборка проекта

На этом шаге мы узнаем, как скомпилировать проект в готовый к развертыванию пакет. Запустите терминал и выполните build скрипт проекта:

Компилятор создаст специальную директорию build/, куда поместит результат работы. Чтобы увидеть, что делает процесс компиляции, откройте файл index.html из директории build/:

Как видите, весь код скомпилирован и минифицирован до минимально возможного размера. Читаемость здесь не важна, так как этот код не предназначен для чтения пользователями. Минифицированный код занимает меньше места, сохраняя при этом всю свою функциональность. В отличие от языков, где пробелы очень важны (например, Python), веб-языки (HTML, CSS и JavaScript) не требуют правильного форматирования для интерпретации браузером.

Заключение

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

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

Приятной работы!