React

Zustand

JSX

компоненты

React

Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях

Начать учиться

Входит в подписку (более 50 навыков)

Павел Колотий

выпускник фронтенд

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

1. React

21 упражнение

24 квиза

JSX

useState

useEffect

useRef

Состояние (state) и props

Props, стили и события

Компоненты и props, стили в React, события

Основы React: компоненты, JSX и тестирование

Введение, первое приложение, тестирование компонентов, JSX

Состояние компонента и формы

Хук useState, комплексное состояние, формы через action и useActionState

Композиция, эффекты и работа с API

Композиция, useEffect, refs, HTTP API, обработка ошибок

Рендеринг, списки и общее состояние

Render и commit, условия и списки, lifting state, проектирование состояния

Context, свои хуки и приложение целиком

Context и use, пользовательские хуки, маршрутизация, организация приложения, библиотеки компонентов, производительность и React Compiler

2. Zustand

12 упражнений

17 квизов

Zustand

селекторы

useShallow

асинхронные действия

create

set

Введение и первый стор

Зачем Zustand, стор функцией create, стор как хук

Отладка стора

Middleware, Redux DevTools, чтение истории изменений

Список в сторе и селекторы

Хранение списка, чтение селектором, useShallow

Обновление состояния и асинхронность

Обновление через set и get, поверхностное слияние, запросы в действиях, loading и error

Сохранение и вложенные обновления

Middleware persist и immer, partialize, сохранение между посещениями

Организация стора и оптимизация

Где держать действия, слайсы, гранулярность подписки, стор вне компонентов

Проекты

Чат

В рамках проекта вы разработаете чат-приложение с возможностью регистрации пользователей и создания каналов. Пример похожего приложения — Slack или Mattermost. Проект охватывает полный цикл разработки: от создания компонентов React с хуками + Zustand + TanStack Query + @mantine/form до взаимодействия с REST API и WebSockets. Вы научитесь использовать современные библиотеки в проекте, организовывать маршрутизацию и настраивать сборку и деплой. Проект позволит закрепить все ключевые навыки, необходимые фронтенд-разработчику в реальной жизни

Как проходит обучение

Просто и наглядно

Теория в удобном текстовом формате — легко читать даже с телефона. Живые примеры помогают понять, как всё работает. Материал выстроен так, чтобы вы двигались шаг за шагом, не упуская важных деталей

Проверяем и закрепляем знания

Учитесь на реальных задачах

Ваш AI наставник

Подписка от 2 400 ₽/мес

Этот навык уже входит в подписку. Оформи доступ и открывай все навыки сразу (50+)

Подписаться →