Roadmap для изучения React
Условно можно считать, что одна тема — одно часовое занятие. Как всегда, всё очень идвидуально. В среднем React со всем обвесом мы разбираем примерно за два месяца. Предварительное изучение джаваскрипта занимает примерно 3 месяца.
Темы занятий
- Покемоны: пропсы, стейт, мемоизация
- Покемоны: пагинация, useEffect, keys
- Градиент: контролируемые инпуты, useMemo
- Tree menu (jetbrains): рекурсия, useContext
- Контролируемые инпуты (фильтры), react-testing-library
- Вложенные фильтры (avito-like)
- Wordle: addEventListener
- Pure redux. Redux в покемонах
- Thunk для загрузки покемонов, middleware на переключение страницы
- Своя реализация Redux, jest
- redux-toolkit
- Компоненты на классах, методы жизненного цикла
Что можно изучить после реакта
- Гит (1-2 занятия)
- Просто перечислю команды: cherry-pick, reset, fetch, checkout, branch, revert, clone, init, status, add, commit, push, pull, merge, rebase, stash, log
- На гитхабе играем в игру, где вы бедный джуниор, а я злой синьор, который заставляет исправлять исправлять конфликты в пулл-реквесте.
- Вебпак (1 занятие)
- Пишем свой конфиг вебпака, котрорый собирает простое приложенеи на реакте с тайпскриптом и стилями
- Тайпскрипт (1-3 занятия)
- Пишем имплементацию любой стандартной структуру данных (двусвязный список, бинарное дерево) с метадами, походими на методы массива
- Таблица для отрисовки массива произвольных объектов, как в любой UI-библиотеке
- Избранные задачки из TypeScript Challange
- Разбор задач и вопросов с собееседований (1-3 занятия)
- Обязательно обсудим, когда придет время искать работу
- Алгоритмы (от пары занятий до бесконечности)
- Алгоритмы и литкод — важная большая тема, но на первом этапе можно забить
Домашние задания по реакту
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, решаем тестовые с собеседований и пишем проект.
