React.JS сурахгүй бол болохгүй нь part#1
2B | +1% better 2day | dev.012
Facebook хэрэглэдэггүй Монгол хүн бараг байхгүй шиг React-н талаар сонсоогүй хөгжүүлэгч бараг байхгүй биз. Тэгвэл өнөөдөр React.js-г эхнээс нь сурч буй талаараа би хэсэгчлэн хүргэхээр шийдлээ.
Facebook-с үүсэлтэй React нь хурдан, модуляр мөн scale хийх боломжтой.
Хичээлийн хувьд Code Academy дээрх Learn React хичээлийн үнэгүй хувилбарыг үзнэ. Үнэтэй хувилбар нь жижиг төсөл болон тестийн хэсэгтэй гэдгээрээ л ялгаатай юм билээ. (project + quiz)
Хичээлийн хувьд бичлэг гэхээс илүүтэйгээр онолыг тайлбарлаад шууд вэб хөтөч дотроо туршиж үзэх боломжтой болохоор илүү практик талруугаа санагдсан. (Like CodeSandbox)
Нийт 7 бүлэгтэй, бүлэг болгон 2–3 хичээл, 1 жижиг төсөл болон тесттэй. За тэгээд шууд эхний бүлгийн 2 хичээл рүүгээ орцгооё.
Section #1 JSX — Lesson #1 : Intro to JSX
JSX гэдэг нь JavaScript XML гэсэн утгатай бөгөөд React дээр HTML-г хялбар бичихэд зориулсан эд. Энгийн JavaScript-г өргөтгөсөн хувилбар болохоор вэб хөтөч дээр шууд ажиллахгүй. Заавал compile хийж JSX→энгийн JavaScript болгож байж ажилладаг.
Мөн тухайн element-дээ attribute тохируулж өгдөг. src, alt гэх мэт.
ReactDOM.render-н хувьд зөвхөн өөрчлөгдсөн элементийг л шинэчилдэгээрээ онцгой. (React=хариу үйлдэл үзүүлэх) Энэ нь React-н хамгийн чухал зүйлсийн нэг байдаг. Илүү дэлгэрэнгүйг мэдэхийг хүсвэл React: The Virtual DOM талаар уншаарай.
Section #1 JSX — Lesson #1 : Advanced JSX
JSX хөрвүүлдэг гэж хэлсэн тэ? Тэгэхээр className гэж бичиж байж JS-рүү хөрвөхдөө class болдог. Түүнээс гадна self-closing tag буюу HTML дээр <div>, <div/> гэж бичихэд аль аль нь асуудалгүй байдаг бол JSX дээр нэг бол <div/> гэж дангаар нь эсвэл <div></div> гэж заавал хаах ёстой байдаг.
JSX дотор бас энгийн JavaScript байж болох бөгөөд variable авах бол {} ашиглана.
Цаашлаад Variable.attributes, Event listener (onClick, onChange etc…), Conditionals, .map зэргийг үзнэ.
.map болон key жишээг оруулсангүй. Амархан учир өөрсдөө туршаарай.
Ингээд үндсэн 2 хичээл нь дуусаад quiz, cheatsheet, practice pack болон жижиг төсөл хийх даалгавар үлдэж байгаа. Доор practice pack-г зургаар орууллаа.
Харин төслийг CodeSandbox дээр хийсэн линкээ оруулав. 3 зураг дээр дарах үед санамсаргүй байдлаар, тухайн амьтны талаарх мэдээлэл харуулдаг апп хийх даалгавартай. Даалгаврыг хийх явцад
— Nested element
— inline style
— ternary operator
— attributes
— className
— eventListener
зэргийг ашиглаж байгаа.
CodeAcademy-н хувьд хийх ажлуудыг нь нэг нэгээр нь өгөөд, өөрөө хийхээр зохицуулсан байсан. Хэрвээ гацах юм бол hint харах боломжтой эсвэл бичлэг даган хийх ч боломжтой байна лээ. (Зөвхөн PRO хэрэглэгчийн хувьд)
Ингээд эхний хэсэг дуусч байгаа. React-н үндсэн ойлголтыг авсан байх гэж найдаж байна. Нийтдээ 7 хэсэг учир дахиад 6 нийтлэл бичнэ ээ.
