Roadmap для изучения React + Redux

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

Как начать

Покемоны

Зачем: типовая задача отрисовки карточек, декомпозиция на копоненты оптимальное хранение данных в стейте, работа с api, useState/useEffect/useCallback/memo

  1. Нарисовать по макету (макет условный, пиксель перфект не нужен)
    • Макет в Фигме
    • Моковые данные
    • https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png картинка, вместо 25 айдишник покемона
    • сделать стейт Пойман / Не пойман
    • сделать счетчик пойманных покемонов
    • библитека classnames
    • css-modules
  2. Загрузка данных с бэкенда
    • Кнопка Загрузить покемонов
    • https://pokeapi.co/api/v2/pokemon?offset=0&limit=12 — API со списком покемонов
    • Кнопки Вперед/Назад
    • Select с возможностью выбора количества покемонов на странице (6, 12, 24, 48)
    • Дисэйблим кнопку Назад на первой странице и кнопку Вперед на последней странице
    • Состояни загрузки: idle/loading/success/failure *- Зачем *нужны ключи
    • Задание со звездочкой: отмена запросов через AbortController

Прогресс-бар

Зачем: в основном ради верстки

Форма с градиентом

Зачем: работа с контролируемыми инпутами

Календарь отпусков

Зачем: работа с более сложными данными, больше unit-тестов

Контролируемые инпуты

Зачем: типовые компоненты для ввода данных, переиспользование компонентов

Категории Avito

Зачем: прикладная рекурсия

Wordle

Зачем: подумать, как харанить стейт, работа с вводом данных

Redux

Подтверждение кода через СМС

Зачем: пример максимально реалистичного задания, POST-запросы, мультистраничность

Кастомные хуки

Что можно изучить после реакта

  1. Гит (1-2 занятия)
    • Просто перечислю команды: cherry-pick, reset, fetch, checkout, branch, revert, clone, init, status, add, commit, push, pull, merge, rebase, stash, log
    • На гитхабе играем в игру, где вы бедный джуниор, а я злой синьор, который заставляет исправлять исправлять конфликты в пулл-реквесте.
  2. Вебпак (1 занятие)
    • Пишем свой конфиг вебпака, котрорый собирает простое приложенеи на реакте с тайпскриптом и стилями
  3. Разбор задач и вопросов с собееседований (1-3 занятия)
    • Обязательно обсудим, когда придет время искать работу
    • Event Loop, Rendering
    • HTTP, CORS, CSRF, Cookie
  4. Тайпскрипт
    • Пишем имплементацию любой стандартной структуру данных (двусвязный список, бинарное дерево) с метадами, походими на методы массива
    • Таблица для отрисовки массива произвольных объектов, как в любой UI-библиотеке
    • Избранные задачки из TypeScript Challange
  5. Алгоритмы (от пары занятий до бесконечности)