React HTML render qilish

Reactning maqsadi ko‘p jihatdan HTMLni veb-sahifada ko‘rsatishdir.

React HTML-ni veb-sahifaga konteyner va createRoot() deb nomlangan funksiya orqali beradi.

Konteyner

React veb-sahifada HTMLni ko‘rsatish uchun konteynerdan foydalanadi.

Odatda, bu konteyner index.html faylidagi <div id="root"></div> elementidir.

Agar oldingi bobdagi amallarni bajargan bo‘lsangiz, loyihangizning asosiy katalogida index.html nomli fayl bo‘lishi kerak:

Misol

index.html faylining standart tarkibi:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-react-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

index.html faylining mazmunini yaxshiroq tushunish uchun bizga kerak bo‘lmagan barcha kodlarni olib tashlaymiz.

Misol

index.html fayli endi quyidagicha ko‘rinishi kerak:

<!doctype html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Fayl endi keraksiz koddan tozalandi va biz diqqatimizni hech qanday bezovta qiluvchi elementlarsiz React-ni o‘rganishga qaratishimiz mumkin.

CreateRoot funksiyasi

createRoot funksiyasi main.jsx da joylashgan faylni src jildida saqlaydi va o‘rnatilgan funksiya bo‘lib, React ilovasi uchun root elementini yaratishda foydalaniladi.

Misol

src/main.jsx faylining standart tarkibi:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
      <App />
    </StrictMode>
  )

createRoot() funksiyasi bitta argumentni, HTML elementini oladi.

Funksiyaning maqsadi React componenti ko‘rsatilishi kerak bo‘lgan HTML elementini aniqlashdir.

createRoot funksiyasini yaxshiroq tushunish uchun keraksiz kodni olib tashlaymiz va o‘zimizning "Hello React!" misol:

Misol

src/main.jsx fayli endi quyidagicha ko‘rinishi kerak:

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <h1>Hello React!</h1>
)

Agar siz faylni saqlasangiz, brauzerda natija quyidagicha ko‘rinadi:

Render usuli

render metodiga e’tibor berdingizmi?

render usuli HTML konteynerida nimani ko‘rsatishni belgilaydi.

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

Misol

"root" elementi ichidagi paragrafni aks ettirish:

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <p>Welcome!</p>
)

Natija quyidagicha ko‘rinadi:

Eslatma: element identifikatori "root" bo‘lishi shart emas, lekin bu standart konventsiya.

React-da Render qilish (Rendering)

W3Schools o‘zining "Reactni ko‘rsatish" vositasiga ega bo‘lib, biz o‘quv qo‘llanmada tushuntirgan kod natijasini ko‘rsatamiz.

Natijani ko‘rish uchun "Misolni ishga tushirish" tugmasini bosing:

Misol

Xuddi shu misol "Reactni ko‘rsatish" vositamizda ko‘rsatilgan:

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <p>Welcome!</p>
)

Misolni ishga tushirish »

HTML kodi

Ushbu qo‘llanmadagi HTML kodi JSX-dan foydalanadi, bu sizga JavaScript kodiga HTML teglarini yozish imkonini beradi:

Sintaksis notanish bo‘lsa, tashvishlanmang, JSX haqida keyinroq ushbu qo‘llanmada bilib olasiz.

Misol

HTML kodini o‘z ichiga olgan o‘zgaruvchi yarating va uni "root" elementida aks ettiring:

import { createRoot } from 'react-dom/client'

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

createRoot(document.getElementById('root')).render(
  myelement
)

Misolni ishga tushirish »

Root tuguni

Root tuguni - natijani aks ettirmoqchi bo‘lgan HTML elementi.

Bu React tomonidan boshqariladigan kontent uchun konteynerga o‘xshaydi.

U <div> element bo‘lishi shart EMAS va shunday bo‘ladi KERAK EMAS id='root' ga ega:

Misol

Root tugunini xohlagancha nomlash mumkin.

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

<!doctype html>
<html lang="en">
  <body>
    <header id="sandy"></header>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('sandy')).render(
  <p>Welcome!</p>
)

Misolni ishga tushirish »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish