Как запустить react

Создаём новое React-приложение

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Start a New React Project for the recommended ways to create an app.

Используйте встроенный набор инструментов для лучшего взаимодействия пользователя и разработчика.

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

• Масштабирование до большого количества файлов и компонентов.
• Использование сторонних библиотек из npm.
• Раннее обнаружение распространённых ошибок.
• Отражение изменений CSS и JS на лету в процессе разработки.
• Оптимизация кода для продакшена.

Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.

Возможно, вам не нужен дополнительный набор инструментов

Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега на HTML-странице, при необходимости с JSX.

Также это самый простой способ добавить React в существующий веб-сайт. Вы всегда можете расширить набор инструментов, если посчитаете это нужным.

Рекомендуемый набор инструментов

Команда React в первую очередь рекомендует следующие решения:

• Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
• Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
• Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
• Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.

Create React App

Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.

Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:

npx create-react-app my-app cd my-app npm start

Create React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.

Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build . Вы можете узнать больше о Create React App из его README и его пользовательского руководства.

Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.

Gatsby — лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.

Более гибкие наборы инструментов

Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:

• Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
• Nx — набор инструментов для ведения фулстэк разработки в монорепозиториях, который обладает встроенной поддержкой React, Next.js, Express и так далее.
• Parcel — быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
• Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.

Создание набора инструментов с нуля

В набор инструментов для сборки JavaScript обычно входят:

• Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
• Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
• Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.

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

Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.

Как быстро запустить React приложение на локальном сервере

Сперва необходимо установить некоторые программы. Если вы работаете на Windows, то рекомендую установить приложение Git Bash для работы с командной строкой. На UNIX-подобных операционных системах Bash является предустановленной командной оболочкой.

Далее вам понадобится менеджер пакетов npm (Node package manager), входящий в состав Node.js (среда выполнения JavaScript). npm устанавливается автоматически с установкой Node. Поэтому устанавливаем Node. Выбирайте версию с LTS (long-term support). По завершении установки открываем уже установленное приложение Git Bash и убеждаемся, что Node установлен: вводим команду $ which node, которая покажет путь к файлу, например /c/Program Files/nodejs/node. Вы также можете проверить установленную версию Node командой $ node -v.

Итак, мы установили необходимые программы и можем приступать непосредственно к запуску шаблонного приложения на React. Приложение React можно создать вручную, но пакет create-react-app позволяет быстро запустить шаблонную версию приложения. Преимущество такого подхода заключается в согласованной структуре приложения, а также в готовом скрипте сборки и сервере разработки.

Запуск приложения на React

Мы будем использовать npx (инструмент запуска пакетов, который поставляется с npm) для установки и запуска пакета create-react-app. В интерфейсе командной строки (в открытом Git Bash приложении) вводим: $ npx create-react-app myapp, где myapp — название папки, в которой будет располагаться ваше приложение — поэтому выбираете любое название. После введенной команды ожидаем установки необходимых файлов.

По завершении установки вводим две команды: $ cd myapp — это переместит вас в папку вашего приложения. И последняя команда для запуска локального сервера: $ npm start. Эта команда автоматически откроет начальную страницу вашего приложения в вашем браузере по умолчанию.

Поздравляю! Только что вы запустили шаблонное приложение React на локальном сервере. Теперь можно начинать кодить!

Создание и настройка проекта React с помощью приложения Create React App

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

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

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

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

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

Для прохождения этого обучающего руководства вам потребуется следующее:

• Node.js версии 10.16.0, установленный на вашем компьютере. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.
• Также вам нужно понимать основы языка JavaScript, для изучения которого вам подойдет серия Программирование на JavaScript, а также обладать базовыми знаниями языков HTML и CSS.

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

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

При установке Node вы также установили приложение для управления пакетами npm . npm установит пакеты JavaScript для вашего проекта и будет отслеживать детали проекта. Если вы хотите узнать больше об npm , воспользуйтесь обучающим руководством Использование модулей Node.js с npm и package.json.

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

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

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

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

После успешного выполнения скрипта вы увидите соответствующее сообщение:

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 . Он поддерживается Facebook и во многом аналогичен по функционалу npm . Изначально в yarn были добавлены некоторые новые функции, такие как блокировка файлов, однако сейчас они реализованы и в npm . Кроме того, в yarn имеются и другие функции, такие как кэширование в автономном режиме. О других отличиях можно узнать из документации по yarn .

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

Теперь ваш проект настроен в новой директории. Перейдите в новую директорию:

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

Шаг 2 — Использование скриптов react-scripts

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

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

Флаг -a обеспечивает добавление в вывод скрытых файлов.

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

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

Расскажем обо всех элементах подробнее:

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

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

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

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

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

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

Скрипт build

Для запуска любого скрипта npm нужно просто ввести в терминале команду npm run script_name . Существует несколько особых скриптов, где можно опустить 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 App компилирует ваш код в пригодный для использования пакет.

После завершения вы увидите следующее:

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 

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

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

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

Скрипт test

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

Для запуска скрипта 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 . Сделайте это сейчас, чтобы вернуться в командную строку.

Скрипт eject

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

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

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

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

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

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

Для запуска проекта используется еще один скрипт npm . Как и скрипт npm test , этот скрипт не требует использования команды run . Этот скрипт запускает локальный сервер, выполняет код проекта, запускает программу отслеживания изменений кода и открывает проект в браузере.

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

Перед запуском сервера вы ненадолго увидите замещающий текст, а потом появится следующий экран:

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. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

digital-ocean-tutorial/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" />  link rel="manifest" href="%PUBLIC_URL%/manifest.json" />  title>React Apptitle> head> body> noscript>You need to enable JavaScript to run this app.noscript> div id="root">div>  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 самостоятельно строит всю структуру HTML и вставляет ее с помощью JavaScript. Однако React нужно знать, куда вставлять код, и для этого и используется файл index.html .

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

digital-ocean-tutorial/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" /> . title>Sandboxtitle> head> body> noscript>You need to enable JavaScript to run this app.noscript> div id="root">div>  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 :

digital-ocean-tutorial/public/index.html

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>  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 :

digital-ocean-tutorial/public/index.html

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>  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/ . Вы можете открыть полную директорию в предпочитаемом текстовом редакторе или вывести проект на терминал с помощью следующей команды:

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

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

Рассмотрим каждый из этих файлов по отдельности.

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

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

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

Когда вы откроете этот файл, вы увидите простой тест:

digital-ocean-tutorial/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 отличается от большинства блочных тестов. Поскольку компоненты могут содержать и визуальную информацию (например разметку), и логику управления данными, традиционные блочные тесты могут не сработать. Тестирование React скорее является формой функционального тестирования или тестирования интеграции.

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

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

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

Вы увидите следующий код:

digital-ocean-tutorial/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 на blue , а затем сохраните файл. Окончательный стиль будет выглядеть следующим образом:

digital-ocean-tutorial/src/App.css

.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 .

digital-ocean-tutorial/src/App.css

.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 .

Вы увидите следующее:

digital-ocean-tutorial/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/ . Посмотрите на следующую выделенную строку:

digital-ocean-tutorial/src/index.js

. 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 :

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

digital-ocean-tutorial/src/App.js

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; 

Измените содержимое тега

с Edit src/App.js and save to reload. на Hello, world и сохраните изменения.

digital-ocean-tutorial/src/App.js

. 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 и назначаем его переменной. Затем в элементе мы добавляем этот код как src .

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

digital-ocean-tutorial/src/App.js

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

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

Закройте текстовый редактор.

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

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

В DOM содержится следующая строка:

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

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

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

Шаг 6 — Сборка проекта

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

Вернитесь в терминал и выполните сборку проекта. Вы уже запускали эту команду, но напомним, что она запускает скрипт build . В результате будет создан новая директория с комбинированными и минифицированными файлами. Для выполнения сборки запустите следующую команду из корневой директории проекта:

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

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

Вы увидите примерно следующее:

digital-ocean-tutorial/build/index.html

function t()n&&(u.splice(r--,1),e=a(a.s=t[0]))>return e>var n=<>,o=,u=[];function a(r)>;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.r=function(e)),Object.defineProperty(e,"__esModule",)>,a.t=function(e,r)),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r).bind(null,n));return t>,a.n=function(e):function();return a.d(r,"a",r),r>,a.o=function(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([]) 

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

Заключение

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

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

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Начало работы

These docs are old and won’t be updated. Go to react.dev for the new React docs.

The new Quick Start teaches modern React and includes live examples.

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

React — это JavaScript-библиотека для разработки пользовательского интерфейса. Чтобы составить первое впечатление о React, зайдите на главную страницу или во введение.

• Пробуем React
• Изучаем React
• Информация о релизах
• Документация на старые версии React
• Обратная связь

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

Если вы просто хотите немного поиграть с React, попробуйте онлайн-песочницу. Например, вот простейший шаблон на CodePen, CodeSandbox или Stackblitz.

Если вы предпочитаете работать в своём редакторе, скачайте тестовый HTML-файл, добавьте в него код и запустите на своём компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров.

Добавляем React на сайт

Вы можете добавить React на свой сайт буквально за одну минуту. После этого можно разместить на сайте несколько динамических виджетов и постепенно наращивать использование React в своём проекте.

Когда вы начинаете проект на React, то простая HTML-страница со script-тегами может быть лучшим вариантом. Её можно сделать за минуту.

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

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

• Если вам больше нравится учиться на ходу, начните с введения.
• Если вы хотите сначала овладеть теорией, то начните с пошагового описания React.

React сначала может показаться сложным, но приложив усилие, вы обязательно его освоите. Терпение и труд все перетрут!

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

React для новичков

Если документация кажется вам сложной и усваивается не так быстро, как хотелось, прочтите блог Тани Раша (Tania Rascia). Таня написала о том, как начала работать с React и доходчиво рассказала об его основных принципах. Попробуйте почитать этот пост, а потом вернуться к документации.

React для дизайнеров

Если вы в первую очередь занимаетесь дизайном, вам могут пригодиться ресурсы, собранные на этом сайте.

Ресурсы по JavaScript

Изучение React предполагает наличие некоторых знаний о программировании на языке JavaScript. Глубоких знаний не потребуется, но учить React и JavaScript одновременно может быть тяжело.

Чтобы освежить ваши знания, мы рекомендуем просмотреть обзор языка JavaScript на сайте mozilla.org. Для этого потребуется от 30 минут до часа. Надеемся, что теперь вы будете чувствовать себя более комфортно, изучая React.

Совет

Если всё-таки у вас есть пробелы в знаниях, то сайты MDN и learn.javascript.ru будут отличными источниками информации о JavaScript. Также всегда можно задать вопрос или попросить помощи на форумах нашего сообщества.

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

Пошаговое описание React

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

Многие вспоминают, как чтение Философии React поставило всё на свои места. Пускай это и самое древнее руководство по React, но оно всё так же актуально.

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

Углублённое изучение React

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

Этот раздел документации описывает нюансы использования React API. Например, в главе React.Component API рассказывается о работе функции setState() и различных методах управления жизненным циклом компонентов.

Глоссарий и FAQ

Глоссарий содержит перечень наиболее употребляемых терминов, которые встречаются в документации. Также есть раздел FAQ. В нём короткие вопросы и ответы на самые животрепещущие темы, такие как использование AJAX, состояние компонентов или структура проекта.

Информация о релизах

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

Также вы можете подписаться на наш аккаунт @reactjs в Twitter. Однако вы не пропустите ничего важного, если будете следить только за блогом.

В блоге мы пишем не о всех релизах React, но всегда есть возможность посмотреть полный список изменений в файле CHANGELOG.md в репозитории React, а также на странице Релизы.

Документация на старые версии React

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

Если вы обнаружите в документации какие-нибудь неточности, ошибки или любые другие непонятки, пожалуйста, создайте ишью в репозитории документации с указанием способа решения проблемы или просто твитните в Twitter @reactjs. Мы всегда рады слышать вас!