Сайн уу Дэлхий

Хамгийн энгийн React жишээ иймэрхүү харагдана:

ReactDOM.render(
  <h1>Сайн уу, дэлхий!</h1>,
  document.getElementById('root')
);

Ингэж “Сайн уу, дэлхий!” гэх толгой таг хуудсанд харагдана.

Try it on CodePen

Дээрхи холбоос дээр дарж онлайн засварлагчыг нээе. Хүссэнээрээ ѳѳрчлѳѳд үр дүн хэрхэн ѳѳрчлѳгдѳхийг хараарай. Ихэнх жишээнүүд үүнтэй адил заавартай байгаа.

Энэ зааврыг хэрхэн ойлгох вэ

Энэхүү зааварт бид React аппын бүрдэл хэсгүүдийг үзнэ: элементүүд болон компонентүүд. Эдгээрийг гартаа оруулсан цагт, нарийн бүтэцтэй аппыг жижиг хэсгүүдээр бүтээх боломжтой.

Зѳвлѳгѳѳ

Энэхүү заавар нь юмны гол агуулгыг алхам алхам-аар суралцдаг хүмүүст зориулсан тул биеэр туршиж юм сурдаг тѳрлийн хүмүүст практик заавар санал болгоё. Магадгүй та энэхүү зааварт дурьдаагүй зүйлсийг практик заавраас олно байх.

Энэ бол React-ын гол агуулгыг алхам алхамаар заасан хамгийн эхний бүлэг. Бусад бүх бүлэг баруун талын мэнюд бий. Хэрвээ утаснаас үзэж байгаа бол баруун доод буланд байх товч дээр дарж мэню харах боломжтой.

Бүлэг бүр ѳмнѳ нь заагдсан бүлгийн мэдлэг дээр үндэслэсэн. Ta React-ын талаар “Ерѳнхий агуулга” хэсгээс дарааллын дагуу үзэж сурах боломжтой. Жишээ нь энэ бүлгийн дараах бүлэг нь “JSX гэж юу вэ”

Урьдчилан мэдсэн байх

React бол JavaScript сан, тиймээс энэ зааврыг дагаж хийхэд тѳѳрѳхгүйн тулд таньд JavaScript хэлний анхан шатны мэдлэг байх шаардлагатай. Хэрвээ та гадарладаг эсэхдээ эргэлзэж байвал, JavaScript-ын хичээлийг үзэж мэдлэгээ бататгахыг зѳвлѳж байна. Ердѳѳ 30минутаас 1 цаг хүртлэх хугацаа зарцуулаад React болон JavaScript гэсэн 2 тусдаа зүйл сурч байгаа мэт санагдахгүй нь ээ.

Тэмдэглэл

Энд зарим заавар JavaScript-ын шинэ синтаксыг ашиглаж жишээ бичсэн байгаа. Хэрвээ JavaScript ашиглаагүй удсан бол энэ гурван түгээмэл зүйлсийг мэдэхэд илүүдэхгүй.

Ингээд эхэлцгээе!

Доош нь гүйлгээд вэб сайтын хѳл хэсгийн дээд талд энэ зааврын дараагийн бүлгийн холбоосыг олно.