Campfire School
Практический курс React + Next.js
Начинаем с классического React, где всё рендерится в браузере. Потом переходим на Next.js и учимся отдавать страницы с сервера. За курс соберёшь три проекта и дважды выложишь приложение в интернет. Как всё устроено, рассказываю в видео.
📦 4 модуля
📚 40 уроков
⚛️ React
▲ Next.js
🧩 3 проекта
// видео о курсе скоро будет здесь
Записаться на курс →
Запись через короткую анкету в телеграме
// self-check
Узнаёшь себя?
📼
Прошёл(-ла) пару туториалов по React, а своё приложение с нуля собрать не выходит
🔁
Ставишь useEffect наугад, и компонент перерисовывается непонятно почему
🤖
ИИ-агент пишет компоненты за секунды, но объяснить, что в них происходит, ты не можешь
🧭
В вакансиях просят Next.js и серверный рендеринг, а ты работал(-а) только с клиентским React
🧶
Состояние тянется через пропсы на пять уровней вниз, и любая правка что-нибудь ломает
😮💨
Материалы устаревают быстрее, чем досматриваешь: классы, хуки, теперь Server Components
// как устроен курс
Сначала React, потом Next.js
Next.js построен поверх React. Если сразу прыгнуть во фреймворк, непонятно, где заканчивается одно и начинается другое: почему компонент рендерится дважды, откуда лишний запрос, что из этого делает сервер.
Поэтому первые три модуля работаем с React в браузере и заканчиваем их деплоем. В четвёртом переносим приложение на Next.js: Server Components, Server Actions, кеширование и SEO.
“
Программа охватывает и классический React с рендерингом на клиенте, и Next.js с техниками SSR, SSG и ISR. Разбираем подходы к разработке веб-приложений, аргументируем каждое решение и пользуемся лучшими DX-техниками экосистемы React.
// кто ведёт
Иван Петриченко
// что ты получишь
Навыки после курса
Фундамент React
JSX, компоненты, props, состояние, события и формы. Плюс алгоритм согласования, без которого списки и ключи остаются магией.
Рендер и эффекты
Как React рендерит компоненты, когда нужен useEffect и как с его помощью правильно ходить на сервер за данными.
Состояние приложения
Подъём состояния, контекст, глобальное состояние на useReducer, менеджеры состояний и Zustand.
Оптимизация по делу
useCallback, useMemo, memo, useDeferredValue, useOptimistic. Разбираем, что из этого актуально сейчас и где оно правда помогает.
Next.js и сервер
Маршрутизация, Server и Client Components, Server Actions, кеширование данных, SEO и метаданные.
Контроль над кодом от ИИ
Понимаешь, что сгенерировал агент, и можешь это объяснить. На собеседовании такое спрашивают.
// программа
Программа — 4 модуля
М 01
16 уроков
Зачем нужен React и фундаментальные навыки
От первого приложения до состояния, событий и форм
Урок 1Что такое CSR. Какое место занимают React и Next.js в веб-разработке и почему мы сначала фокусируемся на React
Урок 2Что такое React. Фундаментальные принципы. Его плюсы, минусы и почему стоит выбрать его
Урок 3Создаём своё первое приложение. Разбираем варианты как это можно сделать и причем тут Rust
Урок 4Что такое препроцессор JSX и элементы в React
Урок 5React компоненты и строгий режим (Strict)
Урок 6Свойства компонентов (props) и условный рендеринг
Урок 7Работа со списками и алгоритм согласования. Наглядно разберем, зачем нужно знать Javascript, работая с React
Урок 8React-фрагменты
Урок 9React и AI — почему важно знать что вам генерирует агент в том числе и для трудоустройства
Урок 10Состояния компонентов (state, useState)
Урок 11Хуки в React: какие бывают, приоритет изучения и в чем отличие от классовых компонентов
Урок 12События в React
Урок 13«Batching» состояния, иммутабельность и другие нюансы
Урок 14Работа с формами и нюансы рендеринга
Урок 15Передача состояния между компонентами: hoisting (подъем)
Урок 16Семантика и стилистика приложений
М 02
9 уроков
Основы любого реального приложения на React
Эффекты, запросы к серверу, контекст, свои хуки и маршрутизация
Урок 17Как происходит рендер компонентов подробно. Что такое эффекты
Урок 18Что такое API и взаимодействие с сервером
Урок 19Используем эффекты правильно (useEffect)
Урок 20Трансформация данных. Паттерн Adapter
Урок 21Правила хорошего UX для любого приложения
Урок 22Передача состояния между компонентами: контекст (useContext)
Урок 23Прием prop children и порталы
Урок 24Создание собственных хуков
Урок 25Маршрутизация в React приложениях
М 03
7 уроков
Продвинутые методики про которые нужно знать
Оптимизация, глобальное состояние и первый деплой
Урок 26Насколько актуальны методики оптимизации (useCallback, useMemo, memo)
Урок 27Дополнительные методики оптимизации (useDeferredValue, useOptimistic и др)
Урок 28use API в React
Урок 29Создание механизма управления глобальным состоянием через useReducer
Урок 30Менеджеры состояний в экосистеме React
Урок 31Zustand как современная альтернатива
Урок 32Подводим итог работы с клиентским рендерингом. Деплой приложения
М 04
8 уроков
Серверный рендеринг и Next.js
Переносим приложение на сервер: SSR, SSG, ISR и второй деплой
Урок 33Что такое Next.js и его архитектура
Урок 34Маршрутизация в Next
Урок 35Встроенная оптимизация ассетов
Урок 36Как работают SEO и Метаданные в Next
Урок 37Server Components vs Client Components
Урок 38Запросы к серверу и кеширование данных
Урок 39Server Actions в Next.js
Урок 40Разбираемся в разнице React и Next. Деплоим приложение
// сравнение
Три способа писать на React
🎲 Копирует из ИИ
- Не понимает, что сгенерировал агент
- Чинит баги наугад, по одному запросу за раз
- Теряется, когда на собеседовании просят объяснить код
- Не отличает серверный компонент от клиентского
📼 Учит по туториалам
- Знает хуки по отдельности
- Собрать приложение целиком не получается
- Next.js и серверный рендеринг откладывает на потом
- Половина материалов уже устарела
🚀 После курса React + Next.js
- Понимает, как и когда рендерится компонент
- Доводит приложение от первого компонента до деплоя
- Выбирает, что делать на сервере, а что в браузере
- Проверяет код от ИИ и объясняет свои решения
// кому подходит
Частые вопросы
Кому подойдёт курс?
Тем, кто уже пишет на JavaScript и хочет перейти на React. И тем, кто работал(-а) с React только в браузере, а теперь нужен Next.js.
Что нужно знать до старта?
JavaScript и вёрстку. Если с JavaScript пока туго, начни с курса «JavaScript + ИИ».
Почему не начать сразу с Next.js?
Next.js работает поверх React. Пока не понимаешь, как рендерится обычный компонент, сложно разобраться, что делает сервер, а что браузер. Об этом первый урок.
Будут ли классовые компоненты?
Пишем на функциональных компонентах и хуках. Чем они отличаются от классовых, разберём в уроке про хуки, этого хватит, чтобы читать старый код.
Где домашние задания?
Внутри уроков. Отдельными пунктами в программу я их не выносил, иначе список вышел бы огромным. Вся практика собирается в три проекта: один простой для старта и два посерьёзнее, которые можно развивать дальше.
Причём тут Rust?
Узнаешь в третьем уроке, когда будем разбирать, как создать первое приложение.
// результат
Что изменится
Сейчас
- React знаешь по кусочкам из туториалов
- Эффекты и перерисовки ведут себя как хотят
- Код от ИИ принимаешь на веру
- Next.js откладываешь, потому что непонятно, с какой стороны подойти
После курса
- Понимаешь, как React рендерит компоненты
- Знаешь, где нужен эффект, а где можно без него
- Читаешь и правишь то, что сгенерировал агент
- Выкладываешь приложения на React и Next.js
Ты сможешь:
- Собрать приложение на React от первого компонента до деплоя
- Работать с API и приводить данные к нужному виду
- Писать свои хуки и настраивать маршрутизацию
- Держать глобальное состояние в useReducer или Zustand
- Выбирать между Server и Client Components
- Настраивать кеширование, SEO и метаданные в Next.js
- Показать на собеседовании три проекта и объяснить каждое решение в них