Hyrje në Komponentët e React

Shikoni çdo faqe interneti. Ajo përbëhet nga një grup blloqesh të pavarur: header, sidebar-e, footer, përmbajtje. Mund të thuhet se këto blloqe janë komponentët në kuptimin që nënkuptohet në React.

Nëse shikoni të njëjtin header, çfarë në të mund të veçoni një bllok me logon, një bllok kontaktesh, një bllok me menu e kështu me radhë. Kjo do të thotë se komponentët mund të përbëhen nga nënkomponentë të tjerë.

Në të njëjtën mënyrë çështja qëndron në React - faqja interneti ndërtohet nga një grup komponentësh, të cilët nga ana e tyre mund të përmbajnë komponentë të tjerë.

Në React, çdo komponent përfaqëson një modul të veçantë. Zakonisht zhvillimi fillon me komponentin kryesor App, i cili përmban në vetvete pjesën tjetër.

Le të praktikojmë krijimin e komponentëve të rinj.

Le të themi për shembull se na duhet një komponent që shfaq të dhënat e produktit. Për këtë, duhet të krijojmë në dosjen e punës një skedar Product.js dhe të shtojmë në të kodin e mëposhtëm:

import React from 'react';

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

export default Product;

Siç e shihni, tani komponenti ynë kthen një paragraf me tekst. Në mësimet në vijim do ta përmirësojmë këtë kod në mënyrë që të kthehen të dhënat e produktit. Por tani për tani, le të lëmë thjesht paragrafin me një tekst fillestar.

Tani le ta shfaqim komponentin tonë të krijuar në komponentin App. Le të themi se tani App-i ynë ka kodin e mëposhtëm:

import React from 'react';

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

export default App;

Për fillim, ne duhet të importojmë komponentin e krijuar nga ne për produktin:

import React from 'react';
import Product from './Product'; // importojmë produktin

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

export default App;

Pas një importi të tillë, brenda komponentit App mund të përdoret komponenti Product.