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.