React: зачем он нужен. Vite, JSX и первый компонент

01 Зачем React: где ручной DOM начинает мешать

Всё, что вы делали с экраном до сих пор, — это императивный подход: вы пошагово командуете браузеру. «Найди этот элемент. Создай новый. Запиши в него текст. Вставь сюда». Для карточки с заголовком это выглядит так:

<div id="app"></div>

.card { border: 2px solid #1f6feb; border-radius: 12px; padding: 12px 16px; max-width: 280px; }
.card h2 { margin: 0 0 6px; }

const app = document.querySelector("#app");

const card = document.createElement("div");
card.className = "card";

const title = document.createElement("h2");
title.textContent = "JavaScript с нуля";

const info = document.createElement("p");
info.textContent = "24 урока · 8 недель";

const button = document.createElement("button");
button.textContent = "Записаться";

card.append(title, info, button);
app.append(card);

console.log(app.innerHTML);

Тот же результат на React. Сравните: здесь нет ни одного createElement, ни одного querySelector. Вы пишете то, что хотите увидеть, — функция просто «возвращает» разметку.

export default function App() {
  return (
    <div className="card">
      <h2>JavaScript с нуля</h2>
      <p>24 урока · 8 недель</p>
      <button>Записаться</button>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML), 100);

.card { border: 2px solid #1f6feb; border-radius: 12px; padding: 12px 16px; max-width: 280px; }
.card h2 { margin: 0 0 6px; }

В консоли обеих песочниц — одна и та же разметка. Разница в том, как вы к ней пришли: в первом случае 12 строк команд, во втором — «картинка» того, что нужно.

Четыре боли ручного DOM

1. Разметку не видно

Структура страницы спрятана за десятками createElement и append. Чтобы понять, что получится, нужно мысленно «выполнить» код.

2. Легко забыть обновить

Одни и те же данные показаны в нескольких местах. Поменяли в одном — в другом осталось старое, и экран врёт.

3. Нет «своих тегов»

Карточка курса нужна в десяти местах — приходится писать функции-фабрики и склеивать вручную. Нет единого способа сказать «вот мой блок, используй его как обычный тег».

4. Состояние и экран расходятся

В уроке 11 вы решили это функцией render(), которая перестраивает экран целиком. Работает, но при каждом изменении браузер пересоздаёт всё — и теряются фокус в поле ввода, прокрутка и выделение.

Посмотрите на вторую боль вживую. Цена курса показана в двух местах, а обновлена только в одном:

document.body.innerHTML = `
  <p>Курс: <b id="price-top">500</b> сомони</p>
  <p>Итого: <b id="price-total">500</b> сомони</p>`;

let price = 500;
price = 450; // сделали скидку

document.querySelector("#price-top").textContent = price;
// про #price-total забыли

console.log(document.querySelector("#price-top").textContent);
console.log(document.querySelector("#price-total").textContent);

Вверху 450, в «Итого» всё ещё 500. В маленькой странице это видно сразу, в большом приложении с сотней экранов — нет. React устроен так, что экран всегда считается из данных, и «забыть» обновить место просто нечем.

Что такое React

React — библиотека для построения интерфейсов, её создала компания Meta (бывший Facebook), и сейчас она, пожалуй, самая популярная в мире для сайтов и приложений. Ключевая идея: интерфейс — это функция от данных. Данные поменялись — React сам сравнит «было» и «стало» и изменит в DOM только то, что нужно. Всё остальное (маршруты, серверный рендеринг) подключается отдельно: на следующем уровне курса вы встретите Next.js — это фреймворк на основе React.

const list = document.createElement("ul");

for (const dish of ["Оши палав", "Самбуса", "Курутоб"]) {
  const li = document.createElement("li");
  li.textContent = dish;
  list.append(li);
}

console.log(list.children.length);
console.log(list.firstElementChild.textContent);
console.log(list.outerHTML);

3
Оши палав
<ul><li>Оши палав</li><li>Самбуса</li><li>Курутоб</li></ul>

document.body.innerHTML = `
  <p>Курс: <b id="price-top">500</b> сомони</p>
  <p>Итого: <b id="price-total">500</b> сомони</p>
  <p>Взнос в месяц: <b id="price-month">125</b> сомони</p>`;

const state = { price: 500 };

function render() {
  // TODO: обновите все три места по state.price
}

state.price = 480;
render();

console.log(document.querySelector("#price-top").textContent);
console.log(document.querySelector("#price-total").textContent);
console.log(document.querySelector("#price-month").textContent);

480
480
120

const plan = document.createElement("section");
plan.className = "plan";

const h = document.createElement("h3");
h.textContent = "Тариф «Старт»";

const ul = document.createElement("ul");
const li1 = document.createElement("li");
li1.textContent = "24 урока";
const li2 = document.createElement("li");
li2.textContent = "Проект в портфолио";
ul.append(li1, li2);

plan.append(h, ul);

export default function App() {
  return (
    // TODO: верните разметку тарифа
    <div></div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<section class="plan">
<h3>Тариф «Старт»</h3>
<ul>
<li>24 урока</li>
<li>Проект в портфолио</li>
</ul>
</section>

Читать подробнее: react.dev — Quick Start · learn.javascript.ru — DOM-дерево

02 Мыслим компонентами

Откройте любой сайт и мысленно обведите рамками «кирпичики»: шапка, меню, карточка товара, кнопка, подвал. Это и есть компоненты. Компонент — функция, которая возвращает кусок интерфейса. Раз это функция, вы уже умеете с ней обращаться: объявить один раз, вызвать сколько нужно.

Страница — это дерево

Компоненты вкладываются друг в друга, как вложенные коробки. Самая внешняя — App, главный компонент приложения. Внутри неё лежат остальные:

Как найти границы компонентов

• Блок повторяется (карточка курса, пункт меню) — почти всегда это отдельный компонент.
• У блока своя задача («показать шапку», «показать подвал») — отдельный компонент, как отдельная функция в уроке 5.
• Файл разросся, и в нём не найти нужное — режем на части.
• Не дробите до пылинок. Тег <h2> компонентом делать незачем. Хорошее правило: если для блока можно придумать понятное имя, оно получится и у компонента.

Первый компонент

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

function Header() {
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
    </header>
  );
}

function Footer() {
  return <footer>© MakeFirstStep, Душанбе</footer>;
}

export default function App() {
  return (
    <div className="page">
      <Header />
      <main>Здесь будут курсы</main>
      <Footer />
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; }
main { padding: 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

Обратите внимание на три вещи. <Header /> с большой буквы — это наш компонент: React вызывает функцию Header и подставляет результат. <main> с маленькой — обычный тег HTML. App тоже компонент, просто самый главный. Его мы пишем как export default function App(): именно его песочница (и проект Vite) показывает на странице.

function isComponentName(name) {
  // TODO: вернуть true или false
  return false;
}

for (const name of ["Header", "footer", "CourseCard", "nav", "App"]) {
  console.log(name + ": " + isComponentName(name));
}

Header: true
footer: false
CourseCard: true
nav: false
App: true

function Header() {
  return (
    <header>
      <h1>MakeFirstStep</h1>
    </header>
  );
}

// TODO: объявите компонент Footer

export default function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Курсы скоро</p>
      </main>
      <Footer />
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<header>
<h1>MakeFirstStep</h1>
</header>
<main>
<p>Курсы скоро</p>
</main>
<footer>© MakeFirstStep, Душанбе</footer>
</div>

function menu() {
  return (
    <ul>
      <li>Оши палав</li>
      <li>Самбуса</li>
    </ul>
  );
}

export default function App() {
  return (
    <div>
      <h2>Меню</h2>
      <menu />
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<h2>Меню</h2>
<ul>
<li>Оши палав</li>
<li>Самбуса</li>
</ul>
</div>

Читать подробнее: react.dev — Your First Component · react.dev — Thinking in React

03 Создаём проект: Vite + React

В уроке 17 вы создавали проект на Vite с шаблоном vanilla. Для React меняется один параметр — шаблон. Всё остальное вам знакомо: npm, package.json, dev-сервер.

Пошаговая инструкция

1. Откройте терминал в папке для проектов (без кириллицы и пробелов в пути; не в OneDrive/iCloud). Node.js уже установлен с урока 17 — проверьте: node -v.
2. Создайте проект. Часть -- --template react говорит Vite: «возьми шаблон React». Двойное -- передаёт опцию дальше, в create-vite (мы уже видели это на уроке 17).
3. Перейдите в папку и установите зависимости — npm install скачает React и Vite в node_modules.
4. Запустите сервер разработки и откройте адрес из терминала.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Если вы запустите npm create vite@latest без опций, мастер задаст вопросы: название проекта, фреймворк (выберите React), вариант (JavaScript). В зависимости от версии он может ещё предложить сразу установить зависимости и запустить сервер — можно согласиться, а можно ответить «нет» и выполнить команды вручную, как выше. После npm run dev вы увидите:

> my-react-app@0.0.0 dev
> vite

  VITE v8.3.4  ready in 210 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Откройте http://localhost:5173/: вы увидите стартовую страницу React со счётчиком. Измените что-нибудь в src/App.jsx и сохраните — страница обновится сама, без перезагрузки (HMR из урока 17).

Что создал Vite

Точный набор файлов зависит от версии шаблона (например, там могут быть настройки линтера), но три файла всегда одни и те же: index.html, src/main.jsx и src/App.jsx. Рассмотрим их по цепочке.

Цепочка запуска: index.html → main.jsx → App.jsx

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

Страница пустая: только контейнер #root и подключённый модуль main.jsx. Всё остальное нарисует React.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

1. import … from 'react-dom/client' — подключаем часть React, которая умеет работать с браузерным DOM. Имя без ./ — это пакет из node_modules (урок 17).
2. import App from './App.jsx' — берём главный компонент из соседнего файла. Он экспортирован через export default, поэтому в импорте нет фигурных скобок.
3. document.getElementById('root') — наш старый знакомый: находим контейнер из index.html. Это последний раз, когда вы вручную ищете элемент в DOM.
4. createRoot(…).render(…) — «рисуй компонент <App /> внутри этого контейнера». Дальше за всем DOM следит React.
5. StrictMode — режим подсказок для разработки: он нарочно вызывает компоненты дважды, чтобы быстрее выявить ошибки. В собранном сайте (npm run build) этого нет.

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <h1>Get started</h1>
      <button onClick={() => setCount((count) => count + 1)}>
        Count is {count}
      </button>
    </>
  )
}

export default App

В шаблоне уже есть счётчик с useState — это тема урока 23, сегодня он нам не нужен. Первое, что делают с новым проектом, — чистят шаблон.

Чистим шаблон

1. Удалите картинки из src/assets/ (и импорты на них в App.jsx).
2. Очистите src/App.css (оставьте пустым) — свои стили напишем позже.
3. Замените содержимое src/App.jsx на минимальный компонент:

function App() {
  return (
    <div>
      <h1>Привет, MakeFirstStep!</h1>
    </div>
  )
}

export default App

Сохраните: в браузере появится ваш заголовок. Мы будем писать function App() и отдельной строкой export default App — шаблон Vite делает именно так, а песочница на странице допускает короткий вариант export default function App(). Оба варианта делают одно и то же.

const raw = `{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" },
  "dependencies": { "react": "^19.2.8", "react-dom": "^19.2.8" },
  "devDependencies": { "@vitejs/plugin-react": "^6.1.1", "vite": "^8.3.0" }
}`;

const pkg = JSON.parse(raw);

// TODO: имя проекта
// TODO: команда dev
// TODO: имена зависимостей через запятую

my-react-app
vite
react, react-dom

const order = ["npm create", "cd", "npm install", "npm run dev"];

const typed = [
  "npm run dev",
  "cd my-react-app",
  "npm create vite@latest my-react-app -- --template react",
  "npm install",
];

// TODO: отсортируйте typed по порядку из order и выведите

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Читать подробнее: vite.dev — Scaffolding Your First Vite Project · react.dev — Build a React app from Scratch

04 JSX: похож на HTML, но не HTML

JSX — это способ писать разметку прямо внутри JavaScript. Браузер JSX не понимает: Vite (а в нашей песочнице — встроенный компилятор) превращает каждый тег в вызов функции. Для вас это значит одно: JSX — это JavaScript, а значит, правила у него строже, чем у HTML.

// вы пишете:
const title = <h1 className="big">Салом</h1>;

// сборщик превращает в обычный JS:
const title = jsx("h1", { className: "big", children: "Салом" });

Шесть отличий JSX от HTML

1–3. className, htmlFor и закрытые теги

export default function App() {
  return (
    <form className="signup">
      <label htmlFor="name">Ваше имя</label>
      <input id="name" type="text" placeholder="Мадина" />
      <br />
      <button type="button">Записаться</button>
    </form>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.signup { display: flex; flex-direction: column; gap: 8px; max-width: 260px; }
input { padding: 8px; font-size: 16px; }

В консоли видно, что в итоговой разметке всё стало обычным HTML: class, for. Измените className на class и запустите: в React 19 страница ещё работает, но это считается ошибкой стиля — в правильном JSX пишем className.

<div>
  <input type="text">     {/* ✖ тег не закрыт */}
  <br>                    {/* ✖ и этот тоже */}
</div>

<div>
  <input type="text" />   {/* ✓ */}
  <br />                  {/* ✓ */}
</div>

4. Один корневой элемент

Компонент — это функция, а функция возвращает одно значение. Поэтому два тега рядом вернуть нельзя: их нужно обернуть. Если лишний <div> не нужен, используют фрагмент — пустые теги <>…</>. Он группирует детей, но в итоговом HTML ничего не добавляет.

// ✖ ошибка: "Adjacent JSX elements must be wrapped in an enclosing tag"
return (
  <h2>Расписание</h2>
  <p>Пн, Ср, Пт — 18:00</p>
);

// ✓ с обёрткой
return (
  <div>
    <h2>Расписание</h2>
    <p>Пн, Ср, Пт — 18:00</p>
  </div>
);

// ✓ с фрагментом: лишнего div в HTML не будет
return (
  <>
    <h2>Расписание</h2>
    <p>Пн, Ср, Пт — 18:00</p>
  </>
);

Круглые скобки после return нужны не React, а JavaScript: если после return перейти на новую строку без скобок, JS решит, что возвращать нечего (return;), и вернёт undefined. Скобки — страховка для многострочной разметки.

5. Фигурные скобки: JavaScript внутри разметки

Всё, что внутри { }, — обычное JS-выражение: переменная, арифметика, вызов функции, тернарный оператор ? :. Результат подставляется в разметку. Скобки можно ставить и в тексте, и в значении атрибута.

export default function App() {
  const student = "Мадина";
  const lessons = 24;
  const hour = 19;

  return (
    <div className="box" title={"Студент " + student}>
      <h2>Салом, {student}!</h2>
      <p>Осталось уроков: {lessons - 22}</p>
      <p>Имя в верхнем регистре: {student.toUpperCase()}</p>
      <p>{hour < 20 ? "Занятия ещё идут" : "Занятия закончились"}</p>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.box { border: 2px dashed #1f6feb; border-radius: 12px; padding: 4px 16px; }

Можно в {…}

Переменные, числа, строки, арифметика, вызовы функций, ? :, &&, ||, методы строк и массивов.

Нельзя в {…}

Инструкции: if, for, const x = …. Это не выражения. Условие внутри разметки пишем через ? : или &&; а if и переменные — выше, перед return.

Комментарий в JSX

{/* вот так */} — это пустое выражение с комментарием внутри. Обычный // … внутри разметки превратится в текст на странице.

Что React рисует, а что нет

Значения true, false, null и undefined React не показывает вообще — на этом построено условное отображение. Но число 0 показывается, и об этом часто забывают.

export default function App() {
  const isOpen = true;
  const messages = 0;

  return (
    <div>
      <p>true: [{true}]</p>
      <p>null: [{null}]</p>
      <p>0: [{0}]</p>
      <p>{isOpen && "Мы открыты"}</p>
      <p>Новых сообщений: {messages && <b>есть</b>}</p>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

В последней строке вы ожидали пустоту, а получили 0: выражение 0 && … равно 0, а ноль React рисует. Безопасный вариант — сделать условие настоящим булевым: messages > 0 && … или тернарный оператор.

6. style — это объект

В HTML стиль — строка. В JSX style принимает объект, значит, фигурные скобки получаются двойными: внешние — «здесь JS», внутренние — сам объект. Свойства пишутся в camelCase (backgroundColor), числа без единиц считаются пикселями.

export default function App() {
  const badge = {
    backgroundColor: "gold",
    padding: 8,
    borderRadius: 8,
    fontWeight: "bold",
  };

  return (
    <div>
      <p style={badge}>Новинка</p>
      <p style={{ color: "crimson", fontSize: 20 }}>Скидка 10%</p>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

Для основного оформления всё равно используйте CSS-классы (className + style.css): style пригодится, когда значение вычисляется из данных (ширина полосы прогресса, цвет по условию).

<label for="name">Ваше имя</label>
<input id="name" type="text" placeholder="Мадина">
<br>
<p class="hint">Мы перезвоним</p>

export default function App() {
  return (
    <div className="form">
      {/* TODO: вставьте сюда вёрстку в виде JSX */}
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div class="form">
<label for="name">Ваше имя</label>
<input id="name" placeholder="Мадина" type="text">
<br>
<p class="hint">Мы перезвоним</p>
</div>

export default function App() {
  const student = "Мадина";
  const price = 480;
  const lessons = 24;

  return (
    <div>
      <h2>Добро пожаловать, ???!</h2>
      <p>Курс стоит ??? сомони, это ??? сомони за урок.</p>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<h2>Добро пожаловать, Мадина!</h2>
<p>Курс стоит 480 сомони, это 20 сомони за урок.</p>
</div>

export default function App() {
  return (
    <div style="background-color: gold; padding: 12px; border-radius: 8px;">
      Акция недели
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML), 100);

<div style="background-color: gold; padding: 12px; border-radius: 8px;">Акция недели</div>

export default function App() {
  return (
    <h2>Расписание</h2>
    <p>Пн, Ср, Пт — 18:00</p>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<h2>Расписание</h2>
<p>Пн, Ср, Пт — 18:00</p>

const prediction = "";   // например: "[1] [] [x] …" — по одному значению в каждой паре скобок

export default function App() {
  return (
    <p>
      [{5 + 3}] [{false}] [{null}] [{0}] [{"a" + "b"}] [{true ? "да" : "нет"}] [{undefined}] [{10 > 5}]
    </p>
  );
}

// автопроверка: сравнивает ваш прогноз с тем, что построил React
setTimeout(() => console.log(document.getElementById("root").textContent.trim() === prediction.trim() ? "Верно!" : "Не угадали, подумайте ещё"), 100);

Верно!

const cart = [];

export default function App() {
  return (
    <div>
      <h3>Корзина</h3>
      {cart.length && <p>Товаров: {cart.length}</p>}
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div>
<h3>Корзина</h3>
<p>Корзина пуста</p>
</div>

Читать подробнее: react.dev — Writing Markup with JSX · react.dev — JavaScript in JSX with Curly Braces · react.dev — Conditional Rendering

05 App.jsx: экспорт и импорт компонентов

Пока компоненты лежали в одном файле. В реальном проекте так не делают: один компонент — один файл. Это те же модули из урока 17: файл экспортирует функцию, другой файл её импортирует. Для компонентов принято export default.

Структура проекта с компонентами

• Имя файла = имя компонента, с большой буквы: Header.jsx, CourseCard.jsx.
• Расширение .jsx — признак того, что внутри JSX. Vite требует его для файлов с разметкой.
• Папка components — просто договорённость, чтобы не сваливать всё в src/.

Как это выглядит в файлах

export default function Header() {
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
    </header>
  )
}

export default function Footer() {
  return <footer>© MakeFirstStep, Душанбе</footer>
}

import Header from './components/Header.jsx'
import Footer from './components/Footer.jsx'

export default function App() {
  return (
    <div className="page">
      <Header />
      <main>Здесь будут курсы</main>
      <Footer />
    </div>
  )
}

Строка import Header from './components/Header.jsx' читается так: «возьми то, что Header.jsx экспортирует по умолчанию, и назови Header». Путь начинается с ./ (рядом с этим файлом), расширение .jsx пишем целиком — как мы договорились на уроке 17. Не было бы export default — импортировать было бы нечего.

Именованный экспорт тоже работает

// 1) по умолчанию — один компонент на файл (наш выбор)
export default function Header() { … }
import Header from './components/Header.jsx'

// 2) именованный — можно экспортировать несколько штук из файла
export function Header() { … }
import { Header } from './components/Header.jsx'

Главное — чтобы экспорт и импорт совпали по стилю: у export default импорт без скобок, у именованного — со скобками. В этом курсе компоненты экспортируем по умолчанию.

Один компонент — много раз

Главный выигрыш компонентов — повторное использование: объявили один раз, расставили сколько нужно. Изменили компонент — поменялись все копии.

function CourseCard() {
  return (
    <article className="card">
      <h3>JavaScript</h3>
      <p>24 урока</p>
    </article>
  );
}

export default function App() {
  return (
    <main className="grid">
      <CourseCard />
      <CourseCard />
      <CourseCard />
    </main>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.grid { display: flex; gap: 10px; flex-wrap: wrap; }
.card { border: 2px solid #1f6feb; border-radius: 12px; padding: 4px 16px; background: #eef4ff; }
.card h3 { margin: 8px 0; }

Попробуйте изменить текст внутри CourseCard — изменятся все три карточки. Сразу возникает вопрос: а если нужны разные названия — «HTML», «JavaScript», «React»? Для этого у компонентов есть props, мы разберём их на следующем уроке.

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Нажато раз: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

Сравните с уроком 11: там были state, render(), querySelector и addEventListener. Здесь — один компонент, и ни одной строки про поиск элементов. Данные лежат в count, экран описан в return, а связку «изменили данные → перерисовали» React обеспечивает сам.

const components = ["Header", "CourseCard", "Footer"];

function importLine(name) {
  // TODO: вернуть строку вида import Имя from "./components/Имя.jsx";
  return "";
}

for (const name of components) {
  console.log(importLine(name));
}

import Header from "./components/Header.jsx";
import CourseCard from "./components/CourseCard.jsx";
import Footer from "./components/Footer.jsx";

function CourseCard() {
  console.log("CourseCard готов");
  return (
    <article className="card">
      <h3>JavaScript</h3>
      <p>24 урока</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <article className="card">
        <h3>JavaScript</h3>
        <p>24 урока</p>
      </article>
      <article className="card">
        <h3>JavaScript</h3>
        <p>24 урока</p>
      </article>
      <article className="card">
        <h3>JavaScript</h3>
        <p>24 урока</p>
      </article>
    </main>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

CourseCard готов
CourseCard готов
CourseCard готов
<main>
<article class="card">
<h3>JavaScript</h3>
<p>24 урока</p>
</article>
<article class="card">
<h3>JavaScript</h3>
<p>24 урока</p>
</article>
<article class="card">
<h3>JavaScript</h3>
<p>24 урока</p>
</article>
</main>

// TODO: объявите Logo, Navbar, Hero и Footer

export default function App() {
  return (
    <div>
      <p>Соберите страницу из компонентов</p>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<nav>
<span class="logo">MakeFirstStep</span>
<a href="#courses">Курсы</a>
</nav>
<section class="hero">
<h1>Frontend + ИИ</h1>
</section>
<footer>© 2026 MakeFirstStep</footer>

Читать подробнее: react.dev — Importing and Exporting Components · learn.javascript.ru — Экспорт и импорт

06 ИИ-блок: переписываем знакомый JS на React

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

Исходный блок на чистом JS

Это блок, похожий на те, что вы писали на уроках 8 и 11: карточка студента строится вручную.

const app = document.querySelector("#app");
const student = { name: "Мадина", group: "JS-12", score: 87 };

const box = document.createElement("div");
box.className = "profile";

const h = document.createElement("h2");
h.textContent = student.name;

const p = document.createElement("p");
p.textContent = `Группа ${student.group}, баллы: ${student.score}`;

box.append(h, p);
app.append(box);

Плохой и хороший промпт

Почему плохо: ИИ не знает, где вы учитесь, какие инструменты у вас есть, и выдаст «всё и сразу» — с состоянием, эффектами и сторонними библиотеками, которых мы ещё не проходили. И вы не получите объяснений.

Это развёрнутый вариант шаблона из шпаргалки курса: «Вот код на чистом JS: [код]. Перепиши как React-компонент и объясни построчно, что заменило querySelector и addEventListener». Мы добавили контекст, ограничения и формат — и убрали события, которые появятся на уроке 23.

Что должен вернуть ИИ

export default function App() {
  const student = { name: "Мадина", group: "JS-12", score: 87 };

  return (
    <div className="profile">
      <h2>{student.name}</h2>
      <p>Группа {student.group}, баллы: {student.score}</p>
    </div>
  );
}

Разбор построчно: что заменило что

Чек-лист: как проверять ответ ИИ

• Имена компонентов с большой буквы и в объявлении, и в использовании.
• className, htmlFor, закрытые теги, один корень — таблица из раздела 04.
• style — объект, а не строка.
• Лишнее. Если ИИ добавил useState, useEffect, axios или styled-components, хотя вы просили без них, — спросите «зачем это здесь?» и попросите убрать.
• Запуск. Вставьте в песочницу или проект и откройте консоль: ошибок нет, результат совпадает с оригиналом.

function profile() {
  const student = { name: "Мадина", group: "JS-12", score: 87 };
  return (
    <div class="profile" style="border: 1px solid gray">
      <h2>{student.name}</h2>
      <p>Группа {student.group}, баллы: {student.score}</p>
    </div>
  );
}

export default function App() {
  return (
    <profile />
    <p>Данные студента</p>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

<div class="profile" style="border: 1px solid gray;">
<h2>Мадина</h2>
<p>Группа JS-12, баллы: 87</p>
</div>
<p>Данные студента</p>

Читать подробнее: react.dev — Writing Markup with JSX

07 Практика на уроке: разбиваем страницу на компоненты

Берём готовую страницу «MakeFirstStep», которая целиком написана в одном компоненте App, и режем её на компоненты. Этапов три, каждый заканчивается проверкой в консоли. В конце вы повторите то же в настоящем проекте на Vite — уже по отдельным файлам.

Этап 1. Вынесем Header

Перенесите кусок <header>…</header> в отдельную функцию Header и поставьте на его место <Header />.

// TODO: объявите компонент Header

export default function App() {
  console.log("render App");
  return (
    <div className="page">
      <header className="top">
        <h1>MakeFirstStep</h1>
        <nav>
          <a href="#courses">Курсы</a>
          <a href="#contacts">Контакты</a>
        </nav>
      </header>
      <main id="courses">
        <h2>Наши курсы</h2>
        <ul>
          <li>HTML и CSS</li>
          <li>JavaScript</li>
          <li>React</li>
        </ul>
      </main>
      <footer id="contacts">Душанбе · MakeFirstStep</footer>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; margin-left: 12px; }
main { padding: 4px 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

render App
render Header
<div class="page">
<header class="top">
<h1>MakeFirstStep</h1>
<nav>
<a href="#courses">Курсы</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<main id="courses">
<h2>Наши курсы</h2>
<ul>
<li>HTML и CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</main>
<footer id="contacts">Душанбе · MakeFirstStep</footer>
</div>

Этап 2. Вынесем Courses

Теперь то же самое с блоком курсов. Он называется Courses.

function Header() {
  console.log("render Header");
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
      <nav>
        <a href="#courses">Курсы</a>
        <a href="#contacts">Контакты</a>
      </nav>
    </header>
  );
}

// TODO: объявите компонент Courses

export default function App() {
  console.log("render App");
  return (
    <div className="page">
      <Header />
      <main id="courses">
        <h2>Наши курсы</h2>
        <ul>
          <li>HTML и CSS</li>
          <li>JavaScript</li>
          <li>React</li>
        </ul>
      </main>
      <footer id="contacts">Душанбе · MakeFirstStep</footer>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; margin-left: 12px; }
main { padding: 4px 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

render App
render Header
render Courses
<div class="page">
<header class="top">
<h1>MakeFirstStep</h1>
<nav>
<a href="#courses">Курсы</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<main id="courses">
<h2>Наши курсы</h2>
<ul>
<li>HTML и CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</main>
<footer id="contacts">Душанбе · MakeFirstStep</footer>
</div>

Этап 3. Footer и вложенный Nav

Компонент может содержать другой компонент. В шапке выделим меню в отдельный Nav — получится дерево из раздела 02.

// TODO: объявите Nav и Footer

function Header() {
  console.log("render Header");
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
      <nav>
        <a href="#courses">Курсы</a>
        <a href="#contacts">Контакты</a>
      </nav>
    </header>
  );
}

function Courses() {
  console.log("render Courses");
  return (
    <main id="courses">
      <h2>Наши курсы</h2>
      <ul>
        <li>HTML и CSS</li>
        <li>JavaScript</li>
        <li>React</li>
      </ul>
    </main>
  );
}

export default function App() {
  console.log("render App");
  return (
    <div className="page">
      <Header />
      <Courses />
      <footer id="contacts">Душанбе · MakeFirstStep</footer>
    </div>
  );
}

// автопроверка: печатает разметку, которую построил React
setTimeout(() => console.log(document.getElementById("root").innerHTML.replaceAll("><", ">\n<")), 100);

.page { border: 2px solid #1f6feb; border-radius: 12px; overflow: hidden; }
.top { background: #1f6feb; color: #fff; padding: 4px 16px; display: flex; justify-content: space-between; align-items: center; }
.top a { color: #fff; margin-left: 12px; }
main { padding: 4px 16px; }
footer { background: #f3f4f6; padding: 8px 16px; color: #6b7280; }

render App
render Header
render Nav
render Courses
render Footer
<div class="page">
<header class="top">
<h1>MakeFirstStep</h1>
<nav>
<a href="#courses">Курсы</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<main id="courses">
<h2>Наши курсы</h2>
<ul>
<li>HTML и CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</main>
<footer id="contacts">Душанбе · MakeFirstStep</footer>
</div>

Повторяем в проекте на Vite

Теперь то же самое «по-взрослому» — каждый компонент в своём файле. Откройте проект my-react-app из раздела 03 (или создайте новый), очистите шаблон и сделайте так:

1. Создайте папку src/components/ и четыре файла в ней: Header.jsx, Nav.jsx, Courses.jsx, Footer.jsx.
2. В каждый перенесите свой компонент из песочницы и допишите export default.
3. Там, где компонент использует другой, добавьте import (Header импортирует Nav).
4. В App.jsx импортируйте Header, Courses, Footer и соберите страницу.
5. Стили из вкладки style.css перенесите в src/App.css и убедитесь, что App.jsx его импортирует: import './App.css'.
6. Запустите npm run dev, откройте консоль браузера и проверьте: строки render … печатаются, и (из-за StrictMode) каждая — дважды.

import Nav from './Nav.jsx'

export default function Header() {
  return (
    <header className="top">
      <h1>MakeFirstStep</h1>
      <Nav />
    </header>
  )
}

import './App.css'
import Header from './components/Header.jsx'
import Courses from './components/Courses.jsx'
import Footer from './components/Footer.jsx'

export default function App() {
  return (
    <div className="page">
      <Header />
      <Courses />
      <Footer />
    </div>
  )
}

08 Домашнее задание: страница из 5 компонентов

Соберите свою страницу на React: личную визитку, страницу кафе, афишу мероприятия — на ваш выбор. Это первый проект на React + Vite. Модуль «React Lite» — бонусный, оценка в журнал не ставится, но разбор по критериям ниже вы получите от преподавателя.

Что нужно сделать

• ☐ Создать проект командой npm create vite@latest с шаблоном React (JavaScript), очистить шаблон: убрать счётчик, картинки и лишние стили.
• ☐ Страница состоит минимум из 5 компонентов, каждый в своём файле в src/components/, с export default.
• ☐ Минимум один компонент вложен в другой (например, Logo внутри Header), и минимум один используется на странице два раза и больше.
• ☐ App.jsx только собирает страницу из компонентов: у него нет «своей» большой разметки.
• ☐ В JSX использованы className, htmlFor (если есть форма), закрытые теги, выражения в {…} (например, год в подвале) и хотя бы один style={{…}} или условный вывод.
• ☐ Свои стили в App.css или отдельных .css файлах; страница выглядит аккуратно и на телефоне (ширина 390 px).
• ☐ npm run build проходит без ошибок. В репозитории нет node_modules и dist, есть package-lock.json.
• ☐ Не менее 3 осмысленных коммитов; репозиторий на GitHub.
• ☐ README.md: что за страница, как запустить, дерево ваших компонентов и 2–3 предложения своими словами: чем компонентный подход удобнее ручного DOM.

Что сдавать

• Ссылку на репозиторий GitHub в чат группы.
• Скриншот страницы и скриншот вкладки Components (React Developer Tools) с деревом компонентов.
• В сообщении: сколько компонентов у вас получилось и какой из них вы используете повторно.

Разбор по критериям (для самопроверки)

Баллы нужны для самопроверки: бонусный модуль не влияет на итоговую оценку курса.