Nega Reactjs-ni o'rganing?

JSX kapitallashuvi

• // This is considered a component by React. // This is considered a JSX HTML tag.
• React komponentlarning birinchi harfini bosh harf bilan yozishni talab qiladi. JSX HTML yorlig'i va komponent namunasi o'rtasidagi farqni aniqlash uchun ushbu kapitallashuvdan foydalanadi. Agar nomning birinchi harfi bosh harf bilan yozilgan bo'lsa, JSX bu komponent namunasi ekanligini biladi; bo'lmasa, u HTML elementidir.

ReactDOM.render()

• import React from 'react'; import ReactDOM from 'react-dom'; class MyComponent extends React.Component { render() { return

  Hello world!

  ; } } ReactDOM.render(, document.getElementById('app'));

ReactDOM.render()ning birinchi argumenti komponent misolidir. Bu komponent misolini ko'rsatadi.

Ushbu misolda biz ning misolini keltiramiz MyComponent.

Ko'p qatorli JSX ifodalari

• render() { return (

  
  Be the change you wish to see in the world.
  Mahatma Gandhi

  ); }
• Qavslar ko'p qatorli JSX ifodasini yozishda ishlatiladi. render()Misolda komponent usuli bir nechta satrlarga bo'linganligini ko'ramiz . Shuning uchun u qavslar ichiga o'ralgan.

class Integer extends React.Component { render() { const value = 3.14; const asInteger = Math.round(value); return
{asInteger}
; } }

• class Integer extends React.Component { render() { const value = 3.14; const asInteger = Math.round(value); return
  {asInteger}
  ; } }

Har qanday JSX qaytarilgunga qadar React komponenti JavaScript-ni o'z ichiga olishi mumkin. Bayonotdan oldingi JavaScript returnkomponentni ko'rsatish uchun zarur bo'lgan har qanday mantiq haqida ma'lumot beradi.

Misol kodida biz JavaScript-ni butun songa yaxlitlovchi returnbayonotdan oldin ko'ramiz.value

HTML elementlari va komponentlarini qaytarish

• class Header extends React.Component { render() { return (