Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.
Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.
Чого ви навчитеся
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-приложения
Відгуки
Відгуків немає, поки що.