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

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

• Неделя 1

  +Урок 1: Введение в React

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

  Подробнее...

  • Введение

    • Что такое React?
    • Что такое Virtual DOM?
    • Что такое reconciliation?
    • Алгоритм рендеринга React.

  • Настройка окружения

    • Конфигурация стартовой точки.
    • Настройка редактора для комфортной работы с React.
    • Подготовка браузера.

  • JSX

    • Что такое JSX?
    • Создание атомарных элементов.
    • Правила работы с JSX.

  • Компоненты

    • Что такое компонент?
    • Создание функциональных компонентов.
    • Композиция.
    • Популярные ошибки при работе с React-компонентами.

  Практика

  • Научимся настраивать проект для разработки.
  • Конвертируем HTML & CSS разметку в полноценный React-компонент.
  • Сделаем первые полноценные компоненты с помощью React.

  +Урок 2: Работа с данными в React

  Разработка становиться особо интересной с добавлением интерактива! В этом уроке мы научимся оживлять приложение динамикой. 🏎

  Подробнее...

  • Пропсы, потомки и контекст

    • Как работает поток данных в React?
    • Для решения каких задач нужны пропсы.
    • Правила применения пропс.
    • Популярные ошибки при работе с пропс.
    • Что такое потомки React?
    • Как пользоваться потомками правильно?
    • Знакомство с React контекст.
    • Когда применять контекст хорошо, а когда плохо?

  • Хуки

    • Как работают React-хуки?
    • Разбор основных хуков: useState, useContext.

  • Состояние

    • Что такое стейт?
    • Как правильно управлять состоянием компонента?
    • Популярные ошибки при работе с состоянием.

  Практика

  • Наполним наши компоненты данными с помощью пропс и потомков.
  • Научимся правильно переиспользовать компоненты.
  • Оживим наши компоненты с помощью состояния.

• Неделя 2

  +Урок 3: Работа с сетью в React

  Фактически все приложения в интеренете в той или иной форме общаются с сервером. Мы на практике разберёмся как отправлять запросы на сервер 🛣. А так же оптимизируем наше приложение на максимальную производительность.

  Подробнее...

  • Продвинутые хуки

    • Выполнение логики на разных этапах жизненного цикла компонента с помощью хука useEffect.
    • Оптимизация производительности с помощью хуков useCallback и useMemo.

  • Сеть

    • Введение в концепцию общения клиент-сервер.
    • Fetch API.
    • React Query.

  Практика

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

  +Урок 4: Роутинг в React

  Не секрет, что полноценное приложение — это естественно, не одна страница, а целый комплекс! В этом уроке мы научимся связывать React-приложение в настоящий Single-Page Application (SPA) с помощью react-router.

  Подробнее...

  • Теория

    • Что такое SPA-приложение?
    • Как правильно использовать DOM-интерфейсы для клиентской навигации?
    • Концепт публичных и приватных страниц.
    • Лучшие практики при работе с навигацией в SPA.

  Практика

  • Научимся создавать страницы в React-приложении.
  • Изучим особенности работы с приватными и публичными страницами.

• Неделя 3

  +Урок 5: Грамотное составление форм в React приложении

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

  Подробнее...

  • Теория

    • Нативный подход составления форм.
    • Создание форм с помощью библиотеки react-hook-form.
    • Валидация форм с помощью мощного валидатора yup.
    • Популярные ошибки при работе с формами.
    • Лучшие практики при работе с формами.

  Практика

  • Научимся создавать простые формы.
  • Изучим особенности при работе со сложными формами.
  • Научимся валидировать формы.

  +Урок 6: Знакомство с MobX

  MobX — это альтернативная библиотека для стейт-менеджмента по отношению к Redux. Библиотека MobX придерживается немного иного подхода в построении хранилищ и мутациям данных. С изучением этой библиотеки мы научимся выносить состояние компонента во внешние хранилища данных.

  Подробнее...

  • Теория

    • Что такое MobX?
    • Знакомство с базовой моделью обмена данных MobX - React.
    • Знакомство с observables и subscriptions.
    • MobX против Redux.
    • Лучшие практики применения MobX.

  Практика

  • Подключим MobX к проекту.
  • Применим лучшие практики MobX.

• Неделя 4

  Персональный проект "Виджет погоды" на JavaScript, MobX, CSS-modules

  

• Неделя 5

  +Урок 7: Знакомство с Redux

  И вот, настало время научиться работать с централизованным состоянием в React-приложении. В этом уроке мы изучим ключевые аспекты связи React и Redux.

  Подробнее...

  • Теория

    • Что такое Redux и зачем он нужен в React-приложении?
    • Как правильно подключить Redux к React-приложению.
    • Объявления атомарных инструкций с помощью Action.
    • Описание бизнес-логики с помощью Reducer.
    • Управление состоянием с помощью Store.
    • Вызов действия внутри React-компонента.
    • Чтение Redux состояния внутри React-компонента.
    • Лучшие практики при работе с Redux.
    • Правильная композиция Redux-составляющей проекта.

  Практика

  • Подключим Redux к React.
  • Научимся правильно работать с Redux в React-приложении.

  +Урок 8: Асинхронный Redux (бонус)

  Научимся делать запросы к API с помощью перехватчика Redux Thunk и Redux Saga. Изучим особенности при работе с асинхронным кодом в React-приложении.

  Подробнее...

  • Redux Saga

    • Концепция «перехватчик».
    • Асинхронность и Redux.
    • Введение в понятие эффектов Redux Saga.
    • Блокирующие и не блокирующие эффекты.
    • Отмена задач.
    • Лучшие практики по перехвату и обработке ошибок.

  • Redux Thunk

    • Отправка REST-запросов с помощью Redux Thunk.
    • Популярные ошибки при работе с асинхронными операциями.
    • Лучшие практики при работе с разными типами запросов.

  Практика

  • Научимся загружать данные с удалённого API.
  • Научимся отправлять данные на удалённый API.

• Неделя 6

  +Урок 9: Переход на TypeScript

  Экосистема современного фронтенд давно перешла к использованию инструментов, делающих жизнь разработчиков (и не только) лучше. Один из таких инструментов — TypeScript. Вместе мы правильно настроим тайпскриптовый микроклимат проекта, чтобы TypeScript приносил пользу и помогал писать код.

  Подробнее...

  • Теория

    • Почему TypeScript?
    • Введение в статическую строгую типизацию.
    • Знакомство с базовыми типами и аннотациями.
    • Как правильно подключить TypeScript к React-проекту?
    • Как правильно переводить JavaScript React-приложение на TypeScript?
    • Лучшие практики использования TypeScript в React-приложении.

  Практика

  • Подключим TypeScript к проекту.
  • Применим лучшие практики TypeScript.

  +Урок 10: Тестирование программного кода

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

  Подробнее...

  • Теория

    • Ключевые особенности концепции Test Driven Development (TDD).
    • Ключевые особенности концепции Behavioural Driven Development (BDD).
    • Что такое интеграционное тестирование?
    • Что такое end-to-end тестирование?
    • Знакомство с фреймворком для тестирования JavaScript Jest.
    • Тестирование React компонентов при помощи React Testing Library.
    • Тестирование React.
    • Тестирование Redux.
    • Тестирование MobX.

  Практика

  • Покроем тестами React-составляющую приложения.
  • Покроем тестами Redux-составляющую приложения.
  • Покроем тестами MobX-составляющую приложения.

• Неделя 7

  +Урок 11: Styled Components (видеоурок)

  Существует два больших лагеря, скандирующих за стилизацию приложения через классический CSS и за стилизацию в JavaScript (CSS in JS). В данном уроке мы подробно разберём лучшее на данный момент решения для стилизации React-приложения посредством JavaScript — styled-components.

  Подробнее...

  • Теория

    • Что такое CSS in JS?
    • Чем хорош данный подход?
    • Каковы преимущества и недостатки по сравнению с классическим подходом стилизации через CSS-файлы?
    • Как составлять правильную композицию Styled-компонентов?
    • Как правильно применять Styled-компоненты с TypeScript?

  Практика

  • Научимся секретным методологиям применения styled-components
  • Освоим лучшие практики при использовании данной библиотеки

• Неделя 8

  Персональный проект "Менеджер задач" на TypeScript, Redux, styled-components

  

• Неделя 9

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

  

• Неделя 10

  +Подведение итогов основного обучения

  Итоги работы над персональными проектами.

  Подробнее...

  Персональный проект "Фитнес трекер" — стек на выбор