Практические курсы — React, Docker и n8n
Эта подборка расширяет библиотеку ProfessorWeb тремя направлениями. На React создаём небольшой каталог учебных материалов, в Docker собираем отдельное окружение веб-проекта, а в n8n проектируем обработку предложений для редакции. Курсы можно проходить независимо: данные, файлы и границы каждого примера описаны внутри серии.
Выберите свой проект
| Серия | Уроков | Что будем делать | Что нужно знать |
|---|---|---|---|
| React: учебный каталог | 16 | Компоненты, состояние, запросы, маршруты и формы на одном каталоге | Основы HTML и JavaScript |
| Docker для веб-проектов | 12 | Образы, контейнеры, хранение данных, Compose и выпуск клиента | Терминал, файлы проекта и основы HTTP |
| Автоматизация сайта с n8n | 9 | Приём заявки, JSON, условия, подборка, ошибки и передача процесса команде | Представление об HTTP и JSON |
Всего 37 новых уроков. Каждая серия последовательно развивает свой пример и объясняет, почему он меняется. Оглавление и переходы между уроками позволяют вернуться к отдельному шагу.
Каталог на React
Начинаем с отдельного приложения и первой карточки. Затем выносим компоненты, добавляем состояние и список, передаём данные и действия через props. После знакомства с эффектами подключаем локальный учебный API, разбираем состояния загрузки и ошибки, выделяем собственный hook. Завершаем маршрутизацией, страницей материала, формой добавления, удалением и обработкой неизвестного адреса.
Это учебный интерфейс с отдельным серверным примером. В тексте показано, где заканчивается клиентская маршрутизация и начинается работа сервера: такой каталог сам по себе не заменяет индексируемые страницы большой библиотеки.
Контейнеры веб-проекта
На небольшом API каталога разбираем, как исходники превращаются в образ, а образ — в работающий контейнер. Работаем с Dockerfile, контекстом сборки, кешем, портами и жизненным циклом контейнера. Затем рассматриваем bind mounts и volumes, описываем окружение в Compose и отделяем сборку клиента от выдачи его готовых файлов.
Последний шаг объясняет передачу образа через registry. Команды относятся к отдельному учебному проекту; каждый шаг называет свой образ, контейнер или volume, чтобы читателю было понятно, с каким объектом он работает.
Редакционная автоматизация в n8n
Берём одну задачу: получить предложение материала для сайта, привести его к понятному договору и направить по нужному пути. Сначала рисуем процесс, затем разбираем API, webhook и узлы. На следующих шагах читаем JSON, преобразуем поля, строим условия и собираем подборку. Отдельные уроки посвящены ошибкам, отладке и передаче настроек другому участнику команды.
В примере используются демонстрационные данные. Подготовленная запись ещё не означает опубликованную статью или отправленное сообщение: внешние действия подключаются отдельно, когда договор данных и поведение ошибок уже понятны.
Версии и результаты примеров
Материалы учитывают изменения современных инструментов: React создаём через Vite, команды Compose используем в текущем формате, а у n8n различаем редактируемый черновик и опубликованную версию процесса. Точные профили и ссылки на официальную документацию находятся в уроках.
Все три серии опубликованы. Учебные программы, контейнеры и workflow при подготовке текстов не запускались; результаты в уроках обозначены как ожидаемые. Исходники примеров снабжены описанием состояния и ограничений.
Другие учебные серии · Каталог тем
Продолжение: от макета до сопровождения
Шесть новых серий и 100 уроков продолжают учебные маршруты: проектируем интерфейс в Figma, создаём приложения на Next.js, Node.js или Django, затем разбираем Linux, Bash и выпуск через GitLab CI/CD. В подборке указано, какие знания понадобятся перед каждой серией.