React

Матеріал з Вікіпедії — вільної енциклопедії.
(Перенаправлено з ReactJS)
Перейти до навігації Перейти до пошуку
React
React-icon.svg
Тип бібліотека JavaScript
Розробник Facebook, Instagram та співтовариство
Перший випуск 2013
Стабільний випуск 16.4.1 (13 червня 2018; 101 день тому[1])
Версії
Репозиторій github.com/facebook/react
Платформа багатоплатформова
Операційна система крос-платформова програма
Написано на JavaScript
Розмір 128 Кб мінімізована версія
559 Кб версія для розробки
Стан розробки Активний
Ліцензія MIT License
reactjs.com

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

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

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

Історія[ред. | ред. код]

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

Особливості[ред. | ред. код]

Одностороння передача даних[ред. | ред. код]

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

Віртуальний DOM[ред. | ред. код]

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

JSX[ред. | ред. код]

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

Не лише рендеринг HTML в браузері[ред. | ред. код]

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

Методи життєвого циклу[ред. | ред. код]

Методи життєвого циклу – це різні методи, які вбудовуються за допомогою 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.

Посилання[ред. | ред. код]