Учить React - Курс Кода

Учите React, практикуясь в написании кода. Этот учебник по React JS проведёт вас от первой строки JSX до Hooks, управления состоянием и полноценных приложений, а каждый написанный вами компонент сразу отображается на телефоне в режиме live preview.

88 курсов и 324 интерактивных урока, уровни от A1 до C1. Прочитайте короткое объяснение, напишите настоящий код, нажмите Run и посмотрите результат. Ноутбук и настройка не нужны.

ПИШИТЕ КОД НА ТЕЛЕФОНЕ

• Редактор кода для JSX с live preview, который отображает ваш компонент прямо в приложении

• Среда выполнения (ReactDOM и Babel) встроена в приложение, поэтому код запускается на устройстве, а не на сервере

• Многофайловые проекты: импортируйте один компонент в другой, как в настоящих приложениях

• Нажмите на отображённую кнопку, введите данные в форму и наблюдайте, как реагирует интерфейс

ЛАБОРАТОРИЯ

• Hooks Lab: наблюдайте каждое изменение состояния и повторный рендеринг в реальном времени

• Регуляторы props: изменяйте prop с помощью ползунка и наблюдайте за обновлением компонента

• Профайлер рендеринга и временная шкала состояния (Pro): узнайте, какой компонент перерендерился и почему, а затем просмотрите историю состояния

ШАГ ЗА ШАГОМ: ОТ НАЧИНАЮЩЕГО ДО ПРОДВИНУТОГО УРОВНЯ

• Основы: JSX, компоненты, props, состояние, события, списки и ключи, условный рендеринг

• Hooks: useState, useEffect, useRef, useReducer, пользовательские Hooks, useLayoutEffect и многое другое

• Формы и валидация, React Hook Form, управляемые и неуправляемые поля ввода

• Управление состоянием: Context, Redux Toolkit и RTK Query, Zustand и Jotai

• React Router, получение данных, TanStack Query, SWR и оптимистичный UI

• TypeScript, тестирование, Storybook, доступность и безопасность

• Производительность: мемоизация, разделение кода, Suspense, переходы, виртуализированные списки

• React 19 и Server Components, SSR и гидратация, потоковая передача

• Next.js App Router, получение данных и аутентификация

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

• Развёртывание, микрофронтенды и федерация модулей

СОЗДАВАЙТЕ НАСТОЯЩИЕ ПРОЕКТЫ

20 проектов с пошаговым сопровождением: кнопка «Нравится», карточки профилей, калькулятор чаевых, игра-викторина, секундомер, форма регистрации, корзина покупок, карусель изображений, список с постраничной навигацией, приложение списка дел и многое другое. На каждом шаге проверяется, что ваш компонент действительно работает, прежде чем вы продолжите.

ПРАКТИКУЙТЕСЬ, ПОКА НЕ ЗАПОМНИТЕ

• 30 миссий по программированию (лёгкие, средние и сложные) по Hooks, рендерингу, формам, Context и производительности

• UI Match: воссоздайте целевой компонент и получите оценку за структуру, стиль и текст

• Bug Hunt: найдите и исправьте ошибку в сломанном компоненте

• Component Recall: с интервальным повторением вставьте пропущенную часть обратно в уже работающий код

• Викторины с 50 вопросами, 50 вопросами для собеседования и шпаргалкой

• Ежедневное задание, серии, XP и таблица лидеров

AI-МЕНТОР (PRO)

Застряли на Hooks или ошибке? Попросите AI-ментора дать понятное объяснение, позвольте AI проверить ваш код и предложить исправление или создать персональный урок на любую тему.

СЕРТИФИКАТ (PRO)

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

БЕСПЛАТНАЯ И PRO-ВЕРСИЯ

Бесплатно: первый курс, один проект с сопровождением, 2 миссии по программированию, редактор кода с live preview, Hooks Lab, регуляторы props, Bug Hunt и 3 проверки UI Match в день. В бесплатной версии показывается реклама.

Pro: все 88 курсов, все проекты и миссии, AI-ментор, профайлер рендеринга и временная шкала состояния, экзамен на сертификат и отсутствие рекламы.

Приложение доступно на 22 языках.

React — товарный знак Meta Platforms, Inc. Next.js — товарный знак Vercel, Inc. Это независимое обучающее приложение, не связанное с Meta или Vercel и не одобренное ими.

Политика конфиденциальности: https://www.coddykit.com/terms/privacy-policy