Components

React Komponentlari

Komponentlar HTML elementlarini qaytaradigan funksiyalar kabi.

React Komponentlari

Komponentlar mustaqil va qayta ishlatiladigan kod bo‘laklari hisoblanadi. Ular JavaScript funksiyalari kabi ishlaydi, lekin izolyatsiyada ishlaydi va HTML qaytaradi.

Komponentlar ikki turga bo‘linadi: Klass komponentlari va Funktsiya komponentlari. Ushbu qo‘llanmada biz funktsiya komponentlariga e'tibor qaratamiz.

Avvalgi React kod bazalarida ko‘pincha klass komponentlari ishlatilgan. Hozirgi kunda funktsiya komponentlari va Hooks (React 16.8-da qo‘shilgan) ishlatilishi tavsiya etiladi. Klass komponentlari haqida qo‘shimcha bo‘lim mavjud.

Birinchi Komponentingizni Yarating

React komponentini yaratishda, komponent nomi MUSTAQIL KATTA HARF bilan boshlanishi kerak.

Klass Komponenti

Klass komponenti extends React.Component ifodasini o‘z ichiga olishi kerak. Bu ifoda React.Component'ga meros olishni yaratadi va sizning komponentingizga React.Component'ning funksiyalariga kirish imkonini beradi.

Komponent shuningdek render() metodini talab qiladi, bu metod HTML qaytaradi.

Misol

Car nomli klass komponentini yarating:

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Funktsiya Komponenti

Yuqoridagi misolni, lekin funktsiya komponenti yordamida yarating.

Funktsiya komponenti ham HTML qaytaradi va klass komponenti kabi ishlaydi, lekin funktsiya komponentlarini yozish ancha osonroq va kamroq kod talab qiladi, shuningdek bu qo‘llanmada afzal ko‘riladi.

Misol

Car nomli funktsiya komponentini yarating:

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

Komponentni Render Qilish

Endi sizning React ilovangizda Car nomli komponent mavjud bo‘lib, u <h2> elementini qaytaradi.

Ushbu komponentni ilovangizda ishlatish uchun, odatiy HTML kabi sintaksisdan foydalaning: <Car />

Misol

Car komponentini "root" elementida ko‘rsating:

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

Props

Komponentlarga props deb ataladigan xususiyatlar uzatilishi mumkin.

Props - bu funksiya argumentlariga o‘xshaydi va siz ularni komponentga atribut sifatida yuborasiz.

Props haqida keyingi bo‘limda ko‘proq bilib olasiz.

Misol

Car komponentiga rangni atribut sifatida uzatish va uni render() funksiyasida ishlatish:

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);

Komponentlar Ichida Komponentlar

Biz komponentlarni boshqa komponentlar ichida ishlatishimiz mumkin:

Misol

Car komponentini Garage komponenti ichida ishlatish:

function Car() {
  return <h2>I am a Car!</h2>;
}
 
function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Komponentlarni Fayllarda

React kodni qayta ishlatishga qaratilgan va komponentlarni alohida fayllarga ajratish tavsiya etiladi.

Buning uchun .js kengaytmali yangi fayl yarating va kodni ichiga qo‘ying:

Fayl nomi katta harf bilan boshlanishi kerak.

Misol

Yangi faylni "Car.js" deb nomladik:

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

Car komponentidan foydalanish uchun, faylni ilovangizda import qilishingiz kerak.

Misol

Endi "Car.js" faylini ilovada import qilib, Car komponentidan foydalanishingiz mumkin:

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);