React komponentlari

Componentlar HTML elementlarini qaytaruvchi funksiyalarga o‘xshaydi.

React componentlari

Componentlar mustaqil va qayta ishlatiladigan kod bitlaridir. Ular JavaScript funksiyalari bilan bir xil maqsadga xizmat qiladi, lekin izolyatsiyada ishlaydi va HTMLni qaytaradi.

Componentlar ikki xil bo‘ladi: Class componentlari va Funksiya componentlari, bu qo‘llanmada biz Funksiya componentlariga e’tibor qaratamiz.

Eski React kod bazalarida siz asosan ishlatiladigan Class componentlarini topishingiz mumkin.

Endi Class componentlari o‘rniga Function componentlarini Hooks bilan birga ishlatish tavsiya etiladi.

Class componentlari hali ham qo‘llab-quvvatlanadi, qo‘shimcha ma’lumot uchun Class componentlari bo‘limini tekshiring.

Birinchi componentingizni yarating

React componentini yaratishda component nomi katta harf bilan boshlanishi kerak.

React componentlari HTML kodini qaytaradi.

Misol

Car nomli Funksiya componentini yarating:

function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

Componentni render qilish

Endi sizning React ilovangizda <h2> elementini qaytaradigan Car nomli component mavjud.

Ushbu componentni ilovangizda ishlatish uchun unga quyidagicha murojaat qiling: <Car />

Misol

Car componentini "root" elementida aks ettiring (render qiling):

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

Misolni ishga tushirish »

Props

Argumentlar props sifatida componentga uzatilishi mumkin, bu xususiyatlarni bildiradi.

Argumentlarni componentga HTML atributlari sifatida yuborasiz.

Siz bizning React Props bo‘limida props haqida ko‘proq bilib olasiz.

Misol

Rangni Car componentiga o‘tkazish uchun atributdan foydalaning va undan foydalaning render funksiyasi:

function Car(props) {
  return (
    <h2>I am a {props.color} Car!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car color="red"/>
);

Misolni ishga tushirish »

Componentlardagi componentlar

Boshqa componentlar ichidagi componentlarga murojaat qilishimiz mumkin:

Misol

Car komponentini Garage komponenti ichida ishlating:

function Car() {
  return (
    <h2>I am a Car!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Misolni ishga tushirish »

Componentni ikki marta render qilish

Biz componentni bir necha marta ko‘rsatishimiz mumkin:

Misol

Car komponentini Garage komponenti ichida ikki marta ishlating:

function Car() {
  return (
    <h2>I am a Car!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
      <Car />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Misolni ishga tushirish »

Yuqoridagi misol biroz foydasiz bo‘lishi mumkin, lekin agar biz Car componentining mazmunini argumentlar yordamida o‘zgartirsak, bu yanada mantiqiy bo‘ladi:

Misol

Ikki xil avtomobilni ko‘rsatish uchun Car komponentidan foydalaning:

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car brand="Ford" />
      <Car brand="BMW" />
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Garage />
);

Misolni ishga tushirish »

Fayllardagi componentlar

React - bu kodni qayta ishlatish bilan bog‘liq va componentlaringizni alohida fayllarga bo‘lish yaxshi fikr bo‘lishi mumkin.

Buning uchun src jildida .jsx fayl kengaytmali yangi fayl yarating va uning ichiga kodni qo‘ying:

E’tibor bering, fayl nomi bosh harf bilan boshlanishi kerak.

Misol

Bu yangi fayl, biz uni Vehicle.jsx deb nomladik:

function Car() {
  return (
    <h2>Hi, I am a Car!</h2>
  );
}

export default Car;

Car componentidan foydalanish uchun Vehicle.jsx faylini import qilishingiz kerak. ilova.

Misol

Endi biz ilovaga Vehicle.jsx faylini import qilamiz va Car componentidan xuddi shu yerda yaratilgandek foydalanishimiz mumkin.

import { createRoot } from 'react-dom/client'
import Car from './Vehicle.jsx';

createRoot(document.getElementById('root')).render(
  <Car />
);

Misolni ishga tushirish »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish