Интерактивная платформа

Проектирование/* от идеи
   до прода */и разработкана ReactSPACE OF REACT — ОТ ИДЕИ ДО ПРОДА — ↓

Построй фуллстек-приложение с нуля — и собери портфолио, которое говорит за тебя.

Смотреть проекты →Начать с курсов
студентов+практических задач+видео-уроковрейтинглистай
Реальный стек, который ты освоишь
  • React 19React 19
  • Next.js 16Next.js 16
  • TypeScriptTypeScript
  • FastifyFastify
  • PostgreSQLPostgreSQL
  • DockerDocker
  • PrismaPrisma
  • React RouterReact Router
  • NextAuthNextAuth
  • ViteVite
  • React 19React 19
  • Next.js 16Next.js 16
  • TypeScriptTypeScript
  • FastifyFastify
  • PostgreSQLPostgreSQL
  • DockerDocker
  • PrismaPrisma
  • React RouterReact Router
  • NextAuthNextAuth
  • ViteVite
// Что внутри платформы

Не ещё один курс. Другой подход к обучению.

01 · ПРОЕКТЫ

Fullstack по главам — от нуля до деплоя

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

space-of-react.dev/projects/events-appГлава 03/05
События · Fullstack
✓Интерфейс48м
✓Состояние1ч12м
▶API и база12:30
4Авторизация54м
5Деплой36м
▶
Урок 14 · Подключаем PostgreSQL12:30 / 18:04
02 · КУРСЫ

Задания в браузере

Задачи по React — без настройки окружения.

space-of-react.dev/tasks/use-reducer▶ run
ЗАДАНИЕ 07/30Счётчик на useReducer

Опиши состояние счётчика через reducer и подключи два действия — increment и reset.

1 const reducer = (state, action) => {
2 switch (action.type) {
3 case 'increment':
4 return { count: state.count + 1 }
5 case 'reset':
✓инициализация состоянияpassed
✓increment увеличивает countpassed
reset сбрасывает счётчикrunning…
03 · WORKFLOW

Код в твоём редакторе

Проектный код пишешь локально, как в реальной работе: файлы, git, терминал и деплой — не облачная песочница.

events-app — твой редактор
EVENTS-APP
▾ client/
App.jsx
components/
▾ server/
routes.js
db.js
docker-compose.yml
App.jsxroutes.js
1 import { Routes } from 'react-router'
2 import { EventList } from './components'
4 export default function App() {
5 return <EventList limit={20} />
$ git push origin main
→ Сборка клиента · 8.4s · ok
✓ задеплоено · https://events-app.dev
04 · ПРОГРЕСС

Прогресс и сертификат

Платформа помнит, где ты остановился, и отмечает пройденное. Финальный проект — и сертификат твой.

space-of-react.dev/profile/progress
72%пройдено
События · Fullstack
глава 4 из 5 · урок 14
✓Интерфейс
✓Состояние
✓API и база
▶Авторизация
Деплой
SPACE OF REACT
Сертификат
Fullstack React Developer
выдаётся после финального проекта
твоё имя
07 / 2026— Макс
01/ 04
Проекты
// Дорожная карта

От первого компонента
до fullstack.

9 этапов · скролль →
01
СТАРТ

JSX и первые компоненты

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

JSXpropskeyReact 19
02
ТИПЫ

TypeScript в React

Типизируешь пропсы, состояние и события. Ошибки всплывают в IDE ещё до запуска, а не в рантайме.

TypeScriptgenericsтипы пропсов
03
СОСТОЯНИЕ

Хуки: useState и useReducer

Локальное состояние, события, формы. Учишься думать в терминах данных, а не DOM.

useStateuseReducer
04
ДАННЫЕ

Эффекты и загрузка данных

useEffect, запросы к API, кэш и состояния загрузки. Синхронизируешь UI с внешним миром.

useEffectfetchTanStack Query
05
ФОРМЫ

Формы и валидация

Управляемые формы, схемы валидации и типобезопасность данных с формы до бэкенда.

React Hook FormZod
06
АРХИТЕКТУРА

Роутинг и структура

React Router, layout-ы, разделение на страницы. Проект начинает выглядеть как продукт.

React Routerlayouts
07
NEXT.JS

Server Components и экшены

App Router, серверные и клиентские компоненты, серверные экшены и авто-мемоизация React Compiler.

Next.js 16use clientuse serverReact Compiler
08
БЭКЕНД

Fastify + PostgreSQL

Свой API, схема БД через Prisma, авторизация. Фронтенд получает настоящие данные.

FastifyPostgreSQLPrismaAuthPostman
09
ПРОДАКШН

Деплой в Docker

Контейнеры, переменные окружения, прод-сборка и свой сервер. Приложение живёт по своему адресу.

DockerVPSCIDeploy
Начать проект

В конце пути — рабочее fullstack-приложение в портфолио и понимание, как всё устроено.

Смотреть проекты →
Готовься к прыжку
03
02
01
скролль · не отпускай штурвал
// горизонт событий пройден

Получи максимум знаний

Научись делать фуллстек-приложения на React 19, Next.js, Redux Toolkit, PostgreSQL, Prisma и Docker — и стань разработчиком, без которого не обойтись.

React 19Server ComponentsDocker
// Интерактивная платформа

Твой пульт управления React

← Вернуться к теме
Создание React компонентов
5/16
✓Первое приветствие
✓Карточка профиля
3.Кнопка лайка
4.Переключатель темы
5.Аккордеон
✓Табы
7.Модальное окно
8.Todo list
✓Фильтр товаров
10.Форма контакта
11.Пагинация
12.Таймер обратного отсчета
13.Поиск с автокомплитом
14.Галерея изображений
✓Корзина покупок
16.Чат интерфейс
▤Описание
▦Задание
☑Решение
Space of React
ГлавнаяКурсыПроектыУправление
Дзен max@spaceofreact.ru Выйти
Настроить локальную разработку Команда запуска Сначала Решение
App.js
Код Оба Превью
1import React from 'react';
2import './style.css';
3 
4const { useState, useRef } = React;
5 
6// Стартовые сообщения
7const INITIAL = [
8  { id: 1, text: 'Привет!', from: 'bot' },
9  { id: 2, text: 'Как дела?', from: 'user' },
10];
11 
12function ChatInterface() {
13  const [messages, setMessages] = useState(INITIAL);
14  const [isTyping, setIsTyping] = useState(false);
15  const endRef = useRef(null);
16 
17  // Автоскролл к последнему сообщению
18  const scrollToBottom = () => {
19    endRef.current?.scrollIntoView();
20  };
21 
22  const send = (e) => {
23    e.preventDefault();
24    setIsTyping(true);
‹›⟳ /sandpack-bundler/index.html
Чат-бот Помощникна связи · орбита стабильна
Привет! Как дела? Отлично! А у тебя? Тоже хорошо! Что нового?
Введите сообщение... ➤
⧉ Open Sandbox
Задание Что изменилось +65−6
Задание
⌥ Код задания src/16-чат-интерфейс.проблема.jsx

Чат-интерфейс

В этом задании мы познакомимся с хуком useRef и создадим интерактивный чат с автоматической прокруткой и имитацией бота.

useRef — хук для сохранения значений между рендерами без их перерисовки. Чаще всего используется для доступа к DOM-элементам напрямую:

const inputRef = useRef(null);
<input ref={inputRef} />
// Установить фокус:
inputRef.current.focus();

Автоскролл в чате — частая задача: когда приходит новое сообщение, окно должно прокручиваться вниз. Для этого создаём пустой div в конце списка.

✓ Закончили задание
← Вернуться к теме
Создание React компонентов
5/16
App.jsКод
1import React from 'react';
2const { useState, useRef } = React;
3 
4function ChatInterface() {
5 const [messages, setMessages] = useState(INITIAL);
6 const [isTyping, setIsTyping] = useState(false);
7 const endRef = useRef(null);
8 // автоскролл к последнему сообщению
9}
Чат-бот Помощникна связи · орбита стабильна
Привет! Как дела?Отлично! А у тебя?
Введите сообщение...➤
ЗаданиеЧто изменилось
src/16-чат-интерфейс.проблема.jsx

Чат-интерфейс

Знакомимся с хуком useRef и собираем интерактивный чат с автоскроллом и имитацией бота.

const inputRef = useRef(null);
<input ref={inputRef} />
inputRef.current.focus();
✓Закончили задание

Задание, код и живое превью, разбор — всё в браузере, без установки окружения.

// После обучения

React
работает
на тебя.

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

Готовый репозиторийДеплойКейс в портфолио
🔒events.app
live
Готовое приложение
01Делаешь приложение с нуля
02Понимаешь как делать проекты с нуля
03Получаешь знания постоения больших проектов
04Пишешь код по стандартам
05Разбираешь «почему так», а не просто повторяешь
06Остаётся проект в портфолио
// Как это устроено

Два формата. Один результат.

Два пути идут параллельно и сходятся в одной точке — рабочем приложении, которое можно показать.

КУРСЫ · интерактив
01

Практика прямо в браузере

Задачи по React без установки окружения. Решаешь сам, опираясь на документацию, — потом смотришь, как делает профи.

✓useContext.jsxpassed
useReducer.jsxrunning
▢useMemo.jsxlocked
без установки30+ задач
ПРОЕКТЫ · fullstack
02

Fullstack от идеи до прода

Большие видео-проекты с реальным стеком. Пишешь код глава за главой — от первого маршрута до деплоя в контейнере.

✓
JSX и компонентыготово
Глава 01
✓
Хуки, роутинг, состояниеготово
Главы 02–04
API + PostgreSQLты здесь
Глава 05
Deploy · Dockerдалее
Финал
React 19FastifyPostgresDocker
Один результат — рабочее приложение
Видео-урок
// Видео-уроки

Смотри, как пишет
профи

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

▶Смотреть проекты
// Интерактивный курс

Решай прямо в браузере

КУРС 01Бесплатно · 10 заданий

React Context

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

context.jsx▶ run
1const Theme = createContext()
2function Panel() {
3 const t = useContext(Theme)
4 return <Card theme={t} />
5}
6
✓Введение в контекст
✓Несколько провайдеров
✓Производительность списка
✓Избегаем пропс-дриллинга
React
Смотреть →
КУРС 02Бесплатно · 16 заданий

Создание React компонентов

Построй 16 реальных UI-компонентов — от кнопки лайка до чат-интерфейса.

LikeButton.jsx▶ run
1function LikeButton() {
2 const [on, set] = useState(false)
3 return <button onClick={toggle}>
4 {on ? '♥' : '♡'}
5 </button>
6}
7
✓Кнопка лайка и тема
✓Аккордеон, табы, модалка
✓Автокомплит и пагинация
✓Корзина и чат
JavaScriptReact
Смотреть →
КУРС 03Бесплатно · 12 заданий

Декомпозиция компонентов

Оживите запутанный код. Практикуйтесь в декомпозиции и выделении переиспользуемых частей.

Profile.jsx▶ run
1<Profile>
2 <Avatar />
3 <Stats />
4 <TaskList />
5</Profile>
6
✓Профиль и список задач
✓Карточка товара
✓Форма с валидацией
✓Чат, уведомления
ReactJavaScript
Смотреть →
// Fullstack-проекты

От идеи до приложения

events.applive
React 19 · События
Fullstack · Бесплатно35 уроков

React 19 · События

Full-Stack приложение событий на React 19 + Fastify + Postgres, где можно создавать и публиковать свои события.

React 19FastifyPostgresDocker
pcbuilder.applive
Next.js · Сборщик ПК
Fullstack · Бесплатно27 уроков

Next.js · Сборщик ПК

Full-Stack «Сборщик ПК» на Next.js 16 + PostgreSQL, где можно собирать и публиковать свои PC-конфигурации.

Next.js 16PrismaPostgresNextAuth
// Отзывы

Что говорят ученики

Все отзывы реальные: собраны из обратной связи и комментариев на YouTube.

★★★★★

Начинала с нуля — после курса по React 19 наконец поняла Server Components не из документации, а через практику.

К
Катя Р.
★★★★★

Прошла курс по главам — получила сертификат. Каждый урок это конкретный шаг: посмотрел, написал код, пошёл дальше.

Д
Дарья Л.
★★★★★

Структура по главам помогает не потеряться. Дошёл от нуля до деплоя с Docker — понятно откуда что берётся.

P
Pavel_S
★★★★★

Один из немногих кто даёт цельную структурированную базу, а не набор хаотичных туториалов.

I
Igor_dev
★★★★★

Думала зайду на 20 минут — решила 6 задач подряд. Короткие задачи в браузере реально затягивают.

v
vika.pavl
★★★★★

Начинала с нуля — после курса по React 19 наконец поняла Server Components не из документации, а через практику.

К
Катя Р.
★★★★★

Прошла курс по главам — получила сертификат. Каждый урок это конкретный шаг: посмотрел, написал код, пошёл дальше.

Д
Дарья Л.
★★★★★

Структура по главам помогает не потеряться. Дошёл от нуля до деплоя с Docker — понятно откуда что берётся.

P
Pavel_S
★★★★★

Один из немногих кто даёт цельную структурированную базу, а не набор хаотичных туториалов.

I
Igor_dev
★★★★★

Думала зайду на 20 минут — решила 6 задач подряд. Короткие задачи в браузере реально затягивают.

v
vika.pavl
★★★★★

Учусь параллельно с работой — возвращаюсь к последнему уроку и продолжаю. Никогда не теряю где была.

Н
Настя М.
★★★★★

Сначала сам решаешь задачу — потом смотришь разбор. Такой формат заставляет думать, а не копировать.

m
max_orm
★★★★★

Курс превосходный. В блоке про Fastify + Postgres нашёл то что давно хотел разобрать нормально.

А
Алексей М.
★★★★★

После курса построил похожий fullstack-проект сам — авторизация, база, деплой. Первый курс который досмотрел до конца.

Г
Георгий Э.
★★★★★

Учусь параллельно с работой — возвращаюсь к последнему уроку и продолжаю. Никогда не теряю где была.

Н
Настя М.
★★★★★

Сначала сам решаешь задачу — потом смотришь разбор. Такой формат заставляет думать, а не копировать.

m
max_orm
★★★★★

Курс превосходный. В блоке про Fastify + Postgres нашёл то что давно хотел разобрать нормально.

А
Алексей М.
★★★★★

После курса построил похожий fullstack-проект сам — авторизация, база, деплой. Первый курс который досмотрел до конца.

Г
Георгий Э.
// Автор

Кто ведёт обучение

React 19TypeScriptNext.js
Макс Рослов
Автор платформы

Привет! Я Макс Рослов

Frontend-разработчик и преподаватель React. Создал Space of React, чтобы поделиться практическими навыками, которые реально применяются в современных фронтенд-проектах.

9+ лет
в коммерческом React
90+ уроков
снято и разобрано
3.7K+ учеников
прошли материалы
ReactNext.jsTypeScriptFrontend
— Макс
// FAQ

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

maxim@space-of-react: ~/faqzsh
➜ ~/faq cat questions.md — нажми на вопрос, чтобы раскрыть

// Платформа практического обучения React: интерактивные задачи в браузере и fullstack видео-проекты от идеи до деплоя. Учишься через код, а не через лекции.

// Для тех, кто знает основы JavaScript и хочет уверенно писать React — от джунов до опытных фронтендеров, желающих закрыть пробелы в fullstack.

// Решаешь компактную задачу прямо в браузере без настройки окружения. Когда готов — смотришь разбор и сравниваешь своё решение с тем, как делает профи.

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

// Да. Код из решений можно использовать в своих учебных и рабочих проектах без ограничений.

➜ ~/faq

Начни писать React сегодня

Задачи в браузере, fullstack-проекты до прода и сертификат в конце. Бесплатно.

Запустить обучение→