React

React (старі назви: React.js, ReactJS) — відкрита JavaScript бібліотека для створення інтерфейсів користувача, яка покликана вирішувати проблеми часткового оновлення вмісту вебсторінки, з якими стикаються в розробці односторінкових застосунків. Розробляється Meta (раніше Facebook) і спільнотою індивідуальних розробників.^[2][3][4]

React

Тип	бібліотека JavaScript
Автор	Meta Platforms
Розробники	Meta та спільнота
Перший випуск	2013
Стабільний випуск	18.2.0 (14 червня 2022; 2 роки тому (2022-06-14)[1])
Платформа	багатоплатформова
Операційна система	кросплатформова
Мова програмування	JavaScript
Розмір	128 Кб мінімізована версія 559 Кб версія для розробки
Стан розробки	Активний
Ліцензія	MIT License
Онлайн-документація	reactjs.org/docs/getting-started.html​(англ.) ru.reactjs.org/docs/getting-started.html​(рос.) ar.reactjs.org/docs/getting-started.html
Репозиторій	github.com/facebook/react
Вебсайт	react.dev, uk.react.dev (українська версія)
Медіафайли у Вікісховищі

React дозволяє розробникам створювати великі вебзастосунки, які використовують дані, котрі змінюються з часом, без перезавантаження сторінки. Його мета полягає в тому, щоб бути швидким, простим, масштабованим. React обробляє тільки користувацький інтерфейс у застосунках. Це відповідає видові у шаблоні модель-вид-контролер (MVC), і може бути використане у поєднанні з іншими JavaScript бібліотеками або в великих фреймворках MVC, таких як AngularJS^[5]. Він також може бути використаний з React на основі надбудов, щоб піклуватися про частини без користувацького інтерфейсу побудови вебзастосунків. Як бібліотеку інтерфейсу користувача React найчастіше використовують разом з іншими бібліотеками, такими як Redux.

В даний час React використовують Khan Academy,^[6] Netflix,^[7] Yahoo,^[8] Airbnb,^[9] Sony,^[10] Atlassian^[11] та інші.

Історія

Бібліотеку створено Джорданом Волком (Jordan Walke), програмістом з Facebook. Автор працював над проектом під впливом XHP, фреймворку HTML для PHP.^[12] 2011-го року реліз з'явився у новинах Facebook, за рік — у блозі Instagram.^[13] Також фреймворк був представлений як проект з відкритим початковим кодом на конференції розробників JSConf US, що проходила у Сполучених Штатах у травні 2013 року. На конференції React.js Conf, влаштовану Фейсбуком у березні 2015-го, проект було представлено як відкрите програмне забезпечення.

Особливості

Одностороння передача даних

Властивості передаються в рендерер компоненту, як властивості html тегу. Компонент не може напряму змінювати властивості, що йому передані, але може їх змінювати через callback функції. Такий механізм називають «властивості донизу, події нагору».

Віртуальний DOM

React підтримує віртуальний DOM, а не покладається виключно на DOM браузера. Це дозволяє бібліотеці визначити, які частини DOM змінилися, порівняно (diff) зі збереженою версією віртуального DOM, і таким чином визначити, як найефективніше оновити DOM браузера.^[14][15] Таким чином програміст працює зі сторінкою, вважаючи що вона оновлюється вся, але бібліотека самостійно вирішує які компоненти сторінки треба оновити.

JSX

Компоненти React зазвичай написані на JSX.^[16] Код написаний на JSX компілюється у виклики методів бібліотеки React. Розробники можуть так само писати на чистому JavaScript. JSX нагадує іншу мову, яку створили у компанії Фейсбук для розширення PHP, XHP.

Не лише рендеринг HTML в браузері

React використовують не лише для рендерингу HTML в браузері. Наприклад, Facebook має динамічні графіки які рендеряться в теги <canvas>,^[17] Netflix та PayPal використовують ізоморфне завантаження для рендерингу ідентичного HTML на сервері та клієнті.^[18][19]

Методи життєвого циклу

Методи життєвого циклу — це різні методи, які вбудовуються за допомогою ReactJS. Вони дозволяють розробнику обробляти дані в різних точках життєвого циклу програми React. Наприклад:

• shouldComponentUpdate — це метод життєвого циклу, який каже Javascript оновити компонент, використовуючи логічні змінні.
• componentWillMount — це метод життєвого циклу, який каже Javascript налаштувати певні дані перед монтуванням компонентів (вставлення у віртуальний DOM).
• componentDidMount — це метод життєвого циклу, подібний до компонента WillMount, за винятком того, що він працює після методу render, і може використовуватися для додавання JSON-даних, а також для визначення властивостей та станів.
• render є найважливішим методом життєвого циклу, необхідним у будь-якому компоненті. Метод render — це те, що з'єднується з JSX і відображати власний JSX.

Вкладені елементи

Кілька елементів на одному рівні повинні бути загорнутими в один елемент контейнера, наприклад елемент <div>, або повернутий як масив.

Атрибути

JSX надає ряд атрибутів елементів, призначених для відображення тих, що надаються у форматі HTML. Користувацькі атрибути також можуть бути передані компоненту. Всі атрибути будуть отримані компонентом як реквізит.

Вирази JavaScript

Вирази JavaScript можна використовувати в JSX з фігурними дужками {}:

<h1> {10 + 1} </ h1>

Приклад, наведений вище, відображатиметься так:

<h1>11</h1>

Умовні вирази

Вираз If–else не можуть бути використані всередині JSX, але замість них можуть використовуватися умовні вирази. У прикладі нижче буде показано

{ i === 1 ? 'true' : 'false' }

як рядок 'true', оскільки i дорівнює 1.

class App extends React.Component {
  render() {
    const i = 1;
    return (
      <div>
        <h1>{ i === 1 ? 'true' : 'false' }</h1>
      </div>
    );
  }
}

Функції та JSX можна використовувати в умовних виразах:

class App extends React.Component {
  render() {
    const sections = [1, 2, 3];
    return (
      <div>
        { 
          sections.length > 0
            ? sections.map(n => <div>Section {n}</div>)
            : null
        }
      </div>
    );
  }
}

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

React Native

React Native представлений компанією Facebook у 2015 році, що застосовує React архітектуру до нативних IOS, Android та UWP додатків.

Історія

У 2012 році Марк Цукерберг зазначив: «Найбільша помилка, яку ми зробили як компанія — це надто велика ставка на HTML5, на відміну від нативних додатків».

Він пообіцяв, що Facebook незабаром запропонує краще рішення для мобільних платформ.

В Facebook Джордан Уоллк знайшов спосіб генерувати елементи інтерфейсу iOS з фонового Javascript потоку. Вони вирішили організувати внутрішній хакатон для вдосконалення цього прототипу, щоб вміти будувати нативні додатки за допомогою цієї технології.

Після кількох місяців розробки Facebook випустила першу версію для React.js Conf 2015.

Під час технічного обговорення Крістофер Чедо пояснив, що Facebook вже використовував React Native для їхніх Group App та Ads Manager App.

18 квітня 2017 року Facebook представив React Fiber — новий основний алгоритм бібліотеки React для створення користувацьких інтерфейсів. React Fiber стане основою для будь-яких подальших вдосконалень та розвитку функцій системи React.

Принципи роботи

Принципи роботи React Native в основному такі ж, як ReactJS, за винятком того, що він не маніпулює DOM через VirtualDom.

Він працює у фоновому процесі (який інтерпретує Javascript код написаний розробниками) безпосередньо на кінцевому пристрої і спілкується з нативною платформою. Очевидно, що Facebook виправив помилку, про яку Марк Цукерберг згадував 2012 року. React Native взагалі не покладається на HTML, все написано на Javascript і залежить від нативних SDK.

Основне використання

Нижче наведено початковий приклад реалізації використання React в HTML з JSX та JavaScript.

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Клас Greeter — компонент React, який приймає властивість привітання. Метод ReactDOM.render створює екземпляр компонента Greeter, встановлює властивість привітання для «Hello World» та вставляє виражений компонент у вигляді дочірнього елемента до елементу DOM з id = myReactApp. Якщо відобразити в веббраузері, то результат буде:

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

Загальні ідіоми

React не намагається надати повну «схему додатків». Він безпосередньо спрямований на побудову користувацьких інтерфейсів, і тому не включає в себе безліч інструментів, які деякі розробники вважають необхідними для створення програми. Це дозволяє вибрати будь-які бібліотеки, які розробник вважає за краще виконувати, щоб виконати певних завдань, таких як здійснення доступу до мережі або локальне зберігання даних.

Використання архітектури Flux

Для підтримки концепції React щодо одностороннього потоку даних, архітектура Flux являє собою альтернативу популярній архітектурі Model-view-controller. Flux — це дії, які надсилаються через центральний диспетчер до сховища, а зміни з сховища надсилають назад до перегляду. У використанні разом з React, це поширення здійснюється через компоненти властивостей.

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

Цей шаблон іноді виражається як «properties flow down, actions flow up». Багато реалізацій Flux створено з моменту його створення, мабуть, найбільш відомим є Redux, який має одне сховище, яке часто називають single source of truth (це практика структурування інформаційних моделей та пов'язаних схем даних, так що кожен елемент даних зберігається рівно один раз).

Ліцензування

Початковий публічний реліз React відбувся в травні 2013 року використовував стандартний Apache License 2.0. У жовтні 2014 року React 0.12.0 замінив його ліцензією BSD на 3 пункти та додав окремий текстовий файл PATENTS, який дозволяє використовувати будь-які патенти Facebook, пов'язані з програмним забезпеченням:

"Ліцензія, надана цим договором, автоматично і без попередження припиняється для тих, хто подає будь-які претензії (у тому числі шляхом подання будь-яких позовів, заяв чи інших дій), що стосуються: (а) прямого, непрямого чи опосередкованого порушення або спонукання до порушення будь-якого патенту: (і) Facebook або будь-які його дочірні або афілійовані компанії, незалежно від того, чи така претензія пов'язана з програмним забезпеченням; (іі) будь-якою стороною, якщо така вимога виникає повністю або частково з будь-якого програмного забезпечення, продукту чи послуги Facebook або будь-якого з її дочірніх та афілійованих осіб, незалежно від того, чи така претензія пов'язана з програмним забезпеченням, або (ііі) будь-якою стороною, що стосується програмного забезпечення, або (б) що будь-яке право на будь-яку претензію на патент Facebook недійсне або недійсне ".

Ця нестандартна пропозиція викликала певні суперечки та дебати в спільноті користувачів React, оскільки вона може бути інтерпретована таким чином, щоб надавати можливість Facebook відкликати ліцензію у багатьох сценаріях, наприклад, якщо Facebook засуджує ліцензіата, змушуючи їх приймати «інші дії», публікуючи дію в блозі або в іншому місці. Багато хто висловив занепокоєння тим, що Facebook може несправедливо користуватися пропозицією про припинення дії, або те, що інтеграція React у продукт може ускладнити майбутнє придбання початкової компанії. Ґрунтуючись на відгуках громадськості, Facebook оновив патентний грант в квітні 2015 року, щоб бути менш двозначним та більш дозвільним:

«Ліцензія, надана цим договором, автоматично і без попередження припиняється, якщо Ви (або будь-які з Ваших дочірніх компаній, корпоративних філій або агентів) опосередковано або безпосередньо проявляють фінансову зацікавленість в будь-яких патентних заявах: (i) проти Facebook або будь-яких її дочірніх компаніях або корпоративних філіях; (ii) проти будь-якої сторони, якщо така патентна заява виникає повністю або частково з будь-якого програмного забезпечення, технології, продукту або послуги Facebook або будь-яких її дочірніх або корпоративних філій; (iii) проти будь-яких що стосується програмного забезпечення. […] „Патентне затвердження“ — це будь-який судовий процес або інша дія, яка передбачає пряме, непряме чи сприятливе порушення або стимул до порушення будь-якого патенту, включаючи перехресний позов чи зустрічний позов».

Фонд Apache Software вважає цю ліцензійну угоду несумісною з її ліцензійною політикою, оскільки вона «передається ризику для споживачів нашого програмного продукту, що не відповідає на користь ліцензіара, а не ліцензіату, тим самим порушуючи нашу юридичну політику Apache як універсального донора», і «не є підмножиною тих, що містяться в [Apache License 2.0], і їх не можна вважати підліцензіями як [Apache License 2.0]». У серпні 2017 року Facebook відмовився від перегляду своїх ліцензій на послуги Apache Foundation та відмовився переглянути свою ліцензію, і наступного місяця WordPress вирішив переключити проекти Gutenberg та Calypso на «React».

Зміна ліцензії

23 вересня 2017 року Facebook оголосив, що наступного тижня вони будуть перепризначати ліцензії Flow, Jest, React і Immutable.js за стандартною ліцензією MIT; компанія заявила, що React був «основою широкої екосистеми програмного забезпечення з відкритим вихідним кодом для Інтернету», і що вони не хотіли «припиняти прогрес за нетехнічними міркуваннями».

26 вересня 2017 року було випущено React 16.0.0 з ліцензією MIT. Зміна ліцензії MIT також була перенаправлена до лінії випуску 15.x за допомогою React 15.6.2.