redux toolkit
React hooks
redux
компоненты
React
Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях
Егор Самойлин
выпускник Хекслета
Программа обучения
2 месяца
70 часов теории
74 часа практики
Что важно знать заранее
Для успешного прохождения курса вам нужно уверенное умение программировать на JavaScript
Если вы пока не знакомы с программированием, не переживайте!
У нас есть вводные курсы, которые помогут вам освоить основы и подготовиться к обучению. Мы объясним всё с нуля — доступно и наглядно
JavaScript и браузерная среда
JavaScript в браузере, различия между серверным и клиентским JavaScript, глобальный объект window, BOM-объекты и их использование
Основы DOM и навигация по дереву
Отличие DOM от HTML, структура DOM-дерева, навигация по узлам, декларативный поиск элементов с использованием getElementById и querySelector
DevTools и манипулирование DOM
Использование консоли разработчика, добавление и удаление элементов в DOM, разница между атрибутами и свойствами узлов
Событийная модель в браузере
Полифиллы для кросс-браузерности, события в браузере, базовые события, создание интерактивных компонентов на практике
Работа с формами и событиями
Обработка форм, стадии событий (перехват и всплытие), события документа при загрузке и выгрузке страницы
AJAX и работа с jQuery
Выполнение AJAX-запросов с использованием fetch, работа с библиотекой jQuery, преимущества и причины её использования
Основы состояния приложения
Концепция состояния приложения, отделение данных от представления, организация и структура сложного состояния
Отображение и рендеринг данных
Стратегии рендеринга состояния, организация UI-состояния, разделение данных и интерфейсного состояния
Процессы и автоматное программирование
Корневые процессы и их построение, автоматное программирование, нормализация данных для оптимизации состояния
Архитектура приложения (MVC)
Архитектура Model-View-Controller, контроль состояния форм, управление вводом данных и валидацией
Организация текстов и интерфейсов
Хранение и обработка текстов интерфейса, вывод и структурирование текстовых данных на сайте
Инициализация и жизненные стадии приложения
Разделение приложения на стадии работы, инициализация данных, запуск и настройка приложения
Основы React и JSX
Компоненты как базовые единицы React, использование JSX, передача данных через props
Работа с коллекциями и особенностями JSX
Обработка коллекций данных, различия между JSX и HTML, динамическая обработка классов компонентов
Состояние и события
Работа со state в компонентах, система событий React, управление вложенными компонентами через children
Архитектура и неизменяемость данных
Автоматное программирование, формы, работа с неизменяемыми структурами данных, хранение состояния и событий во вложенных компонентах
Глобальное состояние и оптимизация
Функциональные компоненты, Context API для глобального состояния, Virtual DOM, основы тестирования React-приложений
Жизненный цикл, производительность и работа с DOM
Асинхронная обработка событий, жизненный цикл компонентов, оптимизация производительности, использование Refs для взаимодействия с DOM
Введение в хуки и управление состоянием
Знакомство с хуками, управление состоянием компонентов с помощью useState, принципы работы хуков
Управление побочными эффектами
Работа с побочными эффектами, изоляция эффектов, использование useEffect для обновления и синхронизации данных
Глобальное состояние с контекстом
Использование контекста для передачи данных между компонентами, работа с useContext, глобальное состояние без пропс-дриллинга
Доступ к DOM через хуки
Получение доступа к DOM-элементам, сохранение ссылок на узлы, использование useRef для работы с элементами и сохранения состояний
Оптимизация производительности
Мемоизация значений и функций, использование useCallback для предотвращения лишних рендеров, оптимизация с помощью useMemo
Композиция компонентов и оптимизация
Построение правильной композиции компонентов, оптимизация React-приложений, минимизация перерендеринга без memo
Введение в Redux и управление действиями
Основы Redux, диспатчинг действий, структура и разбиение хранилища, работа с редьюсерами
Расширение функциональности с мидлварами
Подключение мидлваров, расширение возможностей Redux, обработка промежуточной логики
Знакомство с Redux Toolkit
Интеграция Redux Toolkit с React, создание первого приложения, использование слайсов для работы с состоянием
Нормализация и оптимизация данных
Нормализация данных в хранилище, использование Entity Adapter для оптимизации и упрощения работы с данными
Расширенные возможности слайсов
Реагирование на действия других слайсов с помощью ExtraReducers, выполнение асинхронных запросов с createAsyncThunk
Автоматизация работы с API через RTK Query
Создание API-сервисов с использованием RTK Query, автоматизация HTTP-запросов и управление данными с минимальным кодом
Проект
Чат
В рамках проекта вы разработаете чат-приложение с возможностью регистрации пользователей и создания каналов. Пример похожего приложения — Slack или Mattermost.
Проект охватывает полный цикл разработки: от создания компонентов с использованием React и Redux Toolkit до взаимодействия с REST API и WebSockets. Вы научитесь использовать современные библиотеки в проекте, организовывать маршрутизацию и настраивать сборку и деплой. Проект позволит закрепить все ключевые навыки, необходимые фронтенд-разработчику в реальной жизни
Как проходит обучение
Просто, наглядно и всегда под рукой
Вы изучаете теорию в удобном текстовом формате — легко читать даже с телефона. Живые примеры помогают сразу понять, как всё работает на практике. Материал выстроен так, чтобы вы шаг за шагом двигались от простого к сложному, не упуская важных деталей
Проверяем и закрепляем знания
После каждой темы вы проходите квизы, которые помогают убедиться, что вы всё поняли. Вопросы разного уровня сложности дадут возможность как проверить базу, так и попрактиковаться в применении знаний
Учитесь на реальных задачах
Мы создали удобную виртуальную среду, где вы решаете задачи прямо в браузере. У вас есть редактор кода, консоль и автоматические тесты, которые моментально показывают результат
Ваш AI-наставник в учебе
Наш Учебный помощник на базе ИИ — это как наставник, который всегда под рукой. Он понимает, где вы находитесь в курсе, что нужно сделать, и как выглядит ваш код. Если что-то пошло не так, вы сразу получите понятные и полезные подсказки
Занимаетесь сами, но не в одиночестве
Тяжело сохранять мотивацию, если обучаешься самостоятельно, поэтому мы создали крепкое IT-сообщество, где каждый студент получает поддержку и находит полезные контакты среди других разработчиков
Стоимость курса
Старт в любой момент
Продолжительность 2 месяца
Свободный режим учебы
AI-помощник
Интегрированное обучение: теория, тесты, тренажеры, проекты
Членство в IT-сообществе
от 3 900 ₽/мес
Хотите учиться от компании?
Расскажите вашему работодателю о Хекслете
