Учить React - Курс Кода
Учить React - Курс Кода — Изучайте программирование на React, пиша JSX и запуская код на телефоне
Учить React - Курс Кода — бесплатное для начала приложение для iOS и Android, которое обучает начинающих программированию на React с базовыми знаниями HTML, CSS или JavaScript, а также разработчиков, переходящих с другого фреймворка. Пишите JSX в редакторе кода, нажимайте «Запустить» и наблюдайте, как ваш компонент отображается в режиме live preview прямо в приложении. 88 курсов и 324 урока проведут вас от первого компонента через hooks и управление состоянием к Next.js, а по пути вас ждут 20 практических проектов с пошаговым сопровождением.
- Цена
- Бесплатно, обновление до Pro
- Платформы
- iOS и Android
- Языки
- 22
- Возрастной рейтинг
- 4+
- Версия
- 82.6.1
- Требуется
- iOS 15.1 или новее
- App Store
- 3.8 ★ (4)
Ваш компонент отображается на телефоне, а не на сервере.
Среда выполнения, ReactDOM и Babel входят в состав приложения, поэтому написанный вами JSX компилируется и отображается на устройстве. Вы можете нажать на только что созданную кнопку, ввести текст в форму и увидеть реакцию интерфейса — именно такой цикл обратной связи помогает понять hooks.
Что это
Учить React - Курс Кода — бесплатный для начала курс по React для iOS и Android, включающий 88 курсов и 324 интерактивных урока: от первой строки JSX до hooks, управления состоянием, React 19 и маршрутизатора Next.js App Router. Встроенный редактор компилирует ваш код на устройстве и отображает компонент в режиме live preview, а 20 практических проектов с пошаговым сопровождением проверяют каждый этап, прежде чем вы перейдёте дальше. Это независимое обучающее приложение, не связанное с Meta или Vercel.
В приложении
Как это выглядит
Курс
Что входит в курс React
88 курсов из собственного списка приложения, расположенных в порядке, который обычно подходит для первого прохождения React.
React Kickoff, JSX и Props & Composition
Компоненты, декларативный UI и обновление React DOM, затем правила JSX, отображение списков и передача данных вниз с помощью props.
State, Events, Forms и useRef
useState и обработка событий, управляемые формы с валидацией, а также useRef для значений и доступа к DOM, которые не запускают повторный рендеринг.
useEffect, Data Fetching и Custom Hooks
Момент запуска эффектов, массивы зависимостей, состояния загрузки и ошибки для API-вызовов, а также выделение повторно используемой логики в собственные hooks.
Context, Redux Toolkit и Zustand
Совместное использование состояния без prop drilling с помощью Context и useReducer, затем Redux Toolkit с RTK Query, Zustand и Jotai для более крупных приложений.
Routing, React Query и Forms at Scale
Клиентская маршрутизация и паттерны React Router, серверное состояние с TanStack Query и SWR, React Hook Form и оптимистичный UI.
Performance, Testing и TypeScript
Рендеринг и мемоизация, разделение кода, виртуализированные списки, тестирование с React Testing Library, а также типизация компонентов и hooks.
React 19, Server Components и Next.js
Server Components и Actions, SSR и гидратация, затем App Router в Next.js с загрузкой данных, кэшированием и аутентификацией.
Как это работает
Как устроен урок
Урок начинается с краткого объяснения концепции, за которым сразу следует код, который вы пишете и запускаете, поэтому идея и результат находятся на одном экране.
Прочитайте одну концепцию
Откройте курс из учебной траектории и прочитайте короткий урок — например, о том, как обновляется состояние или почему списку нужны keys. В обзоре курса отмечены бесплатные уроки, поэтому вы можете оценить формат до оформления подписки.
Напишите JSX и нажмите «Запустить»
Введите компонент в редакторе кода и запустите его. В режиме live preview ваш компонент отображается внутри приложения, поэтому вы можете нажать кнопку, ввести текст в поле и увидеть, что делает код.
Проверьте результат и продолжайте
Квизы, задания по программированию и практические проекты с пошаговым сопровождением помогают убедиться, что идея усвоена, а наставник на базе ИИ объясняет hook или ошибку, в которой вам не удаётся разобраться. Bug Hunt и UI Match дают возможность ещё раз отработать концепцию.
Что внутри
Что входит в приложение
88
Курсов, 324 урока
От JSX, props и состояния через custom hooks, формы, Context и Redux Toolkit к Server Components, SSR и Next.js App Router — материалы сгруппированы по уровням от A1 до C1.
Live
Редактор с live preview
Редактор кода, созданный для JSX, с отображением компонента внутри приложения. Проекты из нескольких файлов позволяют импортировать один компонент в другой — именно так создаются настоящие приложения.
20
Практические проекты с пошаговым сопровождением
Создавайте кнопку «Нравится», карточки профилей, калькулятор чаевых, игру-викторину, корзину покупок и многое другое, двигаясь небольшими шагами. Каждый шаг проверяет, что компонент действительно работает.
Lab
Hooks Lab и регуляторы props
Наблюдайте за каждым изменением состояния и повторным render в реальном времени, а также меняйте prop с помощью ползунка, чтобы увидеть обновление компонента. Профилировщик render и временная шкала состояния входят в Pro.
30
Задания по программированию
Задания лёгкого, среднего и сложного уровня по hooks, отображению, формам, context и производительности, а также UI Match, Bug Hunt и Component Recall с интервальным повторением.
ИИ
Наставник на базе ИИ
Попросите объяснить материал, предложите ИИ проверить ваш код и порекомендовать исправление или создать индивидуальный урок на любую тему. Наставник и сертификационный экзамен входят в Pro.
Предыстория
Что на самом деле нужно понять, чтобы писать на React, и в каком порядке?
React — это библиотека JavaScript для создания пользовательских интерфейсов из небольших повторно используемых компонентов, которые перерисовываются при изменении их данных. Большинство новичков останавливаются не на синтаксисе, а на лежащей в его основе модели: что такое render, что считается состоянием и когда запускаются effects. Если изучать эти идеи по порядку и сразу проверять каждую на экране, это быстрее, чем читать обо всём одновременно.
Компоненты и propsединица повторного использования
Компонент — это функция, возвращающая часть интерфейса, а props — входные данные, которые он получает от родительского компонента. Поскольку данные передаются вниз через props, вы можете прочитать компонент и предсказать, что он отобразит.
Состоянието, что меняется со временем
Состояние — это данные, которые компонент сохраняет между render, например текст в поле или информацию о том, открыто ли меню. Обновление состояния планирует новый render — именно этот механизм лежит в основе почти каждого интерактивного экрана.
Hooks и effectsздесь новички чаще всего застревают
Hooks, такие как useState, useRef и useReducer, позволяют компоненту хранить состояние и обращаться к DOM. useEffect запускает код после render, а неправильный массив зависимостей — самый частый источник циклов и устаревших значений.
Отображение и повторный renderпочему приложение кажется медленным
Компонент выполняет повторный render при изменении его состояния или props, и то же происходит с компонентами внутри него. Понимание причины render — отправная точка для любого улучшения производительности: от memoisation до разделения кода.
Подходит
Кому это подходит — а кому нет
Подойдёт, если вы
- Немного знаете HTML, CSS или JavaScript и хотите правильно начать изучать React
- Вы разработчик, знакомый с другим фреймворком, и вам нужно быстро перейти на React
- Лучше всего учитесь, когда результат появляется на экране сразу после запуска кода
- Создаёте портфолио из небольших проектов и хотите проходить их по инструкциям
- Готовитесь к собеседованию на frontend-разработчика и хотите потренироваться отвечать на вопросы
Это не тот инструмент, если вы
- Никогда не видели JavaScript, потому что курс предполагает хотя бы базовые знания этого языка
- Хотите создать и развернуть полноценный проект, для чего всё ещё понадобится ноутбук
- Ожидаете, что всё будет бесплатно: первый курс бесплатен, а Pro открывает остальные
- Хотите официальный курс от команды React, хотя это независимое приложение
Вопросы
Часто задаваемые вопросы
Можно ли изучать программирование на React с телефона?
Основные идеи, компоненты, props, state и hooks можно изучать с телефона, если на нём можно запускать написанный код. Учить React - Курс Кода включает ReactDOM и Babel, поэтому ваш JSX отображается в живом предпросмотре на устройстве. Ноутбук становится полезен, когда вы создаёте и разворачиваете более крупный проект.
Нужно ли знать JavaScript перед изучением React?
Базовые знания помогут. Учить React - Курс Кода рассчитан на людей, знакомых с HTML, CSS или JavaScript, например с переменными, функциями и массивами. Если вы никогда не писали на JavaScript, сначала изучите его, потому что уроки React предполагают, что вы умеете читать код на этом языке.
В чём разница между props и state?
Props — это входные данные, которые компонент получает от родительского компонента и не должен изменять, а state — данные, которыми владеет сам компонент и которые он обновляет со временем. В Учить React - Курс Кода это можно увидеть в Hooks Lab: он показывает каждое изменение state и повторный рендеринг, а регуляторы props позволяют менять prop с помощью ползунка.
Учит ли приложение hooks, например useEffect?
Да. Учить React - Курс Кода рассматривает useState, useEffect, useRef, useReducer, custom hooks и useLayoutEffect. Отдельные уроки подробно объясняют, когда запускаются эффекты, как работают массивы зависимостей и какие ошибки встречаются чаще всего; режим Bug Hunt помогает находить ошибки в неисправных компонентах.
React — это то же самое, что React Native, и учит ли приложение обоим?
Нет. React — это библиотека для создания пользовательских интерфейсов, а React Native использует те же идеи для создания мобильных приложений. Учить React - Курс Кода сначала обучает React для веба, а курс React Native fundamentals помогает веб-разработчикам перенести эти навыки на мобильные приложения.
Рассматривает ли Учить React - Курс Кода Next.js и React 19?
Да. Курсы охватывают возможности React 19 и Server Components, SSR и гидратацию, потоковую передачу данных, а также App Router в Next.js с загрузкой данных, кэшированием и аутентификацией. Также есть курс React Native fundamentals для веб-разработчиков.
Какие проекты можно создавать?
Вас ждут 20 проектов с пошаговыми инструкциями: кнопка лайка, карточки профиля, калькулятор чаевых, игра-викторина, секундомер, форма регистрации, корзина покупок, карусель изображений, список с постраничной навигацией и приложение todo. На каждом шаге проверяется, что ваш компонент работает, прежде чем вы продолжите.
Учить React - Курс Кода бесплатен?
Приложение можно скачать бесплатно. Бесплатная версия включает первый курс, один проект с пошаговыми инструкциями, две coding missions, редактор кода с живым предпросмотром, Hooks Lab, регуляторы props, Bug Hunt и три проверки UI Match в день, а также показывает рекламу. Pro открывает все курсы, проекты и missions, наставника AI, профилировщик рендеринга и сертификационный экзамен, а также убирает рекламу.
Есть ли сертификат или подготовка к собеседованию?
После успешной сдачи итогового экзамена вы получите сертификат, которым можно поделиться; он входит в Pro. Для подготовки к собеседованиям есть 50 вопросов для интервью, викторина из 50 вопросов и шпаргалка для повторения основных концепций.
Запускается ли код на сервере?
Нет. Среда выполнения встроена в приложение, поэтому ваш код компилируется и отображается на устройстве. Благодаря этому вы можете нажать созданную вами кнопку и увидеть реакцию UI прямо в предпросмотре.
Какие языки и платформы поддерживаются?
Учить React - Курс Кода работает на iOS и Android и доступно на 22 языках. Возрастной рейтинг — 4+; для работы на iPhone требуется iOS 15.1 или более поздняя версия.
Начать
Отобразите свой первый компонент уже сегодня
Начать можно бесплатно на iOS и Android, приложение доступно на 22 языках.
Другие приложения CoddyKit
Доступно на iOS и Android.