React: туториал для новичков: настройка Vite и первый компонент (Эп. 1)

Учебник по React для начинающих, такой, какой он нужен в эпоху ИИ. ИИ может писать код на React, но кто-то всё равно должен его запускать, читать и проверять. В этом эпизоде ​​мы настроим React с нуля (Node.js, VS Code, Vite), создадим ваш первый компонент, а затем возьмём РЕАЛЬНЫЙ ответ от Клода и протестируем его, как настоящий разработчик. Это первый эпизод курса «React в эпоху ИИ», полного курса по React с нуля. В этом эпизоде: ✅ Зачем изучать React, если код пишет ИИ (аналогия с шеф-поваром) ✅ Что такое React и какие проблемы он решает (компоненты, декларативный пользовательский интерфейс) ✅ Почему браузер не может читать JSX и что делает Vite ✅ Установка Node.js 24 LTS и проверка команд node -v / npm -v ✅ npm create vite@latest: объяснение всех команд (React, JavaScript, Oxlint) ✅ localhost:5173, сервер разработки, и исправление ошибки "Could not read package.json" ✅ Обзор index.html, main.jsx, App.jsx и package.json ✅ Горячая перезагрузка (HMR) и ваш первый компонент ✅ Правило 1: компоненты начинаются с заглавной буквы ✅ Правило 2: возвращайте один родительский элемент (фрагменты) ✅ Спроси, прочитай, проверь: реальная работающая карточка профиля Клода но не работает в темном режиме с контрастом (3.11:1), плюс однострочное исправление Каждая команда, ошибка и ответ ИИ в этом видео реальны: Node.js 24.22.1, Vite 8.3.5, React 19.3.1. Опыт работы с React не требуется. ⏱️ Разделы 0:00 Начало: чистый белый лист 0:56 Добро пожаловать в серию 1:59 Вопрос, который задают все 3:40 Аналогия с шеф-поваром 5:08 Но ИИ станет лучше, верно? 6:15 Как работает каждый эпизод 7:22 Что такое React? 8:25 Проблема, которую решает React 10:02 Компоненты: строительство из кубиков LEGO 10:59 Браузер говорит только HTML, CSS и JavaScript 12:11 Команда не найдена: node 13:07 Что такое Node.js и npm? 13:55 Безопасная установка Node.js 15:47 Установка VS Code 16:14 Создание нашего первого проекта React с помощью Vite 19:15 Наше первое приложение React в браузере 20:18 Остановка и запуск сервера разработки 21:51 Обзор файлов проекта 24:05 Горячая перезагрузка: сохраните и посмотрите 24:59 Ваш первый компонент 27:14 Правило 1: компоненты начинаются с заглавной буквы 28:19 Правило 2: возвращайте один родительский элемент 30:08 Почему двойной щелчок был пустым 31:15 Ask: реальная подсказка 31:48 Чтение: построчно 33:53 Проверка 1: запустите его в реальных условиях 34:34 Проверка 2: проверьте его в темном режиме 35:46 Проверка 3: протестируйте его с реальными данными 36:54 Исправление 38:04 Ваше мини-задание 38:33 Далее эпизод ▶️ Следующий эпизод: JSX, HTML внутри JavaScript 💻 Используемые команды: node -v npm -v npm create vite@latest npm run dev 🧩 Ваше задание: Создайте новый компонент под названием Footer в отдельном файле Footer.jsx. Он будет возвращать абзац с вашим именем и текстом «создано с помощью React». Импортируйте его в App.jsx и отобразите под карточкой профиля. Помните два правила: заглавная буква, один родительский элемент. Застряли? Сначала откройте консоль. Опубликуйте свой результат в комментариях 👇 #react #reactjs #reacttutorial