HTML Render

React HTML-ni Render Qilish

React maqsadi ko‘p jihatdan veb sahifada HTML-ni render qilishdir.

React HTML-ni veb sahifaga createRoot() funktsiyasi va uning render() metodidan foydalanib render qiladi.

`createRoot` Funktsiyasi

createRoot() funktsiyasi bitta argument, ya'ni HTML elementni qabul qiladi.

Funktsiyaning maqsadi – React komponenti qanday HTML elementda ko‘rsatilishi kerakligini belgilashdir.

`render` Metodi

render() metodi keyin React komponentini render qilish uchun chaqiriladi.

Lekin render qayerda?

React loyihangizning asosiy papkasida "public" nomli yana bir papka mavjud. Ushbu papkada index.html fayli bor.

Faylning tanasida yagona <div> elementini ko‘rasiz. Bu yerda bizning React ilovamiz render qilinadi.

Misol: "root" idga ega bo‘lgan element ichida paragrafni ko‘rsatish:

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);

Natija <div id="root"> elementida ko‘rsatiladi:

<body>
  <div id="root"></div>
</body>

E'tibor bering, element id "root" deb atalishi shart emas, lekin bu standart an'ana hisoblanadi.

HTML Kod

Ushbu tutorialdagi HTML kod JSX-dan foydalanadi, bu JavaScript kodida HTML teglarini yozish imkonini beradi:

Agar sintaksis tanish bo‘lmasa, xavotir olmang, JSX haqida keyingi bo‘limda ko‘proq ma'lumot olasiz.

Misol: HTML kodini o'z ichiga olgan o'zgaruvchini yarating va uni "root" tugunida ko‘rsating:

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);
 
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);

Root Tuguni

Root tuguni – natijani ko‘rsatmoqchi bo‘lgan HTML elementi.

Bu React tomonidan boshqariladigan kontent uchun konteynerga o‘xshaydi.

Bu <div> elementi bo‘lishi shart emas va id='root' bo‘lishi shart emas:

Misol: Root tuguni qanday nomlashingiz mumkin:

<body>
  <header id="sandy"></header>
</body>

Natijani <header id="sandy"> elementida ko‘rsating:

const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);

React HTML-ni Render Qilish

createRoot Funktsiyasi

render Metodi

HTML Kod

Root Tuguni

Ushbu sahifada

`createRoot` Funktsiyasi

`render` Metodi