Utangulizi wa Vifaa vya React

Tuangalie tovuti yoyote. Inajumuisha seti ya vitalu vinavyojitegemea: kichwa, upau wa pembeni, kijiko cha chini, yaliyomo. Tunaweza kusema kwamba vitalu hivi ndivyo vifaa kwa maana inayotakiwa katika React.

Kama tukiangalia kichwa hicho hicho, nini ndani yake tunaweza kutofautisha kizuizi cha nembo, kizuizi cha mawasiliano, kizuizi cha menyu na kadhalika. Yaani vifaa vinaweza kuwa na vifaa vidogo vingine ndani yake.

Kwa njia ile ile mambo yanavyoendelea katika React - tovuti inajengwa kutoka kwa seti ya vifaa, ambavyo na wao wenyewe wanaweza kuwa na vifaa vingine ndani yake.

Katika React kila kifaa ni moduli tofauti. Kawaida ukuzaji huanza na kifaa kikuu App, ambacho kina vingine ndani yake.

Wacha tufanye mazoezi ya kuunda vifaa vipya.

Wacha tuseme kwa mfano tunahitaji kifaa kinachotoa data ya bidhaa. Kwa hili tunahitaji katika folda ya kazi kuunda faili Product.js na kuongeza kanuni ifuatayo ndani yake:

import React from 'react';

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

export default Product;

Kama unavyoona, kwa sasa kifaa chetu kinarudisha aya na maandishi. Katika masomo yajayo tutaboresha kanuni hii ili irudishe data ya bidhaa. Lakini kwa sasa tuanze tu kwa kuacha aya na maandishi fulani ya kuanzia.

Wacha sasa tuonyeshe kifaa chetu kilichoundwa katika kifaa App. Wacha tuseme kwa sasa App wetu ina kanuni ifuatayo:

import React from 'react';

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

export default App;

Kuanza tunahitaji kuagiza kifaa tulichokiumba na bidhaa:

import React from 'react';
import Product from './Product'; // tunaagiza bidhaa

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

export default App;

Baada ya kuagiza hivi ndani ya kifaa App tunaweza kutumia kifaa Product.