1. Создание компонента интерфейса в React

Рассмотрим пример компонента, который отображает информацию об учебном курсе.

React-код (JSX):

function CourseCard({ title, teacher }) {

return (

<div className="course-card">

<h2>{title}</h2>

<p>Преподаватель: {teacher}</p>

</div>

);

}

function App() {

return (

<div>

<CourseCard

title="WEB-технологии"

teacher="Иванов"

/>

<CourseCard

title="Базы данных"

teacher="Петров"

/>

</div>

);

}

export default App;

Объяснение:

CourseCard — отдельный компонент интерфейса.

App — основной компонент приложения.

props — входные данные, передаваемые компоненту.

title — название учебного курса.

teacher — имя преподавателя.

className — способ указания CSS-класса в JSX.

export default — экспортирует компонент для использования в других файлах.

Результат:

На странице отображаются две карточки:

WEB-технологии

Преподаватель: Иванов

Базы данных

Преподаватель: Петров

Один компонент CourseCard используется повторно с разными входными данными.

2. Изменение состояния и реактивное обновление интерфейса

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

React-код (JSX):

import { useState } from "react";

function StudyHours() {

const [hours, setHours] = useState(0);

function addHour() {

setHours(hours + 1);

}

return (

<div>

<h2>Учебные часы: {hours}</h2>

<button onClick={addHour}>

Добавить час

</button>

</div>

);

}

export default StudyHours;

Объяснение:

useState() — создаёт состояние компонента.

hours — текущее значение состояния.

setHours() — функция обновления состояния.

onClick — обработчик нажатия кнопки.

addHour() — функция увеличения количества часов.

Результат:

Первоначально отображается:

Учебные часы: 0

После первого нажатия:

Учебные часы: 1

После второго нажатия:

Учебные часы: 2

React автоматически обновляет отображение после изменения состояния.

3. Создание SPA с клиентской маршрутизацией

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

Для примера используется React Router.

React-код (JSX):

import {

BrowserRouter,

Routes,

Route,

Link

} from "react-router-dom";

function Home() {

return <h2>Главная страница университета</h2>;

}

function Contacts() {

return <h2>Контакты университета</h2>;

}

function App() {

return (

<BrowserRouter>

<nav>

<Link to="/">Главная</Link>

{" | "}

<Link to="/contacts">Контакты</Link>

</nav>

<Routes>

<Route path="/" element={<Home />} />

<Route

path="/contacts"

element={<Contacts />}

/>

</Routes>

</BrowserRouter>

);

}

export default App;

Объяснение:

BrowserRouter — включает клиентскую маршрутизацию.

Routes — содержит определения маршрутов.

Route — связывает URL с компонентом.

Link — создаёт ссылку для перехода внутри SPA.

Home — компонент главной страницы.

Contacts — компонент страницы контактов.

Результат:

При открытии адреса / отображается главная страница.

При переходе на /contacts отображается страница контактов.

Переход между экранами выполняется без полной перезагрузки HTML-документа.

Для работы примера требуется установленный пакет react-router-dom и настройка сервера для обработки прямых переходов по маршрутам SPA.