React (JavaScript գրադարան)

React (երբեմն ձևակերպված է React.js կամ ReactJS), բաց կոդով JavaScript գրադարան է user ինտերֆեյս կառուցելու համար։

Մշակվում է Ֆեյսբուքի, Ինստագրամի և առանձին մշակողների կողմից։ Ըստ Libscore ծառայության ՋավաՍկրիպտի վերլուծաբանների՝ React-ը այժմ օգտագործվում է Նեթֆլիքս, Imgur, Buffer, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, և այլ վեբ կայքերում։

React-ը թույլ է տալիս մշակողներին ստեղծել խոշոր վեբ ծրագիր, որը օգտագործում է տվյալներ, որոնք ժամանակի ընթացքում փոխվում են առանց էջը վերբեռնելու։ Դրա հիմնական նպատակը արագ, պարզ և լայնածավալ լինելն է։ React-ը ծրագրերում գործի է դնում միայն օգտատիրոջ ինտերֆեյսը։ Այն համապատասխանում է View-ին Model-View-Controller (MVC) կաղապարում,  և կարող է օգտագործվել ՋավաՍկրիպտի այլ գրադարանների կամ ֆրեյմվորկերի հետ MVC-ում, ինչպես AngularJS-ն է։

Պատմություն 
React-ը ստեղծվել է Ջորդան Ուոլքի կողմից, ով ծրագրային ապահովման ինժեներ է Ֆեյսբուքում։ Նա ոգեշնչվել է XHP-ով, որը HTML բաղադրիչ ֆրեյմվորկ է PHP-ի համար։ Այն առաջին անգամ տեղակայվել է Ֆեյսբուքի լրահոսում 2011 թվականին և ավելի ուշ՝ 2012 թվականին՝ Instagram.com-ում ։ Այն բաց էր JSConf US-ում 2013 թվականի մայիսին։ React Native-ը, որը հնարավորություն է տալիս React-ով մշակում բնիկ iOS-ին, Android-ին և UWP-ին, հայտարարվել է Facebook's React.js Conf-ին  2015 թվականի փետրվարին և բաց էր 2015 թվականի մարտին։  2017 թվականի ապրիլի 18-ին,  Facebook-ը հայտարարեց React Fiber-ի մասին, որը  React ֆրեյմվորկի գրադարանի նոր էական ալգորիթմ էր user ինտերֆեյս կառուցելու համար։ React Fiber-ը կդառնա ցանկացած բարելավումների և React ֆրեյմվորկի հատկանիշների զարգացման հիմնադիր ։

Նշանակալից հատկություններ

Միակողմանի տվյալների հոսք 

Անփոփոխ արժեքների շարքը փոխանցվում է բաղադրիչի մատուցողին որպես HTML tag-ի հատկություններ։ Բաղադրիչը չի կարող ուղղակիորեն փոփոխել իրեն փոխանցված որևէ հատկություն, սակայն կարող է փոխանցվել callback գործառույթներ, որոնք փոփոխում են արժեքները։ Այս մեխանիզմի խոստումը արտահայտվում է որպես «հատկությունները ներքև են հոսում, գործողությունները՝ վեր»։

Վիրտուալ DOM 

Այլ նշանակալի հատկություն է «վիրտուալ Document Object Model»-ի կամ «վիրտուալ DOM»-ի օգտագործումը։  React-ը ստեղծում է հիշողության մեջ տվյալների կառուցվածքի հիշապահեստ, հաշվում է արդյունքի փոփոխությունները և հետո արդյունավետորեն նորացնում բրաուզերի ներկայացված DOM: Դա թույլ է տալիս ծրագրավորողին գրել կոդն այնպես, որ ամբողջ էջը ներկայացվի յուրաքանչյուր փոփոխության ժամանակ, մինչդեռ React գրադարանները ներկայացնում են միայն ենթաբաղադրիչները, որոնք իրականում փոփոխում են։

JSX 

React բաղադրիչները հիմնականում գրված են JSX-ով, որը JavaScript ընդլայնման շարահյուսություն է, որը թույլ է տալիս նշել HTML-ը և օգտագործել HTML թեգերի շարահյուսությունը ենթաբաղադրիչները ներկայացնելու համար ։ Դա React-ին հատուկ  JavaScript-ի քերականական ընդլայնում է ինչպես այժմ անջատված E4X-ը։ HTML շարահյուսությունը գործածվում է React ֆրեյմվորկի JavaScript-ի կանչերում։ Մշակողները կարող են գրել նաև մաքուր JavaScript-ով։ JSX-ը նման է PHP, XHP-ի համար Facebook-ի ստեղծած մեկ այլ ընդլայնման շարահյուսությանը։ JSX-ը նման է սովորական HTML-ին։ JSX կոդի օրինակ։
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
               <p>Header</p>
               <p>Content</p>
               <p>Footer</p>
         </div>
      );
   }
}

export default App;
 Ներդրված տարրեր
Բազմաթիվ տարրեր կարիք ունեն փաթեթավորվել մեկ պահոցում ինչպես վերը նշված <div> տարրն է։

 Հատկանիշներ
Հարմարեցված հատկանիշները աջակցվում են ի հավելում HTML-ի հատկանիշների։ Հարմարեցված հատկանիշները պետք է ավելացվեն  data- նախածանցով։

 Javascript արտահայտություններ
Javascript արտահայտությունները կարող են օգտագործվել JSX-ի ներսում ձևավոր փակագծերով {}:
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{10+1}</h1>
         </div>
      );
   }
}

export default App;

Վերևի օրինակը կներկայացնի "11":

 Եռյակ գործողություններ
If–else պնդումները չեն կարող օգտագործվել JSX-ում, բայց  փոխարենը կօգտագործվեն եռյակ արտահայտություններ։ Վարը օրինակում բրաուզերը կներկայացնի "true", որովհետև  i -ն հավասար է 1-ին։
import React from 'react';

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

export default App;

Ճարտարապետություն HTML-ից անդին 

React-ի հիմնական ճարտարապետությունը կիրառում է  բրաուզերում HTML-ից դուրս ներկայացում։ Օրինակ՝ Facebook-ը ունի դինամիկ գծապատկերներ, որոնք ներկայացնում են   <canvas> թեգեր, իսկ  Netflix-ը և PayPal-ը օգտագործում են իզոմորֆիկ բեռնում և՛ սերվերի, և՛ client-ի մասում միանման HTML ներկայացնելու համար։

React Native 
React Native գրադարանները հրապարակվել են Facebook-ի կողմից 2015 թվականին՝ տալով React ճարտարապետություն բնիկ iOS-ին, Android-ին և UWP ծրագրերին։

Ապագա զարգացում 
Նախագծի կարգավիճակը կարող է հետևել հիմնական թիմի քննարկման ֆորումի միջոցով։ Այնուամենայնիվ  React-ի կարևոր փոփոխությունները անցնում են Future of React repo-ի, Issues-ի և PR-ի միջով։ Դա հնարավորություն է տալիս React-ի հասարակությանը տալ հետադարձ արձագանք նոր պոտենցիալ հատկությունների, էսպերիմենտալ API-երի և  JavaScript-ի շարահյուսության բարելավումների մասին։

Facebook CLA 
Facebook-ը պահանջում է React ներդրողներ Facebook CLA-ը ստորագրելու համար։

Լիցենզավորում 

2013 թվականի մայիսին React-ի սկզբնական հրապարակային թողարկումը օգտագործել է Apache License 2.0: 2014 թվականի հոկտեմբերին React 0.12.0-ը փոխարինել է այն 3-clause BSD license-ով և ավելացրել առանձին PATENTS տեքստային ֆայլ, որը թույլատրում է ծրագրային ապահովման հետ կապված ցանկացած Facebook արտոնագրի օգտագործում։

«Սույնով տրված արտոնագիրը կդադարեցվի, ավտոմատ կերպով եւ առանց ծանուցման, ցանկացած մարդու համար, ով ներկայացնում է ցանկացած պահանջ (ներառյալ ցանկացած դատական հայց  լրացնել, պնդում կամ այլ գործողություններ) պնդելով (ա) ուղղակի, անուղղակի կամ  նպաստող խախտում կամ խթանում ցանկացած արտոնագիր խախտելու համար՝  (1)  Facebook-ի կամ դրա ցանկացած այլ դուստր կազմակերպությունների կամ ստորաբաժանումների կողմից, անկախ նրանից՝ այդ պնդումը կապ ունի  Facebook ծրագրի հետ, թե ոչ, (2) ցանակացած այլ կողմի կողմից, եթե այդպիսի պնդումը ընդհանուր կամ մասնակիորեն Facebook-ի կամ դրա ցանկացած այլ դուստր կազմակերպությունների կամ ստորաբաժանումների ցանկացած ծրագրային ապահովումից, արտադրանքից կամ ծառայությունից, անկախ նրանից՝ այդ պնդումը կապ ունի  Facebook ծրագրի հետ, թե ոչ, կամ (3) ցանակացած այլ կողմի կողմից, որը կապված է Facebook ծրագրային ապահովման հետ, կամ, (բ) որ ցանկացած իրավունք Facebook-ի ցանկացած արտոնագրի պնդման մեջ անվավեր կամ անգործունակ է»։ 

Այս աննախընտրելի դրույթը որոշակի հակասություններ ու բանավեճեր է առաջացրել React օգտագործող համայնքում, քանի որ այն կարելի է մեկնաբանել որպես Facebook-ի լիազորությունները թուլացնելու, լիցենզիան բազմաթիվ սցենարներում վերացնելու փորձ, օրինակ, եթե Ֆեյսբուքը դատի է տալիս լիցենզավորված անձին, որը դրդում է նրանց «այլ գործողության»՝ հրապարակելով գործողությունը բլոգում կամ այլ տեղ։ Շատերը մտահոգություն են հայտնում, որ Facebook-ը կարող է անարդարացիորեն շահագործել դադարեցման կետը կամ, որ ինտեգրումը React-ին արտադրանքի մեջ կարող է բարդացնել նորաստեղծ ընկերության հետագա ձեռքբերումը։

Հիմնվելով հասարակության արձագանքին՝ Facebook-ը նորացրեց 2015 թվականի ապրիլին տրված արտոնագիրը ավելի հասկանալի և թույլատրելի լինելու համար ։

«Սույնով տրված արտոնագիրը կդադարեցվի, ավտոմատ կերպով եւ առանց ծանուցման, եթե դու (կամ քո ցանկացած  դուստր կազմակերպությունները, կորպորացիոն ստորաբաժանումները կամ agents) սկիզբ դնեն Արտոնագրային հավաստում ուղղակի կամ անուղղակի կերպով, կամ ուղղակի հետապնդեն ֆինանսական հետաքրքրություն դրա նկատմամբ՝ (1) Facebook-ի կամ դրա ցանկացած այլ դուստր կազմակերպությունների կամ կորպորացիոն ստորաբաժանումների դեմ,  (2) ցանկացած այլ կողմի դեմ, եթե այդպիսի Արտոնագրային հավաստումը ընդհանուր կամ մասնակիորեն Facebook-ի կամ դրա ցանկացած այլ դուստր կազմակերպությունների կամ կորպորացիոն ստորաբաժանումների ինչ-որ ծրագրային ապահովումից, արտադրանքից կամ ծառայությունից է, կամ  (3) ցանկացած այլ կողմի դեմ, որը կապված է Facebook ծրագրային ապահովման հետ։ [...] «Արտոնագրային հավաստումը» ցանկացած դատական կամ այլ գործողություն է, որը պնդում է ուղղակի կամ անուղղակի կամ նպաստող խախտում կամ խթանում ցանկացած արտոնագրի խատման համար՝ ներառելով խաչաձև հայց կամ հակափաստարկ»:

Արտոնագրի այս երկրորդ տարբերակը մնաց հակասական՝ դարձնելով ֆրեյմվորկի օգտագործումը անընդունելի որոշ ծրագրավորողների համար։ Դա այն պատճառով է, որ փաստաթուղթը շարունակում է թույլ տալ Facebook-ին հրաժարվել ֆեյսբուքյան արտոնագրերի տակ գտնվող ֆրեյմվորկի օգտագործման իրավունքից, այն դեպքում, երբ լիցենզավորված անձը Facebook-ի դեմ ուղղված արտոնագրային հայց է ներկայացրել։

Ծանոթագրություններ

Արտաքին հղումներ 
 React-ի դասընթաց 
 ReactJS֊ի դասեր

Ajax (ծրագրավորում)
Facebook ծրագրային ապահովում
JavaScript վեբ ֆրեյմվորկեր
BSD արտոնագրով ծրագրային ապահովումներ
JavaScript գրադարաններ