Курс по React
С нуля до про

Записывайтесь, и за два месяца вы освоите React.js, получите сертификат по окончании, а также сделаете крутое портфолио!

  • Новый курс Только актуальная и свежая информация по React 18
  • Смотрите в любое время Более 100 уже записанных видео, минимум теории и максимум практики
  • Доступ к курсу Навсегда
-63% ~16 ч.
Курс React - С нуля до про
В курс включено:
  • Кейсы и проекты Выпускные проекты для вашего портфолио
  • Доступ к общему чату Группа со всеми студентами и кураторами курса
  • Сертификат Именной сертификат по окончании курса
  • Домашние задания Домашние работы, рекомендации и консультации на всех этапах
  • GitHub Организация выпускных проектов для вашего портфолио на гитхаб

Чему вы научитесь

  • 1.
    JavaScript

    Большую часть времени мы будем писать на js и учиться делать это красиво и эффективно, если у вас есть проблемы в js, то этот курс будет лучшем решением, чтобы закрыть пробелы в знаниях.

  • 2.
    Приложения на React

    Научимся делать полноценные приложения / SPA на React.js 18, выучим роутеринг, правильное хранение и взаимодействие с данными внутри реакт приложений.

  • 3.
    React hooks

    Вы узнаете, как с помощью хуков привнести мощь классовых компонентов в функциональные, а также как писать код красиво и эффективно.

  • 4.
    UI и компоненты

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

  • 5.
    Создавать свои сборки

    Напишем универсальную сборку для React-приложений, которую можно будет использовать на любом будущем проекте.

  • 6.
    Библиотеки

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

  • 7.
    Переиспользование

    Зачем писать код дважды? Научимся писать универсальные компоненты, которые можно будет переиспользовать в любых проектах.

  • 8.
    Оптимизация

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

Следующее повышение цены - 20 мая.

Скидка до 60% на все тарифы! Записывайтесь, и за два месяца вы освоите React.js, получите сертификат по окончании, а также сделаете крутое портфолио! Выбрать тариф
80 000₽

Средняя зарплата Frontend разработчика по РФ

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

Согласно hh, SuperJob и Яндекс работа, где собирались данные о вакансиях - это средняя зарплата фронтенд разработчика. В данной выборке не участвовали города миллионники.
Поэтому в Москве, Санкт-Петербурге и других городах-миллионниках она может быть выше (иногда в 2 - 3 раза).

Программа курса

#1 Видеоуроки ~2ч. 10м.

Основы React

Знакомство с React и его экосистемой.

    • Основы React
    • Основы React
  • - Work Flow - Настройка редактора
  • - Work Flow - Настройка необходимых плагинов
  • - Work Flow - Настройка конфигов
  • - Work Flow - Code style
  • - Разница между Vue.js и React.js
  • - Инициализация React.js
  • - Как работает Virtual DOM
  • - Связь реакта и DOM
  • - Подключение React в примере полноценного приложение
  • - Подключение React в примере отдельных компонентов на сайте
  • - Подключение отдельных компонентов в уже существующие HTML+CSS+JS сайты (пример верстки)
  • - Глубже познакомимся с React и JSX
  • - Динамическая смена данных
  • - Работа с объектами
  • - Работа с Boolean значениями
  • - Условный реднеринг
  • - Привязка атрибутов
  • - Циклы и вывод списков
  • - События в реакте
  • - Знакомство с props
#2 Видеоуроки ~40м.

Эффекты

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

    • Эффекты
    • Эффекты
  • - Разбираем React Hooks
  • - Используем useState
  • - Работа с формами и инпутами на примере useState
  • - Объекты в useState и их изменения
  • - Объекты в useState и их удаление
  • - Используем useEffect
  • - Учимся использовать useEffect эффективно
  • - Подписки и отписки на события
  • - Оптимизация через useCallback
  • - Использование useReducer
#3 Видеоуроки ~1ч. 50м.

Своя сборка на react-create-app

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

    • Своя сборка на react-create-app
    • Своя сборка на react-create-app
    • Своя сборка на react-create-app
  • - --- Подготовка: ---
  • - Знакомство с git / github
  • - Создание репозитория на github
  • - Выбор лицензии
  • - Выбор типа проекта
  • - Коммиты и пуши
  • - Публикация сборки на ваш github для дальнейшего переиспользования во всех других проектах
  • - --- Первая часть: ---
  • - Преимущества и использование react-create-app
  • - Установка и знакомство с node.js
  • - Установка react-create-app через npx
  • - Чем плох флаг -g
  • - Установка глобальных пакетов через npx
  • - Лучшая структура проектов
  • - Подключение SCSS
  • - Подключение шрифтов локально и через CDN
  • - Организация подключаемых библиотек
  • - Организация components
  • - Организация layouts и их отличия от components
  • - Выбираем библиотеку для дизайна
  • - Css помощники
  • - Использования attrs и их проблемы
  • - Использование classNames
  • - --- Вторая часть: ---
  • - Как работает роутеринг
  • - Установка react-router-6 (последняя версия роутера)
  • - Рендер страниц в зависимости от маршрута
  • - Смена содержимого по клику на ссылку
  • - Примеры нативного роутеринга (без библиотек)
  • - NavLink vs Link
  • - Header и NavLinks - делаем динамичное меню
  • - Страница 404 и базовые редиректы
  • - --- Третья часть: ---
  • - Настройка билда
  • - Настройка для не стандартных билдов
  • - Настройка хешей и карт для стилей/скриптов
  • - Общий файл конфигураций для проекта
  • - Настройка конфигов для лучшего build проекта
  • - Как отправлять проект в продакшен
  • - Оптимизация сборки для "конечного" билда в продакшен
  • - Тестирование билда проекта на dev сервере
  • - Продвинутая работа с env
#4 Видеоуроки ~1ч. 10м.

Компоненты

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

  • - Props - механизм передачи данных в компоненты
  • - Научиться обрабатывать коллекции данных внутри компонентов.
  • - Правильная работа с классами и компонентами, которые могут изменяться динамически.
  • - Children и "бокс" компоненты
  • - Выучим особенности событий в компонентах
  • - Выберем лучший способ создания и организации компонентов
  • - Легкая работа с props при помощи propTypes
  • - Валидация пропов
  • - Валидация функций, переданных, как пропы
  • - Хранение состояния и управление событиями во вложенных компонентах
#1 Видеоуроки ~1ч. 40м.

Продвинутое приложение списка задач

Наверное, вы уже написали кучу «тудушек» и это приложение может показаться не серьезным, но если вы загуглите «react todo app» то все примеры из гугла, это классовые компоненты с ужасным кодом, без какой-либо оптимизации и перспектив на расширяемость. Поэтому в этом модуле мы напишем свой менеджер задач, без использования сторонних библиотек, в функциональном стиле и только на хуках, а также познакомимся с фильтрами и компонентным подходом.

    • Продвинутое приложение списка задач
    • Продвинутое приложение списка задач
    • Продвинутое приложение списка задач
    • Продвинутое приложение списка задач
  • - Переиспользование сборки, которую мы писали раньше
  • - Динамические атрибуты
  • - Продвинутая работа с формами в реакте
  • - Модель для работы с формами
  • - Текстовый инпут
  • - Чекбоксы их "связь" с инпутами
  • - Валидация входящих параметров
  • - Связь дочерних компонентов
  • - Универсальные компоненты листов и "айтемов"
  • - Использование useState для массивов
  • - Использование useEffect для обработки данных
  • - Продвинутое хранение данных в localStorage
  • - Array merge для стейта
  • - Массивы + объекты в useState и их изменения
  • - Массивы + объекты в useState и их удаление
  • - Поиск и замена единичного объекта в массиве useState
  • - Фильтрация элементов в стейте приложения
  • - Знакомство с seeders и изолирование даты в отдельный json
  • - Перенос "задач по умолчанию" в seeders
  • - Деплой проекта на GitHub
#2 Видеоуроки ~40м.

React router - Динамическая перерисовка

Новый взгляд на роутеринг и обновленную библиотеку React Router v6. Научимся строить простые и вложенные маршруты, перерисовывать страницы в зависимости от пути

  • - Основа SPA. Что такое роутер и зачем он нужен.
  • - Отличия пятой и шестой версиях роутера
  • - Миграция с 5 версии на 6
  • - Гайд по всем изменениям в новой версии роутера (шестой)
  • - Установка react-router-6 (последняя и актуальная версия роутера)
  • - Динамическая перерисовка без перезагрузки страницы
  • - Динамичный навбар и ссылки
  • - Активные ссылки
  • - Не существующие роуты - страница 404 для товаров
  • - Слежка за маршрутом
  • - Продвинутые редиректы через компоненты
  • - Продвинутые редиректы через хуки
  • - Огромное кол-во примеров работы роутера на все случаи жизни
#3 Видеоуроки ~2ч 30м.

Интернет-магазин на React

В этом приложении мы напишем свой интернет-магазин, в котором будем использовать react-router и собственный Store. Все продукты будут храниться в общем хранилище приложения, а роутер будет обрабатывать все динамические маршруты.

    • Интернет-магазин на React
    • Интернет-магазин на React
    • Интернет-магазин на React
    • Интернет-магазин на React
  • - Более глубокая настройка react и react-router
  • - Создание динамического меню
  • - Оптимизация логики - хранение всех данных в json массиве
  • - Продвинутая работа с сидерами (seeders)
  • - Хранение и динамическое взаимодействие с текстом, картинками и тп внутри приложения
  • - Динамические маршруты для товаров
  • - Настройка pages для приложения
  • - Создание страницы товара
  • - Подгрузка единичного товара в отдельном компоненте
  • - Продвинутая работа с редиректами
  • - Написание хуков для редиректов
  • - Использование компонента для редиректа и разница с хуком
  • - --- Вторая часть: ---
  • - Основные параметры выбора библиотек
  • - Подключение и использование сторонних библиотек
  • - Работа со сторонними плагинами на примере слайдера
  • - Подключение слайдера с последними товарами
  • - Адаптация приложения под мобильные устройства
  • - Активная ссылка из слайдера товаров
  • - Примечание: в текущем приложении мы будем использовать только ОДНУ библиотеку (слайдер). Всё остальное мы будем писать сами, это поможет лучше понять реакт и его особенности.
  • - --- Третья часть: ---
  • - Вводная лекция по Store и компонентам
  • - Лекция по дополнительной оптимизации и useMemo
  • - Знакомство с контекстом
  • - Работа с useContext
  • - Лекция про хранение и сбор данных - геттеры и стейт
  • - Лекция про actions, mutations
  • - Введение в меморизцию и работа с хуком useMemo
  • - useMemo + useContext для оптимизации стора
  • - Подключение файла Store.js
  • - Создание своего хранилища для всего приложения
  • - "Шаринг" стейта приложения
  • - Перенос данных в хранилище
  • - Хранение данных в хранилище приложения
  • - Обработка ошибок
  • - Делаем индикаторы загрузки и успешного добавления в корзину
  • - Создание компонента корзины товаров
  • - Создание страницы оформления заказа
#4 Видеоуроки ~40м.

Дополнительно - Git и GitHub

Поскольку в курсе будет несколько выпускных проектов, то я посчитал нужным добавить видео по работе с GIT, для того чтобы вы могли организовать свое портфолио на GitHub и GitHub Pages, что увеличит шансы найти работу или получить больше заказчиков!

  • - GIT Введение
  • - Введение в GtiHub
  • - Разница между git и github
  • - Создание первого репозитория
  • - Первый коммит и пуш проекта
  • - Загрузка проекта в Ваш репозиторий на GitHub
  • - Добавление новых коммитов
  • - Настройка GitHub Pages для демонстрации работы приложения
  • - Загрузка Вашего Демо на GitHub Pages
  • - Скрипты по автоматизации git коммитов
  • - Куча лайфхаков по работе с гит / гитхабом
  • - Шпаргалки и бонусы по консольным командам Git
  • - Примечание: Бонус вставлен порционно во все модули (это позволило на практике показать, как работать с Git на примере Github в различных ситуациях и при разных подходах)
#5 Видеоуроки ~2ч.

Бонус 🎁 - Приложение на Mobx

В этом приложении мы напишем свой клон Reddit. Будем вытаскивать посты по REST API при помощи сервисов и самописного fetch, разберемся с реактивностью и хранением данных на более высоком уровне. На протяжении всего модуля мы будем смотреть на разницу между useContext + memo vs Redux vs Mobx.

  • - --- Часть 1: Введние в Mobx 6 и Redux ---
  • - Введение в Mobx
  • - Разница Mobx и Redux
  • - Почему Mobx удобнее чем Redux в примерах
  • - На практике сравним Redux и Mobx
  • - Вспомним про useContext и посмотрим разницу
  • - Наблюдаемые переменные - observable
  • - Наблюдатель - observer
  • - Вычисляемые значения - computed
  • - Экшены и Реакции в Mobx
  • - Mobx 6, как полная замена mobx 4 / mobx 5
  • - --- Часть 2: Введние в mobx ---
  • - Разберемся с REST API + Reddit api
  • - Асинхронные запросы
  • - Пользовательские реакции
  • - Работа с state, actions, computed и тп
  • - Самостоятельно напишем утилиту fetch (аналог axios)
  • - Сделаем свои сервисы для работы с асинхронными запросами
  • - Напишем универсальный прелодер
  • - Универсальный компонент тегов для сортировки
  • - --- Часть 3: Дополнение ---
  • - Оптимизация и тестирование приложения при помощи инструментов mobx'а
  • - На практике сравним приложения на Redux и Mobx
  • - Вы получите копию такого же приложения на Redux
  • - Рассмотрим, как объединять сторы, а как делать независимые хранилища для разграничения логики
  • - Научимся тестированию и оптимизации при помощи инструментов mobx
  • - Спектр применения mobx огромен, и вы получите кучу примеров использования mobx в связке с vue (да, такое возможно), а также на нативном js (без применения React)
#6 Вебинар ~1ч.

Бонус 🎁 - Вебинар по трудоустройству

Разберем самые частые вопросы с собесов и подготовимся к интервью.

  • - Полная подготовка к интервью на позицию React разработчик
  • - Более 30 вопросов по js / react
  • - Советы и рекомендации при трудоустройстве
  • - "Фишки" и "лайфхаки" для быстрого поиска работы
  • - Разборы портфолио и резюме
  • - Вебинар в режиме онлайн
  • - Возможность задать любой вопрос куратору
#7 Вебинар ~1ч.

Бонус 🎁 - Вебинар про переезд, удаленку и фриланс

Вебинар о переезде за границу для айтишника и удаленной работе или фрилансу.

  • - Поболтаем про переезд
  • - Про фриланс и удаленную работу
  • - Поделюсь 100% рабочими секретами увелечению дохода на фрилансе
  • - Визы, их продление и т.п.
  • - Вебинар в режиме онлайн
  • - Возможность задать любой вопрос куратору
  • - Примечание: тема с вебинара может быть изменена, если найдется тема поинтереснее (зависит от опроса в группе)
Информация о курсе:
  • Последнее обновление: 17-05-2022
  • Количество достижений: 16
Уроки:
  • Продолжительность: ~16 ч.
  • Количество модулей: 14
  • Количество уроков: 131
В уроки включено:
  • 115 статей
  • 65 подготовительных материалов
  • 4 домашние работы
Получить доступ к курсу
Курс вышел совсем недавно (второго мая). Только актуальная информация про React 18, React-router 6, Mobx 6 и Redux. Спешите приобрести его со скидкой до 60%. Больше таких скидок не будет, а цена повысится 20 мая.
Евгений, автор курса. 2 мая 2022.
Бесплатный демо-доступ

Начните заниматься уже сейчас и получите два модуля бесплатно!

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

Получить доступ
демо-доступ к курсу tocode

Ваше портфолио по окончании курса

Три больших выпускных проекта, своя сборка на react-create-app, порядка четырех маленьких приложений и 20+ универсальных компонентов.

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

  • Mobx
    Mobx
    • Напишем SPA в связке React + Mobx
    • Разберемся с REST API + Reddit api
    • Самостоятельно напишем утилиту fetch (аналог axios)
    • Сделаем свои сервисы для работы с асинхронными запросами
    • На практике сравним Mobx с useContex и Redux
  • Интернет-магазин
    Интернет-магазин
    • Динамические и вложенные маршруты, редиректы и обработка путей
    • Продвинутая работа с useContext, useMemo, эффектами и стейтом
    • Меморизированный Store в связке с Seeders
    • Хранение и "Шаринг" данных в приложение
    Демо сделано без домашнего задания.
  • Менеджер задач
    Менеджер задач
    • Изолирование даты в отдельный json, хуки useState / useEffect
    • Обработка данных с локального хранилища
    • Продвинутая работа с формами в реакте
    • Передача и валидация данных между компонентами и обратно
    Демо сделано без домашнего задания.
  • Своя сборка для React-приложений
    Своя сборка для React-приложений
    • Создание универсальной сборки для любых React-приложений
    • Полная настройка всех необходимых библиотек, плагинов, компонентов и layouts
    • Создание глобальных конфигов для всего приложения
    • Оптимизация сборки для "продакшена"
  • И многое другое
    И многое другое
    • Универсальные компоненты, утилиты и "помощники" на все случаи жизни
    • Создадим несколько мини приложений по типу раскрывающихся списков, менюшек и тп
    • Организуем портфолио на GitHub и многое другое
Записаться на курс
Почему Tocode?
Бесплатный демо-доступ

Начните заниматься уже сейчас и получите два модуля бесплатно!

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

Получить доступ
демо-доступ к курсу tocode

Ответы на часто задаваемые вопросы:

  • Необходимый уровень для прохождения курса?
    Курс идет по ступеням - от легкого к более продвинутому. Поэтому на начальном этапе будет достаточно понимать базис JavaScript, а со всем остальным мы разберемся постепенно!

    Вы легко освоите React, если вы уже делали сайт или приложение с применением нативного js или jquery, а еще лучше, если вы уже работали с Vue.js!

    Если у вас не хватает знаний в js или вы переживаете, что не выйдет, тогда запишитесь на консультацию и получите демо-доступ к части уроков БЕСПЛАТНО, а когда убедитесь, что все даётся легко, тогда купите полный курс или не купите, это ваше дело :)
  • Зачем платить, если всё уже есть на torrent?
    Я знаю много людей, которые сохранили на жесткий диск гигабайты пиратских курсов, которые они даже не посмотрели.

    Приведу пример, вы скачали курс с трекера, что вы получите? Никакой обратной связи, устаревшая информация, куча гигабайт на жестком диске, которые просто пылятся. Даже если предположить, что вы 1 из 100 людей, которые действительно досмотрели скаченный с трекера курс до конца, то что тогда? Вы пересилите себя и за 4-5 месяцев пройдете курс без домашних работ и менторов, а это просто трата времени и ваших сил, что приведет к выгоранию.

    Другой пример, если вы приобрели курс. Вы получаете обратную связь, которая дается индивидуально на каждую домашнюю работу и за счет этого происходит рост, которого нельзя получить в пиратке. Более того, покупая курс вас мотивирует «жаба», которая душит и старается сделать так, чтобы вы отработали все вложенные деньги и за максимально короткий срок. Обычно студенты, которые проходит мои курсы, находят работу уже во время прохождения курса (уже на втором месяце) и окупают стоимость курса в несколько раз.

    Мир технологий быстро развивается и все обновления по курсу я буду публиковать здесь. Приобретая курс, вы получаете их бесплатно, а в пиратке будет устаревший контент.
  • Курс уже записан или это формат вебинара?
    В курсе будут два вебинара: первый – «Вебинар по трудоустройству», второй – «Вебинар про переезд, удаленку и фриланс». Всё остальное это видеоуроки, которые вы можете смотреть в любое время, ведь курс останется у вас навсегда (вместе с методичками, исходниками, вебинарами и тп).
  • Есть расписание? Сколько длится курс?
    Расписания нету, смотрите, когда будет нужным. Есть только общие рекомендации, следуя которым, обучение проходит за два месяца.
  • Почему в курсе используется Mobx, а не Redux?
    В redux есть одна проблема – он не используется в «чистую» и вам всегда нужно «что-то», чтобы использовать Redux эффективно, например:

    • underscopeio/reduxable
    • jkeam/reduxsauce
    • jamesplease/zero-boilerplate-redux
    • redux-zero/redux-zero
    • MynockSpit/no-boilerplate-redux
    Если же использовать Mobx, то все «фичи» уже предоставляются «из-под коробки» и вам не нужны дополнительные инструменты, это большой плюс. И по моему опыту, Mobx является более удобным и актуальным инструментом.

    Вы все еще мне не верите?

    Тогда почитайте статью яндекса о том, как они перевели все свои сервисы с redux на Mobx.
    Список компаний, кто использует Mobx также растет, среди них: Canva, Microsoft, udemy, Frontend Stack, swat и другие.
    На русском рынке mobx также актуален и хорошо оплачивается (скриншот ниже).
    mobx на русском рынке
  • Если я что-то не пойму?
    В курсе обсуждаются продвинутые темы при этом - достаточно простым языком и по ступеням - от легкого к тяжелому. Поэтому не понять очень сложно. Есть группа в телеграмме, в которой могут помочь участники курса, в том числе и я. Если вопрос более глобальный - мы всегда можем списаться или созвониться (зависит от тарифа) и закрыть пробелы в знаниях.
  • Как происходит отправка домашних заданий?
    Отправка домашних заданий происходит через личный кабинет, там же будет ревью и кол-во полученных баллов.

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

    За каждое домашнее задание вы получаете определенное кол-во баллов, баллы влияют на оценку в сертификате, дз всегда можно пересдать

    Проверка домашних заданий происходит в среду и понедельник. Обычно, это не больше, чем 3 рабочих для с момента отправки домашнего задания.

    У домашних заданий есть временной интервал, в который вы должны успеть отправить все дз (зависит от тарифа). При этом, у сертификата такого интервала нету, и вы можете получить его в любой момент. Если срок отправки домашних заданий подошел к концу, вы все еще можете отправить дз на проверку, через телеграм или почту куратора (только в продвинутом варианте и одной ссылкой), если сертификат еще не был получен, тогда оценка на будущем сертификате будет обновлена по итогу полученных баллов.
  • Можно оставить заявку сейчас и оплатить позже?
    Да, оставляя заявку вы также гарантированно бронируете место с ценой, на время оставления заявки (при условии оплаты в течении пяти дней с момента отправки заявки).
  • Как будет осуществляться доступ к курсу?
    Доступ к курсу будет осуществляться из личного кабинета. Там вы сможете видеть комментарии других пользователей и оставлять свои, скачивать исходники и тд
    Курс, уроки, отправленные домашние работы, прогресс и тд навсегда сохранятся на вашем аккаунте.