Введение

React путь самурая без альтернатив

Первая версия курса "Путь Самурая" вышла примерно 7 лет назад. С тех пор многое изменилось: мы с командой освоили новые методики обучения, глубже изучили рынок труда, прочувствовали проблемы и трудности, с которыми сталкиваются студенты в процессе обучения и трудоустройства. Все эти знания и опыт легли в основу обновлённого курса "React путь самурая без альтернатив" — именно он представляет собой новый, современный подход к обучению и подготовке к работе.

Этот курс поможет тебе стать frontend-инженером, создавать крутые продукты и делать мир лучше!

Знания, достаточные для трудоустройства «вчера»

• ReactJS: базовые основы, без опыта крупных проектов;
• JS: поверхностные знания, без глубокой теории (прототипы, замыкания, классы);
• HTML/CSS: примерно на уровне React, особенно для начинающих;
• TS: использовался на больших продуктах, но для трудоустройства достаточно было немного знать основы и немного пощупать;
• Architecture: базовый уровень понимания структуры папок и работы с импортами;
• AI: практически не требовался, максимум знание простых утилит вроде Copilot;
• DevOps, Security, Agile: достаточно было поверхностного знакомства (статья, видео);
• Algorithms: общее понимание O-большого, знание линейной/квадратной/логарифмической сложности. Обычно хватало понимания, что цикл в цикле — это плохо;
• Git: базовые команды (commit, pull, push), активность на GitHub требовалась почти всем;
• Backend: на уровне понимания: есть endpoint, туда отправляется запрос, оттуда приходят данные. Знание REST API приветствовалось.

Знания, необходимые для трудоустройства «сегодня»

• ReactJS: нужно уверенно владеть почти всем API React. Мы должны быть мастерами React. Около 10% возможностей (для метафреймворков и сложных библиотек) достаточно знать на уровне «слышал».
• JS: требуется глубокое знание языка: замыкания, классы, промисы и другие ключевые механизмы;
• HTML/CSS: на том же уровне. При хорошем знании React и JS верстку можно быстро подтянуть по мере необходимости;
• TS: практическое использование типизации для выявления ошибок на этапе разработки и строгого контроля передачи данных между слоями и функциями. Особенно важно для утилитного и масштабируемого ПО, где строгая типизация помогает поддерживать стабильность и предсказуемость кода;
• Architecture: уже не только структура папок. Важно закладывать архитектурный фундамент проекта. Понимание концепции Solid и GRASP, модульность и паттерны, которые помогают поддерживать долгоживущее, масштабируемое и удобное для развития приложение;
• AI использование AI ускоряет разработку и делает кодинг эффективнее, но инженеры должны осознавать, что происходит «под капотом», чтобы не терять профессионализм. AI помогает генерировать код и автоматизировать рутинные задачи, усиливая разработчика, а не заменяя его полностью;
• DevOps: это некий стандарт для любого разработчика, нужно понимать, что такое pull request,CI/CD, GitHub Actions или Jenkins, Docker, общие представления о Kubernetes и Nginx, основах сети (DNS, CDN, HTTP/HTTPS, cookies, кросс-доменные запросы), чтобы работать с типовыми DevOps-процессами в команде.
• Security: важно понимать основы безопасности на frontend. Нужно уметь предотвращать инъекции опасного кода, работать с безопасными cookies,хранить токены авторизации с минимальным риском утечки;
• Agile: важно иметь практическое понимание гибких методологий разработки — спринты, Agile, Scrum. Опыт работы в коммерческих проектах приветствуется;
• Algorithms: умение оценивать сложность кода (O(n), O(n²), O(log n)), понимание трудоемкости операций и базовое знание структур данных (массивы, хэши, древовидные структуры);
• Git: уверенная работа с ветками, commit, pull request, merge, rebase, разрешение конфликтов и др. Глубокое понимание Git важно для командной работы и продакшена, так как помогает избежать потери изменений и ошибок;
• Backend: хорошее знание backend — от BFF(backend for frontend) до самостоятельной простой разработки. Понимание стоимости и сложности запросов, пути данных от frontend к серверу и обратно. Такое понимание повышает вашу ценность как frontend-инженера.

Знания, необходимые для начала обучения

• ReactJS: наличие базового понимания - вы уже знакомы с библиотекой и понимаете её назначение, имеете представление о компонентах и синтаксисе JSX;
• JS: базовые знания JavaScript: функции, объекты, массивы, простые запросы с async/await и промисами; есть общее представление о замыканиях, классах и наследовании;
• HTML/CSS: понимание структуры тегов и атрибутов, умение вкладывать элементы и выстраивать их с помощью flexbox, знание основ стилизации и простых CSS-анимаций.;
• TS: минимальные основы - умеете объявлять типы переменных, создавать собственные типы и давать им имена, задавать свойства объектам, типизировать массивы;
• Architecture, AI, DevOps, Security, Agile, Algorithms, Git, Backend: перед началом курса рекомендуется уделить по одному дню каждому разделу, чтобы получить общее представление о темах и подготовиться к изучению материала.

Результат вашего обучения

Музыкальный плеер 🎶 - интереснейшее приложение, которое мы будем разрабатывать вместе с самого начала курса. В процессе работы вы столкнётесь с задачами, максимально приближенными к реальным продакшн-сценариям, а не с упрощёнными учебными проектами. Это значит, что каждая функциональная часть, каждая новая фича будет создаваться так, как это делается в профессиональной frontend-разработке: с учётом архитектуры, оптимизации, тестируемости и масштабируемости.

На этом проекте вы будете осваивать ключевые концепции и принципы современной frontend-разработки. Такой практический подход позволит вам получить реальные навыки, которые пригодятся в будущем при работе над настоящими продуктами.

Полезные ссылки

Содержание курса

Модуль 1: С нуля до первого деплоя

• 1 - О бесплатном курсе ReactJS, с нуля до миддл. Введение 01 Общее представление о структуре курса и темах, которые будут изучены. Просто посмотрите это видео без практики.

• Обзор курса: что тебя ждёт Общее представление о структуре курса и темах, которые будут изучены. Просто посмотрите это видео без практики.

• 2 - Front-end без фреймворков - Vanilla UI Чтобы понять, какую проблему решает React, создадим простое front-end приложение без фреймворков.

• 3 - Для чего фронтенд-разработчику NodeJS? Фронтендеры пишут программы, работающие в браузере. Но зачем им платформа NodeJS, по сути являющаяся серверной технологией?

• 4 - Первое React-приложение с помощью Vite Сегодня очень редко настраивают проект с нуля сами, вместо этого используют различные инструменты. Раньше это был CRA (create-react-app), сегодня - Vite.

• 5 - Метод массива map - главный метод React-разработчика Немного не про React, но данный метод массива вы будете использовать в React каждый день по несколько раз.

• 6 - Просто файлы или модули? import / export Что такое ESM модули? Как работает import/export? Какая проблема решается?

• 7 - Что такое JSX? Отличие от HTML HTML засунули в JavaScript, и это по истине удобно.

• 8 - Render алгоритм на основе структур данных Условный рендеринг, алгоритм против структуры данных.

• 9 - Как работает и для чего нужен хук useState? Для чего нужен хук useState и как он работает под капотом?

• 10 - Что такое back-end, API, Swagger на примере MusicFun API Как Front-end работает в связке с Back-end?

• Реферальная программа: как получать доступы бесплатно Информация о реферальной программе курса и возможности получения бесплатного доступа.

• 11 - Как работает хук useEffect? Где делать запрос на сервер? Самый важный хук в React.

• 12 - Как работают методы массива filter и find? Важные методы массивов для работы с данными в React-приложениях.

• 13 - UI/UX шаблон List - Detail (список - детали) Распространённый паттерн проектирования пользовательского интерфейса.

• 14 - Boolean context, Truthy, Falsy, условный рендеринг в React Понимание булевого контекста и условного рендеринга компонентов.

• 15 - Про useEffect, часть 2: массив зависимостей Глубокое понимание работы массива зависимостей в хуке useEffect.

• 16 - Что такое компонент и для чего нам декомпозиция UI? Основы компонентного подхода и декомпозиции пользовательского интерфейса.

• 17 - Зачем компоненту Props? Принцип Information Expert (GRASP) Понимание props и применение принципа Information Expert из GRASP.

• 18 - Что такое Inversion of Control и причём здесь callbacks? Паттерн инверсии управления и использование callback-функций.

• 19 - Props + callbacks на примере плеера MusicFun Практическое применение props и callbacks в реальном приложении.

• 20 - TypeScript tutorial for beginners - 01 Введение в TypeScript для начинающих.

• 21 - TypeScript in React for beginners tutorial 01 Использование TypeScript в React-приложениях.

• 22 - Архитектура front-end приложения, Separation of Concerns, Data Access Layer Принципы построения архитектуры frontend-приложений и разделение ответственности.

• 23 - Как вынести код в свой кастомный React Хук Создание собственных хуков для переиспользования логики.

• 24 - Стейт-менеджер на хуках / Business Logic Layer Управление состоянием приложения с помощью хуков и слой бизнес-логики.

• 25 - Module CSS в React, clsx, PostCSS vs Lightning CSS Современные подходы к стилизации React-компонентов.

• 26 - Git vs GitHub, что такое Staged/Indexed/Ignored/Clean Основы работы с системой контроля версий Git и платформой GitHub.

• 27 - Основы DevOps, CI/CD для Front-end, GitHub Actions Непрерывная интеграция и развёртывание frontend-приложений.

• Итоговый обзор курса: повторяем всё Финальное повторение всех пройденных тем модуля.

Модуль 2: Полноценный CRUD + Routing

• Coming soon Скоро наполним... примерный план