Stepik О курсе
Подробнее
Данный курс предназначен для тех, кто много слышал о библиотеке React, но при этом ни разу полноценно не пробовал поработать с ней. Обучение построено вокруг небольшого учебного проекта, который вы начнете разрабатывать практически с первых лекций. Таким образом, по мере разработки вы будете гармонично подходить к каждой следующей теме, изучая ее применительно к тому, над чем работаете. Это позволит избежать набора не сильно связанных между собой тем, которые разобраны на изолированных друг от друга примерах.
Вы изучите все основные современные технологии библиотеки React, а также две крупные библиотеки, без которых современная react-разработка почти не встречается: React Router и Redux Toolkit. Курс даётся сразу с точки зрения функциональных компонентов, но при этом есть лекции с разбором компонентов на основе классов. Для комфортного прохождения курса вам необходимы базовые знания HTML + CSS + JS. Последнему в курсе посвящены несколько лекций - тем темам JS, без понимания которых вам будет сложнее разобраться в React.
По окончании данного курса вы сможете:
реализовывать пользовательские интерфейсы на React
правильно логически разделять приложение на компоненты
научитесь связывать компоненты между собой, как используя технологию props, так и с помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit
освоите создание маршрутизации в приложении
научитесь работать с параметрами запроса и даже делать динамический контент в рамках участка страницы в зависимости от текущего URL адреса.
Помимо фундаментальных тем, на курсе разбираются более широкие аспекты разработки: виды стилизации компонентов, более продвинутые хуки и работа React “под капотом”. Для удобства прохождения курс разбит на 50 основных лекций, которые посвящены самой библиотеке React + дополнительные лекции по нативному языку JavaScript, которые помогут вам лучше понять основной материал.
Требования
Что нужно для старта
- Желательно иметь хорошие представления об HTML+CSS+JS
Результат
Что вы получите
- реализовывать пользовательские интерфейсы на React
- правильно логически разделять приложение на компоненты
- научитесь связывать компоненты между собой, как используя технологию props, так и с помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit
- освоите создание маршрутизации в приложении
- научитесь работать с параметрами запроса и даже делать динамический контент в рамках участка страницы в зависимости от текущего URL адреса.
Аудитория
Для кого этот курс
- Для новичков, желающих в краткие сроки "въехать" в разработку с помощью React JS
Содержание
17 занятийПрограмма курса
№ТемаЧто внутри
01JS необходимый для курса
- Репозиторий кода для курса
- Переменные
- Шаблонный литерал. Динамика в строках
- Условный оператор if
- Тернарный оператор
- Оператор нулевого слияния и &&
- Метод foreach
- Массивы - метод Find
- Массивы - метод Filter
- Массивы - метод Map
- Массивы - метод Reduce
02Знакомство с React
- Что такое React
- Знакомство с синтаксисом
03Первые компоненты на React
- Создаём первый компонент
- JSX разметка. Синтаксис и размещение элементов
- Композиция компонентов, родители и потомки
- Динамические значения и выражения в JSX
- ДЗ для самостоятельной работы
04Разбор JSX
- Под капотом JSX
- ДЗ для самостоятельной работы
05Быстрый старт приложения. Создание бойлерплейта
- Установка шаблона приложения CreateReactApp
- Подготовка структуры проекта
- Подготовка файлов для будущих компонентов
- Styled Components. Стилизация
- ДЗ для самостоятельной работы
06Передача данных между компонентами. Props
- React Props - передача данных между компонентами
- Как работают пропсы с точки зрения JS
- Пропсы в Styled Components
- ДЗ для самостоятельной работы
07Состояние приложения
- Состояние, реактивность, useState
- state vs props. Практика работы с состоянием
- Поднятие состояние. Более совершенная передача данных
- ДЗ для самостоятельной работы
08Рендеринг списков в приложении
- Рендеринг списков в React
- Практика работы со списками
- ДЗ для самостоятельной работы
09Условный рендеринг компонентов
- Возможности условного рендеринга
- Улучшаем компонент статистики
- Добавляем новые компоненты из MUI
- Используем Nivo
- ДЗ для самостоятельной работы
10React фрагменты
- Фрагменты - удобная группировка элементов
11Хуки useState и useEffect
- useState и использование предыдущего значения состояния
- useState и сложные типы данных
- useEffect - использование зависимостей
- ДЗ для самостоятельной работы
12Библиотека react-router
- Разбор типов роутинга
- Построение базовых маршрутов приложения
- useNavigate и useParams
- useSearchParams
- Советы по маршрутизации, маршрут индексной страницы, маршрут-заг
- Применяем новые знания в приложении
- ДЗ для самостоятельной работы
13Процесс рендеринга в React
- Концепции рендеринга, иммутабельность элементов, принцип объектн
- Классовые компоненты, работа с состоянием и пропсами
- Жизненный цикл компонента и его методы
- setState, привязка контекста внутри классовых компонентов
- ДЗ для самостоятельной работы
14Управление состоянием. Redux Toolkit
- Работа с состоянием - продвинутый уровень
- Знакомство с Redux Toolkit
- Редюсер и слайс
- Глобальное состояние. useSelector и useeDispatch
- Продолжаем применять Redux в приложении
- Вынос всего ключевого состояния
- ДЗ для самостоятельной работы
15Компоненты высшего порядка - НОС
- Особенности компонентов высшего порядка
- Расширение функционала с помощью HOC
- Виды стилизации и ещё немного о HOC
- ДЗ для самостоятельной работы
16Дополнительные хуки
- useRef и useContext
- useMemo
- useCallback
- Создание пользовательских хуков
- ДЗ для самостоятельной работы
17Заключение
- Заключение
01JS необходимый для курса
- Репозиторий кода для курса
- Переменные
- Шаблонный литерал. Динамика в строках
- Условный оператор if
- Тернарный оператор
- Оператор нулевого слияния и &&
- Метод foreach
- Массивы - метод Find
- Массивы - метод Filter
- Массивы - метод Map
- Массивы - метод Reduce
02Знакомство с React
- Что такое React
- Знакомство с синтаксисом
03Первые компоненты на React
- Создаём первый компонент
- JSX разметка. Синтаксис и размещение элементов
- Композиция компонентов, родители и потомки
- Динамические значения и выражения в JSX
- ДЗ для самостоятельной работы
04Разбор JSX
- Под капотом JSX
- ДЗ для самостоятельной работы
05Быстрый старт приложения. Создание бойлерплейта
- Установка шаблона приложения CreateReactApp
- Подготовка структуры проекта
- Подготовка файлов для будущих компонентов
- Styled Components. Стилизация
- ДЗ для самостоятельной работы
06Передача данных между компонентами. Props
- React Props - передача данных между компонентами
- Как работают пропсы с точки зрения JS
- Пропсы в Styled Components
- ДЗ для самостоятельной работы
07Состояние приложения
- Состояние, реактивность, useState
- state vs props. Практика работы с состоянием
- Поднятие состояние. Более совершенная передача данных
- ДЗ для самостоятельной работы
08Рендеринг списков в приложении
- Рендеринг списков в React
- Практика работы со списками
- ДЗ для самостоятельной работы
09Условный рендеринг компонентов
- Возможности условного рендеринга
- Улучшаем компонент статистики
- Добавляем новые компоненты из MUI
- Используем Nivo
- ДЗ для самостоятельной работы
10React фрагменты
- Фрагменты - удобная группировка элементов
11Хуки useState и useEffect
- useState и использование предыдущего значения состояния
- useState и сложные типы данных
- useEffect - использование зависимостей
- ДЗ для самостоятельной работы
12Библиотека react-router
- Разбор типов роутинга
- Построение базовых маршрутов приложения
- useNavigate и useParams
- useSearchParams
- Советы по маршрутизации, маршрут индексной страницы, маршрут-заг
- Применяем новые знания в приложении
- ДЗ для самостоятельной работы
13Процесс рендеринга в React
- Концепции рендеринга, иммутабельность элементов, принцип объектн
- Классовые компоненты, работа с состоянием и пропсами
- Жизненный цикл компонента и его методы
- setState, привязка контекста внутри классовых компонентов
- ДЗ для самостоятельной работы
14Управление состоянием. Redux Toolkit
- Работа с состоянием - продвинутый уровень
- Знакомство с Redux Toolkit
- Редюсер и слайс
- Глобальное состояние. useSelector и useeDispatch
- Продолжаем применять Redux в приложении
- Вынос всего ключевого состояния
- ДЗ для самостоятельной работы
15Компоненты высшего порядка - НОС
- Особенности компонентов высшего порядка
- Расширение функционала с помощью HOC
- Виды стилизации и ещё немного о HOC
- ДЗ для самостоятельной работы
16Дополнительные хуки
- useRef и useContext
- useMemo
- useCallback
- Создание пользовательских хуков
- ДЗ для самостоятельной работы
17Заключение
- Заключение
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «React - Полное руководство 2023» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
