Все курсы

Курс по 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 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Каждое занятие идёт около 2 часов.

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

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

Чат

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

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

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

Результат

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

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

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

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

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

Блок 1

База React.

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

Блок 2

Redux

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

Блок 3

React-router-dom

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

Блок 4

Next

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

Блок 5

Оптимизация

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

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

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

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

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

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

Photo
Артём СенюковВедёт курс с 22 февраля 2022

Программированием занимаюсь много лет, фронтенд-разработкой с 2015 года. Ранее занимался разработкой CRM-системы в Tinkoff.

Сейчас старший разработчик интерфейсов в Яндексе (стек React, Next, GraphQL, TypeScript).

Также читаю лекции, обучаю в Яндексе(ШРИ). Провожу собеседования по frontend-технологиям.

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

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

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

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

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

Гарантия

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

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

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

Для компаний

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

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

Физические лица также могут сделать налоговый вычет: детали для РФ.

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

Комментарии

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