React

JavaScript գրադարան` օգտագործողի ինտերֆեյսներ կառուցելու համար

Դեկլարատիվ

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)։

Կոդի օրինակի ներբեռնում...

Կոմպոնենտ, որն օգտագործում է արտաքին plugin-ներ

React-ը թույլ է տալիս համագործակցել այլ գրադարանների և framework-ների հետ։ Այս օրինակում օգտագործվում է remarkable արտաքին Markdown գրադարանը, <textarea>-ի արժեքը իրական ժամանակում փոխարկելու համար։

Կոդի օրինակի ներբեռնում...