React — Router, данные с API и оптимизация

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

---

React Router (v6)

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/notes">Заметки</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/notes" element={<Notes />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

API	Назначение
useParams()	:id из пути
useSearchParams()	?page=1
useNavigate()	программный переход
<Outlet />	вложенные маршруты

Подробный минимум — 272.md.

---

Данные с сервера

Паттерн loading / data / error:

const [notes, setNotes] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  fetch('http://127.0.0.1:3000/notes')
    .then((res) => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .then(setNotes)
    .catch(setError)
    .finally(() => setLoading(false));
}, []);

Шаблоны fetch и axios — /lab/Примеры/1145. Учебное API "Заметки" — Node 262. CORS и два порта — 264.

Для крупных приложений — TanStack Query (useQuery, кэш, повторные запросы).

---

Lazy loading и Suspense

const Profile = lazy(() => import('./Profile'));

<Suspense fallback={<p>Загрузка…</p>}>
  <Profile />
</Suspense>

Код страницы уходит в отдельный chunk — быстрее первая загрузка.

Ошибки загрузки — Error Boundary (класс или react-error-boundary).

---

Оптимизация

Инструмент	Когда
React.memo	Тяжёлый компонент с стабильными props
useMemo	Дорогое вычисление
useCallback	Стабильный колбэк для memo-ребёнка
react-window	Длинные списки

Сначала измеряйте в React DevTools Profiler.

---

Экосистема вокруг React

Сборку чаще делают на Vite; для SSR и файловых маршрутов берут Next.js. Стили — CSS Modules, Tailwind или готовые наборы вроде MUI. Глобальное состояние — Zustand или Redux Toolkit. Тесты — Vitest и React Testing Library.

Задача	Примеры инструментов
Сборка	Vite, Next.js
Стили	CSS Modules, Tailwind, MUI
State	Zustand, Redux Toolkit
Тесты	Vitest, React Testing Library
SSR	Next.js

---

Связанные материалы

• 276.md — хуки
• 27.md — обзор
• 271.md — справочник
• 1146 — компоненты-рецепты