Базовый курс по React и Redux от разработчика ВК

Складчина: Базовый курс по React и Redux от разработчика ВК

На видеозаписи мы будем подробно изучать технологию, рассуждая о подходах к проектированию, их плюсах и минусах. Будет много примеров и проектов, потому что в одном проекте тяжело показать всё, что может пригодиться в работе.

В курсе не будет сухих выжатых видео. Я буду рассуждать на основе личного опыта. Так что если вы любитель сухих видосов, то, наверное, курс вам не подойдет.

В конспекте будет выжимка, чтобы вы могли быстро освежить в памяти, о чем была речь.

Программа

• Как работает реакт. Быстрый запуск проекта с create-react-app.

• JSX. Как отрендерить компонент: условный рендеринг, списки и ключи. Тег Fragment. Плагин React-devtools.

• О компонентном подходе в разработке. Создание компонентов. Работа с пропсами. Валидация пропсов.

• Стейт компонента и когда он нужен. Однонаправленный поток данных. Обработка событий.

• Рефакторинг и архитектура. Правило 100. Куда положить состояние. Контекст реакта.

• Навигация по приложению. React-router. Приватные роуты. Редирект и 404 страница.

• Как получить данные с сервера. Разница между классовым и функциональным компонентом, когда какой использовать. Методы жизненного цикла, когда какой использовать. Обработка ошибок в реакте.

• Формы. Контролируемые и неконтролируемые компоненты, когда что использовать. Обработка событий формы.

• Рефы. Когда их использовать. Работа с нереактовскими библиотеками в реакте.

• Рефакторинг и паттерны в реакте. Контейнер. Компоненты высшего порядка. Рендер пропы. Порталы.

• Оптимизация и производительность. Почему вообще появляются лаги. Как найти просадки в производительности. Профайлер реакта и профайлер браузера. Что влияет на производительность в реакте и как это поправить.

• Хуки. Что это и зачем они нужны. Когда использовать хуки, а когда классы.

• Redux. Понимаем редакс. Middlewares. Запросы на сервер из редакса.

• Рефакторинг и архитектура. Селекторы. Проектирование по фичам. Как понять, какую архитектуру проектировать.

• Бонусы. Упрощение работы с redux-toolkit. Анимация с react-transition-group. Выкатка приложения на github-pages.

• Эпилог. Подводим итоги и строим план обучения на будущее.