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

Условно можно считать, что одна тема — одно часовое занятие. Как всегда, всё очень идвидуально. В среднем React со всем обвесом мы разбираем примерно за два месяца. Предварительное изучение джаваскрипта занимает примерно 3 месяца.

Темы занятий

1. Покемоны: пропсы, стейт, мемоизация
   • props, destructuring
   • useState
   • setState(callback)
   • memo, useCallback
   • пагинация, useEffect
   • селект с выбором размера страницы
   • keys
2. Градиент
   • контролируемые инпуты
   • useMemo
3. Zoom, jest
4. Tree menu (jetbrains): рекурсия, useContext
5. Контролируемые инпуты
   • инпут
   • радио-баттоны
   • чекбокс
   • мульти-чекбокс
   • фильтрация
   • react-testing-library
6. Вложенные фильтры (avito-like)
7. Wordle: addEventListener
8. Кастомные хуки
   • bigfrontend.dev
9. Redux
   • таблица пользователей и форма добавления
   • useDispatch, useSelector, connect
   • добавляем redux в покемонов
   • thunk для загрузки покемонов
   • middleware на переключение страницы
   • своя реализация redux (getState, dispatch, subscribe)
   • jest
   • своя реализация redux: middleware
   • своя реализация react-redux: connect, useSelector, useDispatch
   • redux-toolkit
10. Компоненты на классах, методы жизненного цикла

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

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 занятия)
   • Обязательно обсудим, когда придет время искать работу
4. Тайпскрипт
   • Пишем имплементацию любой стандартной структуру данных (двусвязный список, бинарное дерево) с метадами, походими на методы массива
   • Таблица для отрисовки массива произвольных объектов, как в любой UI-библиотеке
   • Избранные задачки из TypeScript Challange
5. Алгоритмы (от пары занятий до бесконечности)
   • Алгоритмы и литкод — важная большая тема, но на первом этапе можно забить

Домашние задания по реакту

1. Покемоны

• примерный макет
• моковые данные
• https://pokeapi.co/api/v2/pokemon?offset=0&limit=12 — API со списком покемонов
• https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png картинка, вместо 25 айдишник покемона

2. Градиент

• скриншот с заданием

3. Меню Джетбрейнс

• описание
• https://www.figma.com/file/DyiJTQTWTJ3W5qqS6qgo3H/Jetbrains-Menu?type=design&node-id=0%3A1&mode=design&t=qWBWQ7XkuOKbWtbE-1 макет в фигме

4. Zoom

• Задание от Яндекса

5. Контролиуемые компоненты (инпуты, радиобаттоны, мультичекбоксы)

• Макет: https://www.figma.com/file/wOzT8lDg50Ymjoo8DJOmIK/
• Данные

6. Wordle

• Делаем копию Wordle

7. Фильтры Авито

• описание со скриншотами
• моковые данные