React. Основи

зображення — Джерело: http://surl.li/ihrib

React JS - найпопулярніша на сьогодні бібліотека JavaScript для побудови інтерфейсу користувача, яка була створена компанією Facebook. За допомогою React можна створювати сучасні та швидкі односторінкові додатки або веб-сайти. React є популярним на ринку та має важливе значення для веб- та фронтенд-розробників.

React JS - це бібліотека чи фреймворк?

Це одне з найбільш спірних питань у React. Давайте визначимось одразу, React - це бібліотека, а не фреймворк.

Що таке бібліотека?

Бібліотека в програмуванні визначається як збірка готового коду. Її використовують для полегшення роботи та імпорту вже написаного в ній функціоналу у власний проєкт. Наприклад, JQuery - це також бібіліотека. Писати JavaScript код значно простіше використовуючи JQuery, або ми можемо імпортувати вже написаний функціонал з JQuery. Сам проєкт не залежить від бібліотеки.

Якщо ж ми говоримо про фреймворк, то це повноцінний набір коду з власними характеристиками, бібліотеками та правилами. Тому проєкт залежатиме від фреймворку, який використовується. Angular є прикладом фреймворку.

React використовується для побудови інтерфейсу користувача, а програмування решти проекту залежить від розробника. Як і JQuery, React можна включити у свій проєкт частково або повністю. Отже, React JS - це бібліотека.

Virtual React DOM

Щоб зрозуміти важливість React Virtual DOM, спочатку вам треба знати, що таке DOM (Document Object Model, або обʼєктна модель документа). DOM - це відображення НTML коду на веб-сторінці. Документ - це власне веб-сторінка, обʼєкти - це HTML теги. І на завершення, модель DOM має деревоподібну структуру.

DOM - це програмний інтерфейс для HTML та XML документів. Він репрезентує сторінку так, що програми можуть змінювати структуру документу, стилі та контент. DOM відтворює документ у вигляді вузлів та обʼєктів. Таким чином, з допомогою мов програмування розробники можуть працювати зі сторінкою.

Веб-сторінка - це документ. Він може бути показаний як у вікні браузера, так і у вигляді HTML ресурсу. Проте, це той самий документ в обох випадках. DOM відображає цей документ, тому ним можна орудувати. Отже, DOM - це обʼєктно-орієнтоване представлення веб-сторінки, яку можна модифікувати скриптовими мовами, такою як JavaScript.

Які переваги Virtual DOM?

Кожен раз, коли ви робите зміни в коді, DOM буде повністю оновлюватись та переписуватись. Це дорога операція, яка потребує багато часу. React допомагає вирішити цю проблему завдяки Virtual DOM.

Отже, коли щось змінюється:

1. React створює ідентичну копію DOM.
2. Потім визначає, яка частина нова і оновлює тільки цю частину у Virtual DOM
3. І на завершення, копіює тільки оновлені частини Virtual DOM до DOM, а не повністю переписує його.

Цей підхід робить веб-сторінку значно швидшою. Це також одна з причин, чому React такий популярний.

Що таке JSX?

JSX(JavaScript XML) - це синтаксичне розширення JS, яке використовується в React. JSX застосовується для написання тегів HTML всередині JS. В процесі, JSX переписується в звичайний JS за допомогою Babel.

Тобто, React не має HTML файлів, теги HTML рендеряться прямо всередині JavaScript. Цей підхід робить React швидшим.

Що таке React Component?

Компонент - це незалежний блок коду, який можна використовувати повторно. З його допомогою можна розділити інтерфейс користувача на менші частини. Іншими словами, ми можемо розглядати компоненти як блоки Lego. Так само, як ми будуємо моделі Lego з деталей, так і створюється веб-сторінка або інтерфейс користувача з багатьох малих блоків коду (компонентів).

Як відомо, написання тисяч рядків коду в одному файлі є поганою практикою. Чим більшим стає проєкт, тим важче його обслуговувати. Тому розділення коду на компоненти може значно допомогти. Кожен компонент має власний JS та CSS код, їх можна використовувати повторно, їх простіше читати, писати і тестувати. Тому використання компонентно-орієнтованих технологій є перевагою у веб-розробці. І React JS є саме такою технологією.

React має два типи компонентів: функціональні (Stateless) і класові (Stateful)

Функціональні (Stateless) компоненти

Функціональний компонент - це JS функція (або ES6), яка повертає React елемент. Нижче наведена функція, яка, згідно офіційної документації, є валідним React компонентом:

Важливо! Функціональні компоненти в React відомі також як компоненти без стану (stateless components).

Отже, функціональний компонент :

1. Це JS/ES6 функція
2. Має повертати React елемент
3. Приймає props як параметр, якщо потрібно

Класові (Stateful) компоненти

Класові компоненти - це ES6 класи. Вони складніші ніж функціональні компоненти. Мають конструктори, методи життєвого циклу, функцію рендеру() і керування станом (даними). Нижче наведеного приклад простого класового компонента:

Отже, класовий компонент React:

1. Це клас написаний у синтаксисі ES6 і стане компонентом, коли успадкує властивості та функціональність компонента React шляхом його розширення.
2. Може приймати props (в конструкторі), якщо потрібно.
3. Може зберігати власні дані з використанням стану (state).
4. Повинен мати метод render(), який повертає React елемент (JSX) або null.

Давайте почнемо з визначення властивостей (props) компонента в React. Props використовуються для налаштування компонента при його створенні та передачі йому різних параметрів.

Однією з найважливіших особливостей props є їх передача батьківським компонентом своїм дочірнім компонентам. Це дозволяє нам створювати компонент, який можна налаштовувати з новим набором props кожного разу, коли ми його використовуємо.

Props передаються компоненту і залишаються незмінними протягом його життєвого циклу. Але є випадки, коли нам потрібно використовувати дані, які ми знаємо, що будуть змінюватися з часом. У цьому випадку ми використовуємо стан (state).

На відміну від props, стан (state) є приватною властивістю і належить виключно одному компоненту. Стан дозволяє React-компонентам динамічно змінювати вихідні дані у відповідь на певні події.

Стан компонента ініціалізується всередині конструктора:

І пізніше він може бути змінений з допомогою вбудованої функції setState().

Життєвий цикл компонентів

Кожен компонент у React має життєвий цикл, за яким можна спостерігати та керувати ним протягом трьох основних фаз.

Ці три фази включають: Встановлення (Mounting), Оновлення (Updating) і Видалення (Unmounting).

Загальні методи життєвого циклу React

• render()
• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()

Метод render() є найбільш поширеним методом життєвого циклу. Ви побачите його в усіх класах React. Це тому, що render() є єдиним обов'язковим методом у класовому компоненті React. Як вказує сама назва, він відповідає за відображення вашого компонента на інтерфейсі користувача (UI). Це відбувається під час встановлення та оновлення вашого компонента.

Тепер ваш компонент встановлений і готовий, і саме тоді вступає в дію наступний метод життєвого циклу React - componentDidMount(). componentDidMount() викликається, як тільки компонент встановлюється і готовий до використання. Це гарне місце для ініціювання запитів API, якщо вам потрібно завантажити дані з віддаленого джерела.

Метод життєвого циклу componentDidUpdate() викликається, як тільки відбувається оновлення. Найпоширеніший випадок використання - оновлення DOM відповідно до змін у пропсах або стані. Ви можете викликати setState() у цьому методі, але пам'ятайте, що вам потрібно обгорнути його умовою для перевірки змін стану або пропсів відносно попереднього стану. Неправильне використання setState() може призвести до безкінечного циклу.

Як і сама назва вказує, то метод componentWillUnmount() життєвого циклу викликається безпосередньо перед тим, як компонент буде розмонтований і знищений. Якщо є які-небудь дії з очищення, які потрібно виконати, це буде правильне місце для цього.

Маршрутизація

Маршрутизація є важливим аспектом веб-додатків (та інших платформ), який не можна ігнорувати у React. Ми можемо створювати повноцінні односторінкові додатки з використанням React, якщо ми використовуємо можливості маршрутизації. Це не обов'язково повинен бути ручний процес, ми можемо використовувати React-Router.

Компонент Switch допомагає нам відображати компоненти лише тоді, коли збігаються шляхи, інакше він відображає компонент "Not Found" (не знайдено).

<Router> використовує HTML5 history API (pushState, replaceState та подію popstate) для синхронізації інтерфейсу користувача з URL.

Обробка подій з React-елементами дуже схожа на обробку подій на DOM-елементах. Але є деякі синтаксичні відмінності:

1. Події React називаються за допомогою camelCase, а не з малих літер (lowercase).
2. З використанням JSX ви передаєте функцію як обробник подій, а не рядок.

Іменований експорт (Named Export) та експорт за замовчуванням (Default Export) в ES6.

Іменований експорт (Named Export)

За допомогою Named Export можна мати кілька іменованих експортів у файлі. Потім можна імпортувати конкретні експорти, які потрібно огорнути фігурними дужками. Ім'я імпортованого модуля повинно бути таким самим, як ім'я експортованого модуля.

Експорт за замовчуванням (Default Export)

У файлі можна мати лише один експорт за замовчуванням. При імпорті ми повинні вказати ім'я та імпортувати таким чином:

Ви можете просто виконати команду create-react-app у командному рядку, після якої слід вказати назву додатку, який ви хочете створити. Це створить React-додаток з усіма необхідними функціями, які вже вбудовані у додаток. Потім ви можете перейти до каталогу додатку (cd my-app) і запустити його командою npm start.

Ось огляд папок, які зазвичай зустрічаються в проекті create-react-app:

• node_modules: У цій папці знаходяться пакети, встановлені за допомогою NPM або Yarn.
• src: У цій папці зберігаються динамічні файли вашого додатка. Зазвичай тут містяться файли JavaScript з вашими React-компонентами, а також інші ресурси або таблиці стилів, що використовуються в додатку. Якщо файл імпортується вашим JavaScript-додатком або динамічно змінює свій зміст, його слід помістити в цей каталог.
• public: У цій папці знаходяться статичні файли вашого додатка.

Джерело: http://surl.li/ihrib
Переклад: Tetiana Prokopchuk
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень