«Профессия Frontend-разработчик [Stepik]» [Михаил Непомнящий]

​ Пакет курсов "Профессия Frontend-разработчик" - это увлекательное введение в мир разработки пользовательских интерфейсов веб-приложений. В течение этого курса Вы получите необходимые знания и навыки для создания современных и отзывчивых веб-интерфейсов, которые будут привлекательными для пользователей и соответствующими современным требованиям. Пакет из 6-ти курсов позволит пройти путь от знакомства с базовой вёрсткой сайтов на HTML и CSS до создания серьезных Frontend-приложений на JavaScript, TypeScript и React. Вы не только изучите необходимую техническую базу, но и создадите ряд проектов, которые пригодятся для портфолио. В программу входят 6 курсов 605 уроков 92часа 31минута видео 44 теста 17 интерактивных задач 6 курсов: 1. Компетенция Верстальщик - HTML, CSS, JavaScript 2. Фундаментальный JavaScript 3. Инструменты разработчика 4. React для современных веб-приложений 5. Redux для управления состоянием React-приложений 6. TypeScript для современной разработки Введение 1. Компетенция Верстальщик - HTML, CSS, JavaScript 1. Введение Основы HTML и CSS 1. Основы HTML 2. Основы CSS 3. Работа с текстом 4. Работа с блочными элементами 5. Стилизация блочных элементов 6. Работа со ссылками и кнопками 7. Работа с изображениями и иконками 8. Псевдоклассы и псевдоэлементы CSS 9. Структура сайта и типы макетов 10. Таблицы и табличная верстка 11. Блочная модель верстки old-style 12. Позиционирование, выпадающее меню 13. Введение во FlexBox 14. Блочная модель верстки на флексах 15. Проверка знаний Работа с макетами 1. Нарезка макета в Photoshop 2. Zeplin и импорт из Photoshop или Figma 3. Мастер-класс по верстке макета Продвинутые техники HTML, CSS 1. Основы БЭМ 2. Элементы форм 3. Добавление аудио и видео 4. Фильтры CSS 5. Семантические теги HTML5 6. Кроссбраузерность 7. Трансформации CSS3 8. Анимации CSS3 9. Работа с адаптивом 10. Базовое использование препроцессора SASS|SCSS 11. Продвинутое использование SASS|SCSS Bootstrap 4 1. Общие возможности Bootstrap 2. Работа с сеткой Bootstrap 3. Использование компонентов Bootstrap JavaScript для верстальщика 1. Введение в JavaScript 2. Ветвления и циклы 3. Объекты и массивы JS 4. Функции JS 5. Понятие DOM и узлов 6. Обработка события по клику 7. Создание слайдера на JS 8. Создание модального окна 9. Создание табов 10. Создание фильтра карточек 11. Проверка знаний Библиотеки JavaScript 1. Основы jQuery 2. Галерея FancyBox 3. Анимации ParollerJS, ParallaxJS 4. Анимации ScrollMagic 5. Адаптивный слайдер SwiperJS БЛНУС: Спецификация CSS Grid (видео с моего youtube-канала) 1. CSS Grid. Базовая терминология 2. Базовые возможности CSS Grid 4. Grid области и работа с ними 5. Выравнивание 6. Методы адаптива 7. Нюансы использования 8. CSS-переменные Проект Верстки макета от и до 1. Обзор шаблона для вёрстки 2. UI Kit - что и зачем 3. Настройка окружения 4. Переменные и типографика 5. Компонент "Особенность" 6. Компонент "Скриншот" 7. Компонент "Отзыв" 8. Компонент "Цена" 9. Компоненты формы и соц иконок 10. Вводный блок сайта 11. Блок "О продукте" 12. Блок "Особенности" 13. Блок "Скриншоты" 14. Блок "Отзывы" 15. Блок "Цены" 16. Блок "Подвал сайта" 17. Валидация верстки 18. Production-сборка 2. Фундаментальный JavaScript Введение Введение Обзор модуля Сфера применения JavaScript, его версии и документация Подключение JavaScript к html-странице Использование JavaScript вне браузера Основы программирования Обзор модуля Типы данных в JavaScript Понятие переменных Математические операции в JavaScript Логические выражения Условный оператор Оператор switch Тернарный оператор Массивы как хранилища данных Понятие цикла Цикл for Оператор break Оператор continue Понятие функции Встроенный объект Math Проект "Угадай число" Итоги модуля Объекты и встроенные методы Обзор модуля Простые объекты с данными Хранение по ссылке Оператор in Цикл for..in Цикл for..of Методы объекта, контекст Встроенные методы строк Встроенные методы чисел Встроенные методы массивов Объект ошибки Объект регулярного выражения Проект "Загадки" Итоги модуля Про функции подробно Обзор модуля Функции vs процедуры Функции и память Варианты записи функций Область видимости Колбэки и функции высшего порядка Рекурсия Замыкание Контекст вызова функции Уточнение контекста вызова функции Проект "Цензор" Работа со структурными данными Обзор модуля Понятие стека и очереди Понятие иммутабельности Маппинг массивов и коллекций Фильтрация Метод reduce Поиск в коллекции Сортировка массива Оператор остатка Деструктуризация массивов Деструктуризация объектов Шаблонные строки Глобальные методы Формат JSON Проект "Витрина" Итоги модуля DOM API Обзор модуля Понятие DOM Получение ссылок на HTML-элементы Свойства html-элементов Обход html-коллекций Объект classList Навигация по html-элементам Браузерные события Снятие обработчиков событий Примеры по обработке события click Объект события Работа с формой Понятие всплытия Динамическая работа с DOM Полезные свойства html-элементов Где искать примеры UI Пример модального окна Работа с браузерной памятью Прочие браузерные объекты Проект "Спойлер" Работа с готовыми библиотеками Обзор модуля Библиотека lodash Плавный скролл Тултипы Продвинутый скролл Слайдеры Ленивая загрузка Работа с формами Анимации Асмнхронный JavaScript Обзор модуля Синхронный и асинхронный код Варианты взаимодействия с сервером Объект Promise Асинхронное получение данных CRUD-операции Альтернативные способы получения данных с сервера Асинхронные функции Методы промисов resolve и reject Методы промисов all и race Итоги модуля Проект "Список дел" Постановка задачи Декомпозиция на подзадачи Получение данных с сервера Отрисовка полученных задач Отрисовка пользователей Добавление новой задачи Изменение статуса Удаление задачи Обработка ошибок Модули и сборка приложения Понятие js-модуля npm менеджер ES6 модули: импорт и экспорт Сборка приложения Использование Parcel для сборки Нюансы экспорта и импорта Кроссбраузерность приложений CommonJS модули и файлы .mjs Проект: определение геолокации по IP Постановка задачи Декомпозиция на подзадачи Создание Frontend-проекта Верстка шапки Разбор API по работе с IP Обработка ввода пользователя Валидация формы Динамическая работа с DOM Разбор API карт Разметка с картой Обновление карт на базе IP Добавление полифилла Добавление адаптива Публикация проекта ООП в JavaScript Обзор модуля Актуальность фабрик Создание классов es6 Прототипное наследование Наследование классов es6 Статические свойства и методы Приватные свойства, геттеры, сеттеры Классы для создания UI компонентов Шаблоны проектирования Шаблон Singleton Шаблон Фабрика Шаблон Адаптер Шаблон Фасад Шаблон Наблюдатель Концепция ООП Подведение итогов 3. Инструменты разработчика Введение Введение Основы веб Составляющие сайта Хостинг Домен FTP SSH-соединение Терминал Варианты терминалов Основные команды Продвинутые техники Терминал и редакторы кода Поиск через терминал VS Code Интерфейс VS Code Кастомизация Ускорение работы Файловая навигация Навигация по документам Удаленное редактирование Синхронизация настроек SSH Что такое SSH Создание ключей шифрования Добавление ключа на GitHub Добавление ключа на сервер Git Системы версионирования Установка Git Локальный репозиторий Удаленный GitHub репозиторий Выгрузка локального репозитория онлайн Git: практический workflow Теги и релизы GitHub Pages Добавление алиасов Инструменты VS Code для Git Работа с конфликтами Работа с open source проектами NodeJs+npm Что такое NodeJS Установка NodeJS Утилиты и модули NodeJS Пример создания модуля NodeJS Пакетный менеджер npm Стандарт версионирования Semver Пакетный менеджер yarn Создание скриптов Утилита npx Parcel JS Обзор сборщика Parcel Использование стилей и препроцессоров Использование современного JavaScript Работа с pug Production сборка Gulp JS Что такое GulpJS. Установка Варианты синтаксиса для Gulp Обработка pug-шаблонов Отслеживание изменений Работа с локальными данными Работа со стилями Обработка изображений Локальный dev-сервер Сборка JavaScript-модулей Webpack 4 Что такое Webpack. Установка Способы задания конфигурации Ключевые концепции Webpack Создание dev-сервера Транспиляция стилей JavaScript и Babel Конфигурация Webpack по условию Webpack 5 Начало работы с Webpack 5 Обработка JavaScript-файлов Настройка локального сервера Точки входа и выхода Генерация HTML-шаблона Настройка режимов сборки Обработка CSS-файлов Препроцессинг и постобработка стилей Обработка изображений Дополнительные сведения 4. React для современных веб-приложений Введение Обзор курса Что такое React Пререквизит к курсу Что необходимо установить Варианты окружения React и JSX Библиотеки React и ReactDOM Простое приложение на чистом React Преобразование приложения в JSX Особенности JSX Разделение приложения на модули Условная отрисовка Пример с прелоадером Классовые компоненты Разбор составляющих базового React-шаблона Понятие React-компонента Состояние компонента и управление им Нюансы создания методов в классовых компонентах Жизненный цикл компонента Задание по созданию таймера Работа с коллекциями Однонаправленный поток данных Задание на обновление состояния через дочерние компоненты Отличие классовых компонентов от функциональных Работа с формами в React Управляемые компоненты Валидация значений формы Checkbox, radio button, select Задание на создание формы Использование ref Неуправляемые компоненты Проект "Фильмы" Обзор проекта Подготовка проекта Знакомство с API фильмов Задание на создание общего списка Добавление строки поиска Реализация поиска фильмов Добавление фильтрации Обработка неудачного поиска Безопасное хранение ключа API Сборка и публикация проекта Функциональные React-компоненты Работа с состоянием Кликер Управление жизненным циклом Использование ref Рефакторинг таймера Рефакторинг проекта Фильмы Рефакторинг проекта Фильмы, часть 2 Хуки подробно useState useEffect useContext useLayoutEffect useCallback, useMemo useImperativeHandle useReducer Пользовательские хуки Правила использования хуков Рефакторинг таймера Проект "Витрина" Презентация проекта Обзор API Подготовка проекта Вывод списка товаров Состояние заказа Добавление товара в корзину Создание корзины Удаление из корзины Изменение количества товара в корзине Добавление подсказки о добавлении товара Публикация проекта Продвинутое управление состоянием приложения Context API и useReducer вместо пропсов Создание контекста с провайдером Создание редюсера Доработка редьюсера Переключение всех компонентов на контекст Обзор сделанного Роутинг и SPA-приложение Роутинг и SPA, обзор проекта Базовый роутинг Компонент Link Хуки useParams и useHistory Хуки useLocation и useRouteMatch Вложенный роутинг Обзор API для проекта Настройка методов Главная страница Страница категории Страница рецепта Поиск на главной Нюансы публикации SPA Итоги курса 5. Redux для управления состоянием React-приложений Вводный модуль Вводное видео Что такое Redux Варианты state management для React Пререквизит к курсу Окружение для работы Redux Обзор модуля Три принципа Redux Базовые сущности Redux Базовое API Redux Пример с кликером Решение задачи с кликером Action creators и их использование Хранилище по умолчанию Итоги модуля React-redux на хуках Обзор модуля Сущности react-redux Кликер на React+Redux Todo List на React+Redux Redux DevTools Вариант организации кода #1 Вариант организации кода #2 Альтернативная точка входа Вариант TodoList с фильтрами Синхронизация с localStorage Добавление роутинга Итоги модуля Проект 1 Обзор проекта Настройка окружения Базовые компоненты Добавление провайдера и пустого стора Редьюсер вакансий Редьюсер фильтрации Механизм добавления фильтров Удаление фильтров и их очистка Публикация проекта Итоги модуля React-redux legacy Легаси для react-redux Метод connect Концепция mapStateToProps Концепция mapDispatchToProps Рефакторинг Todo App Рефакторинг проекта 1 Итоги модуля Redux Middleware и асинхронная работа Введение в redux middleware Базовое использование redux middleware Подключение вместе с devTools Библиотека redux-persist Проблема асинхронности Библиотека redux-thunk Использование redux-thunk Подготовка клиентского api Статусы загрузки и обработка ошибок Post-запросы Thunk extraArgument Итоги модуля Проект 2 Обзор проекта Структура проекта Добавление redux бойлерплейта Переключение светлой/темной темы Редьюсер для стран Отрисовка стран в UI Фильтрация по поиску Фильтрация по региону Очистка фильтров Детальная страница Очистка детальной страницы Получение информации о соседях Обзор итогового приложения Redux Toolkit Актуальность Redux Toolkit Сущности Redux Toolkit Метод createAction Метод createReducer Метод createSlice Метод configureStore Практика создания слайсов Extra редьюсеры Структура проекта Redux-persist вместе с RTK Рефакторинг проекта, часть 1 Рефакторинг проекта, часть 2 Итоги модуля RTK AsyncThunk Обзор модуля Базовое использование createAsyncThunk ExtraReducers для работы с thunk экшнами Практика создания thunk c createAsyncThunk Использование в UI Массовая обработка событий в extraReducers Обработка ошибок Отмена запроса к серверу Extra параметр thunk Базовое использование createEntityAdapter Удаление и изменение данных через адаптер Итоги модуля Рефакторинг проекта 2 Постановка задачи Организация структуры и слайс темы Слайс блока фильтрации Слайс стран Слайс для деталки Получение соседей Итоги модуля Итоги курса Style Guide от создателей Redux FAQ по тому, что хранить в Redux-сторе Итоги курса 6. TypeScript для современной разработки Введение Приветствие Что такое TypeScript и зачем нужен Альтернативы TypeScript Пререквизит к курсу Настройка окружения Как построен курсДемо-доступ Базовая типизация О модуле Примитивные типы Базовая типизация функций Базовая типизация объектов Объекты как параметры функции Типизация массивов Кортежи Алиасы Union типы Enum Итоги модуля Продвинутая типизация О модуле Подробнее об интерфейсах Подробнее об алиасах Type vs Interface Сужение типов Type Guards Asserts Типизация this Перегрузка функций Рекурсивные типы Оператор ! Итоги модуля Дженерики О модуле Актуальность дженериков Базовые примеры Добавление требований Оператор keyof Сужение допустимых значений типа Значения по умолчанию Области видимости типов дженерика Итоги модуля Комбинирование типов О модуле Оператор typeof Conditional type Еще раз про extends Оператор infer Маппинг типов Утилиты Extract, Exclude, NonNullable Утилиты Record, Pick, Omit Утилиты ReadOnly, Required, Partial Утилиты Parameters, CounstructorParameters Доступ по индексу Шаблонные литералы Итоги модуля Проект 1. Vanilla JS -> TypeScript Обзор проекта Постановка задачи Создание ts-проекта Создание интерфейсов Добавление type guards Типы асинхронных функций Итоги модуля Классы О модуле Интерфейс для класса Модификаторы доступа Нюансы конструктора Абстрактные классы Геттеры и сеттеры Статические свойства и методы Итоги модуля Настройки компилятора О модуле Составные части конфига Базовые настройки Опции компилятора Дополнительные опции Тюнинг строгости Дополнительный линтинг Рекомендованные конфиги Итоги модуля Типизация React-компонентов О модуле Настройка окружения Типизация пропсов Типизация стилей Типизация стейта Хэндлеры Хранение типов Нюансы useEffect Типизация useRef Приложение TodoList Классовые компоненты Итоги модуля Проект на React+TS Обзор проекта Окружение для проекта Создание типов сущностей Шапка приложения Компонент поиска Альтернативный вариант формы Компонент статистики Шапка карточки Инфо компонент Получение данных Итоги модуля Типизация Redux О модуле Добавления Redux в приложение Типизация слайсов Типизация селекторов Типизация asyncThunk Типизация extraReducers AsyncThunk как дженерик Добработка асинхронного слайса Итоги модуля Проект React+Redux+TS Обзор проекта Окружение для проекта Базовые типы приложения UI компоненты Типизация переключателя темы Типизация списка стран Типизация детальной страницы Типизация контролей Итоги проекта Итоги курса Что дальше

Профессия Frontend-разработчик [Stepik] [Михаил Непомнящий]​ Пакет курсов "Профессия Frontend-разработчик" - это увлекательное введение в мир разработки пользовательских интерфейсов веб-приложений. В течение этого курса Вы получите необходимые знания и навыки для создания современных и отзывчивых веб-интерфейсов, которые будут привлекательными для пользователей и соответствующими современным требованиям. Пакет из 6-ти курсов позволит пройти путь от знакомства с базовой вёрсткой сайтов на HTML и CSS до создания серьезных Frontend-приложений на JavaScript, TypeScript и React. Вы не только изучите необходимую техническую базу, но и создадите ряд проектов, которые пригодятся для портфолио. В программу входят 6 курсов 605 уроков 92часа 31минута видео 44 теста 17 интерактивных задач 6 курсов: 1. Компетенция Верстальщик - HTML, CSS, JavaScript 2. Фундаментальный JavaScript 3. Инструменты разработчика 4. React для современных веб-приложений 5. Redux для управления состоянием React-приложений 6. TypeScript для современной разработки Формат JSON Проект "Витрина" Итоги модуля DOM API Обзор модуля Понятие DOM Получение ссылок на HTML-элементы Свойства html-элементов Обход html-коллекций Объект classList Навигация по html-элементам Браузерные события Снятие обработчиков событий Примеры по обработке события click Объект события Работа с формой Понятие всплытия Динамическая работа с DOM Полезные свойства html-элементов Где искать примеры UI Пример модального окна Работа с браузерной памятью Прочие браузерные объекты Проект "Спойлер" Работа с готовыми библиотеками Обзор модуля Библиотека lodash Плавный скролл Тултипы Продвинутый скролл Слайдеры Ленивая загрузка Работа с формами Анимации Асмнхронный JavaScript Обзор модуля Синхронный и асинхронный код Варианты взаимодействия с сервером Объект Promise Асинхронное получение данных CRUD-операции Альтернативные способы получения данных с сервера Асинхронные функции Методы промисов resolve и reject Методы промисов all и race Итоги модуля Проект "Список дел" Постановка задачи Декомпозиция на подзадачи Получение данных с сервера Отрисовка полученных задач Отрисовка пользователей Добавление новой задачи Изменение статуса Удаление задачи Обработка ошибок Модули и сборка приложения Понятие js-модуля npm менеджер ES6 модули: импорт и экспорт Сборка приложения Использование Parcel для сборки Нюансы экспорта и импорта Кроссбраузерность приложений CommonJS модули и файлы .mjs Проект: определение геолокации по IP Постановка задачи Декомпозиция на подзадачи Создание Frontend-проекта Верстка шапки Разбор API по работе с IP Обработка ввода пользователя Валидация формы Динамическая работа с DOM Разбор API карт Разметка с картой Обновление карт на базе IP Добавление полифилла Добавление адаптива Публикация проекта ООП в JavaScript Обзор модуля Актуальность фабрик Создание классов es6 Прототипное наследование Наследование классов es6 Статические свойства и методы Приватные свойства, геттеры, сеттеры Классы для создания UI компонентов Шаблоны проектирования Шаблон Singleton Шаблон Фабрика Шаблон Адаптер Шаблон Фасад Шаблон Наблюдатель Концепция ООП Подведение итогов 3. Инструменты разработчика Введение Введение Основы веб Составляющие сайта Хостинг Домен FTP SSH-соединение Терминал Варианты терминалов Основные команды Продвинутые техники Терминал и редакторы кода Поиск через терминал VS Code Интерфейс VS Code Кастомизация Ускорение работы Файловая навигация Навигация по документам Удаленное редактирование Синхронизация настроек SSH Что такое SSH Создание ключей шифрования Добавление ключа на GitHub Добавление ключа на сервер Git Системы версионирования Установка Git Локальный репозиторий Удаленный GitHub репозиторий Выгрузка локального репозитория онлайн Git: практический workflow Теги и релизы GitHub Pages Добавление алиасов Инструменты VS Code для Git Работа с конфликтами Работа с open source проектами NodeJs+npm Что такое NodeJS Установка NodeJS Утилиты и модули NodeJS Пример создания модуля NodeJS Пакетный менеджер npm Стандарт версионирования Semver Пакетный менеджер yarn Создание скриптов Утилита npx Parcel JS Обзор сборщика Parcel Использование стилей и препроцессоров Использование современного JavaScript Работа с pug Production сборка Gulp JS Что такое GulpJS. Установка Варианты синтаксиса для Gulp Обработка pug-шаблонов Отслеживание изменений Работа с локальными данными Работа со стилями Обработка изображений Локальный dev-сервер Сборка JavaScript-модулей Webpack 4 Что такое Webpack. Установка Способы задания конфигурации Ключевые концепции Webpack Создание dev-сервера Транспиляция стилей JavaScript и Babel Конфигурация Webpack по условию Webpack 5 Начало работы с Webpack 5 Обработка JavaScript-файлов Настройка локального сервера Точки входа и выхода Генерация HTML-шаблона Настройка режимов сборки Обработка CSS-файлов Препроцессинг и постобработка стилей Обработка изображений Дополнительные сведения 4. React для современных веб-приложений Введение Обзор курса Что такое React Пререквизит к курсу Что необходимо установить Варианты окружения React и JSX Библиотеки React и ReactDOM Простое приложение на чистом React Преобразование приложения в JSX Особенности JSX Разделение приложения на модули Условная отрисовка Пример с прелоадером Классовые компоненты Разбор составляющих базового React-шаблона Понятие React-компонента Состояние компонента и управление им Нюансы создания методов в классовых компонентах Жизненный цикл компонента Задание по созданию таймера Работа с коллекциями Однонаправленный поток данных Задание на обновление состояния через дочерние компоненты Отличие классовых компонентов от функциональных Работа с формами в React Управляемые компоненты Валидация значений формы Checkbox, radio button, select Задание на создание формы Использование ref Неуправляемые компоненты Проект "Фильмы" Обзор проекта Подготовка проекта Знакомство с API фильмов Задание на создание общего списка Добавление строки поиска Реализация поиска фильмов Добавление фильтрации Обработка неудачного поиска Безопасное хранение ключа API Сборка и публикация проекта Функциональные React-компоненты Работа с состоянием Кликер Управление жизненным циклом Использование ref Рефакторинг таймера Рефакторинг проекта Фильмы Рефакторинг проекта Фильмы, часть 2 Хуки подробно useState useEffect useContext useLayoutEffect useCallback, useMemo useImperativeHandle useReducer Пользовательские хуки Правила использования хуков Рефакторинг таймера Проект "Витрина" Презентация проекта Обзор API Подготовка проекта Вывод списка товаров Состояние заказа Добавление товара в корзину Создание корзины Удаление из корзины Изменение количества товара в корзине Добавление подсказки о добавлении товара Публикация проекта Продвинутое управление состоянием приложения Context API и useReducer вместо пропсов Создание контекста с провайдером Создание редюсера Доработка редьюсера Переключение всех компонентов на контекст Обзор сделанного Роутинг и SPA-приложение Роутинг и SPA, обзор проекта Базовый роутинг Компонент Link Хуки useParams и useHistory Хуки useLocation и useRouteMatch Вложенный роутинг Обзор API для проекта Настройка методов Главная страница Страница категории Страница рецепта Поиск на главной Нюансы публикации SPA Итоги курса 5. Redux для управления состоянием React-приложений Вводный модуль Вводное видео Что такое Redux Варианты state management для React Пререквизит к курсу Окружение для работы Redux Обзор модуля Три принципа Redux Базовые сущности Redux Базовое API Redux Пример с кликером Решение задачи с кликером Action creators и их использование Хранилище по умолчанию Итоги модуля React-redux на хуках Обзор модуля Сущности react-redux Кликер на React+Redux Todo List на React+Redux Redux DevTools Вариант организации кода #1 Вариант организации кода #2 Альтернативная точка входа Вариант TodoList с фильтрами Синхронизация с localStorage Добавление роутинга Итоги модуля Проект 1 Обзор проекта Настройка окружения Базовые компоненты Добавление провайдера и пустого стора Редьюсер вакансий Редьюсер фильтрации Механизм добавления фильтров Удаление фильтров и их очистка Публикация проекта Итоги модуля React-redux legacy Легаси для react-redux Метод connect Концепция mapStateToProps Концепция mapDispatchToProps Рефакторинг Todo App Рефакторинг проекта 1 Итоги модуля Redux Middleware и асинхронная работа Введение в redux middleware Базовое использование redux middleware Подключение вместе с devTools Библиотека redux-persist Проблема асинхронности Библиотека redux-thunk Использование redux-thunk Подготовка клиентского api Статусы загрузки и обработка ошибок Post-запросы Thunk extraArgument Итоги модуля Проект 2 Обзор проекта Структура проекта Добавление redux бойлерплейта Переключение светлой/темной темы Редьюсер для стран Отрисовка стран в UI Фильтрация по поиску Фильтрация по региону Очистка фильтров Детальная страница Очистка детальной страницы Получение информации о соседях Обзор итогового приложения Redux Toolkit Актуальность Redux Toolkit Сущности Redux Toolkit Метод createAction Метод createReducer Метод createSlice Метод configureStore Практика создания слайсов Extra редьюсеры Структура проекта Redux-persist вместе с RTK Рефакторинг проекта, часть 1 Рефакторинг проекта, часть 2 Итоги модуля RTK AsyncThunk Обзор модуля Базовое использование createAsyncThunk ExtraReducers для работы с thunk экшнами Практика создания thunk c createAsyncThunk Использование в UI Массовая обработка событий в extraReducers Обработка ошибок Отмена запроса к серверу Extra параметр thunk Базовое использование createEntityAdapter Удаление и изменение данных через адаптер Итоги модуля Рефакторинг проекта 2 Постановка задачи Организация структуры и слайс темы Слайс блока фильтрации Слайс стран Слайс для деталки Получение соседей Итоги модуля Итоги курса Style Guide от создателей Redux FAQ по тому, что хранить в Redux-сторе Итоги курса 6. TypeScript для современной разработки Введение Приветствие Что такое TypeScript и зачем нужен Альтернативы TypeScript Пререквизит к курсу Настройка окружения Как построен курсДемо-доступ Базовая типизация О модуле Примитивные типы Базовая типизация функций Базовая типизация объектов Объекты как параметры функции Типизация массивов Кортежи Алиасы Union типы Enum Итоги модуля Продвинутая типизация О модуле Подробнее об интерфейсах Подробнее об алиасах Type vs Interface Сужение типов Type Guards Asserts Типизация this Перегрузка функций Рекурсивные типы Оператор ! Итоги модуля Дженерики О модуле Актуальность дженериков Базовые примеры Добавление требований Оператор keyof Сужение допустимых значений типа Значения по умолчанию Области видимости типов дженерика Итоги модуля Комбинирование типов О модуле Оператор typeof Conditional type Еще раз про extends Оператор infer Маппинг типов Утилиты Extract, Exclude, NonNullable Утилиты Record, Pick, Omit Утилиты ReadOnly, Required, Partial Утилиты Parameters, CounstructorParameters Доступ по индексу Шаблонные литералы Итоги модуля Проект 1. Vanilla JS -> TypeScript Обзор проекта Постановка задачи Создание ts-проекта Создание интерфейсов Добавление type guards Типы асинхронных функций Итоги модуля Классы О модуле Интерфейс для класса Модификаторы доступа Нюансы конструктора Абстрактные классы Геттеры и сеттеры Статические свойства и методы Итоги модуля Настройки компилятора О модуле Составные части конфига Базовые настройки Опции компилятора Дополнительные опции Тюнинг строгости Дополнительный линтинг Рекомендованные конфиги Итоги модуля Типизация React-компонентов О модуле Настройка окружения Типизация пропсов Типизация стилей Типизация стейта Хэндлеры Хранение типов Нюансы useEffect Типизация useRef Приложение TodoList Классовые компоненты Итоги модуля Проект на React+TS Обзор проекта Окружение для проекта Создание типов сущностей Шапка приложения Компонент поиска Альтернативный вариант формы Компонент статистики Шапка карточки Инфо компонент Получение данных Итоги модуля Типизация Redux О модуле Добавления Redux в приложение Типизация слайсов Типизация селекторов Типизация asyncThunk Типизация extraReducers AsyncThunk как дженерик Добработка асинхронного слайса Итоги модуля Проект React+Redux+TS Обзор проекта Окружение для проекта Базовые типы приложения UI компоненты Типизация переключателя темы Типизация списка стран Типизация детальной страницы Типизация контролей Итоги проекта Итоги курса Что дальше

6 курсов, которые проводят с нуля до уровня, на котором можно откликаться на вакансии junior-фронтендера. Без предварительного опыта в программировании: начинаем с первого тега HTML, заканчиваем React-приложением с авторизацией и запросами к API. Что вы сможете делать после Вёрстка: собрать адаптивный многостраничный сайт по макету — Flexbox, Grid, анимации, корректная работа на мобильных. JavaScript: писать логику приложения — переменные, функции, объекты, массивы, асинхронность, работа с DOM и событиями, localStorage. React: собрать SPA на компонентах с состоянием, роутингом и глобальным стором на Redux Toolkit. API: получать и отправлять данные через fetch, обрабатывать загрузку и ошибки. Инструменты: работать с Git и GitHub, собирать проект, читать чужой код и разбираться в чужом репозитории. TypeScript: типизировать код так, чтобы ошибки ловились до запуска, — от базовых типов до дженериков и типизации React-компонентов. Что останется у вас на руках 8 готовых проекта для портфолио, в том числе: GitHub Finder - приложение с поиском проектов на GitHub; многостраничное приложение с каталогом рецептов - с поиском и фильтрами; дашборд вакансий с гибкой системой фильтров. Это не учебные примеры «в стол» — их можно показывать на собеседовании и выкладывать на GitHub. Поддержка Я лично отвечаю на вопросы к шагам курса (в течение 1-2 дней). Застряли на задаче — разберём, что пошло не так. Сертификаты По завершении каждого курса программы выдаётся сертификат. Подтверждает, что вы прошли программу и решили задачи, а не просто открыли курс. Автор Меня зовут Михаил Непомнящий. Я практикующий разработчик и Engineering Manager (руковожу двумя командами разработки), преподаю с 2016 года. Веду персональный YouTube-канал по веб-разработке. Выпустил уже 12 курсов, причем каждый получил хорошую оценку от слушателей (в среднем 4.9 по пятибалльной шкале). Учу тому, что сам использую в продакшне, а не тому, что было актуально пять лет назад.