Введение в React

Сайты растут — и «ручками» в DOM всё сложнее управлять. React разбивает интерфейс на компоненты и сам решает, как именно обновить страницу. Это самый востребованный фреймворк 2020-х — самое время познакомиться.

Компоненты и JSX

Компонент — функция, которая возвращает разметку. JSX — этот «JS с разметкой». Внутри одного <ol> легко отрисовать список.

function MenuList({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

Props: входные данные компонента

«Пропсы» — аргументы-объект, которые родитель передаёт ребёнку. Один компонент-обёртка, разные карточки.

function Card({ title, text }) {
  return <article className="card">
    <h3>{title}</h3>
    <p>{text}</p>
  </article>;
}

function App() {
  return (
    <div>
      <Card title="HTML" text="Разметка страницы" />
      <Card title="CSS" text="Внешний вид" />
    </div>
  );
}

useState: состояние

Переменная в браузере не сохраняется между перерисовками. useState хранит значение в React и возвращает пару: текущее значение + функция, которая ставит новое и перерисовывает компонент.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Нажатий: {count}
    </button>
  );
}

С чего начать проект

React не таскают вручную — его собирают инструментом:

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

Паттерн «данные → рендер»

Весь смысл фреймворков в одном предложении: интерфейс — это функция от данных UI = f(data). Поменяли массив — страница обновилась сама. В следующих уроках этот приём вынесем в полноценные проекты.