Stepik React для современных веб-приложений
О курсе
Подробнее
Frontend-разработка - одна из самых популярных и востребованных профессий современности. Интересная и увлекательная. А React - самый популярный ее инструмент. На React сделаны AirBnb, PayPal, Uber, Netflix, Vkontakte, Vimeo, Trello, сервисы Яндекса, сам проект курсов Udemy и много-много других крупных продуктов.
Курс "React с нуля для начинающих" позволит не только освоить азы данного инструмента, но и получить современные продвинутые техники его использования.
*** ЧТО ВКЛЮЧЕНО В КУРС? ***
3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты
Базовые навыки по работе с React - создание простых компонентов, управление состоянием приложения и его жизненным циклом
Продвинутые навыки по работе с React - современные техники, позволяющие добиваться хороших результатов
Создание single page application - популярных SPA-приложений за счет "магии", позволяющей посетителям сайта переходить между страницами без полной перезагрузки в браузере
Разбор ВСЕХ доступных хуков и создание собственных - встроенных методов, которые изменили представление о работе с React-приложениями
Публикация проектов онлайн - через популярный и бесплатный сервис GitHub Pages
Почему это именно тот курс, который даст результат?
Меня зовут Михаил Непомнящий и я профессиональный веб-разработчик. Я работаю с React каждый день и решаю с его помощью задачи самого разного уровня сложности.
При этом я также профессиональный преподаватель и обучаю людей веб-разработке с 2016 года. А курсы по React также проводил в учебном центре "Специалист" в Москве.
В своих курсах я стараюсь подавать материал максимально доступно - от простого к сложному и без воды. Помню как самому трудно было поначалу пробираться через дебри React, когда только начинал изучать его, и в этом курсе постарался сделать подачу максимально понятной.
В рамках курса мы сделаем 3 полноценных проекта, причем уровень сложности каждый раз будет возрастать. Таким образом, на практике мы будем последовательно закреплять те навыки и умения, которые были изучены.
Требования
Что нужно для старта
- Базовое знание HTML
- Базовое знание CSS
- Базовое знание JavaScript (умение работать с функциями, с классами и объектами, массивами и их методами)
Аудитория
Для кого этот курс
- Начинающие веб-разработчики
- Верстальщики, желающие стать frontend-разработчиками
Содержание
10 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- Обзор курса
- Что такое React
- Пререквизит к курсу
- Что необходимо установить
- Варианты окружения
02React и JSX
- Библиотеки React и ReactDOM
- Простое приложение на чистом React
- Преобразование приложения в JSX
- Особенности JSX
- Разделение приложения на модули
- Условная отрисовка
- Пример с прелоадером
- Проверка знаний
03Классовые компоненты
- Разбор составляющих базового React-шаблона
- Понятие React-компонента
- Состояние компонента и управление им
- Нюансы создания методов в классовых компонентах
- Жизненный цикл компонента
- Задание по созданию таймера
- Работа с коллекциями
- Однонаправленный поток данных
- Задание на обновление состояния через дочерние компоненты
- Отличие классовых компонентов от функциональных
- Проверка знаний
04Работа с формами в React
- Управляемые компоненты
- Валидация значений формы
- Checkbox, radio button, select
- Задание на создание формы
- Использование ref
- Неуправляемые компоненты
- Проверка знаний
05Проект "Фильмы"
- Обзор проекта
- Подготовка проекта
- Знакомство с API фильмов
- Задание на создание общего списка
- Добавление строки поиска
- Реализация поиска фильмов
- Добавление фильтрации
- Обработка неудачного поиска
- Безопасное хранение ключа API
- Сборка и публикация проекта
06Функциональные React-компоненты
- Работа с состоянием
- Кликер
- Управление жизненным циклом
- Использование ref
- Рефакторинг таймера
- Рефакторинг проекта Фильмы
- Рефакторинг проекта Фильмы, часть 2
- Проверка знаний
07Хуки подробно
- useState
- useEffect
- useContext
- useLayoutEffect
- useCallback, useMemo
- useImperativeHandle
- useReducer
- Пользовательские хуки
- Правила использования хуков
- Рефакторинг таймера
- Проверка знаний
08Проект "Витрина"
- Презентация проекта
- Обзор API
- Подготовка проекта
- Вывод списка товаров
- Состояние заказа
- Добавление товара в корзину
- Создание корзины
- Удаление из корзины
- Изменение количества товара в корзине
- Добавление подсказки о добавлении товара
- Публикация проекта
09Продвинутое управление состоянием приложения
- Context API и useReducer вместо пропсов
- Создание контекста с провайдером
- Создание редюсера
- Доработка редьюсера
- Переключение всех компонентов на контекст
- Обзор сделанного
- Проверка знаний
10Роутинг и SPA-приложение
- Роутинг и SPA, обзор проекта
- Базовый роутинг
- Компонент Link
- Хуки useParams и useHistory
- Хуки useLocation и useRouteMatch
- Вложенный роутинг
- Обзор API для проекта
- Настройка методов
- Главная страница
- Страница категории
- Страница рецепта
- Поиск на главной
- Нюансы публикации SPA
- Итоги курса
01Введение
- Обзор курса
- Что такое React
- Пререквизит к курсу
- Что необходимо установить
- Варианты окружения
02React и JSX
- Библиотеки React и ReactDOM
- Простое приложение на чистом React
- Преобразование приложения в JSX
- Особенности JSX
- Разделение приложения на модули
- Условная отрисовка
- Пример с прелоадером
- Проверка знаний
03Классовые компоненты
- Разбор составляющих базового React-шаблона
- Понятие React-компонента
- Состояние компонента и управление им
- Нюансы создания методов в классовых компонентах
- Жизненный цикл компонента
- Задание по созданию таймера
- Работа с коллекциями
- Однонаправленный поток данных
- Задание на обновление состояния через дочерние компоненты
- Отличие классовых компонентов от функциональных
- Проверка знаний
04Работа с формами в React
- Управляемые компоненты
- Валидация значений формы
- Checkbox, radio button, select
- Задание на создание формы
- Использование ref
- Неуправляемые компоненты
- Проверка знаний
05Проект "Фильмы"
- Обзор проекта
- Подготовка проекта
- Знакомство с API фильмов
- Задание на создание общего списка
- Добавление строки поиска
- Реализация поиска фильмов
- Добавление фильтрации
- Обработка неудачного поиска
- Безопасное хранение ключа API
- Сборка и публикация проекта
06Функциональные React-компоненты
- Работа с состоянием
- Кликер
- Управление жизненным циклом
- Использование ref
- Рефакторинг таймера
- Рефакторинг проекта Фильмы
- Рефакторинг проекта Фильмы, часть 2
- Проверка знаний
07Хуки подробно
- useState
- useEffect
- useContext
- useLayoutEffect
- useCallback, useMemo
- useImperativeHandle
- useReducer
- Пользовательские хуки
- Правила использования хуков
- Рефакторинг таймера
- Проверка знаний
08Проект "Витрина"
- Презентация проекта
- Обзор API
- Подготовка проекта
- Вывод списка товаров
- Состояние заказа
- Добавление товара в корзину
- Создание корзины
- Удаление из корзины
- Изменение количества товара в корзине
- Добавление подсказки о добавлении товара
- Публикация проекта
09Продвинутое управление состоянием приложения
- Context API и useReducer вместо пропсов
- Создание контекста с провайдером
- Создание редюсера
- Доработка редьюсера
- Переключение всех компонентов на контекст
- Обзор сделанного
- Проверка знаний
10Роутинг и SPA-приложение
- Роутинг и SPA, обзор проекта
- Базовый роутинг
- Компонент Link
- Хуки useParams и useHistory
- Хуки useLocation и useRouteMatch
- Вложенный роутинг
- Обзор API для проекта
- Настройка методов
- Главная страница
- Страница категории
- Страница рецепта
- Поиск на главной
- Нюансы публикации SPA
- Итоги курса
Документ после выпуска
Stepik
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «React для современных веб-приложений» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 7 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
