Курс React с нуля для начинающих

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Видеозаписи лекций без обратной связи и участия преподавателя. Вы получите доступ к материалам сразу после оплаты.

Чему вы научитесь

React 17
Классовые и функциональные компоненты
Управляемые и неуправляемые компоненты
Хуки
Работа с состоянием приложения
Работа с жизненным циклом приложения
JSX
Создание SPA (single page application) с react-router

Описание

Frontend-разработка — одна из самых популярных и востребованных профессий современности. Интересная и увлекательная. А React — самый популярный ее инструмент, разработанный компанией Facebook. На React сделаны Instagram, Facebook, Twitter, AirBnb, PayPal, Uber, Netflix, Vkontakte, Vimeo, Trello, сервисы Яндекса, сам проект курсов Udemy и много-много других крупных продуктов.

Курс «React с нуля для начинающих» позволит не только освоить азы данного инструмента, но и получить современные продвинутые техники его использования. В курсе используется последняя актуальная версия React 17.

Для кого этот курс

Для тех, кто хочет изучить самый популярный frontend фреймворк и подготовить портфолио
Для тех, кто пробовал сам изучать React, но по какой-либо причине не справился и хочет закрыть пробелы
Для тех, кто хочет углубиться в веб-разработку и взять лучшее из современных практик
Для тех, кто застрял на первых шагах профессии и хочет добрать компетенций к резюме
Для тех, кто хочет получить актуальные навыки и стать более востребованным на рынке веб-разработки

Материалы курса

Общая продолжительность 12 часов

Введение

— Обзор курса — что будем изучать
— Что такое React и его преимущества над классической разработкой
— Пререквизит знаний и где добирать при наличии пробелов
— Что необходимо установить
— Варианты окружения

React с JSX и без

— Библиотеки React и ReactDOM
— Простое приложение на чистом React
— Преобразование приложения в JSX
— Преобразование компонента в JSX
— Разбор задания по преобразованию компонента в JSX
— Особенности JSX
— Разделение приложения на модули
— Условная отрисовка
— Пример с прелоадером

Классовые React-компоненты

— Разбор составляющих базового React-шаблона
— Понятие React-компонента
— Состояние компонента и управление им
— Нюансы создания методов в классовых компонентах
— Создание полноценного кликера
— Разбор практики с кликером
— Понятие жизненного цикла React-компонента
— Задание на создание таймера: что надо сделать
— Создание таймера
— Разбор практики по созданию таймера
— Работа с коллекциями и атрибутом key
— Однонаправленный поток данных и состояния
— Задание на обновление состояния через дочерние компоненты: что надо сделать
— Обновление состояния через дочерние компоненты
— Разбор практики по обновлению состояния через дочерние компоненты
— Отличие классовых компонентов от функциональных в классическом понимании

Работа с формами в React

— Управляемые компоненты — принцип единой ответственности
— Валидация значений формы
— Элементы checkbox, radio button, select, textarea
— Задание на создание формы подписки: что надо сделать
— Создание формы подписки с валидацией
— Решение практики по созданию формы подписки
— Использование рефов и управление фокусом
— Неуправляемые компоненты

Проект «Фильмы»

— Обзор проекта «Фильмы». Постановка задачи
— Подготовка проекта, создание шапки и подвала
— Знакомство с API базой фильмов
— Задание на создание общего списка фильмов
— Создание общего списка фильмов
— Решение практики по созданию общего списка фильмов
— Добавление строки поиска
— Реализация поиска фильмов
— Решение практики по реализации поиска фильмов
— Задание на добавление фильтрации по категории: что надо сделать
— Добавление фильтрации по категориям
— Решении практики по добавлению фильтрации по категориям
— Обработка неудачного поиска
— Безопасное хранение ключа API
— Сборка приложения и выгрузка на продакшн

Функциональные React-компоненты

— Работа с состоянием в функциональном компоненте
— Кликер в функциональном компоненте
— Решение практики по созданию кликера через функциональный компонент
— Управление жизненным циклом через функциональный компонент
— Использование рефов в функциональном компоненте
— Рефакторинг таймера на функциональный компонент
— Решение практики по рефакторингу таймера в функциональный компонент
— Рефакторинг проекта с фильмами, часть 1
— Рефакторинг проекта с фильмами, часть 2

Хуки подробно

— useState
— useEffect
— useContext
— useLayoutEffect
— useCallback, useMemo
— useImperativeHandle
— useReducer
— Пользовательские хуки
— Правила использования хуков
— Рефакторинг таймера с использованием useReducer

Проект «Витрина»

— Презентация проекта
— Обзор API, что доступно, как использовать
— Подготовка проекта, шапка и футер
— Вывод списка товаров
— Состояние заказа, иконка корзины
— Функция добавления товара в заказ
— Решение: функция добавления товара в заказ
— Создание корзины, пересчет суммы заказа в корзине
— Функция удаления товара из корзины
— Изменение количества товара в корзине
— Решение: Изменение количества товара в корзине
— Добавление подсказки о добавлении товара
— Публикация проекта на GitHub Pages

Продвинутое управление состоянием приложения

— Концепция использования Context API и useReducer вместо пропсов
— Создание контекста с провайдером
— Создание редюсера, добавление первых кейсов
— Доработка редьюсера и методов в контексте
— Решение: Доработка редьюсера и методов в контексте
— Переключение всех компонентов на контекст вместо пропсов
— Обзор сделанного

Роутинг и SPA-приложение

— Роутинг и SPA, обзор проекта
— Базовый роутинг
— Компонент Link
— Хуки useParams, useHistory
— Хуки useLocation, useRouteMatch
— Вложенный роутинг
— Обзор API для проекта
— API настройка методов
— Главная страница с категориями
— Страница категории с блюдами
— Страница с рецептом
— Поиск на главной
— Нюанс выкладки на продакшн SPA-приложения