Участник:DILIN/ReactJS

Курс «Участник:DILIN/ReactJS»

---

Факультет: Информационные технологии

---

Пререквизиты:
Постреквизиты:

---

Преподаватель: DILIN

---

Ссылка:

Приветствую тебя, дорогой друг! Здесь будет регулярно собираться и актуализироваться курс по ReactJS.

Также, стоит учесть, что курс будет построен с учётом того, что ученик (а так же и преподаватель) - бэкендер на Ruby, поэтому будут даваться аналогии с Rails и серверной логикой.

Вот примерный пошаговый план React от “что это вообще” до продвинутой архитектуры:

План рассчитан примерно на 45–50 дней, по 1 теме в день. Темы расположены от простого к сложному, крупные блоки разбиты.

ЭТАП 0 — Фундамент (5 дней)

(без этого React будет болью)

День 1 — Как работает современный фронтенд

• Что такое SPA
• Как браузер исполняет JS
• Что такое VDOM
• Разница SSR vs CSR

📌 Аналогия: Rails + ERB = серверный рендеринг. React = клиент сам рендерит шаблон.

День 2 — ES6, который нужен для React

• let / const
• стрелочные функции
• деструктуризация
• spread оператор
• map / filter / reduce

📌 Аналогия: это твой Ruby Enumerable, только на JS.

День 3 — Модули и структура проекта

• import / export
• структура React проекта
• что такое bundler (vite / webpack)

📌 Это как Gemfile + autoload в Rails.

День 4 — Что такое компонент

• Функциональный компонент
• JSX
• Почему JSX не шаблон, а синтаксический сахар

📌 Компонент = View partial в Rails, но с логикой внутри.

День 5 — Props

• Передача данных
• Однонаправленный поток данных
• props.children

📌 Это как передать переменную в partial: `render partial:, locals: {}`

ЭТАП 1 — Базовые хуки (10 дней)

День 6 — useState (база)

• Локальное состояние
• setState
• Асинхронность обновления

📌 Это твой instance variable в контроллере, но живущий в UI.

День 7 — useState глубже

• Объекты в state
• Иммутабельность
• Почему нельзя мутировать

📌 В Ruby можно мутировать, в React — нельзя, иначе ререндер не сработает.

День 8 — Ререндер

• Когда происходит
• Почему происходит
• Что триггерит

День 9 — useEffect (база)

• Жизненный цикл
• dependency array

📌 Это как before_action / after_commit, но для UI.

День 10 — useEffect продвинуто

• Очистка
• Подписки
• Fetch внутри effect

День 11 — Асинхронность

• fetch
• async/await
• обработка ошибок

📌 Это твой Faraday / HTTParty.

День 12 — Controlled inputs

• Формы
• value / onChange

📌 Rails form_with, только вручную.

День 13 — Подъем состояния (lifting state up)

📌 Как если бы несколько partial зависели от одного instance variable.

День 15 — Списки и key

📌 key = primary key для React reconciliation.

ЭТАП 2 — Архитектура и композиция (8 дней)

День 17 — Custom Hooks

• Зачем
• Как писать

📌 Это как вынести логику в concern.

День 18 — Context API (база)

📌 Это как глобальная переменная, но контролируемая.

День 19 — Context глубже

• Когда НЕ использовать
• Проблемы производительности

День 20 — useReducer

📌 Это мини Redux внутри компонента.

День 21 — React DevTools

• Профилирование
• Debug ререндеров

День 23 — useCallback и useMemo

📌 Оптимизация вычислений, чтобы не было лишних ререндеров.

ЭТАП 3 — Роутинг и структура приложения (5 дней)

День 24 — React Router (база)

📌 Это твой routes.rb, только в браузере.

День 28 — Защищенные роуты

📌 Аналог before_action :authenticate_user

ЭТАП 4 — Работа с сервером (5 дней)

День 33 — React Query (TanStack Query)

📌 Это ActiveRecord + кэш + автообновление.

ЭТАП 5 — Глобальный state management (8 дней)

День 35 — Redux (концепция)

📌 Это centralized store, как глобальный singleton.

День 39 — Redux Saga (концепция)

📌 Это Sidekiq для фронта.

День 40 — Saga глубже

• takeEvery
• call
• put

ЭТАП 6 — Продвинутые темы (7 дней)

День 46 — SSR и Next.js (база)

📌 Это возвращение к Rails-подходу, но гибридному.

День 48 — Архитектурные подходы

• FSD
• Feature-based
• Atomic design

ЭТАП 7 — Практика (обязательно)

День 49 — Маленький CRUD проект

(список задач)

Как тебе учиться?

Каждый день:

1. Теория (1–2 часа)
2. Мини-практика
3. Написать руками без копирования
4. Ответить себе:
   1. какую проблему решает эта технология?
   2. когда её НЕ использовать?

Ruby-бэкендеру

Твоя главная проблема будет:

• React — декларативный
• Ты привык к императивной логике
• Ты хочешь "контролировать", а React говорит: "опиши состояние"

Нужно перестроить мышление:

UI = функция от состояния

Как в Rails:

render json: user

В React:

return <User data={user} />