Типичная структура React-приложения

my-app/
├── node_modules/     # Установленные зависимости (не редактируется вручную)
├── public/           # Статические файлы, которые копируются "как есть" в сборку
│   ├── index.html    # Основной HTML-файл с контейнером для React (<div id="root">)
│   ├── favicon.ico   # Иконка вкладки браузера
│   └── ...           # Другие файлы, доступные напрямую по пути (robots.txt, manifest.json и т.п.)
├── src/              # Исходный код приложения
│   ├── main.jsx      # Точка входа: инициализация React и рендеринг корневого компонента
│   ├── App.jsx       # Корневой компонент приложения
│   ├── components/   # Переиспользуемые UI-элементы: кнопки, карточки, инпуты
│   ├── pages/        # Крупные компоненты, представляющие отдельные экраны или разделы
│   ├── assets/       # Изображения, шрифты, иконки, используемые в компонентах
│   ├── styles/       # Глобальные CSS-файлы, переменные темы, общие стили
│   ├── hooks/        # Кастомные хуки (если используются)
│   └── utils/        # Вспомогательные функции: форматирование, валидация и т.п.
├── .gitignore        # Файлы и папки, исключённые из системы контроля версий
├── package.json      # Зависимости, скрипты запуска и метаданные проекта
├── vite.config.js    # Конфигурация Vite (или webpack.config.js в CRA)
└── ...               # Другие конфигурационные файлы (если есть)

/* src/styles/global.css */
body {
  margin: 0;
  font-family: sans-serif;
}

components/
├── Button.jsx
└── Button.css

// Button.jsx
import './Button.css';

export function Button() {
  return <button className="primary-button">Нажми</button>;
}

/* Button.module.css */
.btn {
  background: blue;
  color: white;
}

// Button.jsx
import styles from './Button.module.css';

export function Button() {
  return <button className={styles.btn}>Нажми</button>;
}