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

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

Темы занятий

1. Покемоны: пропсы, стейт, мемоизация
2. Покемоны: пагинация, useEffect, keys
3. Градиент: контролируемые инпуты, useMemo
4. Tree menu (jetbrains): рекурсия, useContext
5. Контролируемые инпуты (фильтры), react-testing-library
6. Вложенные фильтры (avito-like)
7. Wordle: addEventListener
8. Pure redux. Redux в покемонах
9. Thunk для загрузки покемонов, middleware на переключение страницы
10. Своя реализация Redux, jest
11. redux-toolkit
12. Компоненты на классах, методы жизненного цикла

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

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

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

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

5. Wordle

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

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

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

Учу фронтенду как профессии

Обучаю веб-программированию с целью трудоустройства. Готовлю к позиции Junior Frontend Developer: изучаем верстку, Javascript и React, решаем тестовые с собеседований и пишем проект.