Урок по компонентам React: разделяем App.jsx на файлы (для начинающих) — Эпизод 3

Компоненты и файлы React для начинающих — как это нужно в эпоху ИИ. Ваш файл App.jsx быстро становится очень длинным, и ИИ с удовольствием увеличивает его длину. В этом эпизоде ​​мы возьмём один огромный файл App.jsx, разобьем его на небольшие компоненты, каждый в своём файле, рассмотрим реальные ошибки, которые возникают при этом, а затем попросим Клода разбить его для нас и проверить его работу как разработчик, вплоть до сборки для продакшена. Это 3-й эпизод курса «React в эпоху ИИ», полный курс по React с нуля. В этом эпизоде: ✅ Почему один большой файл App.jsx вредит вам, вашей команде и даже ИИ ✅ Что такое файл компонента: экспорт по умолчанию и импорт ✅ Пошаговое перемещение заголовка в отдельный файл ✅ Экспорт по умолчанию против именованного экспорта (и почему фигурные скобки важны) ✅ 4 ошибки разделения: «не предоставляет экспорт с именем default», «не удалось разрешить импорт», «синтаксис JSX отключен» и неявный тег нижнего регистра ✅ Папка компонентов и правило пути с одной точкой / двумя точками ✅ Доказательство того, что страница не изменилась: пиксель за пикселем, темная и светлая ✅ Спроси, прочитай, проверь: реальное разделение Клода, которое работает идеально, но одно из его предупреждений рассказывает только половину истории ✅ Почему импорт с неправильной заглавной буквой работает на Mac и ломает сборку в системе, чувствительной к регистру Каждая ошибка и ответ ИИ в этом видео реальны: Node.js 24.22.1, Vite 8.3.5, React 19.3.1. Вам нужны только эпизоды 1 и 2. ⏱️ Главы 0:00 Начало: одно небольшое изменение, один огромный файл 1:06 Добро пожаловать обратно 2:02 Почему один большой файл вредит 3:49 Как выглядит файл компонента 5:21 Перемещение заголовка в отдельный файл 7:55 Экспорт по умолчанию, именованный export 10:39 Ошибка первая: забытый export 11:52 Ошибка вторая: неправильный путь 12:39 Ошибка третья: JSX в файле .js 13:32 Ошибка четвертая: тег нижнего регистра 14:26 Шпаргалка по ошибкам 14:57 Дом для компонентов 16:45 Разделение всей страницы 18:51 Теперь изменим нижний колонтитул 19:47 Спросить: настоящая подсказка 20:22 Прочитать: разделение 22:18 Проверка 1: действительно ли это одна и та же страница? 22:52 Проверка 2: предупреждение о заглавной букве 24:47 Проверка 3: что ИИ предлагает дальше 25:18 Что мы узнали от ИИ 25:47 Ваше мини-задание 26:19 Следующий эпизод ▶️ Предыдущий эпизод: объяснение JSX ▶️ Следующий эпизод: Props 🧩 Ваше задание Возьмите раздел «Рассылка» и разделите его еще раз: создайте компонент NewsletterForm (метка, поле для ввода адреса электронной почты и кнопка «Подписаться») в отдельном файле внутри папки components и используйте его внутри Newsletter. Компонент внутри компонента внутри App. Пустая страница? Проверьте экспорт. Красное наложение? Проверьте путь. Опубликуйте свою структуру папок в комментариях 👇 #react #reactjs #reacttutorial