React Углубленный

На первом уроке мы рассмотрим общий план уроков курса. Вы научитесь создавать React-проект на основе TypeScript. Сможете добавить роутинг с помощью библиотеки React Router. Рассмотрите способ настройки базового Redux store с простым редюсером для отображения списка элементов. Также создадите компонент для отображения информации о фильмах и настроите стиль СSS для него.

На уроке вы рассмотрите, что такое CSS препроцессоры на примере Sass. Научитесь использовать CSS модули и писать базовые @media запросы. Настроите стили для карты фильма и layout страницы.

Рассмотрим UI библиотеки, их типы и преимущества. Сделаем обзор двух популярных UI-библиотек Material UI и Bootstrap. Познакомимся с подходом CSS-in-JS, его преимуществами и недостатками. Рассмотрим базовые возможности библиотек emotion и styled-components.

На уроке познакомимся с TMDB API, чтобы отобразить список фильмов. Настроим developer account и получим token. Сделаем запрос в Now Playing API с нашего проекта с помощью fetch. Сохраним список фильмов в Redux Store. В конце подключим библиотеку Material UI и используем ее компоненты вместо ручной стилизации.

На уроке рассмотрим использование контекста в React вместе с useContext хуком. Научимся использовать хук useRef. Применим порталы для рендеринга вне поддерева элемента. Рассмотрим дополнительно error boundary для обработки ошибок в компонентах.

Научитесь создавать собственные (кастомные) хуки на примере useIntersectionObserver для загрузки фильмов во время скроллинга страницы. Посмотрите на потенциальный memory leak при использовании useEffect.

Вспомним главные особенности HTML форм. Ознакомитесь с общими концепциями библиотек Formik и React Hook Form и их отличиями. Создадите форму для фильтрации фильмов с помощью React Hook Form и компонентов Material UI.

Рассмотрим понятия мемоизации на примере React.memo, useMemo и useCallback. Посмотрим, когда следует и не следует применять React.memo и какие преимущества она дает. Используем эти функции в нашем проекте на практике.

На уроке мы познакомимся с React Developer Tools для исследования дерева компонентов и профайлинга. Также рассмотрим альтернативные способы программного профайлинга части дерева компонентов. Научимся использовать React.lazy и Suspense для динамической загрузки модулей. Дополнительно посмотрим возможности React Router для динамической загрузки маршрутов.

Рассмотрим проблемы, возникающие при работе с core Redux библиотекой на примере кода boilerplate. Познакомимся с библиотекой Redux Toolkit, которая призвана решить эти проблемы. Посмотрим на возможности RTK Query для загрузки данных в приложениях Redux.

На уроке перепишем Redux store и запросы в API, используя RTK Query. Рассмотрим способ реализации infinite scroll с помощью RTK Query. Также будем использовать Redux DevTools для исследования запросов в store.

Познакомимся с языком запросов GraphQL и основными элементами синтаксиса для запросов и изменения данных на сервере. Рассмотрим систему типов GraphQL для создания схемы данных.

Обсудим популярные библиотеки для работы с GraphQL React и научимся на практике делать запросы.

Рассмотрим понятие аутентификации и авторизации. Добавим возможность логина через постороннюю identity provider на примере Auth0. Создадим частные маршруты для защиты страниц, требующих логину. Познакомимся с протоколом OpenID Connect и JWT токенами. Научимся делать запросы к API, что требует авторизации через access токены.

Познакомимся с концепцией Server-side Rendering (SSR) и сравним ее с привычным рендерингом. Рассмотрим Server React DOM APIs и hydration, позволяющие реализовать SSR. Выполним обзор React meta-frameworks (Next.js, Remix и др.). и их роль в SSR. Рассмотрим React Server Components и их отличие от обычного Server-side Rendering.

Поговорим о том, какие преимущества дает написание тестов разработчику. Рассмотрим основные типы тестов и их применение в frontend-приложениях. Познакомимся с Jest Testing Framework и его альтернативами. Научимся тестировать компоненты с помощью React Testing Library.