Іспит React

Новий фреймворк для розробки веб-додатків

Розширення синтаксису JavaScript, яке дозволяє писати HTML-подібний код у JavaScript файлах

Бібліотека для роботи з DOM

Мова програмування, створена спеціально для React

<div>Результат: sum(2, 3)</div>

<div>Результат: {{sum(2, 3)}}</div>

<div>Результат: {sum(2, 3)}</div>

<div>Результат: $sum(2, 3)</div>

<div style="background-color: blue; color: white;">Текст</div>

<div style={{backgroundColor: 'blue', color: 'white'}}>Текст</div>

<div css={{background: 'blue', color: 'white'}}>Текст</div>

<div className="blue-text">Текст</div>

class

className

cssClass

reactClass

За префіксом "html-"

За наявністю атрибута type="html"

За написанням з маленької літери

За спеціальним синтаксисом <html:div>

За префіксом "component-"

За написанням з великої літери

За наявністю атрибута isComponent

За спеціальним синтаксисом <component:Name>

Текстові рядки

Числові значення

Булеві значення (true/false)

React елементи

Мова програмування для створення веб-сайтів

Фреймворк для розробки мобільних додатків

JavaScript бібліотека для побудови інтерфейсів користувача

Система управління базами даних

Марк Цукерберг

Джордан Волк

Брендан Ейх

Раян Дал

Компонентний підхід

Висока продуктивність завдяки Virtual DOM

Вбудована система маршрутизації

Відкритий код

В HTML використовується class, в JSX - className

В HTML використовується className, в JSX - class

В HTML і JSX використовується class

В HTML і JSX використовується className

У HTML код

У CSS стилі

У звичайні JavaScript-виклики (React.createElement)

У WebAssembly

Збільшення швидкості виконання коду

Зменшення розміру фінального бандлу

Типізація props та виявлення помилок на етапі компіляції

Автоматична оптимізація рендерингу

Статичні та динамічні

Функціональні та класові

Прості та складні

Публічні та приватні

function Component(props: Props) { return <div>...</div>; }

const Component = (props: Props) => { return <div>...</div>; }

const Component: React.FC<Props> = (props) => { return <div>...</div>; }

Всі варіанти правильні

Повторне використання коду

Інкапсуляція

Автоматична оптимізація продуктивності

Розділення відповідальності

Спеціальний режим відображення в браузері

Легка копія реального DOM, яка використовується для оптимізації оновлень

Бібліотека для роботи з анімаціями

Інструмент для тестування компонентів

.js

.jsx

.ts

.tsx

Внутрішній стан компонента

Властивості, які передаються компоненту ззовні

Спеціальні методи для взаємодії з DOM

Функції зворотного виклику для обробки подій

setState()

useState()

useProps()

createState()

Типізація props

Автодоповнення в IDE

Виявлення помилок на етапі компіляції

Збільшення швидкості виконання коду

Зменшення розміру фінального бандлу

Створення перевикористовуваних UI-елементів

Прискорення завантаження сторінки

Спрощення роботи з API

Компіляція, рендеринг, відображення

Рендеринг, узгодження, фаза фіксації

Ініціалізація, обчислення, відображення

Компонування, стилізація, рендеринг

Оновлює лише змінені атрибути

Ігнорує зміни і залишає старий елемент

Повністю видаляє старе піддерево і будує нове

Об'єднує властивості обох елементів

Він дозволяє напряму маніпулювати DOM елементами

Він мінімізує кількість операцій з реальним DOM, які є повільними

Він збільшує швидкість завантаження початкової сторінки

Він автоматично оптимізує CSS стилі

Для стилізації елементів списку

Для визначення порядку елементів у списку

Для ідентифікації елементів, щоб React міг визначити, які елементи були додані, видалені або змінили порядок

Для додавання унікальних класів CSS до елементів списку

React одразу оновлює реальний DOM

React створює новий Віртуальний DOM і порівнює його зі старим

React перезавантажує всю сторінку

React викликає метод componentDidUpdate без оновлення DOM

Процес створення компонентів

Процес порівняння нового і старого дерев Віртуального DOM для визначення змін

Процес оптимізації CSS стилів

Процес перевірки типів пропсів

Функції, які дозволяють використовувати стан та інші можливості React у функціональних компонентах

Класи, які розширюють базовий React.Component

Методи для роботи з DOM елементами напряму

Функції для оптимізації рендерингу компонентів

const state = useState(initialState);

const [state, setState] = useState(initialState);

const {state, setState} = useState(initialState);

const state = new useState(initialState);

Щоб зменшити навантаження на браузер

Щоб дозволити групувати кілька оновлень стану разом

Це обмеження JavaScript

Щоб запобігти витокам пам'яті

setState(newValue)

setState(prevState => prevState + 1)

setState({...state, newValue})

setState.update(newValue)

Швидкість роботи

Автоматична ізоляція через унікальні імена класів

Підтримка всіх браузерів

Менший розмір файлів

глобальні стилі

CSS Modules

CSS-in-JS (наприклад, Styled Components)

БЕМ

Відсутність підтримки медіа-запитів

Неможливість використання псевдокласів

Продуктивність (динамічне додавання стилів може бути повільним)

Обмежена підтримка браузерами

Функція для запам'ятовування значень змінних

Функція вищого порядку для мемоізації компонентів

Хук для кешування результатів обчислень

Метод життєвого циклу класових компонентів

Запобігає ререндеру компонента, якщо його пропси не змінилися

Запобігає ререндеру компонента, якщо його стан не змінився

Прискорює рендеринг компонентів за рахунок паралельних обчислень

Зберігає попередній DOM для швидкого відновлення

Хук для створення посилань на DOM-елементи

Хук для кешування результатів обчислень

Хук для кешування (мемоізації) функцій між ререндерами

Хук для керування життєвим циклом компонента

Тільки функцію

Функцію і масив залежностей

Функцію і початкове значення

Функцію, масив залежностей і опції кешування

Для всіх функцій у компоненті

Тільки для функцій, які використовуються в useEffect

При передачі функцій до мемоізованих дочірніх компонентів

Тільки для асинхронних функцій

Функція створюється заново при кожному ререндері

Функція кешується і ніколи не оновлюється

Виникає помилка компіляції

React автоматично визначає залежності

Хук для керування станом компонента

Хук для виконання побічних ефектів у функціональних компонентах

Хук для оптимізації рендерингу компонентів

Хук для створення посилань на DOM-елементи

До рендеру компонента

Під час рендеру компонента

Після рендеру компонента

Тільки при монтуванні компонента

Хук для запам'ятовування стану компонента

Хук для кешування (мемоізації) результатів обчислень

Хук для кешування функцій між ререндерами

Хук для запам'ятовування попередніх пропсів

Тільки функцію обчислення

Функцію обчислення і масив залежностей

Функцію обчислення і початкове значення

Функцію обчислення, масив залежностей і опції кешування

Для всіх обчислень у компоненті

Тільки для обчислень, що використовуються в useEffect

Для складних обчислень, які займають багато часу

Тільки для обчислень з масивами

useMemo кешує результат обчислення, useCallback кешує функцію

useMemo працює з об'єктами, useCallback з функціями

useMemo використовується в функціональних компонентах, useCallback в класових

useMemo синхронний, useCallback асинхронний

Бібліотека для управління станом в React

Бібліотека для реалізації клієнтського маршрутизування в React-додатках

Фреймворк для серверного рендерингу React-компонентів

Інструмент для тестування React-компонентів

createRouter

createBrowserRouter

createHistoryRouter

createWebRouter

aLink

Anchor

Link

RouterLink

{paramName}

<paramName>

:paramName

*paramName

useRouteParams

useParams

usePathParams

useUrlParams

Children

Outlet

Nested

ChildRoute

Оптимізація рендерингу компонентів

Управління глобальним станом додатку

Створення серверних API

Стилізація компонентів

redux і react-redux

@reduxjs/toolkit і react-redux

redux-thunk і redux-saga

redux-form і redux-persist

Компонент для зберігання даних форми

Бібліотека для роботи з локальним сховищем

Об'єкт, що містить глобальний стан додатку

Інструмент для відладки Redux

createStore

configureStore

makeStore

setupStore

Частина коду, що відповідає за маршрутизацію

Набір reducers, actions та початкового стану для певної функціональності

Компонент для відображення даних

Інструмент для розділення коду на чанки

Функція, що обробляє HTTP-запити

Компонент для зменшення розміру додатку

Чиста функція, що оновлює стан на основі actions

Інструмент для оптимізації продуктивності

Компонент для взаємодії з користувачем

Об'єкт, що описує зміну стану

Функція для створення компонентів

Метод для відладки додатку

Через props

Через useSelector з функцією вибору

Через useState

Через глобальні змінні

Хук для запам'ятовування значень між рендерами

Функція вищого порядку для мемоізації компонентів

Метод для кешування результатів API запитів

Інструмент для оптимізації роботи з пам'яттю