Вступ до React

React.js

React.js — бібліотека для створення

інтерфейсів. Вона була створена
компанією Facebook(нині Meta) в якості
доповнення для мови програмування JS.
Вона відповідає за відображення
інтерфейсу та взаємодію з користувачем
 React.js

• Власне бібліотека React не залежить від браузеру,

тому вона є кросплатформовою. Для
відображення в браузері React компонентів
використовується бібліотека React DOM
 React.js

Першочергово React створювався для

створення веб-сайтів, але потім на основі
React з’явилась платформа React Native
яка була створена в основному для
розробки додатків на мобільних пристроях
 SPA та MPA
Single Page Application - це вебзастосунок чи
вебсайт, який вміщується на одній сторінці з
метою забезпечити користувачу досвід
близький до користування настільною
програмою.

В односторінковому застосунку весь

необхідний код - HTML, JavaScript, та CSS -
завантажується разом зі сторінкою або
динамічно довантажується за потребою,
зазвичай у відповідь на дії користувача.
Сторінка не оновлюється і не перенаправляє
користувача до іншої сторінки у процесі
роботи з нею. Взаємодія з односторінковим
застосунком часто включає в себе динамічний
зв'язок з вебсервером.
React.js

React працює за принципом

компонентного підходу, в якому
компоненти використовуються
вкладено один до одного
Погодження в React.js та DOM - дерева

За відображення змін відповідає

React Dom, за погодження React
CORE

Зліва відображене DOM-дерево

сторінки, праворуч відображене
Червоними виділено оновлені дерево елементів
елементи, по центру відбувається
прийняття рішення щодо оновлення
частини компонентів. Цей процес
називають узгоджуванням
JSX

JSX (JavaScript XMl) – це розширення

синтаксису JS яке дозволяє використовувати
HTML- подібний синтаксик для описування
структури інтерфейсу

JSX не є обов’язковим в використанні для

React але він візуально допомогає відділяти
елементи інтерфейсу від JS коду
JSX

Після компіляції вирази JSX стають

звичайними викликами функцій JavaScript, що
повертають об’єкти JavaScript.

Це означає, що ви можете використовувати

JSX всередині if виразів і циклів for,
присвоювати його змінним, приймати його як
аргументи і повертати його з функцій:
 Arrow functions, відмінності від
звичайних функцій

Arrow functions являють собою скорочений запис

функцій в в ES6.

Синтаксис: let NameFunction= (Параметр 1, Параметр

2) => a + b;
 Класи та наслідування:

• Класи створюються в блочному коді ({ та

})
• Властивість constructor
використовується для того щоб написати
дії над класом в конструкторі
• Для виклику функції класу потрібно
використовувати new.
Компоненти та пропси

Компоненти дають змогу розбити

інтерфейс на незалежні частини,
про які легко думати окремо. Їх
можна складати разом та
використовувати кілька разів.

Компоненти поділяються на
функціональні та класові
Функціональні компоненти

Даний тип компоненту React

використовується як arrow
function або як звичайна function
яка повертає React елемент за
назвою функції
Класові компоненти

Даний тип компоненту React

використовується як клас
ECMAScript6 який наслідує
інтерфейс Component бібліотеки
react
Рендер компонентів.

Якщо додаток створений за

допомогою лише React, то зазвичай
в index.html є «корневий вузол»

Для відображення React елементу в

ньому викликається
ReactDOM.render()
Пропси
Пропси створені для передачі даних в
компоненти за допомогою виразу
ключ=«значення» (так само як і в html
атрибути тегів)

В пропси ми можемо передавати даних різних

типів та цілі функції для подальшого виклику

Пропси які отримав компонент напряму не

редагуються “child”-компонентом

ВАЖЛИВО! Завжди починайте писати імена

компонентів з великої літери.
 React.js

React може працювати за концепцією MVC (Model-

View-Controller: модель-вид-контолер). Суть
патерну полягає в чіткому розділені розроблюваних
програмних застосунків на три частини які мають
правила які потрібно суворо виконувати та
постановлені задачі:
 React.js

• Model (Оброблення даних та логіка програми)

• View (Відображення даних користувачеві в будь-

якому форматі)
• Controller (Обробка запитів користувача та виклик
потрібних ресурсів)
 Controller
React.js

React в даному патерні View Model

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

• Простий в використанні. Відмінно підходить для

командної розробки, суворе дотримання UI та
шаблону робочого процесу. Не сповільнює роботу
додатку
 Плюси: Мінуси:

• Простота читання коду

роботи відображення
елементів (при • Відсутність підтримки без
грамотному написані додаткових плагінів по типу
коду не потрібно webpack, babel в старих
повністю знати процес версіях популярних браузерів
який відбувається
всередині елементу
для того щоб знати що
він відобразить)