Курсы React

20 программ обучения

Платформа:: Udemy

React + Redux - Профессиональная Разработка

Продолжительность:: 30 часов

Язык:: русский

Практическая разработка коммерческих React приложений

22 ч видео

Программа

Введение

Об этом курсе
Что такое 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 (обработка несуществующих адресов)

Платформа:: Udemy

React для Начинающих - Создание Quiz изучая React

Продолжительность:: 30 часов

Язык:: русский

React.js основы. Изучите React hooks, Context, Http, Api и деплой React проекта на продакшен.

2,5 ч видео
1 статья
12 ресурсов для скачивания

Программа

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

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

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

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

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

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

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

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

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

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

Деплоймент

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

Что дальше?

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

Платформа:: Udemy

React JS 2021 Лёгкий старт

Продолжительность:: 30 часов

Язык:: русский

Ты освоишь все основные концепции библиотеки React JS за считанные часы!

8,5 ч видео
38 ресурсов для скачивания

Программа

Теория 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 проекта

Платформа:: Udemy

React Hooks в Деталях

Продолжительность:: 30 часов

Язык:: русский

Вся сила и мощь React Hooks API. Десятки интересных примеров. Кастомные хуки, шаблоны проектирования и многое другое.

10,5 hours видео

Программа

Вступление

Вступление

Основы хуков, 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

Платформа:: Udemy

React JS с нуля и до создания полноценного SPA-приложения

Продолжительность:: 30 часов

Язык:: русский

Научитесь понимать React, писать React приложения, хуки, настраивать роутинг, тестировать свой код и многое другое

5,5 ч видео

Программа

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

Введение
Установка 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: основная часть

Платформа:: Udemy

React с нуля для начинающих. +3 проекта в портфолио!

Продолжительность:: 30 часов

Язык:: русский

React 17 от азов до создания полноценного SPA-приложения - с роутингом и продвинутым управлением состоянием.

12 ч видео
2 статей
13 упражнений по написанию кода

Программа

Введение

Обзор курса - что будем изучать
Что такое 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-приложения

Платформа:: Udemy

React JS и Redux - быстрый курс для начинающих

Продолжительность:: 30 часов

Язык:: русский

Это курс для начального освоения и получения базовых знаний в разработке приложений с применением React и Redux.

3,5 ч видео
15 ресурсов для скачивания

Программа

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

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

React + Redux практика

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

Платформа:: Udemy

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

Продолжительность:: 30 часов

Язык:: русский

Изучите Reactjs, Hooks, Redux, React Routing, Context, Авторизацию, API разработав реальный проект от начала и до ко

7 ч видео
1 статья
38 ресурсов для скачивания

Программа

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
Домашнее задание
Бонус лекция

Платформа:: Udemy

Каталог фильмов на GraphQL и React [2021]

Продолжительность:: 30 часов

Язык:: русский

GraphQL + React для начинающих

Программа

Введение

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

Apollo GraphQL

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

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

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

Платформа:: Udemy

React для начинающих на практике - создаем фильмотеку [2021]

Продолжительность:: 30 часов

Язык:: русский

В этом курсе мы изучим основы фреймворка React JS и создадим на практике приложение для отображения базы фильмов

3,5 ч видео

Программа

Введение

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

Подготовка

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

JSX и props

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

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

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

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

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

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

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

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

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

Подарок!

Подарок!

Платформа:: Udemy

React JS. Практический Курс 2020 (вкл. Хуки, Классы, Redux)

Продолжительность:: 30 часов

Язык:: русский

Все, что нужно знать про React. Научись с нуля создавать крутые приложения на самой популярной Frontend технологии!

18,5 ч видео
1 статья
129 ресурсов для скачивания

Программа

Что такое 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
Изменение контролов
Добавление вопроса

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

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

Платформа:: Udemy

React и Redux - Разработка интернет-магазина

Продолжительность:: 30 часов

Язык:: русский

Изучите React.js, Redux, React Router, Ramda, при создании реального проекта интернет магазина

3,5 ч видео
1 статья
15 ресурсов для скачивания

Программа

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

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

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

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

Пагинация

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

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

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

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

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

Поиск

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

Категории

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

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

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

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

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

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

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

Платформа:: Udemy

Мобильное приложение список задач на React Native

Продолжительность:: 30 часов

Язык:: русский

Разработайте свое первое мобильное приложение на React Native.

Программа

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

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

Платформа:: Udemy

React Native с нуля на практике [2021]

Продолжительность:: 30 часов

Язык:: русский

В этом курсе мы изучим основы фреймворка React Native и создадим на практике приложение для отображения прогноза погоды

2 ч видео

Программа

Введение

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

Логика

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

Оформление

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

Подарок!

Подарок!

Платформа:: Udemy

React + Next.js - с нуля. TypeScript, Hooks, SSR и CSS Grid

Продолжительность:: 30 часов

Язык:: русский

Полный курс по современному Frontend на React и Next.js. Всё от CSS Grid и TypeScript до React Hooks и SSR

19,5 hours видео
2 статей
8 ресурсов для скачивания

Программа

Введение

Преимущества 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

Платформа:: Udemy

React Native 2020. Мобильные приложения на JavaScript

Продолжительность:: 30 часов

Язык:: русский

Научись создавать крутейшие мобильные приложения для Android и iOS на JavaScript + React JS

13 ч видео
2 статей
84 ресурсов для скачивания

Программа

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

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

Основы

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

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

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

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

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

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

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

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

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

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

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

Redux

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

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

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

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

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

Платформа:: Udemy

Fullstack приложение на ASP Net Core, React и AntDesign

Продолжительность:: 30 часов

Язык:: русский

Создание полностью функционального веб-приложения на C# и Javascript (React и Redux)

3,5 ч видео
81 ресурс для скачивания

Программа

Базовое приложение (основа для 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-компонент
Постраничный вывод во втором компоненте. Тестирование

Платформа:: Stepik

React + Next.js - с нуля. TypeScript, Hooks, SSR и CSS Grid

Продолжительность:: 30 часов

Язык:: русский

Next.js - готовый к production framework для React - самой популярной JavaScript библиотеки на сегодняшний день. Он позволяет разрабатывать производительные, SEO-friendly сайты с использованием Server Side Rendering (SSR) и статической генерацией страниц. При этом от вас требуется только базовое знание CSS, HTML и JavaScript, так в рамках курса мы не только разберём Next.js, но и React с нуля. При этом мы будем писать не просто какой-то учебный проект, а реальный production сайт, посвящённый рейтингам.

148 уроков
19 часов видео
37 тестов

Программа

Введение

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

Установка софта
Работа с 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

Платформа:: Udemy

React + Redux 2020, с нуля до про

Продолжительность:: 30 часов

Язык:: русский

Обучу навыкам, которые нужны фронтендеру для работы в топовой компании

23 ч видео
14 статей

Программа

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

Введение
Разметка на 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
Миддлвэры
Конспект раздела

Платформа:: Udemy

Хуки React на практике [2021]

Продолжительность:: 30 часов

Язык:: русский

Создайте собственную библиотеку полезных хуков

3 ч видео

Программа

Введение

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

useState

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

useEffect

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