Class va Functional komponentlar

DarslarWeb dasturlash

Class va Functional komponentlar

Ikki turdagi komponentlar: class (eski) va functional (zamonaviy). Qaysi birini qachon ishlatish kerak.

50 daqiqa
React — Dars 2

Komponent — React yuragi

Har bir React ilova komponentlardan quriladi. Ikki turi bor, lekin bugun birga ishlatasiz.

functionclassexportreturn

Dars rejasi

6 ta mavzu
  1. 01Komponent nima?
  2. 02Functional komponent
  3. 03Class komponent
  4. 04Farqlar va solishtirish
  5. 05Komponentni chaqirish
  6. 06Bir nechta komponent

1. Komponent nima?

Komponent — UI'ning mustaqil, qayta ishlatiladigan qismi. Tugma, karta, forma, navbar — hammasi komponent bo'lishi mumkin. Ular oddiy JS funksiyasi yoki class sifatida yoziladi.

Functional

Oddiy funksiya. Zamonaviy React — 99% holatda shu ishlatiladi.

Class

ES6 class. Eski kodda uchraydi. Bilish kerak, lekin yangi loyihada deyarli ishlatilmaydi.

2. Functional komponent

Oddiy JS funksiyasi. JSX qaytaradi. Nomi katta harf bilan boshlanishi shart.

src/Salom.jsx — oddiy funksiya
1function Salom() {
2  return <h1>Salom, dunyo!</h1>;
3}
4

5export default Salom;
Arrow funksiya bilan
1const Salom = () => {
2  return <h1>Salom, dunyo!</h1>;
3};
4

5// Yoki bir qator (qavs ichida)
6const Salom = () => <h1>Salom!</h1>;
7

8export default Salom;
Murakkabroq misol
1function ProfilKarta() {
2  const ism = "Ali";
3  const yosh = 17;
4

5  return (
6    <div className="karta">
7      <h2>{ism}</h2>
8      <p>Yosh: {yosh}</p>
9      <button>Batafsil</button>
10    </div>
11  );
12}
13

14export default ProfilKarta;

3. Class komponent

ES6 class asosida
1import React, { Component } from "react";
2

3class Salom extends Component {
4  render() {
5    return <h1>Salom, dunyo!</h1>;
6  }
7}
8

9export default Salom;
Class — murakkabroq
1import React, { Component } from "react";
2

3class ProfilKarta extends Component {
4  render() {
5    const ism = "Ali";
6    const yosh = 17;
7

8    return (
9      <div className="karta">
10        <h2>{ism}</h2>
11        <p>Yosh: {yosh}</p>
12      </div>
13    );
14  }
15}
16

17export default ProfilKarta;

4. Farqlar va solishtirish

Bir xil natija — ikki uslub
1// ===== FUNCTIONAL =====
2function Salom() {
3  return <h1>Salom!</h1>;
4}
5

6// ===== CLASS =====
7class Salom extends Component {
8  render() {
9    return <h1>Salom!</h1>;
10  }
11}
12

13// Natija: ikkalasi ham bir xil chiqaradi

Functional afzalliklar

Qisqa, toza, hooks bilan to'liq imkoniyat. Zamonaviy standart.

Class kamchiliklari

Ko'p kod, this muammolari, eski uslub. Yangi kodda deyarli ishlatilmaydi.

2019-yildan beri React Hooks tufayli functional komponentlar class qila oladigan hamma narsani qila oladi — va ancha sodda tarzda.

5. Komponentni chaqirish

Komponent — HTML tegi kabi
1import Salom from "./Salom";
2

3function App() {
4  return (
5    <div>
6      <Salom />         {/* self-closing */}
7      <Salom></Salom>   {/* yoki ochilib-yopiladigan */}
8    </div>
9  );
10}
11

12export default App;

6. Bir nechta komponent

Komponentlarni birlashtirish
1function Header() {
2  return <header><h1>Mening saytim</h1></header>;
3}
4

5function Asosiy() {
6  return (
7    <main>
8      <p>Bu asosiy qism.</p>
9    </main>
10  );
11}
12

13function Footer() {
14  return <footer>© 2026</footer>;
15}
16

17function App() {
18  return (
19    <div>
20      <Header />
21      <Asosiy />
22      <Footer />
23    </div>
24  );
25}
26

27export default App;
Komponentlardan qurish
Natijajonli

Kichik test

0 / 4

1.Functional komponent nima qaytarishi kerak?

2.Komponent nomi qanday boshlanishi kerak?

3.Class komponentda JSX qayerda yoziladi?

4.Zamonaviy React'da qaysi tur tavsiya etiladi?

Mustaqil ish

0 / 5