React

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>-ի արժեքը իրական ժամանակում փոխարկելու համար։