0Pricing
React Academy icon

React Academy

JSXFrontendWebMobileBeginner

Освойте ReactJS для создания динамических пользовательских интерфейсов вместе с ReactJS Academy.

🤖 На основе AI📚 88 курсов👥 100 000+ учеников⭐ Рейтинг 4,9
Обзор курса

Создавайте реальные интерфейсы с React

React — это JavaScript библиотека, которая определяет, как строятся большинство production UI сегодня — от single-page приложений и Next.js сайтов до кроссплатформенных мобильных и десктопных приложений. Этот курс охватывает всю дисциплину полностью: архитектуру компонентов, управление состоянием, загрузку данных, производительность, тестирование и развёртывание. Он построен на понимании того, как React действительно работает — reconciler, fiber модель, семантика hooks — а не только поверхностного API.

Чему вы научитесь

Вы начнёте с JSX, props, state и controlled компонентов, затем перейдёте к useEffect, useRef и useReducer. Практические курсы охватывают routing с React Router v6, обработку форм с React Hook Form, server state с React Query и SWR, глобальное состояние с Redux Toolkit, Zustand и Jotai. Вы будете работать с TypeScript в React, писать интеграционные и E2E тесты, создавать design systems с Storybook, разрабатывать real-time UI через WebSockets и развёртывать type-safe API с tRPC. Курс также включает Next.js App Router, server components, server actions и аутентификацию с NextAuth.js.

Структура обучения

Девяносто пять курсов охватывают уровни от A1 до C1. Курсы A1 и A2 закрепляют основы React, JSX рендеринг, CSS анимации, сохранение данных в local storage и тёмный режим. Курсы B1 развивают уверенность работы с context паттернами, i18n, React Spring, Framer Motion, drag-and-drop с dnd-kit и сложными таблицами данных с TanStack Table. Курсы B2 разбирают рендеринг и memoization, Suspense, code splitting, React Native для разработчиков React, развёртывание на Vercel и AWS, и Electron для десктопных приложений. Уровень C1 завершается продвинутыми темами: Micro-Frontend Architecture, SSR and Hydration Deep Dive, Module Federation, Islands Architecture with Astro, WebAssembly интеграция, Edge Rendering с Cloudflare Workers и OpenTelemetry для frontend observability.

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

Каждый курс разбит на короткие, сфокусированные уроки, которые вы выполняете во встроенном редакторе кода с real-time обратной связью. AI-помощник доступен всегда, когда вам нужна помощь с концепцией или failing тестом. Вы можете проходить курс последовательно или перейти на уровень, соответствующий вашему текущему опыту.

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

Как ты будешь учиться

🎯
Интерактивные уроки
Практические упражнения по программированию с мгновенной обратной связью
🤖
ИИ-репетитор
Получай мгновенную помощь от нашего ИИ, когда застрянешь
💻
Встроенный редактор
Пиши и запускай код прямо в браузере
🏆
Сертификат
Получи сертификат при завершении курса
Программа обучения

88 курсов

Все курсы в пути обучения React Academy.

01

Старт в React: понятия и настройка

A13 уроков

Начните с основ React: компонентов, декларативного интерфейса и эффективного обновления DOM с помощью сравнения изменений. Затем настройте…

02

Основы JSX и рендеринга

A13 уроковPRO

Изучите правила JSX: выражения и атрибуты, возврат фрагментов, отображение списков с ключами, простые условия и варианты стилизации (модули…

03

React DevTools и отладка

A24 уроковPRO

Освойте расширение React DevTools для браузера: исследуйте деревья компонентов, профилируйте отрисовку и эффективно отлаживайте состояние и…

04

Анимации и переходы CSS в React

A24 уроковPRO

Создавайте плавные анимации появления, исчезновения и изменения состояния в React с помощью переходов CSS и ключевых кадров — библиотека ан…

05

Подъём состояния и решения проблемы передачи свойств

A24 уроковPRO

Делитесь состоянием между соседними компонентами, поднимая его выше по дереву, и определяйте, когда передача свойств через множество компон…

06

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

A24 уроковPRO

Сохраняйте состояние React после перезагрузки страницы с помощью localStorage, обрабатывайте синхронизацию между вкладками и выбирайте подх…

07

Тёмная тема в React

A24 уроковPRO

Создайте надёжную систему тёмной темы с помощью пользовательских свойств CSS, контекста React и медиазапроса prefers-color-scheme, предотвр…

08

Свойства и композиция

A23 уроковPRO

Передавайте данные через свойства , задавайте простые значения по умолчанию с помощью деструктуризации, составляйте интерфейсы с дочерними…

09

Основы состояния и событий

A23 уроковPRO

Освойте useState и обработку событий: правильно обновляйте состояние, обрабатывайте onClick/onChange и подготовьтесь к работе с управляемым…

10

Формы и проверка данных (введение)

A23 уроковPRO

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

11

Основы маршрутизации

A23 уроковPRO

Разберитесь в маршрутизации на стороне клиента: как одностраничные приложения переключают представления без полной перезагрузки страниц, а…

12

useRef и DOM

A23 уроковPRO

Освойте useRef : сохраняйте значения между отрисовками без повторной отрисовки, обращайтесь к узлам DOM и безопасно управляйте таймерами.

13

Проверка кода и соглашения

A23 уроковPRO

Поддерживайте чистоту кода с помощью ESLint и правил React, а форматирование выполняйте автоматически с помощью Prettier . Добавляйте сцена…

14

Управляемые и неуправляемые компоненты

A22 уроковPRO

Освойте управляемые и неуправляемые поля ввода: узнайте, когда выбирать каждый вариант, изучите простые шаблоны с ссылками и безопасные зна…

15

Строгий режим React и лучшие практики

B14 уроковPRO

Узнайте, что делает StrictMode, какие предупреждения он показывает и какие соглашения о написании кода упрощают поддержку приложений React.

16

Порталы и модальные окна в React

B14 уроковPRO

Отображайте содержимое за пределами иерархии родительского DOM с помощью порталов React, чтобы создавать модальные окна, всплывающие подска…

17

API дочерних элементов React и шаблон слотов

B14 уроковPRO

Работайте с props.children и утилитами React.Children, реализуя гибкие API компонентов на основе слотов.

18

Неконтролируемые компоненты и загрузка файлов

B14 уроковPRO

Используйте неконтролируемые поля ввода с useRef, считывайте значения полей выбора файлов и обрабатывайте загрузку файлов в React.

19

Шаблоны React Context и производительность

B14 уроковPRO

Проектируйте провайдеры Context, сводя повторные отрисовки к минимуму с помощью мемоизации, разделения контекстов и шаблонов селекторов.

20

Интернационализация (i18n) в React

B14 уроковPRO

Добавляйте поддержку нескольких языков в приложения React с помощью react-i18next, управляйте файлами переводов и переключением локали.

21

API браузера в React

B14 уроковPRO

Интегрируйте мощные API браузера — буфер обмена, геолокацию, уведомления и IntersectionObserver — в компоненты React с корректной очисткой…

22

Устранение дребезга и ограничение частоты в React

B14 уроковPRO

Предотвращайте избыточные повторные отображения и вызовы API, реализуя повторно используемые хуки React для устранения дребезга и ограничен…

23

Автодополнение форм и поиск по мере ввода

B14 уроковPRO

Создавайте с нуля доступные компоненты автодополнения и поиска по мере ввода с навигацией клавиатурой, используя состояние и ссылки React —…

24

Управление формами с React Hook Form

B14 уроковPRO

Создавайте производительные и гибкие формы в React с помощью React Hook Form: регистрация полей, проверка, отображение ошибок и интеграция…

25

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

B14 уроковPRO

Используйте Zustand для управления глобальным состоянием в приложениях React: хранилища, действия, селекторы, сохранение и интеграция с инс…

26

Продвинутые шаблоны React Router v6

B14 уроковPRO

Выйдите за рамки базовых маршрутов с помощью вложенных макетов, загрузчиков, действий, защищённых маршрутов и управления состоянием парамет…

27

TypeScript с React: типизация компонентов и хуков

B14 уроковPRO

Добавляйте TypeScript в проекты React: уверенно типизируйте свойства, события, хуки, контекст и обобщённые компоненты.

28

TanStack Table: сложные таблицы данных

B14 уроковPRO

Создавайте готовые к промышленной эксплуатации таблицы данных с сортировкой, фильтрацией, разбиением на страницы и выбором строк с помощью…

29

Jotai: атомарное управление состоянием

B14 уроковPRO

Управляйте состоянием React с помощью минималистичной атомарной модели Jotai — компонуемых атомов, вычисляющих значения, обрабатывающих аси…

30

SWR: получение данных от Vercel

B14 уроковPRO

Используйте стратегию SWR «устаревшее при повторной проверке» для быстрого и надёжного получения данных с автоматической повторной проверко…

31

dnd-kit: доступное перетаскивание

B14 уроковPRO

Создавайте доступные интерфейсы React с поддержкой сенсорных устройств для перетаскивания с помощью dnd-kit: сортируемые списки, канбан-дос…

32

React Spring: анимации на основе физики

B14 уроковPRO

Создавайте плавные анимации React на основе пружинной физики с помощью react-spring — от простых переходов значений до сложных взаимодейств…

33

События, отправляемые сервером, и опрос в React

B14 уроковPRO

Реализуйте потоки данных в реальном времени в React с помощью событий, отправляемых сервером, и стратегий опроса, понимая компромиссы по ср…

34

Подробно о useEffect

B13 уроковPRO

Разберитесь с useEffect : когда он выполняется, а когда происходит отрисовка, как массивы зависимостей управляют его работой и как писать б…

35

Шаблоны загрузки данных

B13 уроковPRO

Проектируйте устойчивые интерфейсы для работы с данными: обрабатывайте состояния загрузки , ошибки , пустого результата и успешного выполне…

36

Context и useReducer

B13 уроковPRO

Передавайте состояние между удалёнными компонентами с помощью Context , избегая последовательной передачи свойств; настройте Provider и чит…

37

Пользовательские хуки

B13 уроковPRO

Выносите повторно используемую логику в пользовательские хуки : задавайте понятные параметры, возвращайте стабильные значения и действия, п…

38

Основы доступности

B13 уроковPRO

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

39

Анимации с Framer Motion

B14 уроковPRO

Добавляйте плавные анимации и переходы в приложения React с помощью Framer Motion: компоненты motion, варианты, жесты и анимации макета.

40

Границы ошибок и надёжность

B13 уроковPRO

Перехватывайте ошибки во время отрисовки с помощью границ ошибок, показывайте безопасные резервные варианты и сохраняйте отзывчивость остал…

41

TypeScript с React (необязательно)

B13 уроковPRO

Добавьте лёгкую типизацию в компоненты React. Начните со свойств, затем вынесите повторно используемые обобщённые типы, чтобы код интерфейс…

42

Структура проекта и соглашения

B13 уроковPRO

Организуйте приложения React: размещайте папки по функциональным возможностям, отделяйте небольшие примитивы интерфейса от составных компон…

43

Виртуализация списков с react-window

B24 уроковPRO

Отображайте тысячи элементов списка без потери производительности: используйте react-window для виртуализации вывода DOM, отображая только…

44

Асинхронные шаблоны в React: промисы и параллельность

B24 уроковPRO

Идиоматично обрабатывайте асинхронные операции в React с помощью useEffect, useTransition, useDeferredValue и Suspense.

45

Шаблоны React: свойства-рендеры и компоненты высшего порядка

B24 уроковPRO

Изучите свойства-рендеры и компоненты высшего порядка как классические шаблоны повторного использования кода, пришедшие до хуков.

46

useLayoutEffect и useEffect

B24 уроковPRO

Поймёте тонкую, но важную разницу между useEffect и useLayoutEffect — когда каждый из них срабатывает относительно фиксации DOM — и научите…

47

Redux Toolkit и RTK Query

B24 уроковPRO

Управляйте сложным состоянием приложения с помощью срезов Redux Toolkit, функций thunks и RTK Query для кэширования состояния сервера и син…

48

Серверные компоненты и возможности React 19

B24 уроковPRO

Изучите серверные компоненты React, хук use(), действия и другие API React 19, меняющие способ передачи данных в приложениях.

49

React Query: управление состоянием сервера

B24 уроковPRO

Управляйте состоянием сервера с помощью TanStack Query: загружайте данные, кэшируйте их, обновляйте в фоновом режиме, выполняйте мутации и…

50

Тестирование React: интеграционное и сквозное

B24 уроковPRO

Пишите интеграционные тесты с React Testing Library и сквозные тесты с Playwright, чтобы проверять реальные пользовательские сценарии.

51

Системы дизайна компонентов и Storybook

B24 уроковPRO

Документируйте, разрабатывайте и тестируйте компоненты пользовательского интерфейса React изолированно с помощью Storybook, историй CSF3 и…

52

Интерфейсы реального времени с WebSockets и React

B24 уроковPRO

Создавайте интерфейсы React с обновлением в реальном времени, используя WebSockets и библиотеки вроде Socket.IO для чатов, уведомлений и па…

53

tRPC: типобезопасные API от начала до конца

B24 уроковPRO

Создавайте полностью типобезопасные API без схем и генерации кода с помощью tRPC, автоматически разделяя типы между интерфейсом React и сер…

54

Apollo Client и React

B24 уроковPRO

Интегрируйте GraphQL в приложения React с помощью Apollo Client: выполняйте запросы и изменения, кэшируйте данные и синхронизируйте интерфе…

55

Оптимистичный интерфейс и шаблоны изменений

B24 уроковPRO

Создавайте быстрые отзывчивые интерфейсы, сразу отображающие результаты до подтверждения сервером, с корректным откатом при сбое и стратеги…

56

Публикация библиотек компонентов React

B24 уроковPRO

Упаковывайте и публикуйте повторно используемые библиотеки компонентов React в npm, работая с двойным выводом ESM/CJS, зависимостями-ровесн…

57

Отрисовка и мемоизация

B23 уроковPRO

Разберитесь в фазах отрисовки и фиксации React, узнайте, когда обновляются компоненты и когда помогает мемоизация.

58

Переходы и Suspense (основы)

B23 уроковPRO

Изучите основы параллельного интерфейса с помощью useTransition : сохраняйте отзывчивость при вводе, показывайте подсказку о выполняющейся…

59

Разделение кода и стратегия работы с ресурсами

B23 уроковPRO

Загружайте только необходимое, разделяя код экранов и виджетов. Используйте React.lazy и Suspense , чтобы приложения воспринимались более б…

60

Тестирование компонентов React

B23 уроковPRO

Настройте тесты с помощью Vitest/Jest и React Testing Library ; отрисовывайте компоненты, находите их по роли или метке и запускайте тесты…

61

Основы маршрутизатора приложений Next.js

B24 уроковPRO

Создавайте полнофункциональные веб-приложения с маршрутизатором приложений Next.js 14+: маршрутизация на основе файлов, макеты, серверные к…

62

Загрузка данных и кэширование в Next.js

B24 уроковPRO

Загружайте, кэшируйте и повторно проверяйте данные в маршрутизаторе приложений Next.js, используя параметры fetch, unstable_cache и проверк…

63

Аутентификация в Next.js с NextAuth.js

B24 уроковPRO

Добавляйте аутентификацию в приложения Next.js с помощью Auth.js (NextAuth v5): провайдеры OAuth, учётные данные, сеансы и защита маршрутов.

64

Основы React Native для разработчиков React

B24 уроковPRO

Перенесите знания о React на мобильную разработку: изучите примитивы React Native, стилизацию, навигацию и нативные API устройств.

65

Развёртывание приложений React: Vercel, AWS и Docker

B24 уроковPRO

Разворачивайте приложения React и Next.js в рабочей среде с помощью Vercel, AWS S3/CloudFront и контейнеров Docker с конвейерами CI/CD.

66

Серверные действия React: формы и изменения

B24 уроковPRO

Используйте серверные действия React 19 и действия форм Next.js для обработки изменений на сервере, устраняя маршруты API в распространённы…

67

Безопасность приложений React

B24 уроковPRO

Защищайте приложения React от XSS, CSRF и других уязвимостей с помощью практических рекомендаций по политике безопасности содержимого, упра…

68

Системы токенов дизайна для React

B24 уроковPRO

Создайте масштабируемую систему токенов дизайна для библиотек компонентов React с несколькими темами — от определения токенов до переменных…

69

Electron.js: настольные приложения с React

B24 уроковPRO

Создавайте кроссплатформенные настольные приложения с помощью Electron и интерфейса React, изучая взаимодействие IPC, нативные API и упаков…

70

Составные компоненты

B23 уроковPRO

Создавайте составные компоненты: родительский компонент предоставляет контекст, а дочерние используют его для гибкого интерфейса.

71

Масштабируемые формы (без библиотек или с лёгкими помощниками)

B23 уроковPRO

Создавайте большие формы из небольших надёжных частей: массивов полей, динамических разделов и простых сценариев проверки данных.

72

Продвинутая маршрутизация

B23 уроковPRO

Выйдите за пределы основ: изучите вложенные макеты, концепцию загрузчиков маршрутов и простые идеи предварительной загрузки для более плавн…

73

Состояние сервера и состояние интерфейса

B23 уроковPRO

Определяйте, что относится к кэшу сервера, а что является локальным состоянием интерфейса. Загружайте и обновляйте данные, не смешивая разн…

74

Шаблоны для модальных окон, уведомлений и наложений

B23 уроковPRO

Создавайте доступные наложения: отображайте их через порталы, удерживайте фокус внутри и поддерживайте быстрое закрытие клавишей Escape или…

75

Сборка, анализ и публикация

B23 уроковPRO

Подготовьте приложения к работе в продакшене: разберитесь в сборках для разработки и продакшена, картах исходного кода, простых переменных…

76

useImperativeHandle и forwardRef

C14 уроковPRO

Освойте императивные API React: открывайте родительским компонентам значения экземпляров пользовательских компонентов с помощью forwardRef…

77

useSyncExternalStore: подписка на внешние хранилища

C14 уроковPRO

Изучите хук useSyncExternalStore из React 18 — правильный способ синхронизировать компоненты React с внешними источниками состояния, такими…

78

Архитектура микрофронтендов с React

C14 уроковPRO

Разделяйте крупные фронтенды React на независимо разворачиваемые микрофронтенды с помощью Module Federation и single-spa.

79

Подробный разбор SSR и гидратации React

C14 уроковPRO

Изучите устройство серверной отрисовки, гидратацию, выборочную гидратацию и потоковую передачу HTML с помощью renderToPipeableStream React.

80

Продвинутые шаблоны TypeScript для React

C14 уроковPRO

Развивайте навыки TypeScript в React с помощью размеченных объединений, отображаемых типов, условных типов и типобезопасных API компонентов.

81

Производительность веб-приложений: основные показатели Web Vitals и React

C14 уроковPRO

Измеряйте и улучшайте основные показатели Web Vitals (LCP, INP, CLS) в приложениях React с помощью инструментов профилирования, анализа сбо…

82

Монорепозиторий и Nx для проектов React

C14 уроковPRO

Организуйте несколько приложений React и общие библиотеки в монорепозитории с помощью Nx, используя интеллектуальное планирование задач и C…

83

Архитектура островов с Astro и React

C14 уроковPRO

Откажитесь от гидратации всей страницы, перейдя к архитектуре островов: выборочно гидратируйте только интерактивные компоненты React, котор…

84

Интеграция React и WebAssembly

C14 уроковPRO

Интегрируйте модули WebAssembly в приложения React для ресурсоёмких вычислений — от модулей Rust WASM до общей памяти и рабочих потоков.

85

Пограничный рендеринг: Cloudflare Workers и React

C14 уроковPRO

Обслуживайте приложения React на периферии с задержкой менее миллисекунды, используя Cloudflare Workers, потоковый SSR и стратегии кэширова…

86

OpenTelemetry для наблюдаемости интерфейса React

C14 уроковPRO

Инструментируйте приложения React с помощью OpenTelemetry, чтобы собирать трассировки, измерять реальную производительность для пользовател…

87

Потоковая передача и постепенная загрузка в React

C14 уроковPRO

Используйте потоковый SSR React 18 и Suspense, чтобы постепенно передавать HTML браузеру и улучшать воспринимаемую производительность, не д…

88

Module Federation с React

C14 уроковPRO

Реализуйте Module Federation Webpack, чтобы независимо создавать и развёртывать микрофронтенды React, разделяя зависимости, состояние и мар…

Часто задаваемые вопросы

Часто задаваемые вопросы

Курс React Academy бесплатный?

Да. Ты можешь начать курс React Academy бесплатно и пройти его интерактивные уроки без платежей. Опциональная подписка PRO открывает продвинутые инструменты на базе ИИ и сертификат, который можно поделиться.

Нужен ли мне опыт, чтобы выучить JSX?

Нет. Курс начинается с основ и постепенно переходит к более сложным темам, поэтому ты можешь начать даже без предыдущего опыта JSX.

Как я выучу JSX на CoddyKit?

Ты учишься на практике. Короткие интерактивные уроки сочетают понятное объяснение с практическими упражнениями по программированию, которые выполняются в реальном времени, а круглосуточный ИИ-репетитор помогает, когда ты застрянешь.

Получу ли я сертификат за завершение React Academy?

Да. Пользователи PRO могут пройти экзамен и получить сертификат завершения React Academy с проверяемым кодом.

Могу ли я выучить JSX на телефоне?

Да. CoddyKit доступен в браузере и как нативное приложение на iOS и Android, так что ты можешь выучить JSX на любом устройстве и твой прогресс синхронизируется.

Начни React Academy прямо сейчас

Присоединись к тысячам учеников, которые осваивают программирование с помощью уроков на AI.

Начать бесплатно →Все курсы