Как выучить React?

Домашние задания

Покемоны

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

Градиент

• картинка

Кроты

• макет

Каруселька-слайдер

• https://www.figma.com/file/HFTJH1OxTp7jWMwxksBdlr
• данные

Ипотечные программы с фильтром

• https://www.figma.com/file/mCgcZMzijWCUpiawhDnpxt
• данные

Меню

• описание
• https://www.figma.com/file/L97JMoveX2scWgtX5UeIH8 макет в фигме

Вводные статьи

1. Передача данных через props
2. useState: изменение состояния
3. Транспиляция JSX, рендеринг списка
4. React.memo, keys: базовая оптимизация
5. Обратный поток данных, useCallback: кэширование функций
6. useReducer: атомарность изменения стейта
7. useEffect: асинхронные запросы и синхронизация с localstorage
8. react-roter: постраничная навигация
9. useContext: работа с контекстом

1 занятие

• Рисуем карточку покемона.
• Рисуем список карточек.
• Делаем подгрузку по нажатию на кнопку

2 занятие

• Добавляем роутинг
• Главная страница с описанием сайта
• Страница-каталог с пагинацией
• Если успеваем, кэшируем покемонов в объекте

3 занятие

• Добавляем страницу отдельного покемона
• Делаем кнопку помать/отпустить
• Стейт храним в локал сторадже

4 занятие

• Добавляем редакс
• Редакс очень простой
• Мидлвара thunk
• Лучший способ понять Redux — написать свой

5 занятие

• Модалка со случайным покемоном
• Анимации
• CSS-in-JS

Что еще?

• Композиция из умных и глупых компонентов?
• Рефы?
• Пишем тесты?
• Обрабатываем ошибки?
• Переписываем на контекст и хуки?
• Переписываем на тайпскрипт?
• Формы (formik, final-form)?
• Lazy load?
• Redux Ducks?
• Drug’n’drop?

Используем библиотеки:

• lodash
• classnames