Стилизация и что учить дальше

Подводим итог курса: как стилизовать компоненты и куда двигаться дальше, чтобы вырасти в React-разработчика.

В React нет единственного «правильного» способа стилизации — есть несколько подходов, и выбор зависит от проекта и команды.

Способ 1: обычный CSS-файл

Самый простой путь — написать CSS и импортировать его. Классы задают через className:

import "./Button.css";

function Button() {
  return <button className="btn btn-primary">Жми</button>;
}

Минус: классы глобальны — в большом проекте имена могут случайно совпасть и «протечь» между компонентами.

Способ 2: CSS-модули

CSS-модули (файл *.module.css) решают проблему глобальных имён: классы автоматически становятся уникальными, а в JS импортируются как объект:

import styles from "./Button.module.css";

function Button() {
  return <button className={styles.primary}>Жми</button>;
}

Здесь styles.primary превратится во что-то вроде Button_primary_x7f2 — конфликтов имён не будет.

Способ 3: инлайн-стили

Для динамических стилей (зависящих от состояния) удобен объект style:

function Bar({ percent }) {
  return (
    <div style={{ width: `${percent}%`, background: "green" }} />
  );
}

Инлайн хорош для значений, вычисляемых на лету, но не подходит для псевдоклассов (:hover) и медиазапросов.

Сравнение подходов

Существуют и популярные библиотеки — например, утилитарный Tailwind CSS или CSS-in-JS-решения. Но для старта хватит CSS-модулей.

Дорожная карта: что учить дальше

Вы освоили ядро React. Вот куда расти:

• TypeScript — типизация пропсов и состояния ловит ошибки заранее; де-факто стандарт в командах.
• State-менеджеры — для крупных приложений с большим общим состоянием: Zustand (простой), Redux Toolkit (мощный, со строгими правилами).
• Загрузка данных — TanStack Query (React Query) берёт на себя кеширование, повторы и синхронизацию запросов лучше «голого» useEffect + fetch.
• Next.js — фреймворк поверх React: серверный рендеринг, маршрутизация по файлам, оптимизация — стандарт для продакшен-сайтов.
• Тестирование — React Testing Library и Vitest для проверки компонентов.

Главный совет

Не пытайтесь выучить всё сразу. Прочно владея компонентами, пропсами, состоянием и эффектами, вы уже можете строить реальные приложения. Остальное добавляйте по мере появления конкретных задач — так знания закрепляются лучше.

Итог

• Стилизуют React тремя основными способами: обычный CSS, CSS-модули (изоляция имён) и инлайн style (динамика).
• Дальше стоит освоить TypeScript, state-менеджер (Zustand/Redux Toolkit), TanStack Query и фреймворк Next.js.
• Двигайтесь от задач: прочное ядро React уже позволяет строить реальные приложения.