Component Yako ya Kwanza

Components: vipengele vya ujenzi wa UI

Kwenye Wavuti, HTML hutuwezesha kuunda hati zilizopangwa vizuri kwa kutumia seti yake ya tagi zilizojengwa ndani kama <h1> na <li>:

<article>
  <h1>Component Yangu ya Kwanza</h1>
  <ol>
    <li>Components: Vipengele vya Ujenzi wa UI</li>
    <li>Kufafanua Component</li>
    <li>Kutumia Component</li>
  </ol>
</article>

Markup hii inawakilisha makala haya <article>, kichwa chake <h1>, na jedwali la yaliyomo (kwa muhtasari) kama orodha iliyopangwa <ol>. Markup kama hii, ikiunganishwa na CSS kwa ajili ya mtindo, na JavaScript kwa ajili ya mwingiliano, ipo nyuma ya kila sidebar, avatar, modal, dropdown—kila kipande cha UI unachokiona kwenye Wavuti.

React hukuruhusu kuunganisha markup, CSS, na JavaScript yako kuwa “components” maalum, elementi za UI zinazoweza kutumika tena kwa programu yako. Msimbo wa jedwali la yaliyomo uliouona hapo juu ungeweza kugeuzwa kuwa component ya <TableOfContents /> ambayo ungeweza kui-render kwenye kila ukurasa. Ndani ya pazia, bado inatumia tagi zilezile za HTML kama <article>, <h1>, n.k.

Kama ilivyo kwa tagi za HTML, unaweza kupanga, kuratibu na kupachika components ili kubuni kurasa nzima. Kwa mfano, ukurasa wa nyaraka unaousoma umetengenezwa kwa components za React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

Kadri mradi wako unavyokua, utagundua kuwa michoro yako mingi inaweza kuundwa kwa kutumia tena components ulizoandika tayari, ikiharakisha uendelezaji wako. Jedwali letu la yaliyomo hapo juu lingeweza kuongezwa kwenye skrini yoyote kwa <TableOfContents />! Unaweza hata kuanzisha mradi wako kwa kasi kwa kutumia maelfu ya components zinazoshirikiwa na jamii ya chanzo huria ya React kama Chakra UI na Material UI.

Kufafanua component

Kijadi, wakati wa kuunda kurasa za wavuti, watengenezaji wa wavuti waliweka markup kwenye maudhui yao kisha waliongeza mwingiliano kwa kunyunyiza JavaScript kidogo. Hili lilifanya kazi vizuri wakati mwingiliano ulikuwa jambo la ziada tu kwenye wavuti. Sasa unatarajiwa kwa tovuti nyingi na programu zote. React huweka mwingiliano mbele huku ikitumia teknolojia ileile: component ya React ni function ya JavaScript ambayo unaweza kuinyunyizia markup. Hivi ndivyo inavyoonekana (unaweza kuhariri mfano ulio hapa chini):

Na hivi ndivyo unavyojenga component:

Hatua ya 1: Export component

Kiambishi export default ni sintaksia ya kawaida ya JavaScript (siyo mahususi kwa React). Hukuruhusu kutia alama function kuu katika faili ili baadaye uweze kuii-import kutoka faili nyingine. (Zaidi kuhusu ku-import katika Kuingiza na Kutoa Components!)

Hatua ya 2: Fafanua function

Kwa function Profile() { } unafafanua function ya JavaScript yenye jina Profile.

Hatua ya 3: Ongeza markup

Component hurudisha tagi ya <img /> yenye sifa za src na alt. <img /> imeandikwa kama HTML, lakini kwa hakika ni JavaScript ndani ya pazia! Sintaksia hii inaitwa JSX, na hukuruhusu kupachika markup ndani ya JavaScript.

Kauli za return zinaweza kuandikwa zote katika mstari mmoja, kama katika component hii:

return <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />;

Lakini kama markup yako haiko yote katika mstari mmoja na neno kuu la return, lazima uifunge ndani ya jozi ya mabano:

return (
  <div>
    <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Kutumia component

Sasa kwa kuwa umefafanua component yako ya Profile, unaweza kuipachika ndani ya components nyingine. Kwa mfano, unaweza ku-export component ya Gallery inayotumia components nyingi za Profile:

Kile kivinjari kinachokiona

Angalia tofauti katika matumizi ya herufi kubwa na ndogo:

• <section> ni herufi ndogo, hivyo React inajua tunarejelea tagi ya HTML.
• <Profile /> inaanza na herufi kubwa P, hivyo React inajua tunataka kutumia component yetu iitwayo Profile.

Na Profile ina HTML zaidi hata: <img />. Mwishoni, hiki ndicho kivinjari kinachokiona:

<section>
  <h1>Wanasayansi wa ajabu</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Kupachika na kupanga components

Components ni functions za kawaida za JavaScript, hivyo unaweza kuweka components nyingi katika faili moja. Hili ni rahisi wakati components ni ndogo kiasi au zinahusiana kwa karibu. Kama faili hii itakuwa na msongamano, unaweza kila wakati kuhamisha Profile kwenye faili tofauti. Utajifunza jinsi ya kufanya hivi hivi punde kwenye ukurasa kuhusu imports.

Kwa sababu components za Profile zina-render ndani ya Gallery—hata mara kadhaa!—tunaweza kusema kuwa Gallery ni component-mzazi, ikii-render kila Profile kama “mtoto”. Hii ni sehemu ya uchawi wa React: unaweza kufafanua component mara moja, kisha kuitumia katika sehemu nyingi na mara nyingi upendavyo.

export default function Gallery() {
  // 🔴 Kamwe usifafanue component ndani ya component nyingine!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Tangaza components katika ngazi ya juu
function Profile() {
  // ...
}