Бібліотека для побудови UI-компонентів на JavaScript, орієнтована на декларативний рендеринг.
Функція або клас, що повертає JSX для відображення частини UI.
Синтаксис, що схожий на HTML, який React перетворює у виклики React.createElement().
Функціональні компоненти — прості функції, класові — ES6 класи з методами життєвого циклу.
Властивості, які передаються компоненту з батьківського компонента для налаштування або передачі даних.
Локальний стан компоненту, який можна змінювати і який викликає повторний рендер при зміні.
За допомогою хука useState: const [count, setCount] = useState(0);
Хук для виконання побічних ефектів у функціональних компонентах (fetch, підписки, таймери).
Через props: <Child name="Ivan" />
За допомогою callback-функцій, переданих через props.
Відображення компонентів чи елементів на основі умов: {isLoggedIn ? <Logout/> : <Login/>}
Відображення масивів через метод .map() з унікальним ключем: {items.map(item => <li key={item.id}>{item.name}</li>)}
Унікальний ідентифікатор елемента списку для оптимізації рендеру React.
Форма, значення якої керується через state React, наприклад <input value={value} onChange={handleChange} />.
Форма, яка керується DOM, а не state React; можна використовувати ref для доступу до значення.
Компонент, що дозволяє групувати елементи без додаткового DOM-вузла: <Fragment>...</Fragment> або <>...</>
Механізм рендеру компоненту у DOM-вузол поза основним деревом: ReactDOM.createPortal(child, container)
Бібліотека для маршрутизації в React-додатках.
Через компонент <Route path="/about" element=<About /> />
Хук для доступу до DOM-вузла або збереження змінної без ререндеру: const inputRef = useRef();
Хук, який дозволяє отримати дані з React.Context без пропс-дрилінгу.
Механізм глобального зберігання даних у React, альтернатива пропс-дрилінгу.
Хук для керування складним state через reducer-функцію (аналог Redux, але локально).
Коли state складний або залежить від попереднього значення, або є багато різних дій над ним.
Перенесення state з дочірнього компонента в батьківський для спільного використання.
Функція, яка приймає компонент і повертає новий компонент з розширеною логікою.
Техніка, коли компонент приймає функцію як пропс для рендеру UI.
Функція з префіксом use, яка інкапсулює логіку з іншими хуками для повторного використання.
Хук, що кешує результат обчислень для оптимізації продуктивності.
Хук, що повертає мемоізовану функцію, щоб уникати її перевизначення при кожному рендері.
useMemo кешує значення, useCallback — функцію.
Функція вищого порядку для мемоізації функціонального компонента, щоб уникнути зайвих ререндерів.
Віртуальне представлення DOM у пам'яті, яке дозволяє React ефективно оновлювати UI через diffing-алгоритм.
Процес порівняння старого і нового Virtual DOM та оновлення реального DOM лише там, де є зміни.
Ключ допомагає React ідентифікувати елементи списку для оптимального оновлення DOM.
SPA (Single Page Application) має один HTML, оновлює контент через JS; MPA (Multi Page Application) перезавантажує сторінку при кожному переході.
Через імпорт: import './App.css'; або CSS-модулі чи styled-components.
Технологія локальної ізоляції стилів у React: import styles from './App.module.css';
Бібліотека для CSS-in-JS, що дозволяє писати стилі прямо в JS як компоненти.
Передача props через кілька проміжних компонентів, навіть якщо вони там не потрібні.
Використати Context API, Redux або інший state manager.
Бібліотека керування глобальним state за принципом Flux: один store, reducer-и та actions.
Єдине сховище глобального стану застосунку.
Функція, яка приймає поточний state та action і повертає новий state.
Об’єкт з обов'язковим полем type, який описує, яку зміну треба зробити.
Функції, що розширюють логіку Redux (наприклад, redux-thunk для асинхронності).
Офіційна бібліотека для спрощення роботи з Redux (менше коду, зручні createSlice, createAsyncThunk).
Бібліотека для асинхронного керування даними (fetch, кешування, синхронізація).
Хук React 18 для позначення оновлень як "неголовних", щоб UI залишався чутливим.
Хук, що відкладає оновлення значення для покращення продуктивності UI.
Компонент для відображення fallback-контенту під час завантаження асинхронних даних.
Компонент, який відловлює JavaScript-помилки в дочірніх компонентах і відображає запасний UI.
Тільки класовий компонент із методами componentDidCatch та getDerivedStateFromError.
Процес відновлення подій і state на стороні клієнта після серверного рендеру.
Server-Side Rendering — рендер React-компонентів на сервері перед відправкою HTML клієнту.
Фреймворк на базі React для SSR, SSG, маршрутизації, API routes та оптимізації продуктивності.
Фреймворк для статичної генерації сайтів на React.
Фреймворк на React для створення мобільних застосунків під iOS і Android.
Інструмент для швидкої розробки на React Native з готовим набором бібліотек.
Процес перетворення JSX у звичайний JavaScript через Babel.
Транспайлер, що перетворює JSX і сучасний JS у сумісний із браузерами код.
Бандлер, який збирає JS, CSS, зображення у один пакет.
Інструмент для швидкого створення React-проєктів із готовою конфігурацією.
Сучасний швидкий бандлер і дев-сервер для React (альтернатива CRA).
Автоматичне оновлення коду в браузері без перезавантаження сторінки.
Динамічне завантаження компонентів через React.lazy() та Suspense.
Розбиття бандла на менші частини для швидшого завантаження.
Мемоізація, React.memo, useMemo, useCallback, code splitting, virtualization.
Рендер лише видимих елементів списку (react-window, react-virtualized).
Компоненти React 18, які виконуються на сервері, не потрапляючи у клієнтський бандл.
Механізм React 18, що дозволяє робити рендер частинами, не блокуючи UI.
Хук React 18 для генерації стабільних унікальних ID для елементів.
Функція, яка дозволяє передавати ref з батька до дочірнього компонента.
Хук, що дозволяє кастомізувати значення, яке доступне через ref у батьківському компоненті.
Інструмент для виявлення потенційних проблем, подвійно викликає деякі методи у dev-режимі.
Використати React DevTools або useWhyDidYouUpdate hook.
Хук, схожий на useEffect, але виконується синхронно після DOM-оновлень.
useEffect виконується асинхронно, useLayoutEffect — синхронно після рендеру.
Хук React 18 для підписки на зовнішні сховища стану (Redux, Zustand).
Легка бібліотека для керування глобальним state у React.
Бібліотека state management у React на базі атомів.
Бібліотека state management для React від Facebook із концепцією атомів та селекторів.
Бібліотека state management на основі observables.
Бібліотека для зручної роботи з формами у React.
Легка бібліотека для форм у React із хуками.
Бібліотеки, які керують формами через state (Formik, React Hook Form).
Бібліотека для тестування React-компонентів через симуляцію користувацьких дій.
Фреймворк для тестування JavaScript і React.
Метод тестування, що зберігає рендер у файл та порівнює його з новими результатами.
Бібліотека для тестування React-компонентів (застаріла, замінюється RTL).
Розширення браузера для дебагу компонентів React.
Інструмент для документування та тестування UI-компонентів у ізоляції.
Організація кількох пакетів у єдиному репозиторії (NX, Turborepo).
Архітектура, де фронтенд ділиться на незалежні частини, які можна розробляти окремо.
Нова архітектура внутрішнього ядра React (з версії 16) для кращого планування рендеру.
Render phase — підготовка змін у Virtual DOM. Commit phase — оновлення реального DOM.
Функціональні компоненти викликаються двічі у dev-режимі для виявлення побічних ефектів.
Помилки, коли HTML із сервера не збігається з рендером на клієнті.
Можливість виконувати компоненти на сервері, передаючи результат клієнту без JS.