КУРС С ПРАКТИКОЙ В БРАУЗЕРЕ

React.

JSX и фигурные скобки, пропсы и children, состояние useState, списки через .map, контролируемые поля — и проекты: викторина и чек-лист игрока.

11 уроков140 XPВ своём темпе

ЧТО ТЫ ИЗУЧИШЬ

Программа курса

01
Первый компонент
Открой вкладку JSX. Напиши компонент App — функцию, которая возвращает заголовок <h1> с любым текстом, — и покажи его на странице через ReactDOM.createRoot.
10 XP
02
Фигурные скобки в JSX
Сделай карточку квиза с классом card: внутри — заголовок <h2> с названием, строка «Игрок: …» с именем из переменной player и строка «Очки: …», где число посчитано прямо в JSX — {10 + 15}.
10 XP
03
Пропсы
Сделай компонент QuizCard, который получает пропсы title и desc — заголовок и описание карточки. Покажи через него две карточки: «Кино» и «Космос» с разными описаниями.
10 XP
04
Пропс children
Сделай компонент-обёртку Panel с пропсами title и children: заголовок панели и всё, что написано между <Panel> и </Panel>. Внутри панели размести список из двух-трёх тем квиза.
10 XP

05
Счётчик очков
Очки команды: сделай счётчик на useState — в #score показывается число, по клику на кнопку «+1 очко» оно растёт на единицу.
10 XP
06
Показать ответ
Кнопка «Показать ответ» открывает и прячет ответ квиза: состояние show начинается с false, переключается по клику, а абзац с ответом в #answer рендерится только когда show — правда: {show && <p>…</p>}.
10 XP
07
Список тем
Темы квиза лежат в массиве topics — минимум три. Покажи каждую отдельным пунктом <li> через .map и не забудь key у каждого пункта.
10 XP

08
Живое приветствие
Сделай поле ввода имени и приветствие «Привет, …!» в #greet, которое обновляется на каждое нажатие клавиши. Поле — контролируемое: value из состояния и onChange.
10 XP
09
Копилка тем
Сделай копилку тем квиза: в старте уже есть пара тем в массиве, input и кнопка «Добавить» кладут новую тему в список, а поле очищается. Массив меняют копированием: setTopics([...topics, новая]).
10 XP

10
Проект: мини-викторина
Собери мини-викторину из двух компонентов: QuestionCard с пропсами q и a показывает вопрос и (если открыт) ответ в #answer; App хранит массив вопросов и номер текущего. Кнопка #next шагает по вопросам по кругу, #reveal открывает ответ.
20 XP
11
Босс: чек-лист игрока
Финал курса — приложение «Чек-лист игрока». Дела добавляются через input и кнопку «Добавить», клик по делу отмечает его выполненным (класс done и галочка), в #counter считается «Выполнено X из Y». Одно состояние-массив из объектов { text, done } — и всё приложение.
30 XP

В каждом уроке: задание, редактор кода, живой результат, подсказки и проверка. Начни с простого и собери собственные учебные проекты.

Можно заниматься без регистрации. Создай аккаунт, если хочешь сохранять прогресс между устройствами.