React — Router, данные с API и оптимизация
React Router (v6)
npm install react-router-dom
Код ITЗагрузка примера кода…
| API | Назначение |
|---|---|
useParams() | :id из пути |
useSearchParams() | ?page=1 |
useNavigate() | программный переход |
<Outlet /> | вложенные маршруты |
Подробный минимум — Первая программа на React.
Данные с сервера
Паттерн loading / data / error:
Код ITЗагрузка примера кода…
Шаблоны fetch и axios — /lab/Примеры/1145. Учебное API "Заметки" — Node 262. CORS и два порта — Fullstack на JavaScript — API и фронтенд.
Для крупных приложений — 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 |
Связанные материалы
- React — хуки, состояние и формы — хуки
- React - библиотека для пользовательских интерфейсов — обзор
- Справочник по React — справочник
- React — компоненты-рецепты — компоненты-рецепты