React-ը թույլ է տալիս հեշտորեն ստեղծել ինտերակտիվ UI-ներ։ Նախագծեք ներկայացումներ(views) ձեր ծրագրի ցանկացած վիճակի(state) համար, և React-ը արդյունավետորեն կթարմացնի և կարտապատկերի միայն այն կոմպոնենտները, որոնցում ձեր տվյալները ենթարկվել են փոփոխության։
Դեկլարատիվ ներկայացումները դարձնում են ձեր կոդը ավելի կանխատեսելի և հեշտ` debug-ի համար։
Կառուցեք ինկապսուլացված կոմպոնենտներ, որոնք կկառավարեն իրենց սեփական վիճակը, այնուհետև համախմբեք նրանց` ստեղծելով բարդ UI-ներ։
Քանի որ կոմպոնենտի տրամաբանությունը գրված է JavaScript-ով, այլ ոչ թե ձևանմուշներով, դուք կարող եք հեշտությամբ փոխանցել մեծ տվյալներ ձեր հավելվածի միջով և պահել հավելվածի վիճակը DOM-ից դուրս։
Մենք ենթադրություններ չենք անում ձեր մնացած տեխնոլոգիաների ստեկի վերաբերյալ. այսպիսով, դուք կարող եք ստեղծել նոր հատկություններ React-ով առանց փոփոխելու գոյություն ունեցող կոդը։
React-ը նաև կարող է արտապատկերվել սերվերում` օգտագործելով Node և հնարավորություն է տալիս ստեղծել բջջային հավելվածներ` օգտագործելով React Native։
React-ի կոմպոնենտները իրականացնում են render()
մեթոդը, որը ստանում է մուտքային տվյալներ և վերադարձնում է այն, ինչ պետք է պատկերել։ Այս օրինակում օգտագործվում է XML-անման շարահյուսություն, որը կոչվում է JSX։ Մուտքային տվյալները, որոնք փոխանցվել են կոմպոնենտին, կարող են լինել հասանելի render()
-ում this.props
-ով։
JSX-ը պարտադիր չէ, և կարող է չօգտագործվել React-ում։ Փորձիր Babel REPL` JSX-ի կոմպիլյացիայի փուլում մշակված JavaScript կոդը տեսնելու համար։
Բացի մուտքային տվյալները վերցնելուց (որոնք հասանելի են this.props
-ով), կոմպոնենտը կարող է պահել ներքին վիճակի տվյալներ (որոնք հասանելի են this.state
-ով)։ Երբ կոմպոնենտում վիճակի տվյալները փոխվեն, արտապատկերված նշարկումը կթարմանա render()
-ի կանչով։
Օգտագործելով props
-ը և state
-ը` մենք կարող ենք ստեղծել փոքր Todo հավելված։ Այս օրինակում օգտագործվում է state
` հետևելու համար էլեմենտների ընթացիկ ցուցակին, ինչպես նաև օգտագործողի կողմից մուտքագրված տեքստին։ Թեպետ թվում է, թե իրադարձություն մշակողները միջտողային(inline) են կցված, սակայն իրականում նրանք հավաքվում և իրականացվում են` օգտագործելով իրադարձությունների պատվիրակում(event delegation)։
React-ը թույլ է տալիս համագործակցել այլ գրադարանների և framework-ների հետ։ Այս օրինակում օգտագործվում է remarkable արտաքին Markdown գրադարանը, <textarea>
-ի արժեքը իրական ժամանակում փոխարկելու համար։