Как настроить проект React с помощью приложения Create React

Автор выбрал программу Write for DOnations.

Введение

JSX.

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

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

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

Предпосылки

Чтобы следовать этому руководству, вам понадобится следующее:

• Как установить Node.js на Ubuntu 18.04.
• Это также поможет иметь базовое понимание JavaScript, которое вы можете найти в серии How To Code in JavaScript, наряду с базовыми знаниями HTML и CSS.

Шаг 1 — Создание нового проекта с помощью приложения Create React

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

Когда вы установили Node, вы также установили приложение для управления пакетами под названием How To Use Node.js Modules with npm and package.json tutorial.

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

Исполняемый пакет запустит установку create-react-app в указанный вами каталог. Он начнется с создания нового проекта в каталоге, который в этом руководстве будет называться digital-ocean-tutorial. Опять же, этот каталог не обязательно должен существовать заранее; исполняемый пакет создаст его для вас. Сценарий также запустит npm install внутри каталога проекта, который загрузит все дополнительные зависимости.

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

npx create-react-app digital-ocean-tutorial

Эта команда запустит процесс сборки, который загрузит базовый код вместе с рядом зависимостей.

Когда сценарий завершится, вы увидите сообщение об успешном завершении, в котором говорится:

Output
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-tutorial
  npm start

Happy hacking!

your_file_path будет вашим текущим путем. Если вы пользователь macOS, это будет что-то вроде /Users/your_username; если вы находитесь на сервере Ubuntu, он скажет что-то вроде /home/your_username.

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

Примечание. Существует еще один менеджер пакетов для JavaScript, называемый документацией yarn.

Если вы ранее установили yarn в своей системе, вы увидите список команд yarn, таких как yarn start, которые работают так же, как npm команды. Вы можете запускать команды npm, даже если у вас установлен yarn. Если вы предпочитаете yarn, просто замените npm на yarn во всех будущих командах. Результаты будут такими же.

Теперь ваш проект настроен в новом каталоге. Перейдите в новый каталог:

cd digital-ocean-tutorial

Теперь вы находитесь в корне вашего проекта. На этом этапе вы создали новый проект и добавили все зависимости. Но вы не предприняли никаких действий для запуска проекта. В следующем разделе вы запустите пользовательские сценарии для сборки и тестирования проекта.

Шаг 2 — Использование реактивных скриптов

На этом шаге вы узнаете о различных react-scripts, которые устанавливаются вместе с репозиторием. Сначала вы запустите скрипт test, чтобы выполнить тестовый код. Затем вы запустите скрипт build, чтобы создать уменьшенную версию. Наконец, вы увидите, как скрипт eject может дать вам полный контроль над настройкой.

Теперь, когда вы находитесь внутри каталога проекта, осмотритесь. Вы можете либо открыть весь каталог в текстовом редакторе, либо, если вы находитесь в терминале, вы можете вывести список файлов с помощью следующей команды:

ls -a

Флаг -a гарантирует, что вывод также включает скрытые файлы.

В любом случае вы увидите такую структуру:

Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Давайте объясним их один за другим:

• node_modules/ содержит все внешние библиотеки JavaScript, используемые приложением. Вам редко придется открывать его.
• Каталог public/ содержит некоторый базовый HTML, шаг 4.
• Каталог src/ содержит код React JavaScript для вашего проекта. Большая часть вашей работы будет находиться в этом каталоге. Вы подробно изучите этот каталог на шаге 5.
• Файл .gitignore содержит некоторые каталоги по умолчанию и файлы, которые git — ваша система управления версиями — будет игнорировать, например каталог node_modules. Игнорируемые элементы, как правило, представляют собой большие каталоги или файлы журналов, которые вам не понадобятся в системе управления версиями. Он также будет включать в себя некоторые каталоги, которые вы создадите с помощью некоторых сценариев React.
• README.md — это файл уценки, который содержит много полезной информации о приложении Create React, например сводку команд и ссылки на расширенную настройку. На данный момент лучше оставить файл README.md таким, каким вы его видите. По мере продвижения вашего проекта вы будете заменять информацию по умолчанию более подробной информацией о вашем проекте.

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

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

Откройте файл package.json в своем любимом текстовом редакторе:

nano package.json

Когда вы откроете файл, вы увидите объект JSON, содержащий все метаданные. Если вы посмотрите на объект scripts, вы найдете четыре разных скрипта: start, build, test, и извлечь.

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

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

Чтобы запустить любой скрипт npm, вам просто нужно ввести npm run script_name в терминале. Есть несколько специальных скриптов, в которых вы можете опустить часть команды run, но всегда можно запустить полную команду. Чтобы запустить скрипт build, введите в терминале следующее:

npm run build

Вы сразу увидите следующее сообщение:

Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build...
...

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

Когда он будет завершен, вы увидите следующий вывод:

Output
...
Compiled successfully.

File sizes after gzip:

  39.85 KB  build/static/js/9999.chunk.js
  780 B      build/static/js/runtime-main.99999.js
  616 B     build/static/js/main.9999.chunk.js
  556 B     build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Перечислите содержимое проекта, и вы увидите несколько новых каталогов:

ls -a

Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Теперь у вас есть каталог build. Если вы открыли файл .gitignore, вы могли заметить, что каталог build игнорируется git. Это потому, что каталог build — это просто уменьшенная и оптимизированная версия других файлов. Нет необходимости использовать контроль версий, так как вы всегда можете запустить команду build. Вы изучите вывод позже; а пока пора перейти к скрипту test.

Тестовый сценарий

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

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

npm test

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

Output
 PASS  src/App.test.js
  ✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.204s
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.

Здесь есть несколько вещей, на которые стоит обратить внимание. Во-первых, как отмечалось ранее, он автоматически обнаруживает любые файлы с тестовыми расширениями, включая .test.js и .spec.js. В этом случае имеется только один набор тестов, то есть только один файл с расширением .test.js, и этот набор тестов содержит только один тест. Jest может обнаруживать тесты в вашей иерархии кода, поэтому вы можете вложить тесты в каталог, и Jest найдет их.

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

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

Наконец, вы можете выйти из средства запуска тестов, набрав q. Сделайте это сейчас, чтобы восстановить командную строку.

Скрипт извлечения

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

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

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

К этому моменту вы выполнили сценарии для создания и тестирования своего кода. На следующем шаге вы запустите проект на рабочем сервере.

Шаг 3 — Запуск сервера

На этом шаге вы инициализируете локальный сервер и запустите проект в своем браузере.

Вы начинаете свой проект с другого скрипта npm. Как и npm test, этому сценарию не нужна команда run. Когда вы запустите сценарий, вы запустите локальный сервер, выполните код проекта, запустите наблюдатель, который прослушивает изменения кода, и откроете проект в веб-браузере.

Запустите проект, введя следующую команду в корне вашего проекта. Для этого руководства корнем вашего проекта является каталог digital-ocean-tutorial. Обязательно откройте это в отдельном терминале или вкладке, потому что этот скрипт будет продолжать работать до тех пор, пока вы это разрешаете:

npm start

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

Output
Compiled successfully!

You can now view digital-ocean-tutorial in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Если вы запускаете скрипт локально, он откроет проект в окне вашего браузера и сместит фокус с терминала на браузер.

Если этого не произойдет, вы можете посетить http://localhost:3000/, чтобы увидеть сайт в действии. Если у вас уже есть другой сервер, работающий на порту 3000, ничего страшного. Приложение Create React обнаружит следующий доступный порт и запустит сервер с ним. Другими словами, если у вас уже есть один проект, работающий на порту 3000, этот новый проект запустится на порту 3001.

Если вы запускаете это с удаленного сервера, вы все равно можете видеть свой сайт без какой-либо дополнительной настройки. Адрес будет следующим: http://your_server_ip:3000. Если у вас настроен брандмауэр, вам необходимо открыть порт на удаленном сервере.

В браузере вы увидите следующий проект шаблона React:

Пока скрипт работает, у вас будет активный локальный сервер. Чтобы остановить сценарий, либо закройте окно или вкладку терминала, либо введите CTRL+C или ⌘-+c в окне или вкладке терминала, на которой запущен ваш сценарий.

На данный момент вы запустили сервер и запускаете свой первый код React. Но прежде чем вносить какие-либо изменения в код JavaScript React, вы в первую очередь увидите, как React отображает страницу.

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

На этом шаге вы измените код в каталоге public/. Каталог public содержит вашу базовую HTML-страницу. Это страница, которая будет служить корнем для вашего проекта. Вы редко будете редактировать этот каталог в будущем, но это основа, с которой начинается проект, и важная часть проекта React.

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

nano public/

Кроме того, вы можете просмотреть список файлов с помощью команды ls:

ls public/

Вы увидите список таких файлов:

Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico, logo192.png и logo512.png — это значки, которые пользователь увидит либо на вкладке своего браузера, либо на своем телефон. Браузер выберет значки нужного размера. В конце концов, вы захотите заменить их значками, которые больше подходят для вашего проекта. А пока вы можете оставить их в покое.

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

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

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

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

nano public/index.html

Вот что вы увидите:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

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

В текстовом редакторе измените тег <title> с React App на Sandbox:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    ...
    <title>Sandbox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Сохраните и выйдите из текстового редактора. Проверьте свой браузер. Заголовок — это имя, расположенное на вкладке браузера. Он будет обновляться автоматически. Если нет, обновите страницу и обратите внимание на изменения.

Теперь вернитесь в текстовый редактор. Каждый проект React начинается с корневого элемента. На странице может быть несколько корневых элементов, но должен быть хотя бы один. Вот как React знает, куда поместить сгенерированный HTML-код. Найдите элемент

. Это div, который React будет использовать для всех будущих обновлений. Измените id с root на base:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="base"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Сохраните изменения.

Вы увидите ошибку в своем браузере:

React искал элемент с id root. Теперь, когда его нет, React не может запустить проект.

Измените имя обратно с base на root:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Сохраните и закройте index.html.

На этом этапе вы запустили сервер и внесли небольшое изменение в корневую HTML-страницу. Вы еще не изменили код JavaScript. В следующем разделе вы обновите код React JavaScript.

Шаг 5 — Изменение тега заголовка и стиля

На этом шаге вы сделаете свое первое изменение в компоненте React в каталоге src/. Вы внесете небольшие изменения в код CSS и JavaScript, которые будут автоматически обновляться в вашем браузере с помощью встроенной горячей перезагрузки.

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

ls src/

Вы увидите следующие файлы в терминале или текстовом редакторе.

Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

Давайте пройдемся по этим файлам по одному.

Сначала вы не потратите много времени на файл serviceWorker.js, но он может оказаться важным, когда вы начнете создавать прогрессивные веб-приложения. Service Worker может делать много вещей, включая push-уведомления и автономное кэширование, но пока лучше оставить его в покое.

Следующими файлами, на которые стоит обратить внимание, являются setupTests.js и App.test.js. Они используются для тестовых файлов. На самом деле, когда вы запускали npm test на шаге 2, скрипт запускал эти файлы. Файл setupTests.js короткий; все, что он включает, — это несколько пользовательских методов expect. Вы узнаете больше об этом в следующих уроках этой серии.

Откройте App.test.js:

nano src/App.test.js

Когда вы откроете его, вы увидите базовый тест:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Тест ищет в документе фразу learn react. Если вы вернетесь в браузер, в котором запущен ваш проект, вы увидите фразу на странице. Тестирование React отличается от большинства интеграционных тестов.

Далее вы увидите несколько файлов стилей: App.css, index.css и logo.svg. Есть несколько способов работы со стилями в React, но проще всего написать простой CSS, поскольку он не требует дополнительной настройки.

Существует несколько файлов CSS, потому что вы можете импортировать стили в компонент, как если бы они были другим файлом JavaScript. Поскольку у вас есть возможность импортировать CSS непосредственно в компонент, вы также можете разделить CSS, чтобы применить его только к отдельному компоненту. То, что вы делаете, это разделение проблем. Вы не отделяете весь CSS от JavaScript. Вместо этого вы сгруппируете все связанные CSS, JavaScript, разметку и изображения.

Откройте App.css в текстовом редакторе. Если вы работаете из командной строки, вы можете открыть его с помощью следующей команды:

nano src/App.css

Это код, который вы увидите:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

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

Чтобы увидеть это в действии, внесите небольшое изменение в background-color в App.css. Измените его с #282c34 на синий, затем сохраните файл. Окончательный стиль будет выглядеть так:

.App {
  text-align: center;
}
...
.App-header {
  background-color: blue
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Проверьте свой браузер. Вот как это выглядело раньше:

Вот как это будет выглядеть после изменения:

Идите вперед и измените background-color обратно на #282c34.

.App {
  text-align: center;

...

.App-header {
  background-color: #282c34
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Сохраните и закройте файл.

Вы внесли небольшое изменение в CSS. Теперь пришло время внести изменения в код React JavaScript. Начните с открытия index.js.

nano src/index.js

Вот что вы увидите:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Вверху вы импортируете React, ReactDOM, index.css, App и serviceWorker. . Импортируя React, вы фактически загружаете код для преобразования JSX в JavaScript. JSX — это HTML-подобные элементы. Например, обратите внимание, что когда вы используете App, вы обрабатываете его как HTML-элемент . Вы узнаете об этом подробнее в следующих уроках этой серии.

ReactDOM — это код, который соединяет ваш код React с базовыми элементами, такими как страница index.html, которую вы видели в public/. Посмотрите на следующую выделенную строку:

...
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();

Этот код указывает React найти элемент с id root и внедрить туда код React. — это ваш корневой элемент, и оттуда все ответвления. Это отправная точка для всего будущего кода React.

В верхней части файла вы увидите несколько импортов. Вы импортируете index.css, но ничего с ним не делаете. Импортируя его, вы указываете Webpack через сценарии React включить этот код CSS в окончательный скомпилированный пакет. Если вы не импортируете его, он не появится.

Выйдите из src/index.js.

На данный момент вы еще не видели ничего из того, что просматриваете в своем браузере. Чтобы увидеть это, откройте App.js:

nano src/App.js

Код в этом файле будет выглядеть как ряд обычных HTML-элементов. Вот что вы увидите:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Измените содержимое тега <p> с Edit src/App.js и сохраните для перезагрузки. на Hello, world и сохраните изменения.

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
...

Зайдите в свой браузер, и вы увидите изменения:

Вы сделали свое первое обновление компонента React.

Прежде чем уйти, обратите внимание еще на несколько вещей. В этом компоненте вы импортируете файл logo.svg и назначаете его переменной. Затем в элементе <img> вы добавляете этот код как src.

Здесь происходит несколько вещей. Посмотрите на элемент img:

...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
...

Обратите внимание, как вы передаете логотип в фигурные скобки. Каждый раз, когда вы передаете атрибуты, которые не являются строками или числами, вам нужно использовать фигурные скобки. React будет рассматривать их как JavaScript, а не как строки. В этом случае вы на самом деле не импортируете изображение; вместо этого вы ссылаетесь на изображение. Когда Webpack соберет проект, он обработает изображение и установит источник в соответствующее место.

Выйдите из текстового редактора.

Если вы посмотрите на элементы DOM в своем браузере, вы увидите, что он добавляет путь. Если вы используете Chrome, вы можете проверить элемент, щелкнув элемент правой кнопкой мыши и выбрав «Проверить».

Вот как это будет выглядеть в браузере:

В DOM есть строка:

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

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

На данный момент вы внесли небольшое изменение в код React JavaScript. На следующем шаге вы будете использовать команду build для минимизации кода в небольшой файл, который можно развернуть на сервере.

Шаг 6 — Создание проекта

На этом шаге вы соберете код в пакет, который можно будет развернуть на внешних серверах.

Вернитесь к своему терминалу и создайте проект. Вы запускали эту команду раньше, но напомню, что эта команда выполнит скрипт build. Он создаст новый каталог с объединенными и минимизированными файлами. Чтобы выполнить сборку, выполните следующую команду из корня вашего проекта:

npm run build

Код будет компилироваться с задержкой, и когда он будет завершен, у вас будет новый каталог с именем build/.

Откройте build/index.html в текстовом редакторе.

nano build/index.html

Вы увидите что-то вроде этого:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>

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

Заключение

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

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

Если вы хотите увидеть React в действии, попробуйте наш учебник «Как отображать данные из API DigitalOcean с помощью React».