ТОП-17 лучших курсов React JS: обучение онлайн, бесплатные и платные в 2024 году

React JS – это JavaScript библиотека для создания пользовательских интерфейсов, которая позволяет создавать многокомпонентные веб-приложения. С помощью React JS можно создавать масштабируемые, быстрые и мощные приложения для веб-браузеров и мобильных устройств.

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

Кроме того, на курсах React JS обычно учат работать с инструментами, такими как Webpack, Babel и ESLint, которые помогают создавать и поддерживать приложения на React JS. Также обычно рассматриваются лучшие практики и паттерны проектирования, которые помогают создавать чистый, эффективный и масштабируемый код.

1 место. Курс «JavaScript-фреймворк React.js от Skillbox»

Цена: Рассрочка – 2 214 ₽ / мес

Ссылка на сайт: https://skillbox.ru/course/react-js/

Расширьте свои профессиональные знания и навыки разработчика, научившись использовать в работе фреймворк React.js

  • Длительность – 3 месяца
  • Онлайн в удобное время
  • Обучение на практике
  • Доступ к курсу навсегда.

Перейти на официальный сайт →

Кому подойдёт этот курс:

  • Практикующим JavaScript-разработчикам
    Вы освоите работу с фреймворком React.js, увеличите круг своих компетенций и задач, которые сможете выполнять на проекте — станете более конкурентоспособным сотрудником.
  • Frontend-разработчикам
    js — один из самых популярных фреймворков в мире. Вы научитесь создавать изоморфные приложения на React Redux, типизировать их с помощью Typescript и работать с различными публичными сервисами.

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

  • Создавать приложения с нуля
    Конфигурировать их с помощью Webpack или использовать готовые решения.
  • Работать с публичными API
    Узнаете о механизмах OAuth и имплементациях в React.
  • Познакомитесь с Flux, Redux, Mobx
    Узнаете подробности о состоянии приложения и работе с ним.
  • Профилировать свое приложение
    Искать слабые места и оптимизировать их.
  • Тестировать свое приложение
    Познакомитесь с библиотеками Jest и Enzyme.
  • Создавать SPA и RIA приложения с нуля
    Будете применять разные подходы, с SSR или без него, включая деплой в облачный сервис Now.

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

Вас ждут 3 месяца теории и практики, которые добавят вам реальных знаний в разработке на JavaScript.
16 тематических модулей, 76 видеоматериалов

  1. Введение в React
  • Что такое React. Основные преимущества
  • Основы декларативного подхода
  • Возможности React, компоненты, состояние, применения
  • Экосистема React, основные библиотеки, из чего обычно состоит React-стек
  1. Создание проекта
  • Конфигурация webpack на клиенте
  • Конфигурация webpack на сервере
  • Подключение к проекту HMR и SSR
  • Подключение Typescript
  • Подключение CSS modules, Jest, Enzyme
  1. Typescript
  • Основы TypeScript. Типы
  • Работа с массивами
  • Работа с объектами и интерфейсами
  • Типизация функций и типы TS
  • Generics
  • Классы
  • Infer, typeof, keyof, Mapped Types
  1. Компоненты на примере новостной карточки Reddit
  • Компоненты в React
  • Состояния в Class Components
  • Состояния в Functional Components
  • Создание Layout приложения. Часть 1
  • Создание Layout приложения. Часть 2
  • Создание компонента новостной карточки
  • Жизненный цикл компонента
  1. Hooks и функциональное программирование
  • Каррирование и функции высшего порядка
  • Hooks в React
  • Map и Reduce в React
  • Создание компонента dropdown c использованием hooks
  • Compose, Pipe и их применение в React
  1. Компоненты – продвинутые темы. Введение в тестирование компонентов
  • Адаптивные и неадаптивные компоненты. Mobile first и desktop first подходы
  • Создание Dropdown-меню с использованием state
  • Введение в unit-тесты и Jest
  • Написание тестов для React компонента. Enzyme vs Snapshots
  • Вспомогательные компоненты
  1. Работа с публичным API на примере Reddit
  • Как работать с API
  • Регистрируем аккаунт разработчика на Reddit
  • OAuth2
  • Страница авторизации пользователя
  • Как структурировать API-запросы в приложении
  1. React Context
  • Забираем из API данные пользователя
  • Отображаем данные пользователя в компоненте через prop
  • Используем React Context для работы с данными
  • Обновляем данные через контекст
  1. Портал и форма
  • Верстаем карточку поста, используя ReactPortal
  • Ref и useRef React hook. Реализуем механизм click outside для скрытия модального окна
  • Controlled и uncontrolled компоненты на примере поля комментария
  • Сохраняем состояние формы, используя контекст
  1. Введение в Redux на примере поля для ввода комментария
  • Введение в Redux
  • Устанавливаем Redux, подключаем его к приложению
  • Action + reducer
  • Presentation Components/Container Components
  1. Использование Redux-Thunk на примере загрузки профиля пользователя
  • Работа с асинхронными запросами в Redux
  • Пишем простой logger middleware
  • Подключаем thunk к приложению. Пишем свой первый асинхронный action
  • Работа с асинхронным состоянием
  • Пишем простой loader
  1. Формы на примере комментариев и карточки поста
  • Экскурс в формы. Проблематика форм React
  • Состояние полей. Различные подходы
  • Какие можно использовать библиотеки и почему они могут мешать
  • Сохраняем состояние формы, валидируем поля и выводим ошибки
  • Доступности, нативные элементов и возможности работать с формой через табуляцию
  1. «Бесконечные» списки на примере ленты постов
  • Работа с запросами к API
  • Делаем загрузку ленты постов
  • Виды бесконечных скроллов и пагинаций
  • Делаем подгрузку ленты постов
  • Эффективный рендеринг больших списков
  1. Сайдбар + роутинг
  • Создаем сайдбар, используя более продвинутые практики
  • Роутинг в SPA и в React
  • Подключаем React Router
  • Подключаем новостную ленту к роутеру
  • Дополнительный функционал роутинга
  1. SSR + NextJS
  • Серверный и статический рендеринг. Изоморфные приложения
  • Делаем серверный рендеринг, используя express
  • NextJS
  • Переносим приложение на Next
  • Деплой приложения в Zeit
  1. Бонусный модуль: Mobx.

Спикеры (учителя):

Александр Кузнецов
Frontend-разработчик в ТАСС

Ольга Климонова
Ведущий разработчик ТАСС

Алексей Авдеев
CTO в дизайн-лаборатории Mish, старший frontend-разработчик.

Отзывы об обучении в Skillbox доступны на сайте.

Плюсы:

  • Учителя-практики
  • Упор на практику
  • Полноценная программа обучения

Минусы:

  • Не найдено

Подробнее о курсе React JS →

2 место. Курс «React.js Developer от OTUS»

Цена: нет информации

Ссылка на сайт: https://otus.ru/lessons/react/

  • Длительность – 4 месяца, 4 ак. часа в нед.

Перейти на официальный сайт →

На курсе вы научитесь:

  • продвинутым возможностям Redux, Redux-Saga, Redux-thunk;
  • создавать SPA-приложения и оптимизировать их для production;
  • писать чистый и лаконичный код с TypeScript;
  • применять интеграционные и юнит-тесты;
  • работать в GraphQL, Apollo, Relay.

Также вы узнаете, как работает под капотом Webpack и Babel, освоите паттерны функционального программирования и научитесь их применять в React.

Для кого этот курс:

  • JavaScript-разработчиков с навыками HTML/CSS;
  • Backend-разработчиков, желающих стать Fullstack;
  • начинающих React-разработчиков.

Программа:

  1. Preface
  • Webpack + babel
  • Typescript (часть 1)
  • Установка и настройка React
  • Консультация
  • Консультация по проекту
  • JSX как основа ReactJS. Functional components
  • JSX + CSS
  • TDD + React
  • CI/CD GitHub actions
  1. React
  • Typescript (часть 2)
  • Components Lifecycle
  • React-hooks
  • Обзор React testing library
  • React hooks advanced
  • Основные концепты Redux и useReducer
  • Списки, события, формы
  • React patterns часть 1
  • React patterns часть 2
  • React router
  1. React + Redux
  • Основы функционального программирования
  • Redux middwares and side effects
  • Redux toolkit
  • React + redux пример приложения
  • JS Generators, введение в Redux-Saga
  • Redux-saga и интеграционное тестирование
  • Redux-saga примеры использования effects
  1. Процесс разработки приложения, HTTP, WebSockets, GraphQL
  • Процесс разработки React-приложения
  • Продвинутая конфигурация приложения
  • Test quality tools
  • HTTP and REST API
  • Потоки событий и WebSockets. WebWorkers и comlink для отложенной работы.
  • Обзор GraphQL
  1. Проектный модуль
  • Выбор темы и организация проектной работы
  • Консультация по проектам и домашним заданиям
  • Защита проектных работ.

Преподаватели:

Игорь Звягин
В отрасли с 2016 года. Занимался разработкой интернет-магазинов, разработкой мобильных приложений. С нуля разработал сложную CRM. Работает над продуктом в сфере образования.
Компании: sitemade.pro, MoscowFresh, Leadvertex.
Интересы: user experience, user interface, JavaScript и сноубординг.

Марат Минулин
Программирование любит с детства. Свой первый сайт создал в 2008 году. С 2015 года профессионально занялся web-разработкой, а с 2019 года в основном использует React.
C начала 2021 года является Senior Frontend разработчиком в Abbyy. В прошлом работал над проектами в таких компаниях как Роснефть, Дрофа и Яндекс.
Образовательную деятельность начал в 2020 году в Школе разработки интерфейсов Яндекса. Основным успехом считает тот факт, что помог человеку без технического образования “войти в IT” и успешно трудоустроиться.

Василий Ванчук
Bolt Technology OÜ, Senior Software Engineer
Опытный JavaScript-разработчик. Принимал участие в реализации самых разных проектов: разрабатывал сервисные приложения, интерфейсы для банковского софта, системы для каталогизации и учета. Есть опыт серверной разработки с Node.js.

Арсений Высоцкий
«Я больше десяти лет разрабатываю разные веб-приложения.
Успел поработать в области электронной коммерции, банковских продуктов, безопасности на морских судах и HR процессов. Люблю писать код и рассказывать о том, как писать код на Typescript, верю, что будущее за прогрессивными веб-приложениями.
Помимо разработки занимаюсь формированием команд, управляю талантами и создаю для них профессиональные смыслы, убежден, что к любому человеку можно найти подоход и эффективно встроить в рабочий процесс.
Сейчас работаю тимлидом в большой международной компании.»

Отзывы о курсе по React JS:

 Мария Кондаурова
«До обучения в OTUS год работала верстальщиком, решила качаться дальше по ветке frontend. Курс React.js Developer выбрала из-за актуальности фреймворка и того, что react был “на слуху”.
Если вы хотите получить пользу от курса, а не просто прослушать ради сертификата – нужно работать и много. На курсе давались практические домашние задания, которые позволяли освоить полученный на лекции материал практически. По домашним заданиям была хорошая обратная связь – твою домашнюю работу не просто примут, но и после ревью скажут, то можно было бы сделать лучше. Для меня, как неопытного разработчика, это был хороший способ узнать о многих best practice.
Кроме ревью, преподавателям всегда можно задавать вопросы, на которые они дают развернутый ответ и помогают.
Отдельное спасибо Василию Ванчуку – лучший преподавататель !!!»

Александр Циома
«Курс крутой – не знаю, кто какие ставки делает на него изначально, но я приходил на день открытых дверей, и попал на урок с Василием Ванчуком. И сразу понял, что хочу здесь учиться. Серьезный подход и знание дела преподавателя меня сразу подкупили. Процесс обучения такой: если ты пришел, думая, что посмотришь видео и станешь реакт-разработчиком, то увы это не так. Нужно очень много работать самостоятельно – и это круто, ведь в реальной работе никакое видео или курсы тебя не спасут, когда решаешь реальную нетривиальную задачу. Таким образом, курс оправдал мои ожидания – научил учиться, я разобрал концепты, до которых раньше никак не доходили руки, а теперь ушёл в самостоятельное плавание и погружаюсь во всё изученное самостоятельно. Отдельное слово про домашние работы – они сложные. И если выбирать путь чему-то научиться, то нужно сидеть над ДЗ часами и делать их желательно как можно раньше, иначе в конце может быть очень тяжело. Итого: курс научит учиться, а эффективность от него равна приложенным усилиям.»

После обучения Вы получите сертификат о прохождении курса.

Преимущества:

  • Нет воды
  • Обучение на практике

Недостатки:

  • Не подходит для студентов без опыта в программировании

Подробнее о курсе React JS →

3 место. Курс «Как стать React-разработчиком от Школа анализа данных»

Цена: 51 000 ₽

Ссылка на сайт: https://practicum.yandex.ru/react

Перейти на официальный сайт →

React-разработчик создаёт приложения на React и использует дополнительные инструменты: Redux, TypeScript, Jest. На курсе вы за три месяца разберётесь в этом стеке технологий. Вам предстоит изучать теорию в тренажёре, написать своё приложение и по желанию работать в командах над проектными задачами. Курс подойдёт тем, кто умеет верстать и знает основы JavaScript.
В основной программе — вся базовая теория для разработки современных приложений на React и TypeScript. Теорию закрепите задачами в тренажёре. В дополнительной программе — материалы, которые помогут расширить кругозор и глубже понять экосистему React.

Проект
Вам предстоит написать полноценное многопользовательское приложение на React и TypeScript и покрыть его юнит-тестами. Вы будете работать над ним постепенно: проходить нужную теорию, решать задачи в тренажёре, а затем писать фрагмент приложения.

Сертификат — официальный документ о дополнительном образовании. Чтобы его получить, нужно сдать проектную работу. Для работодателя это показатель, что вы достаточно знаете экосистему React и самостоятельно выполнили проекты из вашего портфолио.

Программа обучения:

  1. Бесплатное входное тестирование
    Вам предстоит решить несколько задач по вёрстке и JavaScript и пройти тест по базовым технологиям. Это позволит понять, подойдёт ли вам курс, и получить рекомендации о том, что повторить перед стартом.
  2. Погружение в React и Redux
    В этом модуле вы изучите основы и инструментарий React. Научитесь работать с классовыми и функциональными компонентами и попрактикуетесь в их написании. Узнаете, как с помощью хуков привнести мощь классовых компонентов в функциональные. Создадите простую заготовку React-приложения посредством CRA и научитесь выполнять его отладку с применением плагина React DevTools.
    Узнаете, что такое «состояние» в терминологии современных фреймворков и библиотек. Научитесь работать с одной из самых популярных библиотек для хранения состояния — Redux.
    В проектной работе:
    Вы сверстаете первый экран в приложении, подключите к нему Redux-хранилище и реализуете перетаскивание ингредиентов с помощью React DnD.
  3. Роутинг, безопасность и TypeScript
    Вы узнаете, как настраивать роутинг в SPA-приложении и создавать динамические маршруты. Научитесь работать с основными хуками в React Router. После этого изучите процессы аутентификации и авторизации пользователей — это поможет сделать так, чтобы доступ к определённым действиям и страницам приложения был только у авторизованных пользователей.
    Затем погрузитесь в основы TypeScript и научитесь использовать его в React-приложениях.
    В проектной работе:
    Создадите новые страницы в приложении и настроите роутинг. Добавите регистрацию и авторизацию в приложение и защитите маршруты от неавторизованных пользователей. Перепишите код на TypeScript.
  4. Протокол WebSocket и деплой приложения
    Вы завершите изучение TypeScript типизацией Redux. После этого реализуете соединение с сервером в режиме реального времени с использованием протокола WebSocket.
    Познакомитесь с подходами к тестированию и узнаете больше об автоматизированном тестировании приложения. А также научитесь деплоить готовое приложение.
    В проектной работе:
    Создадите ленту заказов с использованием WebSocket и перепишите всё хранилище на TypeScript. Добавите к приложению тесты на Cypress и Jest, а после загрузите проект на удалённый сервер.
  5. Карьерный трек (опционально)
    Параллельно с основной программой мы помогаем с поиском первой работы или сменой, текущей: продумываем стратегию и сопровождаем в процессе. Вместе c опытными IT-рекрутерами вы поработаете над резюме и оформите портфолио на GitHub.

Отзывы:

Олег Лупанов
Студент двадцать первого потока на программе «Веб-разработчик»
«Сдал уже 4 учебный проект.
Само обучение очень крутое. Для каждого спринта (2 недели) дается теория + тренажер (это задания на самом сайте) и проект, который нужно сделать и отправить на проверку ревьюеру. Много общения с наставниками и студентами. Всегда можно задать вопрос по любой теме учебной. Отличные проекты, на которых прокачиваешь свои умения и набираешься новых. Ревьюер отмечает разделы для исправления и дает ценные комментарии почему нужно сделать так, а не иначе. Каждый спринт занимает 20-30 часов реального времени. Если вы совсем новичок и хотите с полного 0 начать обучение, то стоит что-то почитать/посмотреть/попробовать поделать заранее или придется тратить чуть больше времени во время учебы. Учеба не может охватить все знания по веб разработке и нужно будет искать информацию самому. Также наставники дают много полезных ссылок для самостоятельного обучения))) Много программ для обучения и есть бесплатная вступительная глава) Рекомендую!»

Алина Абдуршина
Студент первого потока на программе «Веб-разработчик», студент на третьем курсе
«А на самом деле видно, что проект очень толковый. Я из тех студентов, которые делают ничего и как-то сдают на отстаньте, а тут прям. Я реально обучаюсь и реально разбираюсь в теме. И задания очень хорошие для закрепления. Так что всё классно.»

Подробнее о курсе React JS →

Курс «React в веб-разработке от skill branch»

Цена: 44 000 ₽

Ссылка на сайт: https://skill-branch.ru/react

Базовый уровень. Разработка веб-приложений на React.

  • 5 месяцев, 200+ часов обучения
  • Создадите 3 веб-приложения для портфолио
  • Пройдете практику с автоматический проверкой.

Перейти на официальный сайт →

На курсе вы разработаете 3 веб-приложения, освоите React и познакомитесь с его экосистемой – напишете первые тесты для ваших веб-приложений, а также создадите UI-библиотеку. Помимо технических навыков, получите soft-скиллы – опыт работы в команде и рекомендации по успешному прохождению собеседования.

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

  1. Введение
    Разберём, как проходит процесс обучения, кому подойдет этот курс и какие инструменты будут изучаться.
  2. Сложные концепции в JS
    Углубимся в изучение JS. Рассмотрим продвинутые концепции, которые будут встречаться в дальнейшем и без понимания которых будет сложно перейти к изучению React.
  • Деструктуризация
  • Обработка ошибок
  • Асинхронность
  • Реактивность
  • Модули
  • Регулярные выражения
  • Новые возможности
  • ФП в JS
  • ООП в JS
  1. Подготовка рабочего места
    Подготовим рабочее место для того, чтобы писать грамотный и красивый код стало проще и удобнее. Научимся пользоваться консолью.
  • Установка VSCode
  • Установка NPM
  • Работа с консолью
  • Eslint
  • Prettier
  • Husky
  1. React
    Разберем базовые функции и основные концепции React. Поймем, что отличает функциональный подход от компонентного. Создадим первую форму на React.
  • Cтарый React
  • Новый React
  • JSX
  • React + CSS
  • Основные принципы
  • Модульность
  1. Redux
    Узнаем про самую популярную библиотеку для React, разберем её концепции. Проанализируем плюсы и минусы данного подхода. Рассмотрим основные функции и совместим React и Redux.
  • Плюсы
  • Минусы
  • Аналоги
  • Основные сущности – store, type, action и reducer.
  • Middleware
  • Мутации
  1. Продвинутая работа с React, React Thunk
    Разберем более продвинутые концепции в React. Узнаем, как искать и исправлять баги в React. Напишем асинхронный код. Научимся создавать правильную форму входа и рассмотрим виды запросов.
  • React изнутри
  • Продвинутые хуки
  • Кастомные хуки
  • Лучшие практики
  • Отладка кода
  • Redux Thunk
  • Работа с бэкендом
  1. Маршрутизация. React Router
    Разберем более продвинутые концепции в React. Узнаем, как искать и исправлять баги в React. Напишем асинхронный код. Научимся создавать правильную форму входа и рассмотрим виды запросов.
  • React изнутри
  • Продвинутые хуки
  • Кастомные хуки
  • Лучшие практики
  • Отладка кода
  • Redux Thunk
  • Работа с бэкендом
  1. Вспомнить всё!
    Закрепим изученные технологии. Углубимся в работу с бэкендом и реализуем новую, более сложную, функциональность приложения.
  2. Jest
    Научимся тестировать код автоматизировано. Разберемся, как тестировать функциональность приложения и как это отличается от тестирования компонентов. Попробуем новый процесс разработки – TDD.
  • Зачем нужны тесты?
  • TDD
  • Виды тестирования
  • Пирамида тестирования
  • Jest
  • Синхронное тестирование
  • Асинхронное тестирование
  • Snapshot тестирование
  • React Testing Library
  1. Пишем стили правильно. Styled-Components. Storybook.
    Узнаем, что такое css-in-js. Реализуем темную и светлую тему и переключатель между ними. Разберемся, как совместно с дизайнером разрабатывать хорошие интерфейсы. Создадим библиотеку компонентов в своем приложении.
  • Styled-Components
  • API
  • Создание темы
  • Storybook
  • API
  • Аддоны
  1. Архитектура React приложений
    Подготовка к созданию выпускного проекта. Разберём, как проектировать приложения, разобьемся на команды и выберем темы.
  • Зачем нужна архитектура?
  • Какие виды существуют?
  • Плохая архитектура
  • Хорошая архитектура
  • Feture Slice
  • Atomic
  • Flux
  • Dumb/Smart
  1. Зачем писать код, если есть no-code
    Узнаем про инструменты, которые могут ускорить и упростить создание приложений. Разберем на реальных кейсах плюсы и минусы такого подхода. Научимся применять no-code решения на практике.
  • Что такое no-code и low-code
  • Когда стоит использовать
  • Когда не стоит использовать
  • Удачные примеры
  • Netlify
  1. Как найти работу
    Рассмотрим виды компаний, разберем плюсы и минусы фриланса, поговорим о том, как составлять резюме и что писать в сопроводительном письме, проанализируем вопросы, которые задают на собеседовании, и научимся отвечать на них грамотно и уверено.
  2. Подводим итоги
  • Выбираем лучшее приложение
  • Составляем роадмап на будущее
  • Какие проекты можно ещё написать?
  • Точки роста.

Проекты:

Практический проект курса №1 – Pomadoro
В начале обучения вы создадите приложение, которое поможет улучшить вашу продуктивность. В процессе вы повторите HTML, CSS и JS, настроите рабочее место и узнаете секреты браузера. Освоите принципы создания пользовательского интерфейса, примените знания на практике и создадите полезное приложение.

Практический проект курса №2 – LMS
Вторым проектом будет LMS-система, в которой мы реализуем форму входа, списки и фильтры, личный кабинет, To-Do List и две темы: темную и светлую. Помимо этого, мы протестируем созданное приложение, создадим библиотеку компонентов и добавим в него документацию. В процессе вы освоите все основные инструменты React разработчика – React, React-Router, Redux, Jest, Styled Components и Storybook. Также узнаете, что такое REST, TDD, JWT-токен и как работает маршрутизация.

Практический проект курса No3 – Хакатон
Выпускной проект: приближенный к реальным условиям учебный хакатон, где вы разделитесь на команды и реализуете приложение из списка заранее заготовленных тем (либо самостоятельно придумаете тему приложения). Во время подготовки проекта вы узнаете, как создавать приложения с нуля, готовы ли вы работать в команде или вам удобнее разрабатывать в одиночку, какие задачи вам нравится решать. Помимо полученных на курсе профессиональных знаний и навыков, вы приобретёте soft-скиллы, необходимые для успешной карьеры. Кроме того, вы узнаете про Agile, no-code, архитектуру приложений и как искать работу. Каждую неделю хакатона будет проводиться ретроспектива: разбор ошибок, поиск путей решения и составление плана на следующую неделю.

По окончании обучения Вы получите сертификат.

Подробнее о курсе React JS →

Курс «React от Lectrum LLC»

Цена: 37  650  ₽ – 50  250  ₽

Ссылка на сайт: https://lectrum.io/course/react-redux

Перейти на официальный сайт →

Для кого:

  • Освоили JavaScript, но для трудоустройства нужен React
  • Прошли frontend-курсы, но React знаете поверхностно
  • Самоучки, которым нужен наставник и практика на больших проектах
  • Нужен рефреш и больше практики по React на хуках, а также современным инструментам, которые используют вместе с этой библиотекой.

Вы научитесь:

  • Работать с компонентами, хуками, а также особенностями разработки бизнес-логики с помощью кастомных хуков
  • Использовать TypesScript по назначению, чтобы он помогал, а не наоборот
  • Формировать правильную архитектуру приложения
  • Использовать лучшие подходы стилизации: CSS-модули и Styled Components
  • Создавать эффективные формы, а также их валидировать посредством применения оптимального подхода к валидации
  • Работать с Redux c использованием новых хуков useDispatch и useSelector, лучших практик и минимумом написанного кода
  • Работать с MobX, а также понимать его отличия от Redux
  • Тестировать React-компоненты, хуки, а также Redux и MobX
  • Работать в команде по Agile-методологии.

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

  1. Введение в React
  2. Работа с данными в React
  3. Работа с сетью в React
  4. Роутинг в React
  5. Грамотное составление форм в React приложении
  6. Знакомство с MobX
  7. Знакомство с Redux
  8. Асинхронный Redux (бонус)
  9. Переход на TypeScript
  10. Тестирование программного кода
  11. Styled Components (видеоурок)
  12. Персональный проект “Менеджер задач” на TypeScript, Redux, styled-components
  13. Групповой проект по Agile-методологии
  14. Подведение итогов основного обучения
  15. Итоги работы над персональными проектами.
  16. Персональный проект “Фитнес трекер” — стек на выбор.

Куратор программы – Андрей Присняк
7 лет опыта работы с крупными международными компаниями. 10 лет опыта ИТ-менторства.

Подробнее о курсе React JS →

Курс «React.JS Pro от Traktor »

Цена: 36 000 руб.

Ссылка на сайт: https://traktorschool.ru/react

  • 4 месяца экспертного курса по React и карьере фронтендера.

Перейти на официальный сайт →

Сегодня React.js – одновременно один из наиболее популярных и востребованных фреймворков на рынке. Универсальный инструмент для создания практически любых UI-интерфейсов. На нем пишут сайты, десктоп и мобильные приложения, игры – от простых до ААА-уровня.
За 4 месяца мы проведем вас по всем этапам работы с React: от основ – до рабочего приложения, которое вы самостоятельно создадите и протестируйте.

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

  1. Введение в React
  • Создаём React приложение
  • Пишем лейаут на JSX
  • Что такое компоненты в React
  • Создаём компоненты классы
  • Создаём компоненты функции
  • Ивенты и простые формы
  • Пишем тесты для компонентов
  • Контекст
  • React хуки
  • useState
  • useEffect
  • useReducer
  • Пишем свой хук
  1. Деплой React приложений
  • Как деплоить приложения
  • CI, CD и другие понятия связанные с деплоем
  • Как настроить деплой с Github Actions
  • Отслеживаем ошибки при помощи Sentry
  1. Навигация
  • Основы навигации с React-router-dom
  • Динамическая навигация
  • Закрытые рауты – авторизация
  • Передаём параметры в URL
  • Хуки react-router-dom
  • Тестируем навигацию
  1. Формы
  • Основы React Hook Form
  • Обрабатываем ошибки – валидация полей
  • Валидируем формы с Yup
  • Нормализуем значения
  • Отправляем файлы
  • Тестируем формы
  1. Общение с сервером
  • Загружаем данные с сервера
  • Отправляем данные на сервер
  • Обрабатываем ошибки сервера
  • Работаем с данными при помощи ReactQuery
  • Тестируем общение с сервером
  1. Работа со стейтом в Redux
  • Что такое Redux
  • Добавляем Redux в проект
  • Работа с сервером в Redux
  • Когда Redux не нужен / не подходит
  • Тестирование Redux кода
  1. Используем Redux-Toolkit
  • Что такое Redux-Toolkit
  • Создаём store
  • Используем createReducer и createAction
  • Используем slice
  • Используем createAsyncThunk
  1. Стили
  • Стили в React – обзор
  • Инлайн стили
  • Используем CSS
  • CSS модули
  • Styled-Components
  • Storybook
  1. Авторизация
  • Авторизация и аутентификация
  • Авторизация по логину и паролю
  • Аутентификация по одноразовому паролю OTP
  1. Безопасность
  • Начало работы
  • Инъекции
  • Уязвимости аутентификации
  • XSS уязвимости
  • DOR уязвимости
  • Ошибки в настройках безопасности приложения
  • Утечка приватной информации
  • Уязвимости связанные с уровнем доступа
  • CSRF – Cross Site Request Forgery
  • Уязвимости в сторонних библиотеках
  • Редиректы
  1. Серверный рендеринг
  • Базовый пример серверного рендера
  • Серверный рендеринг с Next.js
  • Статические сайты на Next.js
  1. Карьера разработчика
  • Карьерная цель, план развития на 5 лет
  • Резюме, LinkedIn, cover letter
  • Собеседования
  • Поиск работы
  • Корпоративная и командная игра, софт-скиллы.

Отзывы:

Андрей Хабаров
Санкт-Петербург, Россия
«Я выбрал Трактор, потому что в курсе были все технологии, которые были мне интересны, и с которыми я собирался знакомиться.
Понравился лендинг, программа и карьерный модуль, так как в планах есть релокация в Европу. Максим и Никита знают, как пишут в Европе, какие технологии наиболее востребованы и актуальны сейчас.
Я пришел на курс разработчиком с опытом 10 месяцев разработки на html, css и нативном js. За время курса я сделал 2 проекта в галере. Взял из курса те технологии, которые были нужны в проектах и внедрил их. Хорошая новость, получил недавно мидла!
Практика и внедрение вещей, которые давали ребята на курсе, открыли доступ к более качественным проектам. К проектам, к которым требуется большее количество знаний, и где разработка ведется командой.
Я бы рекомендовал курс ребятам уровня джуниор и выше, и тем, кто хочет работать удаленно на Европу, либо релоцироваться туда.»

Юлия Овчинникова
Красноярск, Хельсинки
«React сейчас набирает обороты, я хотела изучить эту технологию. У меня мало опыта в программировании, было непросто, но курс помог сделать качественный скачок в знаниях. Материалы курса очень структурированные, полные – начинаешь понимать как проект работает от до до. Максим ясно и поэтапно объяснял даже самые сложные темы. Для меня было также важно, что мы изучили как настраивать окружение, как работать с гитом, как писать тесты.
Атмосфера на курсе добрая. Ощущалось, как Максим и Никита болеют за проект. Я подключаюсь на все разговоры в сообществе. С каждым созвоном понимаю все больше, учусь и вдохновляюсь там.»

Подробнее о курсе React JS →

Курс «React 001 от Василий Муравьев»

Бесплатно

Ссылка на сайт: https://react001.ru/

  • Вся теория для начинающих за 6 часов!
  • Добавь крутой проект в портфолио!
  • Улучши знания JavaScript.

Перейти на официальный сайт →

В рамках курса по изучению библиотеки React JS, мы создадим приложение для заказа бургеров в сети ресторанов Hot Burgers! С помощью приложения можно будет в реальном времени управлять стоимостью и ассортиментом меню.
Приложение будет включать компоненты меню, форму заказа и панель администратора. Наши данные будут храниться в базе данных Google Firebase и обновляться в режиме реального времени! Система авторизации позволит регулировать доступ к системе управления меню.

Для кого?

  • Этот курс подойдет всем, у кого есть начальные знания Javascript и кто хочет их улучшить
  • Начинающие разработчики, которые хотят перейти от верстки к написанию фронтенда
  • Разработчики, которые привыкли использовать jQuery и хотят начать использовать нативный Javascript
  • WordPress разработчики, которым интересно начать использовать React

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

  • Создавать приложение на React.JS с нуля
  • Cоздавать компоненты React, используя JSX синтаксис
  • Использовать модули Javascript
  • Использовать новые фичи Javascript ES6 при написании кода
  • Создавать и управлять сосотоянием компонентов
  • Передавать данные между компонентами
  • Использовать объект LocalStorage в браузерах
  • Создавать маршрутизацию с помощью React Router 4
  • Обрабатывать данные из форм
  • Использовать хук useState
  • Использовать возможности базы данных Google Firebase
  • Создавать систему авторизации
  • Развертывать приложение на хостинге (Netlify и Now)
  • и другие…

Курс состоит из 29 видео-уроков.

Содержание:

  1. Настраиваем Инструменты
  2. Компоненты React
  3. Создаем первый компонент Landing
  4. JSX в React
  5. Добавляем CSS в React
  6. Объект State, обработчики событий и значение this
  7. Пишем логику обновления объекта State
  8. Головной компонент App и структура приложения
  9. Объект Props в React
  10. Функциональные компоненты React
  11. Настраиваем React Router
  12. Push State в компоненте Landing
  13. Объект State в компоненте App
  14. Загружаем бургеры в меню
  15. Отображаем бургеры из объекта State
  16. Объект State в компоненте Order
  17. Отображаем компонент Order
  18. Пишем компонент Shipment
  19. Интеграция с Google Firebase
  20. Cохраняем данные о заказе в Local Storage
  21. Редактирование свойств бургера
  22. Удаление бургера из меню
  23. Создание анимации
  24. Прописываем Prop Types
  25. React Хук useState
  26. Авторизация с Google Firebase
  27. Сборка готового приложения
  28. Размещение на хостинге Now
  29. Размещение на хостинге Netlify.

Отзывы об обучении доступны на сайте.

Подробнее о курсе React JS →

Курс «React от thinknetica»

Цена: 27 900 руб.

Ссылка на сайт: https://thinknetica.com/react_basic

Для веб-разработчиков, желающих научиться создавать современный фронтенд на React

  • 9 недель
  • 60+ часов практики.

Перейти на официальный сайт →

После курса ты:

  • Освоишь один из самых востребованных работодателями навык
  • Сможешь уверенно работать с React и создавать сложные SPA-приложения
  • Изучишь лучшие практики Frontend-разработки
  • Перестанешь бояться вакансий, где требуется React
  • Повысишь свою стоимость как разработчик
  • Сможешь работать в лучших компаниях.

Этот курс для тебя, если ты:

  • Имеешь опыт веб-разработки на любом языке/технологии (frontend или backend) от 6 месяцев
  • Хорошо знаком с Javascript
  • Имеешь понимание об ООП, HTTP, DOM и работе браузера
  • Умеешь работать с Git и GitHub.

Программа:

14 видео-уроков с заданиями + вебинары с ответами на вопросы.

  1. Знакомство с React
    Ёмкий обзор React и его экосистемы. Познакомимся с основными понятиями, фундаментальными принципами, конфигурацией окружения, понятием компонента и его видами, JSX.
  2. Способы создания React-приложения
    Научимся создавать приложения разными способами и инструментами (c нуля, используя Webpack и Babel.JS / Create React App / Next.JS / Gatsby), с Server-Side Rendering’ом и без него.
  3. Стили в React-приложении
    Научимся задавать стили для React-приложения и управлять ими с помощью современных инструментов (PostCSS, styled-components, styled-jsx).
  4. Свойства и состояние компонента
    Изучим понятие свойств (properties) в компонентах. Научимся их передавать, осуществлять проверку типов. Разберемся с понятием и особенностями использования состояния компонента (state).
  5. Stateful- и Stateless- компоненты
    Введем понятие Stateless-компонента, узнаем преимущества использования такого подхода.
  6. Жизненный цикл компонента
    Изучим элементы жизненного цикла компонента, научимся использовать их на практике.
  7. Встроенные и пользовательские хуки (React Hooks)
    Соберем практики использования нового инструмента в библиотеке React для улучшения читаемости и повторного использования в коде.
  8. Тестирование с помощью Jest и React Testing Library
    В процессе разработки приложения мы будем писать тесты для наших компонентов с использованием Jest и React Testing Library.
  9. Взаимодействие с API
    Разработаем приложение, которое будет взаимодействовать со внешними API, получать и отправлять данные через API и отображать их на фронтенде.
  10. Роутинг в приложении (React Router), порталы (React Portals)
    Научимся матчить url и рендерить нужную страницу без перезагрузки, так, как это должно работать в Single Page Application. Разберем сложные кейсы, такие как обработка входящих параметров, редиректы, страницы ошибок, авторизованный доступ и модальные окна с использованием порталов
  11. Обработка событий
    Введем понятие синтетических событий в библиотеке React. Научимся их обрабатывать, реализуем drag’n’drop и научимся работать с буфером обмена.
  12. Контекст и аутентификация
    Подробно разберём новый механизм контекста в библиотеке React. Научимся эффективно применять его в приложении. Научимся работать с аутентификацией, localStorage и cookies.
  13. Способы создания форм
    Узнаем нюансы создания простых и сложных форм для приложения при помощи разных подходов и инструментов (без сторонних инструментов, React Hook Form, Formik)
  14. Production-сборка и Deployment
    Практикум по организации файловой структуры проекта, настройке окружения и подготовке сборки и деплоя приложения с последующим сопровождением.
  15. Факультатив. Redux
    Декларативные подходы и middleware. Прикладное применение Redux с использованием в проекте.

Автор – Эдуард Анцупов
Сооснователь и CTO в Sanatorex и iq-project, LinkedIn, Github

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

Отзывы:

Михаил Луцко
Rails-разработчик в Cargoport
«Когда школа объявила набор на курс ReactJS, я решил записаться и не пожалел. В целом курс дал мне много новых знаний, поэтому я решил продолжить обучение и записался на продвинутый курс.»

Тарас Почкун
Rails-разработчик в Cargoport
«На курс по ReactJS пришел для лучшего понимания современной front-end разработки. Важным фактором было то, что курс обещал рассказать о технологии с самых основ, и с этим он прекрасно справился.»

Подробнее о курсе React JS →

Курс «React.js Разработка веб-приложений от LoftSchool»

Цена: 29 500 руб. – 43 524 руб.

Ссылка на сайт: https://loftschool.com/course/react/

Курс рассчитан на веб-разработчиков с опытом от 1 года или на тех, кто уже прошел наш курс «Комплексное обучение JavaScript».

Перейти на официальный сайт →

За 6 недель вы научитесь:

  • Разрабатывать SPA на React.js
    Для полноценной работы приложения помимо самого React.js, вы изучите, как хранить данные и общаться с сервером.
  • Оптимизировать React.js приложения
    Научитесь пользоваться современными инструментами Google Chrome и с их помощью находить кандидатов на оптимизацию.
  • Разделять работу с данными и представлением
    Строго отделив представление от данных, вы научитесь рендерить React-приложения как на стороне клиента, так и на стороне сервера.
  • Управлять потоками ваших данных
    Научитесь нормализовывать данные, писать абстракции, работающие со всеми типами данных и организовывать общение ваших компонентов.
  • Тестировать приложения
    Научитесь тестировать каждую часть вашего приложения, автоматизировать тестирование и наслаждаться стабильностью работы.
  • Выбирать правильные инструменты для вашего стартапа
    React Router, Redux, Redux Saga, Styled Components.

Вы получите Диплом с уникальным ID, подтверждающий уровень ваших знаний.

Программа обучения:

Неделя 1 — Введение в React.js
— Знакомимся с командой курса и одногруппниками.
— Изучаем JSX и Virtual DOM в React.
— Рассматриваем компонентный подход и способы передачи данных.

Неделя 2 — Паттерны React.js, тестирование
— Изучаем компоненты, элементы и экземпляры класса компонент.
— Рассматриваем библиотеку Recompose, паттерны high order components и Render Props.
— Разбираемся в преимуществах тестов, изучаем Jest, Enzyme, Snapshots.

Неделя 3 — Redux, роутинг
— Изучаем роутинг: Simple routing, роутинг со Switch, а также вложенный роутинг.
— Знакомимся с библиотекой Redux: основные понятия и концепции Store, Actions, Reducers, React-redux.
— Рассматривается middleware как способ работы с Sideeffect.

Неделя 4 — Redux-saga
— Изучаем библиотеку Redux-saga. Повторяем generator* functions. Учимся запускать их параллельно.
— Разбираем метод Take. Изучаем select, как способ получения данные из Store.
— Рассматриваем способы стилизации React приложения. Изучаем библиотеки ClassNames, StyledComponents, BrowserList, MaterialUI.

Неделя 5 — Формы, CI & DI & Client error handling
— Рассматриваем работу с формами с помощью библиотек Formik, Redux Forms, React Final Form.
— Рассматриваем методы обеспечения качества production кода. Разбираем такие инструменты как: Husky, TravisCI, HerokuNow.
— Изучаем набор полезных библиотек для разработки (Storybook, RamdaJS, Axios).
— Рассматриваем TypeScript.

Неделя 6 — Работа над проектом
— Доделываем приложение и отправляем на проверку.

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

Информация о преподавателях доступна на сайте.

Отзыв:

Олег Первушин
Место работы: ActuraTech
«Начал обучение спустя неделю после старта курса.
Hi all. Не первый мной пройденный курс. До этого я проходил курсы в различных сферах IT, от администрирования до разработки backend. Но в этот раз совпало так, что мне понадобился курс по ReactJS и я наткнулся на LoftSchool.
Это был первый курс в этой школе. И я не пожалел, что записался на него. Так как этот курс расставляет всю информацию, полученную из книг и интернета по местам. Хоть я и вошел в обучение спустя неделю от старта, я смог догнать остальную группу. Но не думайте, что это будет так легко.
Для понимания всей информации по курсу желательно знать не только синтаксический сахар ES6, иметь какой-нибудь опыт работы с JS, но в лучшем случае понимать, что такое CRUD, JSON, а также минимально разбираться в сетевых запросах на удаленный сервер и иметь опыт работы с git.
Если покажется, что мало, не беспокойтесь, наставники отдельно делает групповые созвоны и рассказывают о других технологиях. Отдельный и жирный плюс данного курса в том, что разбираются не только подходы разработки для ReactJS и Redux, коих в интернете полно. А дается понимание работы популярных библиотек для этих технологий, которые позволяют писать текст более лаконичным и очевидным, не нарушая принципов DRY.
Все уроки выстроены по усложнению, если в начале было довольно легко делать домашнее задание, то над последними большими заданиями придется изрядно потрудится.»

Подробнее о курсе React JS →

Курс «React. Разработка сложных клиентских приложений от html academy»

Цена: 23 900 руб. – 39 900 руб.

Ссылка на сайт: https://htmlacademy.ru/intensive/react

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

Перейти на официальный сайт →

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

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

  1. Знакомство с TypeScript
    Рассмотрим схему работы на курсе. Узнаем, что такое TypeScript, и какие задачи он решает. Познакомимся с системой типов и разберёмся, как происходит процесс типизации. Научимся конфигурировать компилятор и рассмотрим основные настройки. Затем перейдём к практике и разберёмся с особенностями написания типизированного кода: кортежи, интерфейсы, дженерики и так далее.
  2. React
    Знакомство с библиотекой React. Узнаем, какие проблемы она решает и как может упростить разработку фронтенда. Подготовим основу проекта с помощью инструмента «Create React App» (CRA). Научимся применять шаблоны для CRA. Затем познакомимся с основными возможностями библиотеки React (JSX, компоненты, передача данных между компонентами).
  3. Маршрутизация (React Router)
    Узнаем, как организована маршрутизация в SPA. Добавим в проект React Router и разберёмся с возможностями пакета: маршруты, перенаправления, приватные маршруты и так далее.
  4. React-компоненты. Hooks
    Расширим знания о React и компонентах. Научимся управлять состоянием, использовать события и методы жизненного цикла компонентов. Познакомимся с React Hooks и узнаем, как заменить ими классовые компоненты. Научимся работать с формами.
  5. React и паттерны
    Разбираемся с вопросом, что такое архитектура программного обеспечения и как её проектировать. Знакомимся и учимся на практике применять паттерны проектирования.
  6. Управление состоянием. Redux
    Знакомимся с Flux-архитектурой: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Подключаем к проекту Redux и обновляем кодовую базу.
  7. Асинхронность в Redux
    Научимся внедрять асинхронный код в синхронную работу Redux с помощью Middleware. Узнаем, как взаимодействовать с сервером при помощи пакета Axios. Познакомимся с интерцепторами.
  8. Оптимизация производительности
    Обсудим производительность React-приложений: какие есть особенности, на что следует обращать внимание при проектировании компонентов в первую очередь. Затем познакомимся с пакетом Redux Toolkit и узнаем, как с его помощью избавиться от шаблонного кода при работе с Redux.
  9. Тестирование React
    Познакомимся с инструментами и методиками тестирования React-приложений. Настроим инфраструктуру для тестирования, напишем тесты для компонентов.
  10. Первая неделя защиты
    Завершение работы над проектом и подготовка к итоговой защите.
  11. Вторая неделя защиты
    Первая оценка проекта проверяющим наставником по критериям качества.
  12. Третья неделя защиты
    Улучшение проекта по замечаниям проверяющего наставника и подача на вторую оценку.
  13. Финал
    Подведём итоги курса и определим дальнейший вектор изучения React и его экосистемы. Затем обсудим новые возможности React, которые ожидаются в будущих релизах.
  14. Четвёртая неделя защиты
    Внесение финальных правок и получение итоговой оценки.

После прохождения курса вы получите электронный сертификат.

Подробнее о курсе React JS →

Курс «React от Илья Кантор»

Цена: 19 000 руб.

Ссылка на сайт: https://learn.javascript.ru/courses/react

Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью React.

Перейти на официальный сайт →

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

Постепенно разберем особенности построения SPA с использованием React, будем использовать сторонние компоненты и библиотеки для создания бизнес-логики. Вы в деталях узнаете классическую для React-приложений архитектуру: Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией – Redux.js.

Курс состоит из 4-х блоков:

  1. Знакомство с React, и его экосистемой.
  2. Построение приложений с React: Redux.js.
  3. React для SPA: react-router и продвинутые API Реакта.
  4. Куда развиваться дальше.

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

  1. Знакомство с React и его экосистемой.
    В этом блоке мы начнем с того, на чем остановились в скринкасте по Реакт. Научимся писать простые компоненты и узнаем, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты, используя декларативный подход, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами.
  • Разбираем как работает create-react-app.
  • Глубже знакомимся с Реактом, Virtual DOM, JSX.
  • Разбираем React Hooks, их отличия от стейта и lifecycle методов.
  • Разберем примеры тестирования компонент с помощью Jest и Enzyme.
  • Подключаем стили с css modules.
  • Учимся переиспользовать код с помощью наследования, декораторов и кастомных хуков.
  • Связь с DOM: keys & refs.
  • Подключаем сторонние компоненты.
  1. Построение приложений с React: Redux.js
    Когда приложения становятся сложнее и в них появляется интерактивность, приходиться задумываться про организацию бизнес-логики, настраивать потоки данных и взаимодействие с сервером. В процессе построения простого новостного приложения мы детально разберем самую популярную библиотеку для одностороннего потока данных, узнаем ее особенности и научимся использовать дев-тулзы.
  • Особенности Redux.js: функциональный подход, Redux dev tools.
  • Store как иммутабельный объект: Redux + Immutable.js.
  • Настраиваем синхронный поток с Redux, переиспользуем созданные ранее компоненты.
  • React-redux для связи компонентов с логикой.
  • Мемоизированные селекторы reselect.
  • Side-effects в Redux: создание и использование Middlewares.
  • Получение данных от сервера.
  • Асинхронные экшены с redux-thunk.
  1. React для SPA: react-router и продвинутые API Реакта
    Разработка single-page applications – одно из основных направлений фронтэнда. Мы разберем, как строить их, используя React. Научимся использовать react-router и продвинутые элементы API React.JS.
  • Зачем нужен роутинг и как он устроен, проектируем структуру приложения.
  • Разбираем react-router v5.
  • Настраиваем вложенные роуты.
  • Выбираем и настаиваем history для нашего приложения.
  • Объединяем react-router и
  • Учимся обрабатывать серверные ошибки и декларативно управлять роутером.
  • Используем context – еще один механизм передачи данных.
  • Обзор Advanced API react-router.
  • Используем props.children для композиции компонентов.
  • Анимации в React, CSSTransitionGroup.
  1. Куда развиваться дальше
    На этот момент вы уже знаете все, что необходимо, для разработки React приложений. Но на этом рано останавливаться, вокруг Реакта выросла огромная экосистема. Мы обзорно пройдемся по основным возможностям для развития, разным платформам, библиотекам и вспомогательным инструментам. + Будет возможность разобрать интересующие именно вас вопросы.
  • Работа с формами: redux-form, final-form, formik.
  • Что ждать от React 17.
  • React Native и React VR.
  • GraphQL + Relay/Apollo.
  • MobX vs Redux.
  • Разные подходы к сайд-эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.

Курсовой проект – Сервис выбора ресторана и заказа еды.

Преподаватель – Артём Сенюков
Ведёт курс с 22 февраля 2022
«Делал фронт и обучал стажеров в Tinkoff. Сейчас тружусь над КиноПоиском в Яндекс (React, TypeScript). Читаю лекции в Школе Разработки Интерфейсов Яндекса и являюсь автором образовательных программ Яндекс. Провожу собеседования по этим технологиям.»

Отзывы:

Александр Мартыщенко
«Очень насыщенный курс, после каждого занятия есть пища для размышлений, прекрасно организована подача материала, интересные домашние задания, не менее интересные решения от преподавателя. Курс стоит потраченных на него ресурсов.»

Александр Пуга
«Великолепное изложение материала. Весь объем урока на 100% состоит из изложения материала, без воды, перекуров и лирических отступлений. Оффлайн проверка домашних заданий. Объем информации весьма велик. Приходится по несколько раз пересматривать в записи, чтобы все усвоить.
Курс требователен к знаниям программирования и Javascript ES6 в часности. Однако можно попытаться изучить с начальными знаниями. Есть конференция в Slak, в котрой всегда можно уточнить непонятные моменты.
Курсом очень доволен. Все надежды оправдались на 146%.»

Подробнее о курсе React JS →

Курс «React от ITEA»

Цена: 220 EUR

Ссылка на сайт: https://onlineitea.com/course/react-js/

Хочешь разобраться в экосистеме фреймворка React и работе динамического рендеринга? Присоединяйся к ITEA, чтобы получить знания, которые должен знать IT-разработчик.

  • 10 занятий / 1 месяц.

Перейти на официальный сайт →

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

После обучения ты сможешь претендовать на должность Junior Frontend Developer (Experience with React.js Framework). Пройди курсы React, чтобы понять основы программирования, прокачать свои навыки веб-разработки и работы с JavaScript.

На курсе ты научишься:

  • Проектировать и строить полноценное приложение или продвинутый сайт на фреймворке React.js
  • Использовать последние новинки современной вёрстки JSX и “Виртуальный DOM” в своей работе.

План обучения:

  1. Введение в экосистему фреймворка React
  • Императивное и декларативное программирование
  • Различные паттерны, применяемые с фреймворками
  • Плюсы использования фреймворка
  1. Настройка первого React-компонента с использованием NPM, Babel, Webpack
  2. Работа с “props”/”state” компонента
  3. JSX
  4. React Router
  5. Работа с событиями
  6. Жизненный цикл компонента + AJAX, работа с модулем axios
  7. Reusable Components
  8. Redux
  9. Динамический рендеринг
  10. Работа с формами
  11. Использование Promises
  12. Деплой приложения.

После курса у тебя будет:

  • Сертификат после окончания обучения в соответствии с успеваемостью
  • Доступ к материалам и записям занятий в течение года в личном кабинете на удобной платформе
  • Возможность присоединиться к ITEA community
  • Портфолио с проектами и работами
  • Поддержка при трудоустройстве
  • Яркий опыт работы с профессиональными инструментами.

Преподаватели:

Андрей Даценко
JavaScript Developer

Владислав Сидоренко
Fullstack-разработчик, Front end Team Lead в компании EPAM.


Отзывы студентов:

Ольга Клымась
«Могу сказать, что трудоустройство после курсов есть. Я прошла весь курс по Frontend, мне помогли составить портфолио и резюме, была встреча с рекрутером. Несколько раз мне звонили с ИТЕА, говорили, что у их партнеров есть подходящая вакансия, и предлагали передать мое резюме. Я соглашалась и получала от партнера тестовое задание. На третий раз меня пригласили на собеседование. Сейчас работаю на позиции фронта и очень довольна.
Встретила двоих парней, с которыми проходили JS, они тоже устроились на работу. Не знаю, правда, посредством ИТЕА или нет.»

Станислав Бабыч
«Привет всем, я проходил курсы по Frontend development во Львове. ITEA — это уникальная академия, комфортная атмосфера, милая администрация, быстрое и перспективное обучение и хороший старт вашей карьеры, это все вы найдете в ITEA. Каждую часть курса ведет другой учитель, у вас появляются свои друзья и наставники в сфере айти-технологий.
Спасибо Ирине Петраш (она ведет курс HTML/CSS), она продолжила давать мне советы и помогать после курсов, лучший ментор в сфере верстки сайтов. Администрация, учителя ITEA, вы лучшие из лучших, люблю вас)».

Подробнее о курсе React JS →

Курс «React.JS от Академия верстки»

Цена: 10 990 руб. – 16 990 руб.

Ссылка на сайт: https://glo-academy.ru/reactjs/

За 5 недель освоите самую популярную библиотеку JavaScript и разработаете 3 приложения для портфолио.

  • 20 уроков, 40 заданий для домашнего выполнения.

Перейти на официальный сайт →

Программа курсов состоит из 70% практики и 30% теории. В уроках — только то, что нужно в реальной работе. Всё остальное — в виде дополнительных ссылок.
Все уроки записаны заранее. Это короткие видео до 30 минут, которые можно посмотреть в удобное время. В конце недели — прямая трансляция с преподавателем с ответами на вопросы.
После выпуска вы попадёте в закрытое сообщество выпускников Академии, в котором можно найти партнёров. Там же вы сможете консультироваться с кураторами по дальнейшему развитию.

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

  1. Знакомство с React
  • Настройка рабочего пространства.
  • Что такое React, зачем его использовать. Вспоминаем ES6-ES8 стандарты.
  • Модульная структура, зачем она нужна в React. Собираем проект.
  • Создаем первое приложение с помощью create-react-app. Препроцессор JSX.
  • Свойства и состояния компонентов.
  • Жизненный цикл компонентов.
  1. React на практике, что необходимо знать для полноценного SPA
  • Подключаем стили и знакомимся с styled-components.
  • Работа с формами в React.
  • Начинаем работать с сервером. Генерируем списки в React.
  • Продолжаем работать с сервером. Работа с API.
  • Навигация в приложении с помощью React Router.
  1. Продвинутое использование React, работает с Redux
  • Паттерны React.
  • Основные принципы Redux.
  • Соединяем React и Redux.
  • Тестирование и отладка кода в React. Пишем UI тесты.
  • Секретный урок.
  1. Дипломный проект.
  2. Трудоустройство и фриланс.
  • Развитие себя как специалиста
  • Оформление портфолио
  • План развития на год.

Отзывы в видеоформате доступны на сайте.

Подробнее о курсе React JS →

Курс «React от ИП Лаврик Д. В.»

Цена: 9 800 руб.

Ссылка на сайт: https://js.dmitrylavrik.ru/react/

Перейти на официальный сайт →

Цель курса:
Изучить философию и дух компонентного подхода современных javascript-фреймворков, научиться использовать React для решения практических задач.
Для новичков React сложнее, чем Vue.js. Но вакансий и заказов на фрилансе на нём больше.

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

  1. Простая сборка с webpack
  2. Основы компонентного подхода
  3. Понимание JSX
  4. Функциональные компоненты vs классы
  5. Классический React vs функции + хуки
  6. Изменение состояния и иммутабельность
  7. JSX и ветвления при рендеринге
  8. Рендеринг элементов в цикле
  9. Нюансы атрибута key
  10. Понимание основных хуков
  11. useState, useEffect, useRef
  12. Создание своих хуков
  13. Взаимодействие между компонентами
  14. Однонаправленный поток данных
  15. Обработка событий
  16. Модульный CSS vs CSS in JS
  17. Работа с формами
  18. Children – передача контента в компонент
  19. Проблемы большой иерархии компонентов
  20. Идеи хука useContext
  21. Идеи единого склада данных
  22. Состояние и хук useReducer
  23. Управление состоянием приложения
  24. Централизованный склад данных
  25. Понимание flux-архитектуры
  26. Redux, который бесит новичков
  27. Основы работы с Mobx
  28. Организация работы с Mobx
  29. Модули и rootStore
  30. Основы React Router
  31. Api History
  32. Создание небольшого SPA
  33. Общение с серверным API
  34. Fetch и промисы
  35. Обработка ошибок
  36. Подключение полифилов
  37. Построение архитектуры приложения
  38. Доработка SPA
  39. Применение изученных тем
  40. Сборка в production
  41. Перенос SPA на сервер
  42. План дальнейшего развития.

Преподаватель курса – Дмитрий Лаврик
Профессиональный веб-разработчик:
Опыт работы в сфере разработки сайтов более 10 лет. Ориентируется во всех вопросах создания сайтов, от вёрстки до backend-а.
Опытный преподаватель:
Начиная с 2011 года, под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов. Если вы ещё не знакомы с Дмитрием, рекомендуем заглянуть на его youtube-канал, где вы найдете много полезных видео и сможете узнать стиль преподавания Дмитрия.

Отзывы участников:

Konfetty Konfetty
«Курс по React очень понравился. Это не первый курс, который я изучала у Дмитрия, и могу с уверенностью сказать, что Дмитрий очень хорошо объясняет материал. Уроки грамотно спланированы. Хороший переход от простой базовой информации до сложной. Интересные ДЗ. Всем, кто сомневается в успешном изучении React рекомендую пройти курс у Дмитрия.»

Alex Stepanov
«Курс очень понравился. Много интересного материала, понятное и точное объяснение, подробный разбор домашних заданий с указанием допущенных ошибок рекомендациями по улучшению качества кода. Рекомендую всем. Спасибо за отличный курс.»

Андрей Булах
«Отличный курс! Давно слежу за каналом Дмитрия на YouTube, все видосы как всегда актуальны и, главное, доступны! Хоть react не совсем то, чем приходится заниматься в рабочее время, решил для себя поковырять данную технологию и пройти курс. Курс отличный! Рекомендую всем, кто хочет познать азы react. Ждём новых интересных курсов и вебинаров!) Дмитрий, спасибо!»

Подробнее о курсе React JS →

Курс «React Getting Started от csssr school»

Цена: нет информации

Ссылка на сайт: https://school.csssr.com/ru/course/react/junior

Онлайн-курс по созданию одностраничного приложения (SPA) на React. Фундаментальная база, с которой сложные клиентские приложения уже не кажутся такими сложными.

Перейти на официальный сайт →

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

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

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

Курс состоит из 11 практических заданий, 31 видео-лекции и 26 теоретических глав.

  1. Введение в React
    История создания библиотеки. Какие задачи она решает.
  2. React против HTML
    Из чего состоит React. Как развернуть приложение и где можно проводить эксперименты. Import/Export операции в ES6. ООП в JavaScript ES6. Введение в React — JSX.
  3. Компоненты
    Принцип единственной ответственности. Глупые компоненты. Виды стилизации компонентов, достоинства и недостатки. Inline стили. Переиспользование стилей.
  4. State и uncontrolled controls
    Жизненный цикл компонента. State. Общение компонентов. Формы: uncontrolled components, валидация нормализации входящих данных. Decorators, extends: миксины для SFC и для обычных компонентов.
  5. Controlled controls и оптимизация
    Сontrolled components. Компоненты высшего порядка. PureComponent и Should Component Update.
  6. Context
    Context — что, как и зачем. Работа с URL.
  7. Redux
    Архитектура pub/sub. Архитектура Flux. Примеры использования. Как работает Redux. Понятие чистых функций и иммутабельности. Из чего состоит Redux.
  8. Redux Modularization
    Клиентский роутинг и SPA. Организация стора в Redux.
  9. Роутинг
    Методы отслеживания работы приложения. Роутинг.
  10. API
    Общение с сервером с помощью HTTP, XMLHttpRequest и Fetch API. Асинхронные операции в SPA. Работа с API.
  11. Change data и component routing
    POST запросы. Продвинутый роутинг. Страница 404. Вложенные роуты.
  12. Legacy
    Миграция приложения с чистого JS на React.

Подробнее о курсе React JS →

Курс «JS: React от Хекслет»

Цена: 3 900 ₽ / мес

Ссылка на сайт: https://ru.hexlet.io/courses/js-react

  • 22 урока (видео и/или текст)
  • 20 упражнений в тренажере
  • 42 проверочных теста.

Перейти на официальный сайт →

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

  • Создавать полноценные приложения на React
  • Грамотно организовывать состояние приложения
  • Взаимодействовать с бекендом по API
  • Интегрировать React со сторонними библиотеками.

React — библиотека, которая перевернула наши представления о том, как разрабатывать фронтенд. В этом курсе мы затронем все аспекты его работы и шаг за шагом, начиная с простых компонентов, дойдем до взаимодействия с бэкендом и интеграции с кодом, написанным без его использования (на jQuery).

Уроки курса:

  1. Введение
    Познакомиться с курсом и подготовить окружение.
  2. Компоненты
    Познакомиться с базовой единицей в react — компонентом. Научиться его создавать и отрисовывать в браузере.
  3. JSX
    Научиться эффективно использовать jsx.
  4. Props
    Познакомиться с механизмом передачи данных в компоненты.
  5. Работа с коллекциями
    Научиться обрабатывать коллекции данных внутри компонентов.
  6. Различия jsx и html
    Узнать об особенностях jsx, которые работают не так как в html.
  7. Обработка имён классов
    Научиться правильно работать с классами компонентов, которые могут изменяться динамически.
  8. Children
    Научиться создавать компоненты боксы, способные работать с вложенными компонентами.
  9. Состояние
    Познакомиться с созданием stateful компонентов. Научиться добавлять интерактивности.
  10. События
    Познакомиться с особенностями системы событий React.
  11. Автоматное программирование
    Вспомнить что все вокруг автоматы. Научиться правильно работать с автоматами в React.
  12. Формы
    Изучить принципы взаимодействия с формами.
  13. Неизменяемость
    Научиться работать с составными структурами в неизменяемом стиле. Познакомиться с библиотекой `immutability-helper`.
  14. Вложенные компоненты
    Разобраться с хранением состояния и управлением событиями во вложенных компонентах.
  15. Функциональные компоненты
    Рассмотреть создание компонентов на основе функций и использования пространств имён.
  16. Контекст (Context API)
    Познакомиться с удобным способом получать доступ к глобальному состоянию во вложенных компонентах
  17. Virtual Dom
    Познакомиться с устройством React.
  18. Тестирование
    Узнать о проблемах, которые поджидают разработчика при работе с исходным кодом.
  19. Асинхронная обработка
    Узнать об особенностях работы с объектом событием в асинхронном коде. Попрактиковаться в создании асинхронных обработчиков.
  20. Жизненный цикл компонента
    Познакомиться с жизненным циклом компонента в процессе работы.
  21. Производительность
    Научиться выжимать из React максимальную производительность.
  22. Refs
    Научиться взаимодействовать с реальным DOM для интеграции сторонних компонентов.
  23. Дополнительные материалы
    Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса.

Отзывы:

Daniyar Zhanakhmetov
«Данный курс зашел как по маслу, материал полностью доступен для понимания! Нет ни одного момента, который остался бы полностью не раскрытым. Даже глава “Производительность” дала ключевое понимание правильной оптимизации приложения на Реакте, хотя, казалось бы, что можно рассказать в одной главе на одну страничку про такое огромное как Optimization, но и тут Хекслет показал своё мастерство в подаче материала. Просто Восторг! Спасибо за отличнейший курс!»

Никита Беженарь
«Спасибо за отличный курс по React! Раньше для меня Reaсt казался чем-то сложным, но после такого досконального объяснения разных мелочей, рад что стал намного лучше разбираться в нем чем раньше. После подробного изучения темы про DOM API, React получилось пройти в два раза быстрее, хотя сама тема в 2 раза больше)))»

Подробнее о курсе React JS →

Курс «React с нуля для начинающих от beONmax»

Цена: от $7.8

Ссылка на сайт: https://beonmax.com/courses/react/

Курс позволит освоить React от азов до создания полноценного SPA (single page application)-приложения с роутингом и продвинутым управлением состоянием.
Создадите 3 полноценных разноплановых проекта, которые можно как добавить себе в портфолио, так и сделать на базе них свои собственные уникальные проекты.

  • Видеоуроки: 94.
  • Продолжительность: ~13 часов.

Перейти на официальный сайт →

Для кого этот курс:

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

Начнём с классического подхода в создании приложений на React. Рассмотрим базовые концепции, как они трансформировались в современные. Научитесь работать и с теми, и с другими.

  • Узнаете все особенности последней версии React 17
  • Научитесь работать и с классовыми, и с функциональными компонентами
  • Разберётесь, чем отличаются управляемые и неуправляемые компоненты
  • Научитесь использовать хуки
  • Освоите работу с состоянием и жизненным циклом приложения
  • Создадите SPA (single page application) с react-router.

План курса:

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

  1. О курсе
  2. Введение
  3. React с JS и без
  4. Классовые React-компоненты
  5. Работа с формами в React
  6. Проект «фильмы»
  7. Функциональные React-компоненты
  8. Хуки подробно
  9. Проект «витрина»
  10. Продвинутое управление состоянием приложения
  11. Роутинг и SPA-приложение
  12. Подведение итогов
  13. Завершение курса – получение сертификата.

Отзывы:

Вячеслав Демченко
«Отличный курс! Много полезного материала и практики. Все четко структурировано и объяснено легким и понятным языком. Рекомендую этот курс всем, кто хочет развиваться в сторону фронтенд-разработки.»

Светлана
«Прекрасный курс. Хорошо структурированный. Отдельное спасибо за разбор хуков, редюсеры и внимание к мелочам».

Андрей Мартынов
«Очень понравился курс. Доходчиво, без лишней воды, но тем не менее раскрыты все нюансы. Рекомендую.»

Подробнее о курсе React JS →

Оставьте комментарий

Ваш адрес email не будет опубликован.

Прокрутить вверх