Введение

• Об этом курсе
• Что такое React
• Первое React приложение
• Настройка среды разработки
• Как скачать код примеров
• Современный JavaScript и его версии

ECMAScript 2019

• Введение - как использовать этот раздел
• Ключевые слова let и const
• Arrow-функции
• Параметры по-умолчанию
• Rest параметр
• Spread оператор для массивов
• Деструктуризация объектов
• Деструктуризация массивов
• Шаблонные строки (template strings)
• Объекты
• Оператор Object Spread
• Прототипы
• Классы
• Свойства классов (class properties)
• Модули в JavaScript

Основы React

• Каким будет наш первый проект
• Создаём пустой React проект
• React элементы
• React компоненты
• JSX
• Упражнение - Code Review 1
• Структура React проекта (часть 1)
• Props - свойства компонентов
• Массивы, как свойства компонентов
• Коллекции и ключи
• Как импортировать css
• Структура React проекта - часть 2

Состояние компонентов и обработка событий

• Компоненты-классы
• Обработка событий
• State - состояние React компонента
• Как работает setState()
• Обновление состояние, зависящее от предыдущего состояния
• Собственные события
• setState() - удаление элемента
• setState() - добавление элемента
• Данные в React приложении
• setState() - редактирование элементов
• Работа с формами
• Контролируемые компоненты

Заканчиваем Todo App

• Как использовать этот раздел
• Реализуем поиск
• Реализуем фильтры

Работа с сервером

• Каким будет наш следующий проект
• Новый адрес сервиса SWAPI
• Создаём пустой проект
• Выбор HTTP API для браузера
• Как работает Fetch API
• Обработка ошибок в Fetch API
• Создаём клиент для API
• Создаём компоненты StarDB
• Компонент, который получает данные из API
• Трансформация данных API
• Создаём индикатор загрузки
• Логика индикатора загрузки
• Обработка ошибок сети в компоненте
• Работа с API - выводы

Жизненный цикл компонентов

• Зачем компонентам "жизненный цикл"?
• Методы жизненного цикла
• componentDidMount()
• Используем на практике componentDidMount()
• componentDidUpdate()
• Используем на практике componentDidUpdate()
• componentWillUnmount()
• componentDidCatch()
• Используем componentDidCatch() на практике

Паттерны React

• Паттерны React - введение
• Использование функций
• Render-функции
• Свойства-элементы
• Children
• Практика - рефакторинг компонента
• Работа с props.children
• Клонирование элементов
• Компоненты высшего порядка (HOC)
• Рефакторинг компонентов
• Композиция компонентов высшего порядка
• Контекст
• Использование Context API
• Использование HOC для работы с контекстом
• Трансформация props в компонентах высшего порядка
• Обновление контекста
• Рефакторинг: делаем код чище
• Рефакторинг компонентов высшего порядка (опциональный урок)
• Функция compose() (опциональный урок))
• Свойство defaultProps
• Свойство propTypes
• NPM - установка дополнительных пакетов
• Библиотеки prop-types

React Hooks

• Что такое React Hooks (хуки)
• Новый проект
• useState()
• useContext()
• useEffect()
• useEffect() - упражнения
• Использование useEffect() для загрузки данных
• Создание собственных хуков
• useCallback() и useMemo()
• Правила и ограничения хуков

React Router

• Что такое роутинг
• Основы react-router
• Link
• Как работает Route
• Динамические пути
• withRouter
• Относительные пути
• Опциональные параметры
• Авторизация и "закрытые" страницы
• Switch (обработка несуществующих адресов)

Подготовка инструментов

• Что мы будем реализовывать?
• Генерация проекта
• Я подготовил для вас файлы

Создание компонентов

• Создание компонентов
• Отрисовка разметки компонентов

Работа с состоянием

• Сохранение состояния внутри компонентов
• Глобальное состояние

Добавляем функционал

• Отрисовываем вопросы
• Реализуем next функционал
• Создаем страницу результатов
• Отрисовываем ответы
• Подсвечиваем ответы

Работаем с реальным API

• Делаем асинхронные запросы к trivia API

Деплоймент

• Арендуем продакшен сервер
• Конфигурируем продакшен сервер
• Заливаем проект

Что дальше?

• Домашнее задание
• Бонус лекция

Теория React

• Вводный урок
• Что такое React JS
• Как работает React JS
• NPM и Create-React-App

JSX синтаксис

• Что такое JSX и как это работает
• Создание компонента
• Вывод динамических данных
• Передача данных в React

React JS основы

• Все о State
• События и добавление событий
• Изменение State, передача параметров в функцию
• Работа с input
• Работа со списками в React
• Условные и тернарные операторы
• Стилизация компонентов в React

React компоненты

• Жизненный цикл компонентов
• Фрагменты React
• Введение в компоненты высокого порядка
• PropTypes валидация входящих параметров
• Refs
• Context. Что это и как применяется

React практика

• Настройка приложения
• Создание Layout
• Создание header
• Создание шаблонов сайдбара и главной страницы
• Инициализация State
• Создание контекста и сайдбара
• Создание главной страницы
• React-router настройка приложения
• React-router регистрация роутов навигация в приложении
• Настройка роутинга в проекте
• Получение курса валют и вывод на главную страницу
• Создание калькулятора
• Создание компонента кнопки
• Создание шаблона страницы sample
• Работа с базой данных часть 1
• Работа с базой данных часть 2
• Работа с базой данных часть 3
• Создание окна регистрации
• Создание компонента input
• Валидация формы часть 1
• Валидация формы часть 2
• Скрытие окна регистрации, динамические классы
• Регистрация часть 1
• Регистрация часть 2
• Deploy проекта

Вступление

• Вступление

Основы хуков, useState

• Основы useState
• Функция vs класс
• Первые пользовательские хуки
• Ленивая инициализация useState
• Хранение функций в useState

Сайд эффекты, useEffect

• Основы useEffect
• useEffect vs useLayoutEffect

Императивный код в React, useRef

• Хук useRef
• Master-detail layout
• Хук useImperativeHandle
• Компоненты высшего порядка

Продвинутые хуки и концепции

• Хук useCallback
• Хук useMemo + Как React рендерит компоненты
• Хук useContext
• Хук useReducer
• Хук useDebugValue, React Dev Tools
• Фабрика хуков

Учимся писать кастомные хуки

• Вступление
• useToggle 2.0
• useEventListener
• useWhatCausedRender
• useDebounce vs useThrottle
• useLocalStorage
• useWindowSize
• useAsync + useAnimatedText
• usePrevious
• useHistory
• useElementSize
• useInterval
• useTimeout
• useMountedRef
• useHovered

Шаблоны проектирования

• Шаблоны проектирования в React
• Составной компонент / Compound component
• Составной компонент. Часть 2

Получение данных

• Вступление
• Храним удаленные данные в контексте
• Храним удаленные данные в контексте. Часть 2
• Используем SWR
• Компонент Button. Абсолютные пути в импорте
• Используем React Query

Бонус

• Еще раз о свойстве key
• Группировка апдейтов
• Манипуляции с DOM
• StritcMode
• Children
• Events
• Event delegation

Подготовка базового интерфейса

• Введение
• Установка create-react-app
• Верстка поля ввода добавления города
• Верстка карточки города

Базовый React

• Props и рендеринг компонентов
• Обработка событий
• useState
• Использование useState на практике
• useRef

Продвинутый React

• useEffect
• Используем fetch внутри useEffect
• useMemo
• Пользовательские хуки
• Оптимизация React приложений с помощью memo и profiler

Контроль сложного стейта приложения

• useReducer
• Удаление города из списка с помощью useReducer
• Переименование города
• useContext для глобального стейта приложения

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

• Синтаксис классовых компонентов
• Использование state в классовых компонентах
• Методы жизненного цикла классовых компонентов
• Компоненты высшего порядка(HOC)
• Осмотр готовых компонентов высшего порядка
• componentDidCatch и errorBoundary

React router

• Установка react-router
• Создаем новый компонент под отдельный Route
• Переиспользуем старый компонент в новой странице
• useHistory/useRouteMatch
• useForecast
• Базовая верстка мини-карточки погоды
• Детали погоды на мини-карточке
• Добавление ссылки на главную страницу
• useLocation/useParams

Тестирование

• Ручное тестирование UI
• Тестирование запросов по сети и обработка ошибок
• Unit тестирование компонентов
• Unit тесты для классовых компонентов
• Unit тесты для функций
• Введение в TDD
• TDD: основная часть

Введение

• Обзор курса - что будем изучать
• Что такое 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, обзор проекта
• Разница в версиях ReactRouter
• Базовый роутинг
• Компонент Link
• Хуки useParams, useHistory
• Хуки useLocation, useRouteMatch
• Вложенный роутинг
• Обзор API для проекта
• API настройка методов
• Главная страница с категориями
• Страница категории с блюдами
• Страница с рецептом
• Поиск на главной
• Нюанс выкладки на продакшн SPA-приложения

Как работает Redux

• Введение
• Как работает Redux
• Настройка React/Redux проекта
• Работа с функцией connect и создание компонента
• Redux хуки, разбор хуков, создание компонента и работа с хуками
• Объединение редьюсеров, работа с функцией CombineReducers

React + Redux практика

• Настройка проекта
• Создание Layout и контекста
• Создание шаблонов меню и маски
• Написание логики для меню и маски
• Работа со сторонним API
• Получение данных из базы данных
• Создание главной страницы
• Создание компонента списка
• Получение информации о покемоне
• Создание лоадера
• Создание страницы описания
• Настройка роутинга
• Deploy проекта

React Hooks - Пишем Реальный Проект с Нуля

• Почему хуки?
• Архитектура проекта
• Создание проекта
• Автоформатирование кода
• Разворачиваем API локально
• Устанавливаем роутер
• Добавляем верхнее меню
• Отрисовываем страницу логина
• Use state хук
• Use state хук для страницы логина
• Use ref
• Use effect
• Реализуем fetch внутри effect хука
• Use fetch хук
• Создаем use fetch хук
• Страница регистрации
• Сохраняем токен юзера
• Создаем localstorage хук
• Exhaustive deps
• Контекст текущего юзера
• Ошибки валидации
• Получаем текущего юзера
• Use callback хук
• Улучшаем вернее меню
• Создаем фид
• Реализуем пагинацию
• Добавляем популярные теги
• Переключение между фидами
• Реализуем фид по тегу
• Реализуем твой фид
• Страница поста
• Use reducer
• Форма поста
• Создание поста
• Редактирование поста
• Удаление поста
• Страница настроек
• Добавляем в избранное
• Профиль пользователя
• Реализуем статьи пользователя
• Use effect callback
• Домашнее задание
• Бонус лекция

Введение

• Введение
• Подготовка
• Роутер и стили

Apollo GraphQL

• Клиент Apollo
• Запрос GET MOVIES
• Запрос GET MOVIE
• Кеширование в Apollo и стили
• Проверка данных и Apollo Dev Tools
• Домашнее задание - Рекомендации
• Итоги

Локальное состояние

• Локальное состояние - часть 1
• Локальное состояние - часть 2
• Вывод локальных данных на страницу о фильме
• Итоги
• Подарок!

Введение

• Введение
• Требования
• Требования по теории
• Почему стоит изучить React

Подготовка

• Создание первого приложения на React
• Создание репозитория на Github
• Как работает React?

JSX и props

• Создание первого компонента React
• Переиспользование компонентов с JSX + props
• Динамическая генерация компонентов
• Упражняемся с функцией map
• Защита с помощью PropTypes

Состояния (states)

• Классовые компоненты и состояния
• Работа с состояниями
• Жизненный цикл компонента
• Планирование компонента Movie

(Практика) Создание базы фильмов

• Получение фильмов по API
• Отображение фильмов
• Оформление фильмов
• Добавление жанров
• Применение CSS-стилей
• Обрезка описания фильмов

Развертывание на Github Pages

• Развертывание на Github Pages
• Итоги курса

(Бонус) Маршрутизация в React

• Подготовка к использованию роутера
• Настройка роутера
• Внедрение навигации
• Передача Props с помощью роутера
• Редиректы

Подарок!

• Подарок!

Что такое React

• Что такое React
• Как работает React
• Что такое компоненты
• Create React App
• Обзор приложения

JSX-синтаксис

• Как работает JSX
• Ограничения
• Inline-стили
• Создание простого компонента
• Вывод динамических данных
• Передача параметров
• Передача контента

Основы React

• Создание State
• Добавление событий
• Изменение State
• Передача параметров в функцию
• Обработка Input
• Работа со списком
• Работа с условными операторами
• Динамические списки

Стилизация компонентов

• Inline-стили
• Подключение CSS
• Динамические классы
• Radium
• Препроцессоры (SASS/SCSS)
• CSS (SCSS) модули

Компоненты React

• Передача параметров в компонент
• Инициализация State
• Базовый жизненный цикл
• Создание Stateful компонента
• Жизненный цикл изменения
• Жизненный цикл удаления
• Жизненные циклы React 16.3+
• ErrorBoundary
• Фрагменты. Часть 1
• Фрагменты. Часть 2
• Правильное изменение State
• Введение в компоненты высшего порядка
• Валидация параметров с PropTypes
• Референции
• Context API

Практика. Компоненты

• Создание проекта
• Создание Layout
• Обновление версии create-react-app
• Подключение CSS-модулей
• Создание главной страницы
• Компонент активного вопроса
• Список вопросов
• Обработка клика
• Изменение вопроса
• Отображение состояния ответа
• Проверка правильности
• Вывод результатов
• Вычисление результатов
• Компонент кнопки
• Кнопка переключения меню
• Реализация меню
• Компонент затемнения

React Router

• Установка и настройка
• Регистрация роута
• Роутинг и компоненты
• Навигация между страницами
• Параметры ссылки
• Программная навигация
• Роутинг и функциональные компоненты
• Динамические роуты
• Редирект и ошибка 404
• Защита роутов

Практика. Роутинг

• Настройка роутера
• Создание страниц
• Навигация
• Страница списка
• Ссылка через кастомный компонент

Практика. Формы

• Страница авторизации
• Компонент текстового поля
• Валидация. Часть 1
• Валидация. Часть 2
• Валидация формы
• Создание тестов
• Создание контролов
• Создание компонента Select
• Изменение контролов
• Добавление вопроса

Практика. Работа с сервером

• Настройка проекта
• Создание теста
• Загрузка списка тестов
• Компонент прогресса загрузки
• Загрузка теста
• Авторизация

Настройка проекта

• Знакомимся с заготовкой проекта
• Настраиваем проект

Разработка страницы товаров

• Загрузка данных для страницы товаров
• Подготовка данных для страницы товаров
• Отрисовываем страницу с товарами

Пагинация

• Добавляем пагинацию

Разработка страницы отдельного товара

• Подготовка данных для страницы товара
• Отрисовка страницы отдельного товара

Виджет корзины

• Добавляем корзину на все страницы

Поиск

• Реализуем поиск товаров

Категории

• Подготовка данных для категорий
• Отрисовываем категории и фильтруем товары

Разработка страницы корзины

• Подготавливаем данные для страницы корзины
• Добавляем екшены к корзине

Получение данных от API

• Получение данных от API

Домашнее задание

• Домашнее задание
• Бонус лекция

Создание приложения списка задач

• Экран, Компонент, Flatlist
• Стили задачи, Checkbox, useState
• Добавление и выполнение задачи, setState
• Редактирование задачи и Picker
• Удаление задачи, стилизация и иконки

Введение

• Об этом курсе
• Требования
• Expo и React Native CLI
• Создание проекта
• Знакомство с Expo
• Как работает React Native

Логика

• Расположение элементов с Flexbox
• Экран загрузки
• Получение геопозиции
• Запрос разрешения на доступ к геопозиции
• Получение погоды по API

Оформление

• Отображение температуры
• Получение погодных условий
• Иконки и оформление
• Градиентный фон
• Заголовки и подзаголовки
• Итоги курса

Подарок!

• Подарок!

Введение

• Преимущества NextJS
• Как устроен курс
• Обзор проекта
• Update - Обзор курсов

Настройка окружения

• Установка софта
• Работа с nvm
• Настройки VSCode

TypeScript

• Вводное видео
• Компилятор TypeScript
• Базовые типы
• Interfaces and Types
• Упражнение - Interfaces
• Литеральные типы
• Enums
• Tuple
• Generics
• JSX
• Тест - TypeScript

Старт проекта

• Обзор модуля
• Развертка проекта
• Структура проекта
• Настройка eslint
• Замечания по stylelint
• Настройка stylelint
• Отладка в VSCode
• React Dev Tools
• Тест - Старт проекта

Компоненты Head и Document

• Жизненный цикл React
• Компонент head
• React Fragment
• Компонент Document
• Тест - Компоненты Head и Document

Figma для разработчика

• Обзор модуля
• Разбор интерфейса
• Свойства компонент
• Экспорт графики
• Тест - Figma для разработчика

Простые компоненты

• Шрифты и цвета
• Первый компонент
• Update - Библиотека classnames
• Classnames
• HTMLProps
• Updated - Детали HTMLprops
• Замечания при работе с SVG
• Работа с svg
• Дополнительно - SVG в NextJS 11
• Дополнительно - Обновление SVGR
• Упражнение - Компонент p
• Компонент тэга
• Тест - Простые компоненты

Statefull компоненты

• React Hooks
• useState
• useEffect
• Правила использования Hooks
• Архитектура компонента рейтинга
• Компонент рейтинга - 1
• Компонент рейтинга - 2
• Тест - Statefull компоненты

HOC компоненты

• Что такое HOC?
• Layout
• Пишем HOC withLayout
• Тест - HOC компоненты

CSS Grid

• Обзор модуля
• Template и gap
• Justify и align
• Распределение ячеек
• Template-area
• Лучшие практики
• Вёрстка layout
• Упражнение - Вёрстка footer
• Тест - CSS Grid

Введение и подготовка

• Про данный курс
• Как работает React Native
• Создание первого проекта
• Если возникает ошибка при установке
• Запуск на мобильном телефоне
• Настройка Android
• Настройка iOS
• Среда разработки

Основы

• Планирование приложения
• Создание и обзор приложения
• Как работают стили
• Выравнивание элементов
• Взаимодействие компонентов
• Работа с документацией
• Добавление формы
• Создание стейта
• Вывод списка элементов
• Обработка формы
• Вывод сообщения с ошибкой
• Параметры клавиатуры
• Добавление скролла
• Рендеринг списка
• Добавление событий

Работа с компонентами

• Планирование функционала
• Добавление разных экранов
• Переключение экранов
• Стилизация кнопок
• Создание констант для темы
• Компонент карточки
• Окно confirm
• Создание модального окна
• Изменение и сохранение элементов
• Работа с картинками

Элементы Expo и стили

• Загрузка шрифтов
• Подключение шрифтов
• Переиспользуемые компоненты текста
• Добавление иконок
• Использование иконок
• Управление клавиатурой
• Определение платформы
• Адаптивные стили
• Адаптация ориентации экрана

Управление состоянием c Context

• Что будем делать
• Создание контекста
• Рефакторинг приложения
• Создание редюсера
• Рефакторинг редюсера
• Создание состояния экрана
• Изменение экрана
• Рефакторинг приложения
• Завершение

Работа с сервером

• Настройка Firebase
• Подготовка приложения
• Создание нового элемента
• Загрузка данных с сервера
• Индикатор загрузки
• Обработка ошибок
• Обновление элементов
• Удаление элементов
• Рефакторинг и создание класса Http

Навигация (Новое Приложение)

• Перед просмотром блока
• Планирование
• Создание приложения
• Создание экранов
• Настройка навигации
• Переключение экранов
• Стилизация навигации
• Стилизация отдельного скрина
• Компонент отображения поста
• Параметры навигации
• Стилизация страницы поста
• Добавление иконок в шапку
• Динамические иконки в шапке
• Нижняя навигация
• Отображение избранного
• Адаптация меню под андроид
• Рефакторинг кода
• Добавление левого меню
• Завершение навигации
• Стилистика для меню
• Завершение

Redux

• Как работает Redux
• Настройка Redux
• Получение данных
• Добавление в избранное
• Удаление данных
• Создание нового элемента

Нативные компоненты

• Введение и установка
• Добавление фото
• Завершение формы
• Подготовка приложения
• Подключение базы данных
• Получение данных из базы
• Файлы и создание записи
• Обновление и удаление
• Завершение приложения

Подготовка и деплой

• Настройка приложения
• Обновления приложения
• Подготовка в билду
• Билд и деплой

Базовое приложение (основа для backend и frontend)

• Создание структуры проекта в Visual Studio
• Создание package.json
• Настройка конфигурации сборщика Webpack
• Точка входа для React
• Представление index.cshtml
• Настрока backend-части на ASP.Net Core
• Установка пакетов npm и тестирование приложения
• Добавление React-компонентов
• React routing
• Тестирование многокомпонентного React-приложения

Backend и бизнес-логика

• Создание бизнес-моделей
• Методы WEB API

Управление состоянием на frontend

• Интеграция Redux
• Комбинирование редьюсеров
• Поддержка загрузки данных с сервера в редьюсере
• Синхронные действия для изменения состояния
• Асинхронные действия и получение данных из API
• Подключение действий в react-компоненты
• Проверка работы компонентов с динамическим состоянием

Работа с базой данных

• Создание базы данных и проектирование таблиц
• Настройка Entity Framework
• Испытание Entity Framweork в тестах
• Проектирование репозиториев
• Реализация репозиториев
• Тестирование работы репозиториев
• Обобщенный (generic) репозиторий
• Реальные данные из БД в контроллерах

Оформление Frontend в AntDesign

• Основная подложка сайта в antd
• Боковое меню приложения
• Элементы Antd Descriptions для описаний
• Оформление таблиц через Antd.Table - сведения о колонках
• Внедрение таблиц Antd.Table

Серверный постраничный вывод (пейджинг)

• API с поддержкой страниц
• Постраничный вывод в Redux
• Внедрение постраничного вывода в React-компонент
• Постраничный вывод во втором компоненте. Тестирование

Введение

Настройка окружения

• Установка софта
• Работа с nvm
• Настройки VSCode

TypeScript

• Вводное видео
• Компилятор TypeScript
• Базовые типы
• Interfaces and Types
• Упражнение - Interfaces
• Литеральные типы
• Enums
• Generics
• JSX
• Тест - TypeScript

Старт проекта

• Обзор модуля
• Развертка проекта
• Структура проекта
• Настройка eslint
• Настройка stylelint
• Отладка в VSCode
• React Dev Tools
• Тест - Старт проекта

Компоненты Head и Document

• Жизненный цикл React
• Компонент head
• React Fragment
• Компонент Document
• Тест - Компоненты Head и Document

Figma для разработчика

• Обзор модуля
• Разбор интерфейса
• Свойства компонент
• Экспорт графики
• Тест - Figma для разработчика

Простые компоненты

• Шрифты и цвета
• Первый компонент
• Classnames
• HTMLProps
• Работа с svg
• Дополнительно - SVG в NextJS 11
• Упражнение - Компонент p
• Компонент тэга
• Тест - Простые компоненты

Statefull компоненты

• React Hooks
• useEffect
• Правила использования Hooks
• Архитектура компонента рейтинга
• Компонент рейтинга - 1
• Компонент рейтинга - 2
• Тест - Statefull компоненты

HOC компоненты

• Что такое HOC?
• Layout
• Пишем HOC withLayout
• Тест - HOC компоненты

CSS Grid

• Обзор модуля
• Justify и align
• Распределение ячеек
• Template-area
• Лучшие практики
• Вёрстка layout
• Упражнение - Вёрстка footer
• Тест - CSS Grid

Server side rendering

• Переменные окружения
• Как работает SSR?
• SSR в NextJS
• Использование getStaticProps
• Использование getStaticPaths
• Тест - Server side rendering

Контекст

• useContext
• Вёрстка меню
• Тест - Контекст

Роутинг

• Компонент Link
• useRouter
• Упражнение - Добавление страниц
• Структура роутинга
• Вёрстка Sidebar
• Тест - Роутинг

Страница продуктов

• Компоненты страниц
• Вёрстка страницы продуктов - 1
• Regex отображения цены
• Упражнение - Доработка страницы
• Вёрстка страницы продуктов - 2
• Вставка HTML
• useReducer
• Компонент сортировки
• Reducer сортировки
• Тест - Страница продуктов

Компонент продукта

• Компонент Input
• Упражнение - Компонент Textarea
• Компонент поиска
• Компонент продукта - планирование
• Компонент продукта - сетка
• Компонент продукта - стили
• Склонение слов
• Компонент Image
• Компонент продукта - адаптив
• Тест - Компонент продукта

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

• Компонент отзыва
• Форма отзыва
• useForm
• Работа с формами
• Проброс ref
• Обработка ошибок
• Упражнение - Обработка ошибок Rating
• Отправка запроса со страницы
• useRef
• Упражнение - Исправление бага useReducer

Анимация на Framer Motion

• Вводное видео
• Принципы анимации
• Анимация меню
• Анимация сортировки
• Пишем свой hook
• useAnimation
• Упражнение - Анимация отзывов
• Динамическая иконка
• Мобильное меню
• Жесты и MotionValues
• Производительность

Доступность

• Виды доступности
• Цветовая доступность
• Доступность меню с клавиатуры
• Доступность форм с клавиатуры
• Упражнение - доступность сортировки
• ARIA атрибуты
• Использование Screen Reader
• Aria-label и aria-labelledby
• Aria-hidden
• Добавление landmarks
• Доступность форм
• Упражнение - Доступность оповещений
• Доступность меню и списка
• Уменьшение движения

Подготовка к production

• Добавление meta на страницу
• Установка метрики
• Husky
• Next export
• Страницы 404, 500
• Сборка контейнера Docker
• Запуск через docker-compose
• Github actions

Зачем нужны фреймворки и как подключить реакт

• Введение
• Разметка на React
• Parcel и JSX
• Create-react-app
• Конспект раздела

JSX и компонентный подход: делаем компоненты бутстрапа

• Приветствие
• О компонентном подходе
• Делаем компонент Button
• Условный рендеринг
• Делаем компонент ButtonsGroup
• Добавляем состояние в ButtonsGroup
• Делаем компонент Progress
• Конспект раздела

Как работает реакт, покоряем ребят на собеседовании

• Приветствие
• Главное требование современного интерфейса
• Как рендерит браузер
• Как решали проблему частных ререндеров до реакта
• Как работает реакт, преимущества и недостатки
• Реакт — это библиотека
• Выбираем проект
• Настраиваем окружение
• Конспект раздела

Начинаем делать MVP канбана

• Приветствие
• Понимание задачи и поиск аналогов
• Проектирование на бумажке
• Создаем бекенд в Firebase и запускаем проект
• Создаем структуру приложения
• Верстаем список досок
• Загружаем список досок с сервера
• Делаем создание доски
• Синхронизируем данные между компонентами
• Однонаправленный поток данных
• Конспект раздела

Доделываем MVP

• Верстаем колонки
• Создаем колонки
• Удаляем колонки
• Карточки
• Синхронизируем данные между панелями
• Плохо ли использовать чужое
• Конспект раздела

Рефакторинг и архитектура

• Приветствие
• Рефакторим бекенд досок
• Рефакторим бекенд карточек и колонок
• Рефакторим состояние в App, используем кастомные хуки
• Рефакторим состояние, используем контекст реакта
• Правим баги в приложении
• Конспект раздела

Классовые компоненты против функциональных

• Приветствие
• Классовые компоненты
• Error Boundary
• Дизайн колонок
• Переделываем создание колонок
• Конспект раздела

Роутер, router-5

• Приветствие
• Понимаем роутер
• Подключаем router-5
• Передаем параметры в роут
• Конспект раздела

Роутер, react-router

• Приветствие
• Верстаем шапку, разбираемся с фигмой
• Верстаем подвал
• Верстаем контент
• Подключаем react-router
• Простая анимация при переключении роутов
• Сложная анимация при переключении роутов
• Конспект раздела

Redux

• Архитектура Redux
• Подключаем редакс к проекту
• Переписываем useAppState на редакс
• Подключаем редакс к интерфейсу
• Redux Devtools Extension
• Асинхронность в экшенах, redux-thunk
• Миддлвэры
• Конспект раздела

Введение

• Знакомство с хуками
• Требования
• Рабочее окружение

useState

• Знакомство с хуком useState
• useInput - часть 1
• useInput - часть 2
• useTabs

useEffect

• Знакомство с хуком useEffect
• useTitle
• useClick
• useConfirm и usePreventLeave
• useBeforeLeave
• useFadeIn и useNetwork
• useScroll и useFullscreen
• useNotifications
• useAxios
• Итоги
• Публикация на NPM
• Что изучать дальше
• Подарок!