React Komponentlariga Kirish

Istalgan veb-saytni ko'rib chiqing. U mustaqil bloklardan tashkil topgan: header, yon panelar, footer, kontent. Aytish mumkinki, bu bloklar Reactda nazarda tutilgan ma'noda komponentlardir.

Xuddi shu headerga qarasak, undan logotip bloki, kontaktlar bloki, menyu bloki va hokazolarni ajratib olish mumkin. Ya'ni komponentlar boshqa subkomponentlardan tashkil topishi mumkin.

Reactda ham ish shunday tartibda olib boriladi - sayt komponentlar to‘plamidan qurilgan bo‘lib, ular o‘z navbatida boshqa komponentlarni o‘z ichiga olishi mumkin.

Reactda har bir komponent alohida modul hisoblanadi. Odatda, dasturlash asosiy App komponentidan boshlanadi, u qolganlarini o‘z ichiga oladi.

Keling, yangi komponentlar yaratishni mashq qilaylik.

Misol uchun, mahsulot ma'lumotlarini chiqaradigan komponent kerak bo'lsin. Buning uchun ishchi papkada Product.js faylini yaratishimiz va unga quyidagi kodni qo‘shishimiz kerak:

import React from 'react';

function Product() {
	return <p>
		mahsulot
	</p>;
}

export default Product;

Ko'rib turganingizdek, hozircha bizning komponentimiz matn bilan paragraf qaytaradi. Keyingi darslarda biz ushbu matnni mahsulot ma'lumotlari qaytariladigan va biz xohlagan dizaynda rasmiylashtiriladigan qilib o'zgartiramiz. Ammo hozircha mashq uchun oddiygina matnli paragraf qoldiramiz.

Keling, endi yaratilgan komponentimizni App komponentida chiqaramiz. Aytaylik, hozircha bizning App komponentimizda quyidagi kod bo'lsin:

import React from 'react';

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

export default App;

Avvalo, biz yaratgan mahsulot komponentini import qilishimiz kerak:

import React from 'react';
import Product from './Product'; // mahsulotni import qilamiz

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

export default App;

Bunday import qilingandan so'ng, App komponenti ichida Product komponentidan foydalanish mumkin.