Курс по React
Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью React.
О курсе
Курс обновлён на последнюю версию React 19. Изучаем современный React и свежие версии библиотек!
В этом курсе мы с вами шаг за шагом пройдем от знакомства с основными идеями до использования самых продвинутых техник React v19.
Напишем современное SPA приложение и в процессе разберемся в самом React, настроим redux и подключим react router. Позже перенесем наше приложение на Next, обсудим виды рендеринга и займемся оптимизацией.
Вы в деталях узнаете классическую для React-приложений архитектуру: Unidirectional dataflow, и научитесь строить ее с использованием современной и наиболее популярной реализацией – Redux.
Кроме того, разберетесь с самым популярным React фреймворком - Next. Узнаете как React устроен, научитесь использовать эти знания для оптимизации.
Курс состоит из 5-и блоков:
- React база.
- Redux.
- React Router.
- Next.
- Оптимизации.
Детали программы смотрите далее.
Как организовано обучение?
Курс идёт 1.5 месяца.
До начала обучения: вводные материалы
Мы будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.
Онлайн-занятия с преподавателем 2 раза в неделю
Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.
Каждое занятие идёт примерно 1.5 часа.
Домашние задания, обратная связь по ним
Ваши решения присылаете преподавателю, он проверяет качество кода, использование правильных приёмов проектирования, даёт обратную связь.
Чат
Между занятиями доступен групповой чат для общения и вопросов преподавателю.
Курсовой проект
На этом курсе мы делаем курсовой проект: сервис заказа еды из разных ресторанов. Код для проекта вы напишете сами.
Результат
Вы знаете, понимаете и умеете использовать основные идеи React.
Вы умеете строить современное приложение с помощью React.
Вы знаете в каком направлении развиваться и на какие элементы инфраструктуры React стоит обратить внимание.
Сертификат
По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.
Хотя сертификатам в нашей профессии обычно не придают значения. Главное - знания и умения, которые вы получите, если будете полноценно участвовать в курсе.
Программа курса
Программа может быть дополнительно адаптирована под темп обучения и вопросы группы.
Блок 1
Создание React-приложений
- Что такое React и зачем он нам?
- Способы создания React приложения.
- Элементы - основные строительные блоки.
- Учимся использовать функциональные компоненты.
- Что такое хуки и зачем они нам? Правила их использования.
- Разбор встроенных хуков: useState, useEffect, useReducer, useRef, useCallback, useMemo и тд.
- Кастомные хуки.
- Базовая теория рендеринга.
- Работа с формами.
- Actions
- Работа со стилями (ccs modules).
- Работа с метадатой страницы.
- Передача данных через Context.
- Модальные окна, использование Portal.
Блок 2
Более сложные приложения, архитектура Redux.
- Способы организации данных в приложении.
- Как работает Redux.
- Учимся проектировать слой данных с Redux.
- Подключаем Redux Toolkit в наше приложение.
- Загружаем данные с сервера, подключаем thunk.
- Разбираемся с RTK Query.
Блок 3
Одностраничные приложения и роутинг
- Разбираемся с понятием роутинга в SPA.
- Учимся организовывать статичные роуты, динамичные, вложенные и т.п при помощи React router.
- Учимся выполнять навигацию, редиректить.
- Разбираем работу с состоянием роута - параметры пути, квери параметры.
Блок 4
Фреймворк Next.js
- Что такое Next и зачем он нам?
- Разбираемся с роутингом в Next.
- Учимся использовать Layout.
- Разбираемся с понятием SSR, SSG и другими типами рендеринга.
- Что такое React Server Components и как их использовать?
- Загрузка данных в приложении с Next, управление кешом приложения.
- Учимся использовать метадату страницы.
Блок 5
Оптимизации
- Детально разбираем логику рендеринга в React, погружаемся в работу Fiber.
- Учимся оптимизировать рендеринг в React.
- Рассматриваем различные паттерны и подходы в React.
- Разбор Suspense. lazy/dynamic иморты.
- Оптимизируем получение данных и работу с ними.
Курсовой проект
Сервис выбора ресторана и заказа еды, построенный с помощью двух подходов: на основе фреймворка Next и на связке React + Redux + React router + Vite
Преподаватель
Более 10 лет занимаюсь программированием, преимущественно frontend-разработкой около 5 лет.
Сейчас разработчик интерфейсов в Кинопоиске – стриминговом сервисе с еженедельной аудиторией в 8M пользователей. Наш основной стек – React, Next, GraphQL, TypeScript. Также являюсь лектором и ментором в Яндексе.
Что говорят о курсе участники?
Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.
Все отзывы являются честными. Мы не модерируем их.
Курс регулярно обновляется. Все отзывы относятся к последней версии курса.
Гарантия
- Если объяснения будут вам непонятны
- Если курсы не дадут вам новых знаний и умений
- Если вы не сможете подключиться к системе онлайн-обучения
…то вы сможете получить деньги назад.
Для этого достаточно не позже окончания первой недели курса написать, что именно вас не устраивает, и тогда ваше участие будет прекращено, а вы получите деньги обратно.
Для компаний
У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.
- При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт, есть лицензия.
- Для зарубежных компаний выдаём инвойс на английском языке.
Физическим лицам даём справку об оплате, если нужна компании для компенсации расходов и документы для налогового вычета: детали для РФ.
Подписаться на уведомления по курсу
Если остались вопросы – посмотрите в часто задаваемых, напишите на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.
Комментарии
<code>, для нескольких строк кода — тег<pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)