Аби навчання React було ефективним, попрактикуємось у розробці застосунків: використовуватимемо продуктовий кейс із реалістичними задачами та потребами. Розберемося в найефективніших підходах до розв'язання проблем, з якими може стикатися фронтенд розробник. Сформуємо інтуїтивне розуміння архітектурних патернів, що стане фундаментом і під час розробки з React, і під час подальшої роботи з іншим фреймворком.Базові поняття — Функціональний підхід та декларативність у розробці GUI.— Компоненти, JSX.— Виведення даних, обробка DOM подій.— Робота зі станом, рендер компонентів.— Взаємодія з браузерними API.— Використання бандлера Vite для швидкого старту проєкту.Клієнт-серверна комунікація— Синхронізація із зовнішніми джерелами даних.— Асинхронні стани UI та їх реалізація з Suspense і ErrorBoundary.— Нормалізація та мемоізація зовнішніх даних.Архітектура застосунку — Декомпозиція компонентів, композиційні патерни.— Патерни та антипатерни роботи зі станом.— Бібліотеки для керування станом: скінченні автомати, редюсери, атоми, сигнали.— Розробка компонентів в ізоляції за допомогою Storybook.— Структура директорій застосунку.Екосистема— Роутинг із використанням react-router.
|
— Робота з формами, бібліотека react-hook-form.— Ефективна робота з API за допомогою react-query.— Принципи анімації в React з css-transition-group, framer-motion.— Unit тестування компонентів, react-testing-library.Оптимізація— Причини низької швидкодії react застосунку.— Інструменти для вимірювання швидкості завантаження та рендеру.— Використання вбудованих можливостей React для пришвидшення застосунку.
|