React komponentlari

JSX darsida butun kodni bitta App funksiyasiga yozdik. Sahifa o’sganda bu funksiya yuzlab qatorga yetadi va ichidan kerakli joyni topish qiyinlashadi. Komponent — o’sha kodni mustaqil bo’laklarga bo’lish usuli.

Komponent — JSX qaytaradigan funksiya

Komponentning ta’rifi qisqa: JSX qaytaradigan funksiya.

function Greeting() {
  return <h1>Salom, React!</h1>;
}

Uni ishlatish uchun teg sifatida yozasiz:

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  );
}

Ekranda:

Salom, React!
Salom, React!

Bitta funksiya, ikki marta ishlatildi. Har chaqiruv o’z JSX nusxasini hosil qiladi.

Nomi katta harfdan boshlanadi

Bu qoida emas, ishlash sharti. JSX tegning birinchi harfiga qarab qaror qiladi:

Yozuv	React nima deb tushunadi
<div>, <p>, <span>	HTML tegi
<Greeting>, <TaskList>	Sizning komponentingiz

Kichik harf bilan yozsangiz React uni HTML tegi deb qabul qiladi:

function greeting() {
  return <h1>Salom</h1>;
}

// ❌ React buni HTML tegi deb o'ylaydi
<greeting />

Natijada DOM’da shunday element paydo bo’ladi:

<greeting></greeting>

Bo’sh. Funksiya umuman chaqirilmaydi.

Shuning uchun komponent nomi doim PascalCase: TaskList, UserCard, SearchForm.

Alohida faylga chiqarish

Komponentlar bitta faylda turishi shart emas. Odatda har biri o’z faylida yashaydi. src/ ichida components/ papkasi yarating:

src/
├── App.jsx
├── main.jsx
└── components/
    ├── Header.jsx
    └── Footer.jsx

src/components/Header.jsx:

function Header() {
  return (
    <header>
      <h1>Vazifalar ilovasi</h1>
      <p>Kunlik ishlaringizni belgilang</p>
    </header>
  );
}

export default Header;

src/components/Footer.jsx:

function Footer() {
  return (
    <footer>
      <small>2026 — LearnCode</small>
    </footer>
  );
}

export default Footer;

src/App.jsx:

import Header from './components/Header.jsx';
import Footer from './components/Footer.jsx';

function App() {
  return (
    <div className="app">
      <Header />
      <main>
        <p>Bu yerda vazifalar ro'yxati bo'ladi.</p>
      </main>
      <Footer />
    </div>
  );
}

export default App;

Ekranda sarlavha, o’rtadagi matn va pastki yozuv ketma-ket ko’rinadi. Brauzerda http://localhost:5173 ni ochib tekshiring.

Bu modullar darsidagi export / import mexanizmining o’zi — yangi narsa yo’q.

export default va nomli export

export default faylning asosiy eksportini bildiradi. Import qilganda nomni o’zingiz tanlaysiz:

// Bu ikkalasi ham ishlaydi
import Header from './components/Header.jsx';
import PageHeader from './components/Header.jsx';

Erkinlik foydali ko’rinadi, lekin amalda chalkashlik tug’diradi — bir loyihada bitta komponent uch xil nom bilan uchrashi mumkin. Shuning uchun fayldagi nom bilan bir xil import qiling.

Bitta faylda bir nechta komponent kerak bo’lsa, nomli export ishlating:

// src/components/Buttons.jsx
export function PrimaryButton() {
  return <button type="button" className="primary">Saqlash</button>;
}

export function DangerButton() {
  return <button type="button" className="danger">O'chirish</button>;
}

import { PrimaryButton, DangerButton } from './components/Buttons.jsx';

Nomli eksportda jingalak qavs majburiy va nom aynan mos kelishi kerak.

Komponentni ichma-ich joylash

Komponent ichida boshqa komponent ishlatilishi mumkin. Shu tarzda daraxt hosil bo’ladi:

// src/components/TaskItem.jsx
function TaskItem() {
  return <li>Non olish</li>;
}

export default TaskItem;

// src/components/TaskList.jsx
import TaskItem from './TaskItem.jsx';

function TaskList() {
  return (
    <ul>
      <TaskItem />
      <TaskItem />
      <TaskItem />
    </ul>
  );
}

export default TaskList;

App ichida <TaskList /> chaqirilsa, ekranda uchta bir xil qator chiqadi:

• Non olish
• Non olish
• Non olish

Tuzilma shunday ko’rinadi:

App
├── Header
├── TaskList
│   ├── TaskItem
│   ├── TaskItem
│   └── TaskItem
└── Footer

Uchta bir xil qator foydasiz — har birida boshqa matn bo’lishi kerak. Buning uchun komponentga tashqaridan ma’lumot berish yo’li kerak; u keyingi darsning mavzusi.

Komponentni qachon ajratish kerak

Aniq o’lchov yo’q, lekin amaliy belgilar bor:

• Takrorlanish — bir xil bo’lak ikki joyda uchrasa, ajrating.
• Uzunlik — funksiya ekranga sig’masa, ichidan bo’lak ajrating.
• Mustaqil ma’no — “bu kartochka”, “bu forma” deb nom bera olsangiz, u alohida komponent bo’lishga tayyor.

Komponent ichida komponent e’lon qilmang

Bitta xato boshlovchilar orasida ko’p uchraydi — komponentni boshqa komponentning ichida e’lon qilish:

// ❌ Shunday yozmang
function App() {
  function TaskItem() {
    return <li>Non olish</li>;
  }

  return <ul><TaskItem /></ul>;
}

Kod ishlagandek ko’rinadi, lekin App har qayta chizilganda TaskItem yangidan yaratiladi. React uni butunlay boshqa komponent deb hisoblaydi va DOM’ni qayta quradi. Holat bilan ishlaganingizda bu yo’qolib qoladigan qiymatlarga olib keladi.

To’g’ri yo’l — komponentni fayl darajasida, tashqarida e’lon qilish:

// ✅ To'g'ri
function TaskItem() {
  return <li>Non olish</li>;
}

function App() {
  return <ul><TaskItem /></ul>;
}

Amaliy mashq

Loyihangizda ishlang:

1. src/components/ papkasini yarating.
2. Header.jsx yozing: sayt nomi va qisqa tavsif qaytarsin, export default bilan chiqaring.
3. Footer.jsx yozing va App.jsx da ikkalasini import qilib ishlating.
4. TaskItem.jsx va TaskList.jsx yarating, TaskList ichida uchta TaskItem chaqiring.
5. App.jsx ichida <TaskList /> ni <taskList /> ga almashtirib saqlang. Brauzerda ro’yxat yo’qolganini va elementlar ro’yxatida <taskList></taskList> turganini ko’ring, keyin tuzating.
6. Header.jsx dagi export default Header; qatorini vaqtincha o’chirib ko’ring va chiqqan xato matnini o’qing.

5-qadam eng qimmatlisi: bu xato hech qanday ogohlantirish bermaydi, shuning uchun uni bir marta ataylab ko’rib qo’yish keyinchalik soatlarni tejaydi.

Qisqacha xulosa

• Komponent — JSX qaytaradigan funksiya; JSX tegi sifatida ishlatiladi, qo’lda chaqirilmaydi.
• Komponent nomi katta harfdan boshlanishi shart — kichik harfli teg HTML deb qabul qilinadi va sukutda bo’sh chiqadi.
• Har komponent odatda src/components/ ichida o’z faylida turadi va fayl nomi komponent nomi bilan bir xil.
• export default — faylning asosiy eksporti; bitta faylda bir nechta komponent bo’lsa nomli export ishlatiladi.
• Komponentlar ichma-ich joylashib daraxt hosil qiladi: App → TaskList → TaskItem.
• Komponentni boshqa komponent ichida e’lon qilmang — u har chizishda qaytadan yaratiladi.

Keyingi darsda props — komponentga tashqaridan ma’lumot uzatish va uchta bir xil qatorni turlicha qilish.