Настройка React и первое приложение

Введение

Добро пожаловать в вашу первую лабораторную работу по React! React — это мощная JavaScript-библиотека для создания динамических и интерактивных пользовательских интерфейсов. Чтобы начать разработку на React, вам сначала необходимо настроить правильную среду разработки.

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

Изучение проекта и установка зависимостей

Процесс настройки уже создал для вас новый проект React в директории my-app с использованием Vite. Сначала давайте проверим, есть ли в вашей среде разработки необходимые инструменты: Node.js и npm.

Откройте терминал и выполните следующие команды для проверки их версий:

node -v

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

v22.19.0

Далее проверьте версию npm:

npm -v

Вы должны увидеть аналогичный вывод для версии npm:

10.9.3

Теперь перейдите в директорию проекта. Все последующие команды должны выполняться из этой директории.

cd my-app

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

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

Важно: По соображениям безопасности бесплатные пользователи не могут подключаться к Интернету, поэтому пакеты npm не могут быть установлены. Вы можете продолжить чтение документации, ознакомиться с другими Лабораториями веб-разработки или рассмотреть возможность обновления до статуса Pro пользователя.

npm install

Эта команда считывает файл package.json и загружает все необходимые библиотеки в папку node_modules внутри вашего проекта. По мере установки пакетов вы увидите индикатор выполнения и некоторые сообщения.

Запуск сервера разработки

Чтобы увидеть ваше React-приложение в действии, вам нужно запустить сервер разработки. Поскольку вы уже находитесь в каталоге my-app, вы можете использовать скрипт, предоставленный Vite.

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

npm run dev -- --host 0.0.0.0 --port 8080

Эта команда запускает сервер и займет ваш терминал, отображая локальный URL, по которому работает приложение. Оставьте этот терминал запущенным. Через некоторое время вы увидите сообщение о готовности сервера.

Чтобы просмотреть ваше приложение, нажмите на вкладку Web 8080 в верхней части интерфейса. Вы должны увидеть стандартную приветственную страницу Vite и React.

Примечание: Если приложение не отображается, попробуйте нажать кнопку обновления, расположенную слева от адресной строки на вкладке Web 8080.

Изменение первого компонента

Сервер разработки Vite поддерживает "горячую замену модулей" (Hot Module Replacement, HMR), которая мгновенно обновляет приложение в вашем браузере при сохранении изменений в файле. Давайте посмотрим, как это работает.

В файловом проводнике слева перейдите в my-app -> src и нажмите на файл App.jsx, чтобы открыть его в редакторе. Этот файл определяет основной компонент App.

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

Замените все содержимое внутри return (...) простым заголовком. Ваш файл App.jsx должен выглядеть следующим образом:

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

Сохраните файл, нажав Ctrl+S (или Cmd+S на Mac). Теперь вернитесь на вкладку Web 8080. Вы увидите, что страница мгновенно обновилась и отображает ваш новый заголовок "Hello, LabEx!".

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

Основной принцип React — построение пользовательских интерфейсов из небольших, повторно используемых частей, называемых компонентами. Давайте создадим новый компонент.

1. В файловом проводнике слева щелкните правой кнопкой мыши по директории src внутри my-app.
2. Выберите "Новый файл" (New File) и назовите его Welcome.jsx.
3. Откройте только что созданный файл Welcome.jsx и добавьте следующий код:

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

Разберем этот код:

• import React from 'react';: Эта строка необходима для любого файла, использующего JSX.
• function Welcome() { ... }: Это определяет простой функциональный компонент с именем Welcome.
• return <h2>...</h2>;: Компонент возвращает JSX-элемент, который будет отображен на экране.
• export default Welcome;: Это делает компонент Welcome доступным для использования в других файлах.

Сохраните файл (Ctrl+S). В браузере пока ничего не изменится, так как мы еще не использовали этот новый компонент.

Использование нового компонента

Теперь, когда вы создали компонент Welcome, давайте используем его внутри нашего основного компонента App. Это называется композицией компонентов.

1. Снова откройте файл my-app/src/App.jsx.
2. В верхней части файла добавьте оператор import, чтобы подключить ваш новый компонент:

import Welcome from "./Welcome.jsx";

3. Далее, поместите ваш новый компонент внутрь оператора return компонента App. Добавьте <Welcome /> под тегом <h1>, чтобы отобразить компонент. Окончательный код для App.jsx должен выглядеть так:

import "./App.css";
import Welcome from "./Welcome.jsx";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;

4. Сохраните файл App.jsx (Ctrl+S).

В последний раз переключитесь на вкладку Web 8080. Теперь вы увидите сообщение "Welcome to my first React App!" под вашим основным заголовком. Вы успешно создали и скомпоновали компоненты React!

Резюме

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

Вы узнали, как:

• Проверить среду разработки Node.js и npm.
• Создать новый проект React с помощью Vite.
• Установить зависимости проекта с помощью npm install.
• Запустить сервер разработки React с помощью npm run dev.
• Изменить существующий компонент и увидеть обновления в реальном времени благодаря Hot Module Replacement (HMR).
• Создать новый функциональный компонент с нуля в файле .jsx.
• Импортировать и комбинировать компоненты для создания более сложного пользовательского интерфейса.

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