React нь хэрэглэгчийн интерактив интерфейс бүтээхийг хялбарчилдаг. Aппликейшны state бүрт зориулсан энгийн бүтэц зохион байгуулахаас гадна, React нь ѳгѳгдѳл ѳѳрчлѳгдѳхѳд яг зѳв компонентоо ѳѳрчлѳн рендер хийдэг.
Declarative бүтэц нь кодыг тань debug хийхэд хялбар болгохоос гадна, ажиллагаа нь илүү тодорхой болох юм.
Бие даан state-ээ удирддаг маш энгийн компонент бичиж, эдгээрийг хольж найруулан нарийн бүтэцтэй хэрэглэгчийн интерфэйс бүтээ.
Компонентийн логик нь тэмплэйт-ээр бус JavaScript-ээр бичигддэг учраас ѳгѳгдлийг апп хооронд хялбар дамжуулж, DOM-оос state-ээ тусд нь байлгаж чадна.
Node ашиглан сервер талдаа React-ыг рендер хийж ашиглаж болдог мѳн гар утасны апп хийх бол React Native ашиглана.
React компонент нь render()
функцыг ашиглан орж ирсэн ѳгѳгдлийг харуулдаг. Энэ жишээ нь XML-адил синтакс болох JSX ашиглаж байна. Конпонентод гаднаас ѳгсѳн ѳгѳгдлийг render()
дотор this.props
ашиглан авдаг.
React-д заавал JSX ашиглах шаардлагагүй бѳгѳѳд Babel REPL ашиглан JSX хѳрвүүлэгдэн Javascript болохыг харж болно.
Гадна талаас(this.props
-оор) ѳгѳгдлийг авахаас гадна, компонент ѳѳрѳѳ доторх ѳгѳгдлѳѳ удирддаг(this.state
ашиглaдаг). Хэрвээ компонентийн доторх ѳѳрийн ѳгѳгдѳл нь ѳѳрчлѳгдвѳл render()
функц дахин дуудагдан рендер хийгдсэн хэсэг шинэчлэгддэг.
props
болон state
ашиглан жижигхэн жагсаалтын аппликейшн хийе. Энэ жишээ нь state
ашиглан хэрэглэгчийн оруулсан текст болон нийт жагсаалтыг хянадаг. Эвэнт үсрэхэд барьж авах хэсэг элементэд бичигдсэн ч, ажиллах үед тухайн элементээс бус, хуудсаас хайх(event-delegation) болдог.
React нь бусад сан, фрэймворктой асуудалгүй зохицдог. Энэ жишээ нь remarkable гэх Markdown-ын нэмэлт сан ашиглан <textarea>
-д бичигдсэн зүйлийг шууд хѳрвүүлж байна.