Введение в компоненты React

Введение

В этой лабораторной работе вы изучите фундаментальное понятие компонентов в React. Компоненты — это независимые и повторно используемые фрагменты кода. Они выполняют ту же функцию, что и JavaScript-функции, но работают изолированно и возвращают HTML (через JSX) для отображения на экране. Мы сосредоточимся на создании простого "функционального компонента".

Вы создадите новый компонент в собственном файле, экспортируете его, а затем импортируете и отобразите внутри основного компонента App.

Создайте функциональный компонент в новом файле Hello.jsx

В этом шаге вы создадите свой первый компонент React. Распространенной практикой является размещение каждого компонента в отдельном файле, чтобы поддерживать организованность и повторное использование кода. Мы создадим новый файл для компонента с именем Hello.

Сначала подготовим среду разработки. Файлы проекта были созданы для вас в директории my-app. Вам нужно перейти в эту директорию, установить необходимые зависимости и запустить сервер разработки.

Откройте терминал в WebIDE (вы можете использовать меню: Terminal > New Terminal) и выполните следующие команды поочередно:

cd my-app

npm install

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

После выполнения последней команды сервер разработки будет запущен. Вы можете просмотреть работающее приложение, нажав на вкладку Web 8080 в интерфейсе LabEx. На протяжении всей этой лабораторной работы вы можете переключаться на эту вкладку, чтобы видеть свои изменения.

В файловом проводнике WebIDE слева перейдите в директорию my-app/src. Щелкните правой кнопкой мыши по папке src и выберите "New File". Назовите новый файл Hello.jsx.

Теперь добавьте следующий код в ваш только что созданный файл my-app/src/Hello.jsx. Этот код определяет простой функциональный компонент.

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

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

• function Hello(): Это стандартная JavaScript-функция. В React функциональные компоненты — это просто JavaScript-функции. По соглашению, имена компонентов всегда начинаются с заглавной буквы.
• return <h1>...</h1>;: Функция возвращает JSX. JSX (JavaScript XML) — это расширение синтаксиса для JavaScript, которое очень похоже на HTML. Именно с его помощью мы описываем, как должен выглядеть пользовательский интерфейс.

Экспортируйте компонентную функцию по умолчанию

В этом шаге вы сделаете компонент Hello доступным для использования в других частях вашего приложения. Для этого вам нужно экспортировать его из файла Hello.jsx.

В JavaScript-модулях существует два основных типа экспорта: именованные экспорты (named exports) и экспорт по умолчанию (default exports). Для этой лабораторной работы мы будем использовать экспорт по умолчанию, что является распространенной практикой для компонентов, когда файл экспортирует только один элемент.

Добавьте следующую строку в конец вашего файла my-app/src/Hello.jsx:

export default Hello;

Ваш полный файл my-app/src/Hello.jsx теперь должен выглядеть следующим образом:

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

Это утверждение export default делает функцию Hello основным экспортом этого файла, позволяя другим файлам импортировать ее.

Импортируйте компонент в App.jsx с помощью оператора import

В этом шаге вы импортируете компонент Hello в основной компонент приложения, App.jsx, чтобы иметь возможность его использовать.

В файловом проводнике WebIDE найдите и откройте файл my-app/src/App.jsx.

Чтобы использовать компонент Hello, вы должны сначала импортировать его. Добавьте следующую строку импорта в верхнюю часть файла my-app/src/App.jsx, перед определением функции App:

import Hello from "./Hello.jsx";

Эта строка указывает JavaScript импортировать экспорт по умолчанию из файла Hello.jsx (который находится в том же каталоге, отсюда ./) и присвоить его переменной с именем Hello.

После добавления импорта верхняя часть вашего файла my-app/src/App.jsx будет выглядеть примерно так (другие импорты могут немного отличаться):

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... остальная часть файла

Отобразите импортированный компонент внутри App return

В этом шаге вы отобразите компонент Hello внутри компонента App. Как только компонент импортирован, вы можете использовать его в JSX, как обычный HTML-тег.

В файле my-app/src/App.jsx найдите оператор return внутри функции App. Существующий код — это содержимое по умолчанию из Vite. Вы можете заменить его полностью вашим новым компонентом.

Измените функцию App, чтобы удалить содержимое по умолчанию и вместо него отобразить компонент <Hello />.

Ваша функция App должна выглядеть следующим образом:

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

Здесь <Hello /> — это способ отображения компонента Hello. <> и </> называются Фрагментом (Fragment); они позволяют группировать список дочерних элементов без добавления лишних узлов в DOM.

Весь ваш файл my-app/src/App.jsx теперь должен выглядеть следующим образом:

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

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

Примечание: Мы удалили неиспользуемые импорты и логику состояния для ясности.

Сохраните файлы и проверьте обновленный рендеринг в браузере

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

Убедитесь, что вы сохранили все изменения как в файле my-app/src/Hello.jsx, так и в my-app/src/App.jsx. Вы можете сохранить файл, нажав Ctrl+S или Cmd+S.

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

Переключитесь на вкладку Web 8080 в интерфейсе LabEx. Теперь вы должны увидеть на странице текст "Hello from the Hello component!". Этот контент рендерится из вашего нового компонента Hello.

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

Поздравляем, вы успешно создали, экспортировали и отобразили свой первый React-компонент!

Резюме

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

Вы успешно выполнили следующие действия:

• Создали новый функциональный компонент в отдельном файле (Hello.jsx).
• Использовали export default для предоставления компонента другим частям приложения.
• Использовали import для импорта компонента в основной файл App.jsx.
• Отобразили импортированный компонент с использованием синтаксиса JSX-тегов (<Hello />).

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