React и исходный проект

В этой серии создадим отдельный учебный каталог ProfessorWeb. Он покажет карточки материалов, позволит выбрать тему, открыть подробный текст и добавить свою заметку. Позднее появится удаление. Все начальные карточки придуманы для примера: мы не переносим сюда рабочую библиотеку сайта и не меняем её прежние адреса. Такой небольшой проект помогает увидеть связь между данными, компонентами и действиями пользователя.

Для начала нужны обычные HTML и CSS, функции, массивы, объекты и модули JavaScript. Пока не требуется знание React, роутера или устройства базы данных. Результат первого урока — понятная структура проекта и корневой компонент. Приведённые команды предназначены для вашего будущего запуска; при подготовке серии зависимости, сервер и сборка не выполнялись.

Какую работу получает React

Представим посетителя, который хочет увидеть только короткие уроки по HTML. В обычном документе можно написать обработчик, найти карточки в DOM и вручную скрыть ненужные элементы. Когда добавляются другие фильтры, форма и загрузка данных, количество связанных изменений растёт. Легко обновить число найденных материалов, но оставить на экране старый список. Проблема находится в согласовании данных и представления.

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

Нужно также отделять библиотеку интерфейса от всего сайта. React сам не выдаёт API, не хранит записи после перезапуска сервера и не определяет, какие URL доступны поисковому роботу. Эти обязанности мы будем вводить отдельно. Именно поэтому каталог станет самостоятельной учебной площадкой, а публичные уроки ProfessorWeb продолжат использовать свою существующую систему публикации.

Выбранный профиль инструментов

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

Инструмент	Версия	Обязанность
Node.js	24.21.0 LTS	Инструменты разработки и локальный API
React и React DOM	19.3.0	Компоненты и вывод в браузер
Vite	8.3.4	Обработка модулей, JSX и локальный сервер
Плагин React для Vite	6.1.2	Интеграция React в инструментарий
React Router	8.4.0	Позднейшая навигация между экранами

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

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

Файлы вместо скрытого шаблона

Возьмите состояние lesson-01/after из архива примеров в отдельную папку. В ней находится полный package.json:

{
  "name": "professorweb-react-catalog",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "engines": {
    "node": ">=24.21.0 <25"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "19.3.0",
    "react-dom": "19.3.0",
    "react-router": "8.4.0"
  },
  "devDependencies": {
    "vite": "8.3.4",
    "@vitejs/plugin-react": "6.1.2"
  }
}

Поле type задаёт использование ES-модулей в наших JavaScript-файлах. Раздел dependencies содержит библиотеки приложения, devDependencies — инструмент подготовки. Версии записаны явно, без обещания автоматически переходить на будущую major-ветку. Однако без созданного lockfile не зафиксировано всё дерево транзитивных пакетов. Его создаёт установка; готовый проверенный lockfile в серии не выдуман.

Для читателя последовательность действий в выбранной папке выглядит так:

node --version
npm install
npm run dev

Сначала нужно убедиться в окружении, затем получить зависимости и только после этого запускать интерфейс. Наличие файлов .jsx не означает, что браузер умеет напрямую выполнять JSX. Если открывать исходный HTML двойным щелчком, получится другой режим работы: пути модулей и обработка синтаксиса не совпадут с локальным сервером Vite.

Конфигурация Vite задаёт адрес 127.0.0.1:5174 и strictPort. Если порт занят, инструмент должен сообщить об этом, а не незаметно перейти к другому адресу. Это пригодится, когда мы добавим API и договоримся о допустимом origin. Общая структура и назначение корневого HTML описаны в документации Vite.

Точка входа и корневой компонент

Vite начинает с index.html в корне проекта. В нём есть элемент root и ссылка на модуль src/main.jsx. Это контейнер для приложения, а не место, куда мы вручную копируем все карточки. Полная точка входа содержит современный createRoot:

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<StrictMode><App /></StrictMode>);

createRoot получает существующий DOM-элемент. Следующий вызов render передаёт React описание корневого дерева. В нашем профиле не используем исторический ReactDOM.render: название текущего API и его условия зафиксированы в справочнике React DOM. Содержимое контейнера далее принадлежит этому корню.

Сам App.jsx пока очень мал. Он возвращает main, заголовок и поясняющий абзац. Не нужно прямо сейчас переносить в него меню, серверный код и обработчики сохранения. Первый проверяемый результат ограничен одним экраном: читатель понимает, какой файл начал выполнение и какой компонент описал видимый текст.

Что показывает StrictMode

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

Неправильный случай на этом этапе — считать папку node_modules частью собственных исходников или править в ней установленный React. При следующей установке такие изменения потеряются. Собственная программа находится в src и конфигурации проекта; зависимости восстанавливаются по манифесту и будущему lockfile. Аналогично пакет нельзя считать установленным только потому, что его имя записано в JSON.

После самостоятельного запуска ожидается заголовок учебного каталога и один абзац. Если экран пустой, полезнее проверить наличие root, путь module-script и первую ошибку в консоли, чем случайно менять все файлы сразу. В следующем уроке тот же App начнёт показывать одну карточку из данных, и станет видно, зачем внутри знакомой разметки используются JavaScript-выражения.

Оглавление серии