Для кого этот курс:
Для новичков, желающих в краткие сроки “въехать” в разработку с помощью React JS
Данный курс предназначен для тех, кто много слышал о библиотеке React, но при этом ни разу полноценно не пробовал поработать с ней. Обучение построено вокруг небольшого учебного проекта, который вы начнете разрабатывать практически с первых лекций. Таким образом, по мере разработки вы будете гармонично подходить к каждой следующей теме, изучая ее применительно к тому, над чем работаете. Это позволит избежать набора не сильно связанных между собой тем, которые разобраны на изолированных друг от друга примерах.
Вы изучите все основные современные технологии библиотеки React, а также две крупные библиотеки, без которых современная react-разработка почти не встречается: React Router и Redux Toolkit. Курс даётся сразу с точки зрения функциональных компонентов, но при этом есть лекции с разбором компонентов на основе классов. Для комфортного прохождения курса вам необходимы базовые знания HTML + CSS + JS. Последнему в курсе посвящены несколько лекций – тем темам JS, без понимания которых вам будет сложнее разобраться в React.
По окончании данного курса вы сможете:
– реализовывать пользовательские интерфейсы на React
– правильно логически разделять приложение на компоненты
– научитесь связывать компоненты между собой, как используя технологию props, так и с – помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit
– освоите создание маршрутизации в приложении
– научитесь работать с параметрами запроса и даже делать динамический контент в рамках участка страницы в зависимости от текущего URL адреса.
Помимо фундаментальных тем, на курсе разбираются более широкие аспекты разработки: виды стилизации компонентов, более продвинутые хуки и работа React “под капотом”. Для удобства прохождения курс разбит на 50 основных лекций, которые посвящены самой библиотеке React + дополнительные лекции по нативному языку JavaScript, которые помогут вам лучше понять основной материал.
Программа курса:
- Репозиторий кода для курса
- Переменные
- Шаблонный литерал. Динамика в строках
- Условный оператор if
- Тернарный оператор
- Оператор нулевого слияния и &&
- Метод foreach
- Массивы – метод Find
- Массивы – метод Filter
- Массивы – метод Map
- Массивы – метод Reduce
Знакомство с React
- Что такое React
- Знакомство с синтаксисом
Первые компоненты на React
- Создаём первый компонент
- JSX разметка. Синтаксис и размещение элементов
- Композиция компонентов, родители и потомки
- Динамические значения и выражения в JSX
- ДЗ для самостоятельной работы
Разбор JSX
- Под капотом JSX
- ДЗ для самостоятельной работы
Быстрый старт приложения. Создание бойлерплейта
- Установка шаблона приложения CreateReactApp
- Подготовка структуры проекта
- Подготовка файлов для будущих компонентов
- Styled Components. Стилизация
- ДЗ для самостоятельной работы
Передача данных между компонентами. Props
- React Props – передача данных между компонентами
- Как работают пропсы с точки зрения JS
- Пропсы в Styled Components
- ДЗ для самостоятельной работы
Состояние приложения
- Состояние, реактивность, useState
- state vs props. Практика работы с состоянием
- Поднятие состояние. Более совершенная передача данных
- ДЗ для самостоятельной работы
Рендеринг списков в приложении
- Рендеринг списков в React
- Практика работы со списками
- ДЗ для самостоятельной работы
Условный рендеринг компонентов
- Возможности условного рендеринга
- Улучшаем компонент статистики
- Добавляем новые компоненты из MUI
- Используем Nivo
- ДЗ для самостоятельной работы
React фрагменты
- Фрагменты – удобная группировка элементов
Хуки useState и useEffect
- useState и использование предыдущего значения состояния
- useState и сложные типы данных
- useEffect – использование зависимостей
- ДЗ для самостоятельной работы
Библиотека react-router
- Разбор типов роутинга
- Построение базовых маршрутов приложения
- useNavigate и useParams
- useSearchParams
- Советы по маршрутизации, маршрут индексной страницы, маршрут заг
- Применяем новые знания в приложении
- ДЗ для самостоятельной работы
Процесс рендеринга в React
- Концепции рендеринга, иммутабельность элементов, принцип объектн
- Классовые компоненты, работа с состоянием и пропсами
- Жизненный цикл компонента и его методы
- setState, привязка контекста внутри классовых компонентов
- ДЗ для самостоятельной работы
Управление состоянием. Redux Toolkit
- Работа с состоянием – продвинутый уровень
- Знакомство с Redux Toolkit
- Редюсер и слайс
- Глобальное состояние. useSelector и useeDispatch
- Продолжаем применять Redux в приложении
- Вынос всего ключевого состояния
- ДЗ для самостоятельной работы
Компоненты высшего порядка – НОС
- Особенности компонентов высшего порядка
- Расширение функционала с помощью HOC
- Виды стилизации и ещё немного о HOC
- ДЗ для самостоятельной работы
Дополнительные хуки
- useRef и useContext
- useMemo
- useCallback
- Создание пользовательских хуков
- ДЗ для самостоятельной работы
Что вы получаете:
- реализовывать пользовательские интерфейсы на React
- правильно логически разделять приложение на компоненты
- научитесь связывать компоненты между собой, как используя технологию props, так и с помощью глобального стейта, применяя встроенные возможности React, такие, как useContext, или стейтменеджер Redux Toolkit
Заключение.