Roadmap для изучения React + Redux
Эти материалы не предназначены для самостояельного обучения. Это скорее макеты и данные, чтобы я ничего не забыл. При этом если мы что-то из списка забыли разобрать на занятии, вы можете мне напомнить и мы разберем.
Как начать
- Изучение реакта занимает примерно половину времени, потраченного на изучение JavaScript
- У реакта очень хорошая документация! Читаем по порядку раздел LEARN REACT, в нем все, что нам нужно для выполнения заданий
- Если есть вопрос, ка работает что-то конкретное, например useState, смотрим в разделе Reference
- Для создания приложения используем Vite
- Чтобы шарить порт в вс коде (и я мог открыть приложение у себя) добавляем настройку
- В вс коде можно пошарить порт
Покемоны
Зачем: типовая задача отрисовки карточек, декомпозиция на копоненты оптимальное хранение данных в стейте, работа с api, useState/useEffect/useCallback/memo
- Нарисовать по макету (макет условный, пиксель перфект не нужен)
- Макет в Фигме
- Моковые данные
- https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png картинка, вместо 25 айдишник покемона
- сделать стейт Пойман / Не пойман
- сделать счетчик пойманных покемонов
- библитека classnames
- css-modules
- Загрузка данных с бэкенда
- Кнопка Загрузить покемонов
- https://pokeapi.co/api/v2/pokemon?offset=0&limit=12 — API со списком покемонов
- Кнопки Вперед/Назад
- Select с возможностью выбора количества покемонов на странице (6, 12, 24, 48)
- Дисэйблим кнопку Назад на первой странице и кнопку Вперед на последней странице
- Состояни загрузки: idle/loading/success/failure *- Зачем *нужны ключи
- Задание со звездочкой: отмена запросов через AbortController
Прогресс-бар
Зачем: в основном ради верстки
- Макет в Фигме
- псевдоэлементы after/before
- position absolute/relative
- unit-тест на функцию, определяющую ширину закрашенной области
- svg-картинки, импорт картинок
Форма с градиентом
Зачем: работа с контролируемыми инпутами
- Макет в Фигме
- Изменение значений в инпутах не меняет фон
- Фон меняется по клику на кнопку Paint
- Кнопка Clear очищает инпуты, но не фон
- Справа на макете скриншот того, как это тестовое задание выглядело в реальной жизни
Календарь отпусков
Зачем: работа с более сложными данными, больше unit-тестов
- Макет в Фигме
- Комментарии и данные в макете
Контролируемые инпуты
Зачем: типовые компоненты для ввода данных, переиспользование компонентов
- Макет в Фигме
- RangeInput
- BanksSelector
- RadioSelector
- Фильтрация реальных данных
Категории Avito
Зачем: прикладная рекурсия
- Макет с описанием
- Данные (нужно скачать и положить в проект)
- Тесты, react-testing-library
Wordle
Зачем: подумать, как харанить стейт, работа с вводом данных
- Делаем игру Wordle
- Пример раскрашивания слов
- addEventListener, событие ввода с клавиатуры
- Тесты, react-testing-library
- useReducer
Redux
- таблица пользователей и форма добавления
- Переписываем покемонов через Redux
- useDispatch, useSelector, connect
- добавляем redux в покемонов
- thunk для загрузки покемонов
- middleware на переключение страницы
- middleware для сохранения пойманных покемонов в localStorage
- страница отдельного покемона
- своя реализация redux (getState, dispatch, subscribe)
- своя реализация redux: middleware
- своя реализация react-redux: connect, useSelector, useDispatch
Подтверждение кода через СМС
Зачем: пример максимально реалистичного задания, POST-запросы, мультистраничность
- Макет в Фигме
- Работа с API
- react-router
- redux
- react-testing-library
- redux-toolkit
- своя реализация createSlice, createAsyncThunk
Кастомные хуки
Что можно изучить после реакта
- Гит (1-2 занятия)
- Просто перечислю команды: cherry-pick, reset, fetch, checkout, branch, revert, clone, init, status, add, commit, push, pull, merge, rebase, stash, log
- На гитхабе играем в игру, где вы бедный джуниор, а я злой синьор, который заставляет исправлять исправлять конфликты в пулл-реквесте.
- Вебпак (1 занятие)
- Пишем свой конфиг вебпака, котрорый собирает простое приложенеи на реакте с тайпскриптом и стилями
- Разбор задач и вопросов с собееседований (1-3 занятия)
- Обязательно обсудим, когда придет время искать работу
- Event Loop, Rendering
- HTTP, CORS, CSRF, Cookie
- Тайпскрипт
- Пишем имплементацию любой стандартной структуру данных (двусвязный список, бинарное дерево) с метадами, походими на методы массива
- Таблица для отрисовки массива произвольных объектов, как в любой UI-библиотеке
- Избранные задачки из TypeScript Challange
- Алгоритмы (от пары занятий до бесконечности)
- Алгоритмы и литкод — важная большая тема, но на первом этапе можно забить
🎨 Менторство по фронтенду
Задачи по джаваскрипту с codewars.com
Задачи по асинхронности (промисы, ивент луп)
Материалы для изучения React и Redux
Материалы для изучения TypeScript
Сколько в среднем занимает обучение
Все остальные вопросы о менторстве
Какие темы по джаваскрипту мы изучаем
Какие книги читать для изучения джаваскрипта
Методы массивов в джаваскрипте
В чем разница между Codewars и Leetcode
Моковые собеседования по фронтенду
Занятия по алгоритмам (Leetcode)