В первом модуле курса ReactJS 1 ученики 14–17 лет делают первые шаги в мир фронтенд-разработки и изучают библиотеку React с нуля. Даже если ученики ранее не программировали, они с лёгкостью освоят основные концепции и научатся создавать простые, но функциональные приложения.
Учащиеся узнают:
● Как настроить окружение (Node.js, Vite, VS Code) — дома, до начала курса
● Что такое JSX и как с ним работать
● Как создавать компоненты и передавать в них данные
● Как управлять состоянием компонентов (useState)
● Как обрабатывать события и условно отображать элементы
● Как создавать списки, формы и строить структуру приложения
● Как собрать итоговый мини-проект
Каждый урок включает аналогии из реального мира, пошаговую практику, мини-проект или небольшую самостоятельную задачу, квиз для закрепления.
Каждые 4 занятия завершаются мини-проектом, а на 12-м уроке — итоговый проект, который можно добавить в портфолио.
Пример занятия:Название проекта: “Счетчик лайков”.
Цели:
● Изучить хук useState для работы с состоянием компонента.
● Научиться обрабатывать нажатия кнопок.
● Попробовать стилизовать компонент.
Суть урока: Ученики создают кнопку «лайк», которая считает нажатия. Ученики учатся обновлять интерфейс, реагируя на действия пользователя.
Методический план модуля:- Первый запуск и JSX;
- Что такое JSX и как с ним работать;
- Функциональные компоненты.;
- Мини-проект “Счетчик лайков”;
- События, onClick;
- Условный рендеринг;
- Списки и ключи;
- Мини-проект “Генератор фраз”;
- Формы и ввод;
- Подъём состояния и связи;
- Подготовка к итоговому проекту;
- Итоговый проект “Профиль с редактированием”.