Nega Reactjs-ni o'rganing?

const myList = (

• item 1
• item 2
• item 3

);

Bir nechta satrlarni o'z ichiga olgan JSX ifodasi qavs ichiga o'ralishi kerak: (va ). Misol kodida biz JSX ifodasi boshlanishidan oldin doimiy deklaratsiya bilan bir qatorda ochilish qavslarini ko'ramiz. JSX ifodasi oxiridan keyingi qatorda yopilish qavslarini ko'ramiz.

JSX sintaksisi va HTML

• JSX sintaksisi va HTML
• const title = 

  Welcome all!

Kod blokida biz JSX sintaksisi va HTML o'rtasidagi o'xshashlikni ko'ramiz: ikkalasi ham burchakli qavsni ochish va yopish teglaridan ( 

va 

) foydalanadi.

React komponentida foydalanilganda, JSX brauzerda HTML sifatida ko'rsatiladi.

JSX atributlari

• JSX atributlari
• const example = 

  JSX Attributes

  ;
• JSX atributlarining sintaksisi HTML atributlarinikiga juda o'xshaydi. Kod blokida, JSX elementining ochilish yorlig'i ichida biz qiymatga ega 

  atributni ko'ramiz .id"example"

ReactDOM JavaScript kutubxonasi

• ReactDOM.render(

  This is an example.

  , document.getElementById('app') );

JavaScript kutubxonasi react-dom, ba'zan deb ataladi ReactDOM, JSX ifodasini olish, DOM tugunlarining mos daraxtini yaratish va ushbu daraxtni DOMga qo'shish orqali JSX elementlarini DOMga ko'rsatadi.

Kod misoli bilan boshlanadi ReactDOM.render(). Birinchi argument kompilyatsiya qilinadigan va ko'rsatiladigan JSX ifodasi, ikkinchi argument esa biz uni qo'shmoqchi bo'lgan HTML elementidir.

JavaScript-ni JSX-ga joylashtirish

• let expr = 

  {10 * 10}

  ; // above will be rendered as

  100

JavaScript ifodalari JSX ifodalari ichiga kiritilishi mumkin. O'rnatilgan JavaScript ifodasi jingalak qavslarga o'ralgan bo'lishi kerak.

Taqdim etilgan misolda biz JavaScript ifodasini teg 10 * 10 ichiga joylashtirmoqdamiz.