React-разработчик: кто это, обязанности, зарплаты и как им стать в 2023 году. Обзор профессии.

Кто такой React-разработчик?

Разработчик React — это программист, который отвечает за внешний вид веб-сайта или приложения и следит за тем, чтобы все интерактивные элементы работали так, как задумано дизайнерами. Разработчики React используют знания в JavaScript, CSS, HTML.

Что делают React-разработчики и чем занимаются?

Обязанности, например, на одной из вакантных должностей:

• Участие в проекте в качестве front-end разработчика
• Разработка технических решений
• Задачи планирования, оценки и написания кода, проверка кода
• Разработка пользовательского интерфейса прикладного программирования (JS)
• Исправления ошибок
• Взаимодействие с разработчиками и другими командами в формате Agile

Что должен знать и уметь React-разработчик? 

Требования к React-разработчикам:

• Создавайте приложения с нуля
• Работа с общедоступными API
• Познакомьтесь с Flux, Redux, Mobx
• Профилируйте свое приложение
• Протестируйте свое приложение
• Создание приложений SPA и RIA с нуля

Востребованность и зарплаты React-разработчиков

На данный момент на сайте поиска работы открыта 6 951 вакансия, и спрос на React-разработчиков растет с каждым месяцем.

Количество вакансий с указанной зарплатой React-разработчика по России:

• от 90 000 руб. — 2200
• от 180 000 руб. — 1506
• от 275 000 руб. — 648
• от 365 000 руб. — 235
• от 455 000 руб. — 73

Вакансии с указанным уровнем дохода в Москве:

• от 95 000 руб. — 775
• от 190 000 руб. — 607
• от 290 000 руб. — 299
• от 385 000 руб. — 107
• от 485 000 руб. — 32

Вакансии с указанным уровнем дохода в Санкт-Петербурге:

• от 100 000 руб. – 376
• от 190 000 руб. — 252
• от 280 000 руб. — 105
• от 370 000 руб. — 35
• от 460 000 руб. — 12

Как стать React-разработчиком и где учиться?

Возможности обучения React-разработчика с нуля:

• Самостоятельное обучение — всевозможные видео на YouTube, книги, форумы, туториалы и т д. Плюсы — дешево или очень доступно. Недостатки — нет последовательности, самообучение может быть малоэффективным, приобретенные навыки могут не потребоваться работодателю;
• Классическое офлайн-обучение в университетах, колледжах и университетах. Диплом является преимуществом при приеме на работу, в то время как обучение обычно длится не менее четырех лет и часто дает устаревшие, неактуальные знания;
• Онлайн обучение. Вы можете пройти курс на одной из образовательных платформ. Такие курсы рассчитаны на людей без специальной подготовки, поэтому подойдут большинству людей. Обычно упор в онлайн-обучении делается на практику — это позволяет быстро пополнить портфолио и устроиться на работу сразу после обучения.

Ниже представлен обзор 15+ лучших онлайн-курсов.

15+ лучших курсов для обучения React-разработчика: подробный обзор

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

https://otus.ru/lessons/react/

Цена: 67 000 ₽

На курсе вы узнаете:

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

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

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

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

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

В ходе обучения вы получите обширные знания и навыки.

Модуль 1 — Предисловие

• Тема 1. Вебпак + бабел
• Тема машинописного текста (часть 1)
• Тема 3. Установка и настройка React
• Тема 4. Консультация по проекту
• Тема 5. JSX как основа функциональных компонентов ReactJS
• Тема JSX + CSS
• TDD + Реагировать Тема
• Тема 8. Действия CI/CD GitHub

Модуль 2 — Реакция

• Тема 9. Машинопись (часть 2)
• Тема жизненного цикла компонентов
• Консультация по библиотеке для тестирования React
• Тематические списки, события, формы
• Тема 13. Основы функционального программирования
• Тема паттернов реакции, часть 1
• Тема паттернов реакции, часть 2
• Тема React-хуков
• Расширенная тема React Hooks
• Тема 18

Модуль 3 — Реагирование + Редукс

• Тема 19. Основные концепции Redux
• Тема 20
• Промежуточное программное обеспечение Redux и тема побочных эффектов
• Тема Redux Toolkit
• Вступительная тема саги Redux
• Тема 24. Сага Redux и интеграционное тестирование
• Основные понятия саги Redux
• Тема Архитектура приложения React
• Тема 27

Модуль 4 – Процесс разработки приложений, HTTP, WebSockets, GraphQL

• Тема 28
• Тема 29: Расширенная конфигурация приложения
• Тема 30
• Тема HTTP и REST API
• Тематические потоки событий и WebSockets. WebWorkers и комлинк для отложенной работы.
• Тема 33. Обзор GraphQL

Модуль 4 – Процесс разработки приложений, HTTP, WebSockets, GraphQL

• Тема 28
• Тема 29: Расширенная конфигурация приложения
• Тема 30
• Тема HTTP и REST API
• Тематические потоки событий и WebSockets. WebWorkers и комлинк для отложенной работы.
• Тема 33. Обзор GraphQL

Дипломная работа

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

На выбор будет несколько вариантов:

1. Разработка проекта, связанного с браузерным рендерингом. Аналог «игры жизни Конвея».
2. Контроль за уровнем издержек:

– регистрация чеков, сумм и дат;
— список чеков и квитанций;
— возможность построения графиков со статистикой (в этом году/в прошлом году);
— хранилище данных.

Заключительной работой студента будет доведение разработанного в ходе курса приложения до производственной готовности.

После тренировки:

• взять с собой полный комплект обучающих материалов: видео всех вебинаров, презентации к занятиям, а также решения задач и проектов в виде кода на github и другие дополнительные материалы;
• получить сертификат о прохождении курса;
• получить опыт фронтенд-разработки на React;
• получить приглашение на собеседование в компании-партнеры (эта возможность предоставляется наиболее успешным студентам).

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

https://skillbox.ru/course/react-js/

Стоимость: Договор рассрочки на 6 месяцев — 4 662 ₽/мес

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

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

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

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

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

Программа

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

1. Введение в реакцию

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

1. Создать проект

• Конфигурация Webpack на клиенте
• Конфигурация Webpack на сервере
• Подключается к проекту HMR и SSR
• Подключиться к машинописному тексту
• Подключиться к модулям CSS, Jest, Enzyme

1. Машинопись

• Основы TypeScript. Типы
• Работа с массивами
• Работа с объектами и интерфейсами
• Типизация функций и типы TS
• Общие лекарства
• Классы
• Infer, typeof, keyof, отображенные типы

1. Компоненты примера новостной карточки Reddit

• Компоненты в React
• Состояния в компонентах класса
• Состояния в функциональных компонентах
• Создание приложения макета. Часть 1
• Создание приложения макета. Часть 2
• Создайте компонент карточки новостей
• Жизненный цикл компонента

1. Хуки и функциональное программирование

• Каррирование и функции более высокого порядка
• Хуки в React
• Карта и уменьшение в React
• Создание выпадающего компонента с помощью хуков
• Compose, Pipe и их применение в React

1. Компоненты — это продвинутые темы. Введение в тестирование компонентов

• Адаптивные и неадаптивные компоненты. Подходы «сначала мобильные» и «сначала десктопы
• Создание выпадающего меню с использованием состояния
• Введение в модульные тесты и Jest
• Написание тестов для компонента React. Фермент против снимков
• Вспомогательные компоненты

1. Работа с публичным API на примере Reddit

• Как работать с API
• Зарегистрируйте учетную запись разработчика на Reddit
• OAuth2
• Страница авторизации пользователя
• Как структурировать запросы API в приложении

1. Реагировать на контекст

• Мы собираем пользовательские данные из API
• Отображение пользовательских данных в компоненте через реквизит
• Использование React Context для работы с данными
• Обновление данных через контекст

1. Портал и форма

• Настройка открытки с помощью ReactPortal
• Реф и хук useRef React. Реализация механизма щелчка снаружи для скрытия модального окна
• Управляемые и неуправляемые компоненты на примере поля комментария
• Сохраняет состояние формы, используя контекст

1. Введение в Redux с примером поля комментария

• Введение в Редукс
• Установите Redux, подключите его к приложению
• Действие + уменьшение
• Компоненты презентации/контейнерные компоненты

1. Использование Redux-Thunk на примере загрузки профиля пользователя

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

1. Формы например комментарии и открытка

• Экскурсия по формам. Проблемы с React-формами
• Статус поля. Различные подходы
• Какие библиотеки можно использовать и почему они могут мешать
• Сохраняет статус формы, проверяет поля и отображает ошибки
• Доступность, нативные элементы и возможность работы с формой через табуляцию

1. «Бесконечные» списки на примере ленты постов

• Работа с API-запросами
• Загружаем ленту для постов
• Типы бесконечной прокрутки и разбиения на страницы
• Загружаем ленту для постов
• Эффективный рендеринг больших списков

1. Боковая панель + маршрутизация

• Создайте боковую панель, используя более продвинутые методы
• Маршрутизация в SPA и React
• Подключается к React-маршрутизатору
• Подключаем новостную ленту к роутеру
• Дополнительные функции маршрутизации

1. ССР + NextJS

• Сервер и статический рендеринг. Изоморфные приложения
• Делайте серверный рендеринг с помощью экспресс
• NextJS
• Портирование приложения в Neste
• Распространить приложение в Zeit

1. Бонусный модуль: Mobx.

3 место.Курс «React: библиотека фронтенд-разработки №1» — Нетология

https://netology.ru/programs/react

Стоимость: 14 700 ₽ или договор рассрочки на 12 месяцев — 1 225 ₽/мес

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

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

1. Компоненты
   Библиотека React дает нам возможность эффективно разрабатывать современные интерфейсные приложения. В этой части мы познакомимся с компонентным подходом, позволяющим создавать сложные интерфейсы на основе композиции простых блоков, научимся обрабатывать события и работать с внутренним состоянием компонентов, а также получим опыт работы с формами.
2. Передовые методы, одностраничные приложения
   В этом блоке мы научимся организовывать сложные интерфейсы с помощью компонентной композиции, интегрироваться с REST API, узнаем больше о работе на основе современных подходов — хуков и Context API, а также научимся организовывать пагинацию с помощью React Router.
3. Редукс — Управление состоянием
   В этом разделе мы представим один из ключевых навыков разработки сложных приложений — управление глобальным состоянием приложения. Мы начинаем с простых инструментов: библиотеки Redux в основе всего и Redux Thunk для организации простых побочных эффектов и заканчиваем продвинутыми инструментами: Redux Observable и Redux Saga.
4. GIT — система контроля версий

какой подарок

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

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

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

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

https://loftschool.com/course/react/

Стоимость: 24 000 ₽ или рассрочка на 12 месяцев — от 2 000 ₽ в месяц

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

Неделя 1 — Введение в React.js

— Познакомьтесь с командой курса и одноклассниками.
— Изучение JSX и Virtual DOM в React.
— Мы рассматриваем компонентный подход и способы передачи данных.

Неделя 2 — шаблоны React.js, тестирование

— Изучаем компоненты, элементы и экземпляры класса компонентов.
— С учетом библиотеки Recompose, высокоуровневых компонентов и шаблонов Render Props.
— Понимаем пользу тестов, изучаем Jest, Enzyme, Snapshots.

Неделя 3 — Redux, маршрутизация

— Изучаем маршрутизацию: Простую маршрутизацию, маршрутизацию с Switch, а также вложенную маршрутизацию.
— Ознакомьтесь с библиотекой Redux: основные понятия и концепции Store, Actions, Reducers, React-redux.
— Рассмотрено промежуточное ПО как способ работы с Sideeffect.

Неделя 4 — сага Redux

— Изучение библиотеки саги Redux. Повторите функции генератора*. Научитесь запускать их параллельно.
— Разбор метода Take. Мы изучаем отбор как способ получения данных из хранилища.
— Рассматривает способы стилизации приложения React. Изучаем библиотеки ClassNames, StyledComponents, BrowserList, MaterialUI.

Неделя 5. Формы, CI и DI и обработка ошибок клиента

— Рассмотрите возможность работы с формами с использованием библиотек Formik, Redux Forms, React Final Form.
— Мы рассматриваем методы обеспечения качества производственного кода. Анализируем такие инструменты, как: Husky, TravisCI, HerokuNow.
— Изучаем набор полезных библиотек для разработки (Storybook, RamdaJS, Axios).
— Учитывая TypeScript.

Неделя 6 — Работа над проектом

— Заполняем заявку и отправляем на проверку.

Дипломная работа

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

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

 LoftSchool знают и ценят работодатели, поэтому наличие сертификата станет вашим дополнительным преимуществом при поиске работы в IT-компании.

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

https://beonmax.com/courses/react/

Стоимость: нет информации

Курс позволит вам освоить React от основ до создания полноценного SPA-приложения (одностраничного приложения) с маршрутизацией и расширенным управлением состоянием.

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

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

• Изучите все возможности последней версии React 17
• Научитесь работать как с классовыми, так и с функциональными компонентами
• Понимать разницу между управляемыми и неуправляемыми компонентами
• Научитесь использовать крючки
• Ознакомьтесь с состоянием и жизненным циклом программы
• Создайте SPA (одностраничное приложение) с помощью реактивного маршрутизатора

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

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

РАСПИСАНИЕ КУРСОВ:

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

1. ВВЕДЕНИЕ
2. РЕАКТИРУЕТ С JSX И БЕЗ
3. КЛАСС РЕАКЦИИ КОМПОНЕНТЫ
4. РАБОТА С ФОРМАМИ В РЕАКТЕ
5. ПРОЕКТ «ФИЛЬМ»
6. КОМПОНЕНТЫ ФУНКЦИОНАЛЬНОЙ РЕАКЦИИ
7. ХУКИ В ДЕТАЛЯХ
8. ПРОЕКТ «ВИТРИНА»
9. РАСШИРЕННОЕ АДМИНИСТРИРОВАНИЕ APPSTAT
10. МАРШРУТИЗАЦИЯ И СПА ПРИМЕНЕНИЕ
11. КРАТКОЕ СОДЕРЖАНИЕ

ЗАВЕРШЕНИЕ КУРСА — ПОЛУЧЕНИЕ СЕРТИФИКАТА.

Курс «Уроки React JS» — itProger

https://itproger.com/course/react-js

Стоимость: нет информации

В течении курса:

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

Расписание курсов:

В ходе курса вы изучите JS-библиотеку React, от ее установки до реализации небольшого веб-проекта.

Перед началом видеокурса следует ознакомиться с языком JavaScript и Node JS, так как они являются основными платформами, на которых построена библиотека React.

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

https://practicum.yandex.ru/react

Цена: 52 020 ₽

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

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

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

Бесплатный вступительный тест
Около 2 часов

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

Погрузитесь в React и Redux
4 недели, 80 часов

• В этом модуле вы изучите основы и инструменты React. Научитесь работать с компонентами классов и функций и попрактикуйтесь в их написании. Узнайте, как использовать хуки, чтобы превратить мощь компонентов класса в функциональные. Создайте простое приложение React с CRA и узнайте, как его отлаживать с помощью плагина React DevTools.
  Узнайте, что такое «состояние» в терминологии современных фреймворков и библиотек. Узнайте, как работать с одной из самых популярных государственных библиотек, Redux.

В проектной работе:

Вы хотите разместить первый экран в своем приложении, подключить к нему магазин Redux и реализовать перетаскивание ингредиентов с помощью React DnD.

Маршрутизация, безопасность и TypeScript
4 недели, +1 неделя отпуска, 80 часов

• Вы узнаете, как настроить маршрутизацию в приложении SPA и создать динамические маршруты. Узнайте, как работать с основными хуками в React Router. После этого изучите процессы аутентификации и авторизации пользователей — это поможет убедиться, что только авторизованные пользователи имеют доступ к определенным действиям и страницам в приложении.
  Затем погрузитесь в основы TypeScript и узнайте, как использовать его в приложениях React.

В проектной работе:

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

Протокол WebSocket и развертывание приложений

4 недели, +1 проект в портфолио, 70 часов

• Вы закончите изучение TypeScript с написанием Redux. После этого вы реализуете подключение к серверу в реальном времени по протоколу WebSocket.
  Познакомьтесь с методами тестирования и узнайте больше об автоматизированном тестировании приложений. А также узнать, как развернуть готовое приложение.

В проектной работе:

Создайте ленту заказов с помощью WebSocket и перепишите весь магазин на TypeScript. Добавьте тесты Cypress и Jest в приложение, затем загрузите проект на удаленный сервер.

Карьерный путь (необязательно)

От 40 часов

• Параллельно с основной программой помогаем найти первую работу или сменить текущую: продумываем стратегию и сопровождаем в процессе. Вместе с опытными IT-рекрутерами вы будете работать над резюме и создавать портфолио на GitHub.

Курс «React.JS Pro» — Traktor

https://traktorschool.ru/react

Цена: 45 000 ₽

За 4 месяца мы проведем вас через все этапы работы с React: от азов до работающего приложения, которое вы создадите и протестируете сами

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

Модуль 1: Введение в React

Уроки:

• Создание React-приложения
• Написание макета в JSX
• Что такое компоненты в React
• Создание классов компонентов
• Создание функциональных компонентов
• Аранжировки и простые формы
• Написание тестов для компонентов
• Контекст
• Реагировать на крючки
• использование состояния
• использованиеЭффект
• использоватьСократить
• Пишем наш хук

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

• Создавайте приложения React
• Описать макет приложения в JSX
• Объявить компоненты
• Обрабатывать пользовательские события
• Тестовые компоненты
• Передача данных через контекст по всему приложению
• Тестовый контекст
• Используйте хуки React и работайте с состоянием без классов

Модуль 2: Реализация приложений React

Уроки:

• Как развернуть приложения
• CI, CD и другие концепции, связанные с дистрибуцией
• Как настроить развертывание с помощью Github Actions
• Отслеживание ошибок с помощью Sentry

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

• Развернуть приложение на хостинге
• Настройте автоматическое развертывание с помощью Github Actions
• Настройка автоматических тестов во время развертывания
• Отслеживайте ошибки в производстве с помощью Sentry.
• Получайте качественные отчеты об ошибках в Sentry, используя исходные карты.

Модуль 3: Навигация

Уроки:

• Базовая навигация с React-router-dom
• Динамическая навигация
• Закрытый прием — авторизация
• Отправляет параметры на URL
• Крючки React-route-judgment
• Тестирование навигации

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

• Создавайте приложения с несколькими страницами
• Создавать страницы, требующие авторизации
• Обрабатывать параметры в URL
• Работа с динамической навигацией
• Крючки React-route-judgment
• Тестовая навигация

Модуль 4: Формы

Уроки:

• Основы формы React Hook
• Обработка ошибок — проверка поля
• Проверяет формы с помощью Yup
• Нормализация значений
• Отправка файлов
• Тестовые формы

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

• Получить данные из формы
• Обработка ошибок
• Проверка форм
• Нормировать значения, привести их к стандартному формату
• Отправить файлы
• Тестовые формы

Модуль 5: Связь с сервером

Уроки:

• Загрузка данных с сервера
• Отправляет данные на сервер
• Обработка ошибок сервера
• Работа с данными с ReactQuery
• Проверяет связь с сервером

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

• Запросить данные с сервера у компонента
• Отправить данные
• Выделите код для работы с сервером в отдельный слой.

Модуль 6: Работа с состоянием в Redux

Уроки:

• Что такое редукс
• Добавление Redux в проект
• Работа с сервером в Redux
• Когда Redux не нужен/не подходит
• Тестирование Redux-кода

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

• Используйте Redux для хранения данных
• Подключите Redux к вашему приложению React
• Делайте запросы к серверу в приложении Redux
• Тестовый код с использованием Redux

Модуль 7: Использование инструментария Redux

Уроки:

• Что такое инструментарий Redux
• Создать магазин
• Использование createReducer и createAction
• Использование диска
• Использование createAsyncThunk

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

• Подключите Redux-Toolkit к приложению
• Создавайте редукторы и действия с помощью методов Redux-Toolkit
• Выполнение сетевых запросов с помощью Redux-Toolkit

Модуль 8: Стили

Уроки:

• Стили в React — обзор
• Встроенные стили
• Использует CSS
• CSS-модули
• Стилизованные компоненты
• Учебник истории

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

• Используйте встроенные стили
• Работа с CSS и SCSS
• Используйте CSS-модули
• Стилизуйте приложение с помощью стилизованных компонентов
• Используйте Storybook для разработки, тестирования и демонстрации компонентов

Модуль 9: Авторизация

Уроки:

• Авторизация и аутентификация
• Авторизация по логину и паролю
• OTP аутентификации с одноразовым паролем

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

• Отличие авторизации от аутентификации
• Включить аутентификацию по паролю
• Настроить авторизацию с помощью сторонних сервисов
• Реализовать аутентификацию по одноразовому паролю

Модуль 10: Безопасность

Уроки:

• Начало работы
• Инъекции
• Уязвимости аутентификации
• XSS-уязвимости
• DOR-уязвимости
• Ошибка в настройках безопасности приложения
• Утечка личной информации
• Проблемы безопасности на уровне доступа
• CSRF — подделка межсайтовых запросов
• Уязвимости в сторонних библиотеках
• Перенаправления

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

• Изучите основные типы уязвимостей, как на клиенте, так и на сервере
• Узнайте, что такое XSS
• Как атаки могут быть выполнены на ваше приложение
• Как защитить себя от взлома

Модуль 11: Серверный рендеринг

Уроки:

• Пример базового рендеринга сервера
• Рендеринг сервера с помощью Next.js
• Статические сайты на Next.js

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

• Поймите, почему серверный рендеринг необходим
• Отличить SSR от SSG
• Создавайте приложения React, которые отображаются на сервере
• Создание статических страниц с помощью NextJS

Бонусный модуль: Карьера разработчика

Уроки:

• Карьерные цели, план развития на 5 лет
• Резюме, LinkedIn, сопроводительное письмо
• Интервью
• Поиск работы
• Корпоративная и командная игра, soft skills

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

• Планируйте свой карьерный рост
• Ставьте карьерные цели
• Напишите грамотное резюме
• Написать резюме (сопроводительное письмо)
• Эффективно общаться с командой
• повысить свою ценность в компании.

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

https://skill-branch.ru/react

Цена: 44 000 ₽

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

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

1. Введение
   Разберем, как проходит процесс обучения, кому подойдет этот курс и какие инструменты будут изучаться.
2. Сложные концепции в JS
   Углубимся в изучение JS. Давайте посмотрим на продвинутые концепции, которые встретятся в будущем и без понимания которых будет сложно перейти к изучению React.

• Разрушение
• Ошибка при обработке
• Асинхронность
• Реактивность
• Регулярное выражение
• Новые возможности
• ФП в JS
• ООП в JS
• Prototype Pomadoro — приложение для личной продуктивности.

1. Подготовка рабочего места
   Подготовим рабочее пространство, чтобы писать грамотный и красивый код было проще и удобнее. Давайте научимся пользоваться консолью.

• Установка VSCode
• Установка НПМ
• Работает с консолью
• Эслинт
• Красивее
• Хаски
• Мы добавляем возможность настроить Pomadoro под себя. Автоматизируйте таймер. Исправляем ошибки.

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

• Старый Реакт
• Новый ответ
• JSX
• Реагировать + CSS
• Основные принципы
• Модульность
• Прототип экрана регистрации/входа.

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

• Плюсы
• Минусы
• Аналоги
• Основными агрегатами являются магазин, тип, действие и редуктор.
• ПО промежуточного слоя
• Мутации
• Составляем список дел. Показываем список из Redux.

1. Продвинутая работа с React, React Thunk
   Давайте рассмотрим более продвинутые концепции React. Узнайте, как находить и исправлять ошибки в React. Напишем асинхронный код. Давайте научимся создавать правильную форму входа и рассмотрим типы запросов.

• Реагируйте изнутри
• Расширенные хуки
• Пользовательские крючки
• Лучшая практика
• Код отладки
• Редукс Преобразователь
• Работа с бэкендом
• Мы дорабатываем форму входа. Создайте список всех зарегистрированных пользователей. Реализовать фильтрацию.

1. Маршрутизация. Реактивный маршрутизатор
   Давайте рассмотрим более продвинутые концепции React. Узнайте, как находить и исправлять ошибки в React. Напишем асинхронный код. Давайте научимся создавать правильную форму входа и рассмотрим типы запросов.

• Реагируйте изнутри
• Расширенные хуки
• Пользовательские крючки
• Лучшая практика
• Код отладки
• Редукс Преобразователь
• Работа с бэкендом
• Объединяем все страницы в одно приложение. Создаем личный кабинет пользователя.

1. Помните всех!
   Закрепим изученные технологии. Давайте погрузимся в работу с бэкендом и реализуем новый, более сложный функционал в приложении.

• Рефакторинг модальных окон приложений. Продвинутая работа с бэкендом.

1. Шутить
   Узнайте, как тестировать код автоматически. Давайте узнаем, как тестировать функциональность приложения и чем это отличается от тестирования компонентов. Давайте попробуем новый процесс разработки — TDD.

• Зачем нужны тесты?
• TDD
• Виды тестирования
• Тестирование пирамиды
• Шутить
• Синхронное тестирование
• Асинхронное тестирование
• Моментальное тестирование
• Библиотека тестирования React
• Покрываем код тестами. Попробуем ТДД.

1. Мы пишем стили правильно стилизованных компонентов книги истории.
   Узнайте, что такое css-in-js. Реализуем темную и светлую тему и чередование между ними. Давайте узнаем, как мы можем разработать отличные интерфейсы вместе с дизайнером. Давайте создадим библиотеку компонентов в нашем приложении.

• Стилизованные компоненты
• API
• Создать тему
• Учебник истории
• API
• Добавка
• Миграция приложения с CSS на стилизованные компоненты. Создание библиотеки компонентов в Storybook. Мы создаем темную тему.

1. Архитектура приложений React
   Подготовка к созданию дипломного проекта. Давайте узнаем, как разрабатывать приложения, разбиваться на команды и выбирать темы.

• Зачем нужна архитектура?
• Какие типы существуют?
• Плохая архитектура
• Хорошая архитектура
• Срез функции
• Атомный
• Флюс
• Глупый/умный
• Соберите команду для финальной заявки. Распределяем задачи. Нулевой спринт.
• Мастер класс

1. Зачем писать код, если кода нет
   Узнайте об инструментах, которые могут ускорить и упростить создание приложений. Разберем преимущества и недостатки такого подхода на реальных кейсах. Давайте узнаем, как использовать решения без кода на практике.

• Что такое no-code и low-code
• Когда использовать
• Когда нельзя использовать
• Хорошие примеры
• Неттифай
• Первый и второй спринты.

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

• Третий спринт. Завершение финальной заявки. Подготовка презентации.

1. Краткое содержание

• Выбираем лучшее приложение
• Составление дорожной карты на будущее
• Какие еще проекты можно написать?
• Точки роста

Курсовые проекты:

• Помадоро
• СУО
• Хакатон

Ваш сертификат, подтверждающий обучение в Skill Branch, профессиональные знания и навыки.

Добавьте его в свое резюме, чтобы победить в конкурсе и получить престижную работу!

Курс «Разработка на React» — Luxoft

https://www.luxoft-training.ru/kurs/razrabotka_na_react.html

Цена: 29 900 ₽

Темы охватывали:

1. Обзор современных возможностей JS (4 часа).

• Классы и наследование.
• Деструктуризация матриц и объектов.
• Оператор распространения.
• Неизменяемость.
• Чистые функции.
• Модель МВК.
• Асинхронность в JS: промисы, асинхронность/ожидание.
• Работа с сервером.
• Используйте это в обратных вызовах.
• Модули JS, импорт и экспорт.
• Npm и package.json
• Webpack и сборка модулей.
• Загрузчики веб-пакетов.

1. Основы React (1 час, включая обучение).
2. JSX (2 часа включая обучение).
3. Состояние и реквизит (2 часа включая практику).
4. Расширенные вопросы. Жизненный цикл компонентов (2 часа, включая упражнения).
5. Маршрутизация в React (2 часа включая обучение).
6. Immutable.js (1 час).
7. FLUX Architecture (2 часа, включая практику).
8. Основы REDUX (2 часа, включая обучение).
9. Продолжаем изучать REDUX (3 часа, включая практику).
10. Инструменты разработчика REDUX (0,5 часа + демонстрация).
11. Часто задаваемые вопросы о REDUX (0,5 часа).
12. Промежуточное ПО в REDUX (0,5 часа).
13. Асинхронные действия (0,5 часа).
14. Redux THUNK (2 часа включая обучение).
15. Перехват в React (1 час).

Цель

• Научитесь использовать React.js;
• Заниматься архитектурным решением — FLUX, а также реализацией — Redux;
• Узнайте, как использовать React.js с Redux.

Целевая группа

• Разработчики клиентской части приложений.
• Предварительная подготовка
• Базовые навыки JavaScript.

После прохождения курса выдается сертификат на форме Luxoft Training.

Курс «Разработка на React» — ThinkNetica

https://thinknetica.com/react_basic

Цена: 27 900 ₽

После курса:

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

Программа:

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

1. Введение в реакцию

• Краткий обзор React и его экосистемы. Давайте познакомимся с основными понятиями, базовыми принципами, конфигурацией окружения, понятием компонента и его типами, JSX.

1. Способы создания приложения React

• Мы научимся создавать приложения разными способами и инструментами (с нуля, используя Webpack и Babel.JS/Create React App/Next.JS/Gatsby), с рендерингом на стороне сервера и без него.

1. Стили в приложении React

• Давайте узнаем, как стилизовать приложение React и управлять им с помощью современных инструментов (PostCSS, styled-components, styled-jsx).

1. Свойства и состояние компонента

• Давайте изучим концепцию свойств в компонентах. Давайте научимся их передавать, выполнять проверку типов. Рассмотрим понятие и функции использования состояния компонента (state).

1. Компоненты с состоянием и без состояния

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

1. Жизненный цикл компонента

• Изучим элементы жизненного цикла компонента, научимся использовать их на практике.

1. Встроенные и пользовательские хуки (React Hooks)

• Давайте попрактикуемся в использовании нового инструмента в библиотеке React для улучшения читабельности и повторного использования кода.

1. Тестирование с помощью Jest и библиотеки тестирования React

• В процессе разработки приложения мы будем писать тесты для наших компонентов, используя Jest и библиотеку тестирования React.

1. API-взаимодействие

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

1. Маршрутизация в приложении (React Router), порталах (React Portals)

• Давайте узнаем, как сопоставить URL-адрес и отобразить нужную страницу без перезагрузки, поскольку это должно работать в одностраничном приложении. Разберем сложные кейсы, такие как обработка входящих параметров, редиректы, страницы ошибок, авторизованный доступ и модальные окна с использованием порталов

1. Управление событиями

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

1. Контекст и аутентификация

• Давайте подробнее рассмотрим новый контекстный механизм в библиотеке React. Давайте узнаем, как эффективно использовать его в приложении. Давайте узнаем, как работать с аутентификацией, локальным хранилищем и файлами cookie.

1. Способы создания форм

• Узнаем нюансы создания простых и сложных форм для приложения с использованием разных подходов и инструментов (без сторонних инструментов, React Hook Form, Formik)

1. Строительство производства и дистрибуция

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

Дополнительный редукс

• Декларативные подходы и промежуточное ПО. Прикладное приложение Redux использует в проекте.

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

Курс «React. Разработка сложных клиентских приложений» — Интерактивные обучающие технологии

https://htmlacademy.ru/intensive/react

Цена: 25 400 ₽ — 37 400 ₽

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

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

• Первая неделя

Участие в живых лекциях, работа над проектами с персональным наставником.

• Вторая неделя

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

• Третья неделя

Познакомимся с архитектурой Flux: действия (Actions), диспетчеры (Dispatcher), представления (Views) и хранилища (Stores). Делаем ссылку на проект Redux и обновляем кодовую базу.

• Четвертая неделя

Поговорим о производительности React-приложений: в чем особенности, на что следует обращать внимание при проектировании компонентов в первую очередь.

• Пятая неделя

Давайте познакомимся с инструментами и методами тестирования приложений React. Настроим инфраструктуру для тестирования, напишем тесты для созданных компонентов.

• Шестая неделя

Подготовка проекта к итоговой защите и его оценка проверяющим наставником по критериям качества. Завершение работы над проектом и подготовка к итоговой защите.

• Седьмая неделя

Первая оценка проекта проверяющим наставником по критериям качества.

• восьмая неделя

Доработка проекта по замечаниям контрольного наставника и отправка на повторную оценку.

• Девятая неделя

Внесите окончательные изменения и получите окончательную оценку.

Курс «Интенсив-практикум по React c Redux, MobX TypeScript, Styled Components и CSS Modules» — Lectrum LLC

https://lectrum.io/course/react-redux

Цена: 20 950 ₽ — 30 950  ₽

Ты выучишь:

1. Работа с компонентами, хуками и функциями разработки бизнес-логики с помощью пользовательских хуков
2. Используйте TypesScript по назначению, а не наоборот
3. Создайте правильную архитектуру приложения
4. Используйте лучшие методы стилизации: CSS-модули и стилизованные компоненты
5. Создавайте эффективные формы и проверяйте их, используя оптимальный подход к проверке
6. Работайте с Redux, используя новые хуки useDispatch и useSelector, лучшие практики и минимум кода
7. работа с MobX и понимание того, чем он отличается от Redux
8. Тестируйте компоненты React, хуки, а также Redux и MobX
9. Работа в гибкой команде

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

1 неделя

• Урок 1: Введение в React
  Друг, с этого урока мы начинаем погружаться в удивительный мир веб-разработки, используя лучшие практики наших экспертов.

упражняться

• Давайте узнаем, как настроить проект для разработки.
• Преобразование разметки HTML и CSS в полноценный компонент React.
• Создадим первые полноценные компоненты с помощью React.
• Урок 2: Работа с данными в React
  Развитие становится особенно интересным с добавлением интерактива! В этом уроке мы узнаем, как динамически анимировать ваше приложение. ?

упражняться

• Давайте заполним наши компоненты данными, используя свойства и потомков.
• Узнайте, как правильно повторно использовать компоненты.
• Давайте анимируем наши компоненты с помощью состояния.

Неделя 2

• Урок 3: Сеть в React
  Практически все приложения в Интернете взаимодействуют с сервером в той или иной форме. На практике узнаем, как отправлять запросы на сервер. Мы также оптимизируем наше приложение для максимальной производительности.

упражняться

• Узнайте, как оптимизировать приложение для достижения максимальной производительности.
• Заполним приложение реальными данными с сервера.
• Урок 4: Маршрутизация в React
  Ни для кого не секрет, что естественно полноценное приложение, не одна страница, а целый комплекс! В этом руководстве мы узнаем, как подключить приложение React к настоящему одностраничному приложению (SPA) с помощью react-router.

упражняться

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

Неделя 3

• Урок 5: Грамотная компиляция форм в React-приложении
  Изучив азы создания базы для СПА, мы перейдем к изучению эффективных приемов составления форм. Мы научимся не только создавать фигуры различной сложности, но и управлять их состоянием, а также проверять и упорядочивать их осмысленную композицию.

упражняться

• Давайте научимся делать простые фигуры.
• Изучим функции при работе со сложными фигурами.
• Научитесь проверять формы.
• Урок 6: Введение в MobX
  MobX — это библиотека управления состоянием, альтернативная Redux. Библиотека MobX использует несколько иной подход к созданию хранилища и изменению данных. С изучением этой библиотеки мы научимся передавать состояние компонента во внешние хранилища данных.

упражняться

• Подключим MobX к проекту.
• Давайте использовать лучшие практики MobX.

Неделя 4

• Персональный проект «Виджет погоды» на модулях JavaScript, MobX, CSS
• Персональный проект «Виджет погоды» на модулях JavaScript, MobX, CSS

Неделя 5

• Урок 7: Введение в Redux
  А теперь пришло время научиться работать с централизованным состоянием в приложении React. В этом руководстве мы рассмотрим наиболее важные аспекты подключения React и Redux.

упражняться

• Подключим Redux к React.
• Давайте узнаем, как правильно работать с Redux в приложении React.
• Урок 8: Асинхронный редукс (бонус)
  Давайте узнаем, как делать запросы к API, используя перехватчик Redux Thunk и Redux Saga. Изучим особенности при работе с асинхронным кодом в React-приложении.

упражняться

• Давайте узнаем, как загружать данные из внешнего API.
• Давайте узнаем, как отправлять данные во внешний API.

6 неделя

• Урок 9: Переход на TypeScript
  экосистема современного фронтенда давно перешла на использование инструментов, делающих жизнь разработчиков (и не только) лучше. Одним из таких инструментов является TypeScript. Вместе мы настроим машинописный микроклимат проекта таким образом, чтобы TypeScript был полезен и помогал писать код.

упражняться

• Подключим TypeScript к проекту.
• Давайте воспользуемся лучшими практиками TypeScript.
• Урок 10: Тестирование кода
  Давайте улучшим стабильность приложения React с помощью тестов. Давайте выясним, какие типы тестов существуют, а также проанализируем, какие аспекты React-приложения должны быть покрыты тестами в первую очередь. Узнайте, как тестировать компоненты React.

упражняться

• Давайте покроем React-компонент приложения тестами.
• Покроем Redux-компонент приложения тестами.
• Покроем MobX компонент приложения тестами.
• Урок 11: Стилизованные компоненты (видеоурок)
  Есть два основных лагеря, которые выступают за стилизацию вашего приложения с помощью классического CSS и стилизации с помощью JavaScript (CSS в JS). В этом руководстве мы более подробно рассмотрим лучшее решение для стилизации приложения React с помощью компонентов в стиле JavaScript.

упражняться

• Изучите секретные методы использования стилизованных компонентов
• Давайте изучим лучшие практики использования этой библиотеки

Неделя 7

• Персональный проект «Диспетчер задач» на TypeScript, Redux, стилизованных компонентах
• Персональный проект «Диспетчер задач» на TypeScript, Redux, стилизованных компонентах

Неделя 8

• Групповой проект по методологии Agile
• Групповой проект по методологии Agile

Неделя 9

• Подводит итоги основной тренировки
• Результаты работы над персональными проектами.
• Персональный проект «Фитнес-трекер» — стек на выбор.

Курс «React» — Learn.JavaScript

https://learn.javascript.ru/courses/react

Цена: 19 000 ₽

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

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

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

Блок 1 — Знакомство с React и его экосистемой.
В этом блоке мы начинаем с того места, где остановились в скринкасте React. Давайте научимся писать простые компоненты и выясним, в чем принципиальное отличие React.js от других популярных фреймворков. Создадим первые компоненты с помощью декларативного подхода, познакомимся с экосистемой, научимся использовать сторонние компоненты и работать с формами.

• Поймите, как работает приложение create-реагировать.
• Более глубокие знания React, Virtual DOM, JSX.
• Разбираем React Hooks, их отличия от методов состояния и жизненного цикла.
• Давайте рассмотрим примеры тестирования компонентов с помощью Jest и Enzyme.
• Связываем стили с css модулями.
• Научитесь повторно использовать код с наследованием, декораторами и пользовательскими хуками.
• Связь с DOM: ключи и ссылки.
• Мы ссылаемся на сторонние компоненты.

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

• Особенности Redux.js: функциональный подход, инструменты разработчика Redux.
• Сохранить как неизменяемый объект: Redux + Immutable.js.
• Настройте синхронный поток с Redux, повторно используйте ранее созданные компоненты.
• React-redux для подключения компонентов к логике.
• Запоминается переизбрать избирателей.
• Побочные эффекты в Redux: создание и использование промежуточного ПО.
• Получает данные с сервера.
• Асинхронные действия с redux-thunk

Блок 3 — React для SPA: react-router и расширенные API React
Разработка одностраничных приложений — одно из основных направлений фронтенда. Мы расскажем вам, как создавать их с помощью React. Давайте узнаем, как использовать react-router и расширенные элементы в React.JS API.

• Зачем нужна маршрутизация и как она работает, разрабатываем структуру приложения.
• Разбор react-router v5.
• Настройка вложенных маршрутов.
• Выберите и настаивайте на истории для нашего приложения.
• Объединить реакцию-маршрутизатор и
• Учимся обрабатывать ошибки сервера и декларативно управлять роутером.
• Мы используем контекст — еще один механизм передачи данных.
• Обзор расширенного API react-router.
• Мы используем props.children для создания компонентов.
• Анимации в React, CSSTransitionGroup.

Блок 4 — Куда развиваться дальше
На данный момент вы уже знаете все, что нужно для разработки приложений React. Но останавливаться на достигнутом пока рано, вокруг React выросла огромная экосистема. Мы кратко рассмотрим основные функции разработки, различные платформы, библиотеки и инструменты поддержки. + Будет возможность сортировать интересующие вас вопросы.

• Работа с формами: redux-form, final-form, formik.
• Чего ожидать от React 17.
• React Native и React VR.
• GraphQL + Реле/Аполлон.
• MobX против Redux.
• Различные подходы к побочным эффектам: redux-thunk, redux-loop, redux-saga, redux-observable.

Курсовой проект

• Сервис выбора ресторана и заказа еды.

Курс «React» — ITEA

https://onlineitea.com/course/react-js/

Цена: 17 850 ₽

На курсе вы узнаете:

• Спроектируйте и создайте полнофункциональное приложение или расширенный веб-сайт с использованием фреймворка React.js
• Используйте последние инновации в современной верстке JSX и Virtual DOM в своей работе.

Полная программа курса React:

1. Введение в экосистему React Framework

• Императивное и декларативное программирование
• Различные узоры, используемые с рамками
• Преимущества использования фреймворка

1. Настройка первого компонента React с помощью NPM, Babel, Webpack
2. Работа с «реквизитом»/«состоянием» компонента
3. JSX
4. Реактивный маршрутизатор
5. Работает с событиями
6. Жизненный цикл компонента + AJAX, работа с модулем действий
7. Многоразовые компоненты
8. Редукс
9. Динамический рендеринг
10. Работа с формами
11. Использует обещания
12. Распространение приложений.

Курс «JavaScript. Уровень 6. React и JSX» — Центр компьютерного обучения «Специалист» при МГТУ им.Н.Э.Баумана

https://www.specialist.ru/course/react

Цена: 13 000 ₽ — 16 990 ₽

Ты выучишь:

• создавать компоненты на основе ReactJS;
• настроить жизненный цикл компонентов;
• нарисовать форму по условию;
• обрабатывать события и управлять пузырьками состояния.

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

Модуль 1: Введение в React и JSX (4 часа.)

• Что такое Реакт?
• Какие задачи решает React?
• Установите библиотеку ES6 и JSX
• Встроенные выражения
• Определение атрибутов в JSX
• Укажите дочерние элементы
• Реагировать на элементы
• Рендеринг элемента
• Обновление элементов

Модуль 2: Компоненты реакции, состояния и жизненный цикл (4 часа.)

• Функциональные и классовые компоненты
• Рендеринг компонентов React
• Состав элементов
• извлечение компонентов
• Концепция государства
• Преобразование функции в класс
• Состояние локального класса
• Методы жизненного цикла
• Рекомендации по работе с состояниями
• Нисходящие данные

Модуль 3. Условный рендеринг. Формы (4 академических часа.)

• Условный рендеринг
• Предотвращает рендеринг компонентов
• Рендеринг нескольких компонентов
• Компонент основного списка
• Ключи
• Удалить компоненты с ключами
• Местоположение Map() в JSX
• Контролируемые компоненты
• Теги
• Альтернатива контролируемым компонентам

Модуль 4

• Государство бурлит.

Курс «Библиотека ReactJS с Нуля до Профи» — webformyself

https://webformyself.com/reactjs/

Цена: 9 870 ₽

Основная часть курса:

108 уроков общей продолжительностью 16 часов

Основная часть курса состоит из тринадцати объемных блоков:

• Блок 1. Теория. Что такое React (5 уроков, 1 час)
• Блок 2. Теория. Синтаксис JSX (6 уроков, 1 час)
• Блок 3. Теория. Основы React (8 уроков, 1 час)
• Блок 4. Теория. Компоненты укладки (6 уроков, 1 час)
• Блок 5. Теория. Компоненты React (14 уроков, 2 часа)
• Блок 6. Практика. Компоненты (17 уроков, 2 часа)
• Блок 7. Теория. React Router (10 уроков, 1 час)
• Блок 8. Практика. Маршрутизация (5 уроков, 0,5 часа)
• Блок 9. Практика. Формы (10 уроков, 2 часа)
• Блок 10. Практика. Работа с сервером (6 уроков, 1 час)
• Блок 11. Теория. Redux (11 уроков, 1,5 часа)
• Блок 12. Практика. Redux (9 уроков, 2 часа)
• Блок 13. Практика. React Hooks (14 уроков, 1,5 часа)

Бонусная часть курса:

48 уроков общей продолжительностью более 23 часов

Бонусная часть курса состоит из 5 новых видеокурсов, из которых 2 наших полноценных коммерческих курса:

• Бонус 1. Тестирование React (3 урока, 15 минут)
• Бонус за компоненты более высокого порядка (4 урока, 24 минуты)
• Бонус 3. Премиум курс JavaScript (24 урока, 19,5 часов)
• Бонус 4. Премиум курс по EcmaScript 6 (17 уроков, более 3 часов)
• Бонус 5. Анимации в React (5 уроков, 33 минуты)

Конечный результат:

В качестве наглядного примера SPA-приложения мы выбрали приложение для создания и прохождения тестов. Это то, что разработано в курсе

Приложение состоит из двух частей: общей и административной.

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

Курс «React» — Дмитрий Лаврик

https://js.dmitrylavrik.ru/react/

Цена: 9 800 ₽

Цели курса:

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

Для новичков React сложнее, чем Vue.js. Но на нем есть несколько вакансий и фриланс-букингов.

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

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

Курс «Библиотека ReactJS с Нуля до Профи» — vladilen

https://vladilen.ru/react

Цена: 4 790 ₽

ОСНОВНАЯ ЧАСТЬ КУРСА:

• Блок 1. Теория. Что такое React (5 уроков, 1 час)
• Блок 2. Теория. Синтаксис JSX (6 уроков, 1 час)
• Блок 3. Теория. Основы React (8 уроков, 1 час)
• Блок 4. Теория. Компоненты укладки (6 уроков, 1 час)
• Блок 5. Теория. Компоненты React (14 уроков, 2 часа)
• Блок 6. Практика. Компоненты (17 уроков, 2 часа)
• Блок 7. Теория. React Router (10 уроков, 1 час)
• Блок 8. Практика. Маршрутизация (5 уроков, 0,5 часа)
• Блок 9. Практика. Формы (10 уроков, 2 часа)
• Блок 10. Практика. Работа с сервером (6 уроков, 1 час)
• Блок 11. Теория. Redux (11 уроков, 1,5 часа)
• Блок 12. Практика. Redux (9 уроков, 2 часа)
• Блок 13. Практика. React Hooks (14 уроков, 1,5 часа)

После прохождения курса вы сможете:

• Разрабатывайте реальные приложения
• Разрабатывать мобильные приложения
• Участвуйте в стартапах
• Выполнение всего комплекса front-end разработки.

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

https://ru.hexlet.io/courses/js-react

Цена: 3 900 ₽ в месяц

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

1. Создавайте полноценные приложения с помощью React
2. Упорядочить статус заявки в правильном порядке
3. Взаимодействие с серверной частью через API
4. Интегрируйте React со сторонними библиотеками.

Уроки курса:

Продолжительность 24 часа

1. Введение
   Ознакомьтесь с курсом и подготовьте среду.
2. Компоненты
   Познакомьтесь с основным узлом в реакторе — компонентом. Узнайте, как создать и отобразить его в браузере.
3. JSX
   Узнайте, как эффективно использовать jsx.
4. Реквизит
   Ознакомьтесь с механизмом отправки данных компонентам.
5. Работа с коллекциями
   Узнайте, как обрабатывать наборы данных внутри компонентов.
6. Различия между jsx и html
   Узнайте о функциях jsx, которые работают иначе, чем html.
7. Обработка имени класса
   Узнайте, как правильно работать с классами динамических компонентов.
8. Дети
   Узнайте, как создавать компоненты коробки, которые могут работать с вложенными компонентами.
9. Состояние
   Узнайте, как создавать компоненты с отслеживанием состояния. Узнайте, как добавить интерактивности.
10. Распоряжения
    Ознакомьтесь с особенностями системы событий React.
11. Автоматическое программирование
    Помните, что все вокруг происходит автоматически. Узнайте, как правильно работать с автоматами в React.
12. Формы
    Изучите принципы взаимодействия с формами.
13. Неизменность
    Научитесь работать со сложными структурами в неизменном стиле. Ознакомьтесь с библиотекой «помощник неизменности`.
14. Вложенные компоненты
    Управление хранением состояний и управлением событиями во вложенных компонентах.
15. Функциональные компоненты
    Рассмотрите возможность создания компонентов на основе функций и использования пространств имен.
16. Виртуальный дом
    Познакомьтесь с устройством React.
17. Тестирование
    Узнайте о проблемах, которые ждут разработчика при работе с исходным кодом.
18. Асинхронная обработка
    Узнайте о деталях работы с объектом события в асинхронном коде. Попрактикуйтесь в создании асинхронных обработчиков.
19. Жизненный цикл компонента
    Ознакомьтесь с жизненным циклом компонента в рабочем процессе.
20. Производительность
    Узнайте, как получить максимальную отдачу от React.
21. Ссылка
    Узнайте, как взаимодействовать с реальным DOM для интеграции сторонних компонентов.
22. Дополнительные материалы
    Они помогают глубже и всесторонне взглянуть на тему курса в открытых статьях и видеороликах, отобранных командой Hexlet.

Курс «React 0.14 Базовый» — ITVDN

https://itvdn.com/ru/video/react-js-essential

Цена: 750 норвежских крон

Что вы узнаете из этого видеокурса:

• Работайте с фреймворком React и создавайте простые веб-приложения
• Работа с компонентами и средами React
• Используйте маршрутизацию и ES2015
• Понимание архитектуры Flux, работа с API
• Создать полноценный SPA (одностороннее приложение)
• Хостинг разработанного веб-приложения.

Основные темы:

1. Расписание курсов
2. Что такое Реакт?
3. DOM-дерево
4. Как скачать библиотеку React
5. Как подключить библиотеку React
6. JSX
7. Как поместить компонент в дерево DOM
8. Варианты компонентов
9. Компоненты в React
10. Написание списка контактов в React
11. События в React
12. Краткое содержание.

Курс «React» — Академия IT

https://academiait.ru/course/react/

Стоимость: бесплатно

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

Уроки:

1. Введение
2. Настройка среды
3. Компоненты и элементы
4. Свойства компонента
5. Условный рендеринг
6. Статус компонента
7. Жизненные циклы компонентов
8. Списки и ключи
9. Формы
10. Контекст
11. Компоненты высшего порядка
12. Редукс.

Курс «React 001» — StackDev

https://react001.ru/

Стоимость: бесплатно

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

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

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

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

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

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