80-дневный

ПРОФЕССИЯ

REACT-разработчик

Освойте самую актуальную технологию веб-разработки, применяемую в Facebook, Spotify, Amazon, Apple.

1 ноября

Начало обучения

Автор курса

Максим Иванов

Разработчик Battlefield и Minecraft

практический онлайн-курс

Кому подойдет курс?

Начинающим программистам

Курс отлично подходит для начинающих, желающих перенять практический опыт у эксперта в индустрии.

Стремящимся стать Full Stack

Если вы бекенд-разработчик, то хорошо изучив React, вы можете усилить свою роль в командах и получать больше офферов.

Дизайнерам

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

Если конкурируете за разработчиков, ваш кругозор в технологиях даст вам ощутимое преимущество и упростит управление разработкой

Желающим построить карьеру Front End разработчика

Курс не только дает глубоко практический опыт React и проект в портфолио, но также содержит блок по построению успешной карьеры.

Стартаперам и менеджерам

React

React — проник везде, во все технологические компании

Сейчас — бум спроса на фронтенд-разработчиков в мире

React — классный способ попасть в Spotify, Amazon, Facebook, Electronic Arts, Microsoft, Paypal

США, Швеция, Германия, удаленка, в общем есть из чего выбирать

React — удобный инструмент, чтобы быстро проверять свои идеи и делать MVP

И не зависеть от программистов, если вы стартапер или дизайнер

Зарплаты по удаленке на запад

$3000—$6000

Зарплаты в России

100—200 т.р.

Автор Курса
  • Опыт программирования более 11 лет
  • Опыт работы: Electronic Arts / Battlefield, Mojang / Minecraft, The Economist / Bloomberg, Toptal
  • Преподает React более 2 лет
  • Автор англоязычной книги Full Stack React + Typescript изданной в издательстве Newline.co
  • Консультант по разработке в топовых продуктовых компаниях в Стокгольме
  • Спикер и организатор международных мероприятий по программированию
  • Ведущий англоязычного YouTube канала по программированию (5k+ подписчиков)
  • Обучил React более 700 человек

Максим
ИВАНОВ
Как проходит обучение?
Новый модуль — каждую неделю:
Набор видео
Текстовые материалы
Основное домашнее задание (учимся писать код)
Бонусное домашнее задание (учимся документировать, писать пулл-реквесты и блог-посты)
Гайдлайн о том, как распределять время недели на самостоятельную работу
Slack-чат
Для общения с однокурсниками, наставниками и автором
Наставник!
Внимательный наставник на всем протяжении курса.
Вдохновит, ответит на вопросы, сделает code review, поможет с домашкой и направит, если вы застряли.
Можно (и нужно!) созваниваться 1-на-1.
Еженедельный созвон с автором
Можно задать вопросы и послушать ответы на вопросы сокурсников
Программа курса
Введение в React
Модуль 1
Содержание
  • Создание приложения
  • Первые компоненты
    • Чем отличаются компоненты от элементов ?
  • Пишем лейаут
  • Ивенты (обрабатываем клики и нажатия клавиш)
  • Работа с данными: State, Props, propTypes
  • React хуки
  • Обработка ошибок
  • Тестирование простых компонентов

В этом модуле зададим солидную основу для работы с React.

Мы научимся создавать приложения. Будем использовать специальный скрипт-генератор, чтобы избежать рутины и работать быстрее.

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

Изучим механизмы React, которые позволят добавить интерактивность. State, Props, ивенты и хуки. Теперь наше приложение сможет отвечать на действия пользователя.

Ну и наконец мы научимся делать приложения надёжными. Мы разберёмся как обрабатывать ошибки и как тестировать компоненты.

С этими знаниями уже можно разрабатывать полноценные приложения, а ведь это только начало!
Результат
Первое созданное React приложение. Освоены базовые понятия React и получена первая практика. Настроено все окружение.

Готова первая версия конфигуратора пиццы для десктопа.

Длительность — 2 недели. Нагрузка ~ 16 часов
  • 8 видео-уроков
  • 2 стрима с автором с разбором вопросов
  • Домашнее задание 1: создание приложения Конфигуратор Пиццы
  • Домашнее задание 2: тестирование конфигуратора пиццы
  • Бонусное домашнее задание: ворклог с описанием сделанных шагов в свободной форме
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию

Навигация
Модуль 2
Содержание
  • Простая навигация с React-router-dom
  • Обработка параметров в URL
  • Динамическая навигация
  • Тестирование навигации

Результат
Теперь в нашем приложении есть несколько страниц.


Длительность — 3 дня. Нагрузка ~ 4 часа
  • 2 видео-урока
  • 1 стрим с разбором вопросов с автором курса
  • Домашнее задание 1: добавляем навигацию
  • Бонусное домашнее задание: документируем API для работы с сервером
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию
  • Сервер для приложения на NodeJS

Формы
Модуль 3
Содержание
  • Получение данных из формы
  • Обработка ошибок
  • Валидация форм
  • Нормализация значений
  • Отправка файлов
  • Тестирование форм

По моему опыту одна из самых частых задач при работе с фронтендом - это создание форм, так называемое "формошлёпство".

Формы повсюду - авторизация, изменение настроек приложения, изменение данных профиля, добавление товаров на сайт, обработка платежей. Для любого из этих действий потребуется создать форму.

В нашем курсе мы используем библиотеку react-hook-form. В этом модуле мы научимся создавать различные типы полей: простые текстовые, поля с датами, ввод паролей и другие. Также мы изучим как загружать файлы и валидировать поля.


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


Создана админка для добавления новых типов пиццы и топпингов. Пока только интерфейс, отправку на сервер изучим в следующем модуле. Но форма уже юзабельна, валидирует и подсказывает пользователю как правильно вводить данные и хорошо работает.


В форме используются несколько типов компонентов: текстовые поля, чекбоксы, радио-переключатели и кастомное поле для загрузки файлов.


Длительность — 1 неделя. Нагрузка ~ 8 часов
  • 6 видео-уроков
  • 1 стрим с автором с разбором вопросов
  • Домашнее задание 1: добавляем форму заказа пиццы
  • Домашнее задание 2: создаём форму добавления ингридиентов пиццы
  • Бонусное домашнее задание: качественно оформляем Pull Request
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию
  • Ссылка на пример оформленного пулл реквеста

Общение с сервером
Модуль 4
Содержание
  • Отделяем код для работы с сервером в отдельный модуль
  • Запрашиваем данные с сервера из компонента
  • Отправляем данные

Если приложение ограничено изменением только своих локальных данных - пользы от него будет мало. В этом модуле изучим как общаться с сервером: отправлять и получать данные.

Мы научимся отделять код для работы с сервером в отдельные модули. Таким образом его будет проще дополнять, а ещё тестировать приложение будет удобнее.

Результат
Вся информация о пицце теперь хранится на сервере. Мы можем создавать новые виды теста и добавлять топпинги.
Длительность — 3 дня. Нагрузка ~ 4 часа
  • 3 видео-урока
  • 1 стрим с разбором вопросов с автором курса
  • Домашнее задание 1: добавляем отправку данных из форм
  • Домашнее задание 2: используем данные с сервера
  • Бонусное домашнее задание: документируем API для работы с сервером
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию
  • Сервер для приложения на NodeJS

Работа с данными приложения

Модуль 5
Содержание
  • Контекст
    • Храним глобальные данные
    • Используем useReducer
  • Используем Redux
    • Что такое Redux
    • Когда нужен Redux
    • Добавляем Redux в проект
      • Редьюсеры
      • Экшены
      • Селекторы
      • Как организовать код
      • Библиотеки для работы с Redux
        • Redux Toolkit
        • EasyPeasy
      • Тестирование Редьюсеров
      • Работа с сервером в Redux
        • Thunk

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

В этом модуле мы разберёмся что к чему. Какие бывают способы хранения глобальных данных, какой способ выбрать.

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

Обсудим как управляют данными в больших продакшн проектах.


Результат
Перепишем приложение используя новые знания. Сделаем приложение масштабируемым.

Всё по взрослому, структура приложения теперь как в реальных проектах. Работа с данными отделена от представления.


Длительность — 2 недели. Нагрузка ~ 16 часов
  • 12 видео-уроков
  • 2 стрима с разбором вопросов с автором курса
  • Домашнее задание 1: выносим стейт приложения в контекст
  • Домашнее задание 2: переписываем приложение на Redux
  • Бонусное домашнее задание: документируем проект при помощи ESDoc
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию

Стили
Модуль 6
Содержание
  • Используем inline стили
  • Используем CSS
  • Что такое CSS модули? Как их использовать?
  • Используем StyledComponents
  • Библиотеки Компонентов. Какие бывают и как их использовать.
  • Что такое Storybook и как его использовать

Настало время научиться делать приложения красивыми.

Мы научимся работать со стилями в React приложениях. Разберёмся какие бывают способы добавить стили, рассмотрим их преимущества и недостатки.

А ещё мы научимся документировать стили при помощи Storybook. На больших проектах важно, чтобы со стилями был порядок. Это позволит легко их реиспользовать и экономить время.


Результат
Все страницы нашего приложения теперь выглядят прекрасно.

Приложение правильно отображается и на десктопах и на телефонах.

Стили приложения задокументированы в Storybook.


Длительность — 1 неделя. Нагрузка ~ 8 часов
  • 6 видео-уроков
  • 1 стрим с разбором вопросов с автором курса
  • Домашнее задание 1: описываем стили приложения на StyledComponents
  • Бонусное домашнее задание: документируем стили при помощи Storybook
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию


Авторизация
Модуль 7
Содержание
  • Типы авторизации
  • Авторизация по логину и паролю
  • Авторизация через OAuth
  • Подключаем Auth0

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

Разберёмся во всех видах авторизации.

Результат
В админку нашей пиццерии теперь вход только по логину и паролю. Пицца в безопасности.

Наши покупатели теперь могут авторизоваться через социальные сети. Это значит, что Артём может добавить программу лояльности и выдавать скидки постоянным покупателям.


Длительность — 1 неделя. Нагрузка ~ 8 часов
  • 5 видео-уроков
  • 1 стрим с разбором вопросов с автором курса
  • Домашнее задание 1: добавляем авторизацию для админки
  • Домашнее задание 2: авторизация покупателей
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию
  • Репозиторий с примерами всех типов авторизаций

Все о деплое
Модуль 8
Содержание
  • Что такое Continuous Integration
  • Как настроить автоматический деплой с Github Actions
  • Как отслеживать ошибки в продакшене с помощью Sentry.
  • Улучшаем качество отчётов об ошибках в Sentry при помощи source maps.

Современные приложения уже не обновляют вручную, всё автоматизируют.

В этом модуле мы разберёмся, как загружать приложения на сервер и настроим автоматический прогон тестов.

А ещё мы настроим автоматический сбор ошибок у клиентов. Если вдруг у кого-то из пользователей приложение сломается - мы об этом сразу узнаем.
Результат
Настроили автоматический деплой приложения. Теперь достаточно запушить код на гитхаб, чтобы новая версия кода оказалась на сервере.

Во время деплоя автоматически запускаются все тесты, которые мы писали в предыдущих модулях.

Настроен мониторинг ошибок на Sentry. Теперь можно спать спокойно, если что-то пойдёт не так - получим уведомление.


Длительность — 3 дня. Нагрузка ~ 4 часа
  • 3 видео-урока
  • 1 стрим с разбором вопросов с автором курса
  • Домашнее задание: настроить деплой приложения через Github Actions
  • Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию

Серверный рендеринг
Модуль 9
Содержание

* Что такое серверный рендеринг, чем отличается от статически сгенерированных сайтов
* Настраиваем серверный рендеринг вручную
* Используем Razzle для серверного рендеринга
* Что такое статические сайты
* Используем Next.js для создания статически генерируемого сайта

Обычно код React исполняется на клиенте. Часто это значит что с сервера приходит пустая страница, а уже в браузере запускается React и рендерит элементы.

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

Для таких страниц используется серверный рендеринг. Код Реакт приложения выполняется на сервере и в браузер приходит уже заполненная страница.
Результат
Страницы с каталогом пиццы рендерится на сервере.

Теперь нашу пиццу можно найти через Google и Yandex.
Длительность — 3 дня. Нагрузка ~ 4 часа
3 видео-урока
1 стрим с разбором вопросов с автором курса
Домашнее задание: настроить серверный рендеринг страниц с каталогом
Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию
Безопасность
Модуль 10
Содержание
* Виды уязвимостей фронтенд приложений
* Защищаемся от XSS атак
* Где брать информацию об уязвимостях

На ваши сайты будут заходить не только хорошие и покладистые пользователи. Часть посетителей будут злонамеренными. Они будут пытаться взломать ваш сайт используя всевозможные уязвимости.

В этом модуле мы научимся продумывать защиту ваших приложений.

Результат
Теперь вы знаете какие уязвимости будут использовать злоумышленники при атаке на ваш сайт.
Длительность — 3 дня. Нагрузка ~ 4 часа
3 видео-урока
1 стрим с разбором вопросов с автором курса
Домашнее задание: повторить указанные в методичке методы использования уязвимостей на тестовом сайте
Pdf-методичка с кратким содержанием всех тем со ссылками на всю необходимую документацию
Карьера разработчика
Бонусный Модуль
Содержание
  • Составление резюме
  • Профиль на LinkedIn
  • Прохождение технических и культурных собеседований
  • Релокейт в США и Европу
  • Как искать удаленную работу
  • Корпоративная и командная игра, софт-скиллы, коммуникация
Результат
Вы составили свое резюме и профиль на LinkedIn.

У вас составлен шаблон cover letter.

Вы получили пошаговый план поиска работы и развития карьеры на 5 лет.
Длительность — 1 неделя. Нагрузка ~ 8 часов
  • 5 видео-урока
  • 1 стрим с Никитой
  • Домашнее задание: составить профиль на LinkedIn
  • Pdf-методичка с кратким содержанием всех тем со ссылками на все необходимые материалы

Гостевой модуль от Никиты Кабардина, сооснователя Трактор.
Почему «Трактор»?

Помогаем с поиском работы в России, Европе, США

Есть верные партнеры — российские и зарубежные рекрутинговые компании.

К нам постоянно приходят запросы на фронтендеров, не хватает учеников на всех.

От программистов — программистам

Создатели школы — действующие программисты, каждый день пишут код

Чат выпускников

После завершения курса вы всегда будете на связи со всеми учениками школы и ее создателями.

100% гарантия

Если в первую неделю поняли что курс не для вас — без вопросов возвращаем всю стоимость.

Нет цели заработать каждый рубль, единственная цель — дать вам результат.

Тарифы
Базовый
Стандарт
50000 руб.
Максимальный
Основной блок курса (10 модулей)

Доступ к материалам 12 месяцев

Домашние задания без проверки
Основной блок курса (10 модулей)

Доступ к материалам 2 года

Домашние задания с проверкой и обратной связью

Бонусный блок по карьере (составление резюме и собеседования)

Доступ в чат выпускников с вакансиями

8 групповых созвонов с автором курса

Сертификат об окончании курса

Гостевой мастеркласс «Удаленная работа с западными компаниями»

Основной блок курса (10 модулей)

Доступ к материалам 4 года

Домашние задания с проверкой и обратной связью

Бонусный блок по карьере (составление резюме и собеседования)

Доступ в чат выпускников с вакансиями

8 групповых созвонов с автором курса

Сертификат об окончании курса

Гостевой мастеркласс «Удаленная работа с западными компаниями»

Личная консультация с автором курса (2 часа)

Поддержка наставника после окончания курса в течение 3 месяцев

Мастеркласс «Как организовать свое мероприятие для программистов»

27 000 руб.
35 000 руб.
45 000 руб.
35000 руб.
80000 руб.

Школа технологий