Все курсы

Курс по React

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

React
Ближайшая группа
Перейти к записи

О курсе

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

Напишем своё SPA приложение, в процессе разберемся в самом React, настроим redux, подключим react-router-domV6. Позже перенесем наше приложение на Next и займемся оптимизацией.

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

Кроме того, разберетесь с самым популярным React фреймворком - Next. Узнаете как React устроен, научитесь использовать эти знания для оптимизации.

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

  1. React база
  2. Redux
  3. React-router-dom
  4. Next
  5. Оптимизация

Детали программы смотрите далее.

Как организовано обучение?

Курс идёт примерно 1.5 месяца.

До начала обучения: Git/Guthub (если надо)

Мы будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

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

Каждое занятие идёт примерно 1.5 часа.

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

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

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

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

На этом курсе мы делаем курсовой проект: сервис заказа еды из разных ресторанов. Большую часть кода для проекта вы напишете сами.

Результат

Вы знаете, понимаете и умеете использовать основные идеи React.

Компонентный подход и архитектура одностороннего потока данных(Redux) – ваше второе "Я".

Вы умеете строить как многоразовые компоненты так и SPA с помощью React.

Вы знаете в каком направлении развиваться и на какие элементы инфраструктуры React стоит обратить внимание.

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

Блок 1

База React.

  • Что такое React и зачем он нам?
  • Способы создания React приложения.
  • Элементы - основные строительные блоки.
  • Учимся использовать функциональные компоненты.
  • Что такое хуки и зачем они нам?
  • Правила хуков.
  • Встроенные хуки: useState, useEffect/useLayoutEffect, useReducer, useRef, useCallback, useMemo и тд.
  • Кастомные хуки.
  • Базовая теория рендеринга.
  • Работа с формами.
  • Работа со стилями (ccs modules).
  • Работа с изображениями.
  • Context.
  • Portal.

Блок 2

Redux

  • Способы организации данных в приложении.
  • Как работает Redux.
  • Учимся проектировать слой данных с Redux.
  • Подключаем Redux Toolkit в наше приложение.
  • Загружаем данные с сервера, подключаем thunk.
  • Разбираемся с RTK Query.

Блок 3

React-router-dom

  • Разбираемся с понятием роутинга в SPA.
  • Учимся организовывать статичные роуты, динамичные, вложенные и тп.
  • Учимся выполнять навигацию, редиректить.
  • Разбираем работу с состоянием роута - параметры пути, квери параметры.

Блок 4

Next

  • Что такое Next и зачем он нам?
  • Разбираемся с роутингом в Next.
  • Учимся использовать Layout.
  • Разбираемся с понятием SSR, SSG и другими типами рендеринга.
  • Что такое северные компоненты и как их использовать?
  • Загрузка данных в приложении с Next, управление кешом приложения.
  • Учимся использовать мету страницы.

Блок 5

Оптимизация

  • Детально разбираем логику рендеринга в React, погружаемся в работу Fiber.
  • Учимся оптимизировать рендеринг в React.
  • Рассматриваем различные паттерны и подходы в React.
  • Оптимизируем получение данных и работу с ними.

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

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

Предварительные требования

  • Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
  • Знание современного JavaScript.
  • Интернет 256kb/s или быстрее для видео.

Преподаватель

Photo
Андрей ЗубковВедёт курс с 24 июня 2024

Более 10 лет занимаюсь программированием, преимущественно frontend-разработкой около 5 лет.

Сейчас разработчик интерфейсов в Кинопоиске – стриминговом сервисе с еженедельной аудиторией в 8M пользователей. Наш основной стек – React, Next, GraphQL, TypeScript. Также являюсь лектором и ментором в Яндексе.

Что говорят о курсе участники?

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

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

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.

  • При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт, есть лицензия.
  • Для зарубежных компаний выдаём инвойс на английском языке.

Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.

Если остались вопросы – посмотрите в часто задаваемых, напишите на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Комментарии вернулись :)

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.