Kuelezea UI

Component yako ya kwanza

Programu za React hujengwa kutokana na vipande vilivyotengwa vya UI vinavyoitwa components (vipengele). Component ya React ni function ya JavaScript ambayo unaweza kuinyunyizia markup. Components zinaweza kuwa ndogo kama kitufe, au kubwa kama ukurasa mzima. Hapa kuna component ya Gallery inayo-render components tatu za Profile:

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

export default function Gallery() {
  return (
    <section>
      <h1>Wanasayansi wa ajabu</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Soma Component Yako ya Kwanza ili ujifunze jinsi ya kutangaza na kutumia components za React.

Read More

---

Kuingiza na kutoa components

Unaweza kutangaza components nyingi katika faili moja, lakini faili kubwa zinaweza kuwa ngumu kuzipitia. Ili kutatua hili, unaweza export component kwenye faili yake yenyewe, kisha import component hiyo kutoka faili nyingine:

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Wanasayansi wa ajabu</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Ready to learn this topic?

Soma Kuingiza na Kutoa Components ili ujifunze jinsi ya kugawanya components kwenye faili zao wenyewe.

Read More

---

Kuandika markup kwa JSX

Kila component ya React ni function ya JavaScript ambayo inaweza kuwa na markup fulani ambayo React hui-render kwenye kivinjari. Components za React hutumia kiendelezi cha sintaksia kinachoitwa JSX kuwakilisha markup hiyo. JSX inafanana sana na HTML, lakini ina masharti zaidi kidogo na inaweza kuonyesha taarifa zinazobadilika.

Tukibandika markup ya HTML iliyopo kwenye component ya React, haitafanya kazi kila wakati:

export default function TodoList() {
  return (
    // Hii haifanyi kazi vizuri!
    <h1>Mambo ya kufanya ya Hedy Lamarr</h1>
    <img
      src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Buni taa mpya za barabarani
      <li>Fanya mazoezi ya onyesho la filamu
      <li>Boresha teknolojia ya spektramu
    </ul>

Ikiwa una HTML iliyopo kama hii, unaweza kuirekebisha kwa kutumia kigeuzi (converter):

export default function TodoList() {
  return (
    <>
      <h1>Mambo ya kufanya ya Hedy Lamarr</h1>
      <img
        src="https://react.dev/images/docs/scientists/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Buni taa mpya za barabarani</li>
        <li>Fanya mazoezi ya onyesho la filamu</li>
        <li>Boresha teknolojia ya spektramu</li>
      </ul>
    </>
  );
}

Ready to learn this topic?

Soma Kuandika Markup kwa JSX ili ujifunze jinsi ya kuandika JSX halali.

Read More

---

JavaScript ndani ya JSX kwa mabano ya vishazi

JSX hukuruhusu kuandika markup inayofanana na HTML ndani ya faili ya JavaScript, ikiweka mantiki ya ku-render na maudhui mahali pamoja. Wakati mwingine utataka kuongeza mantiki kidogo ya JavaScript au kurejelea sifa inayobadilika ndani ya markup hiyo. Katika hali hii, unaweza kutumia mabano ya vishazi (curly braces) katika JSX yako ili “kufungua dirisha” kuelekea JavaScript:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>Mambo ya kufanya ya {person.name}</h1>
      <img
        className="avatar"
        src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Boresha simu ya video</li>
        <li>Andaa mihadhara ya anga</li>
        <li>Fanya kazi kwenye injini inayotumia alkoholi</li>
      </ul>
    </div>
  );
}

Ready to learn this topic?

Soma JavaScript ndani ya JSX kwa Mabano ya Vishazi ili ujifunze jinsi ya kufikia data ya JavaScript kutoka JSX.

Read More

---

Kupitisha props kwa component

Components za React hutumia props kuwasiliana kati yao. Kila component-mzazi inaweza kupitisha taarifa fulani kwa components-watoto wake kwa kuwapa props. Props zinaweza kukukumbusha sifa za HTML, lakini unaweza kupitisha thamani yoyote ya JavaScript kupitia kwao, ikiwa ni pamoja na objects, arrays, functions, na hata JSX!

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Ready to learn this topic?

Soma Kupitisha Props kwa Component ili ujifunze jinsi ya kupitisha na kusoma props.

Read More

---

Ku-render kwa masharti

Mara nyingi components zako zitahitaji kuonyesha vitu tofauti kulingana na masharti tofauti. Katika React, unaweza ku-render JSX kwa masharti kwa kutumia sintaksia ya JavaScript kama vile kauli za if, &&, na opereta za ? :.

Katika mfano huu, opereta ya && ya JavaScript inatumika ku-render alama ya tiki kwa masharti:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✅'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Orodha ya kupakia ya Sally Ride</h1>
      <ul>
        <Item
          isPacked={true}
          name="Suti ya angani"
        />
        <Item
          isPacked={true}
          name="Kofia yenye jani la dhahabu"
        />
        <Item
          isPacked={false}
          name="Picha ya Tam"
        />
      </ul>
    </section>
  );
}

Ready to learn this topic?

Soma Ku-render kwa Masharti ili ujifunze njia tofauti za ku-render maudhui kwa masharti.

Read More

---

Ku-render orodha

Mara nyingi utataka kuonyesha components nyingi zinazofanana kutoka kwenye mkusanyiko wa data. Unaweza kutumia filter() na map() za JavaScript pamoja na React kuchuja na kubadilisha array yako ya data kuwa array ya components.

Kwa kila kipengee cha array, utahitaji kubainisha key. Kwa kawaida, utataka kutumia ID kutoka kwenye hifadhidata kama key. Keys huruhusu React kufuatilia nafasi ya kila kipengee kwenye orodha hata kama orodha itabadilika.

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const listItems = people.map(person =>
    <li key={person.id}>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        maarufu kwa {person.accomplishment}
      </p>
    </li>
  );
  return (
    <article>
      <h1>Wanasayansi</h1>
      <ul>{listItems}</ul>
    </article>
  );
}

Ready to learn this topic?

Soma Ku-render Orodha ili ujifunze jinsi ya ku-render orodha ya components, na jinsi ya kuchagua key.

Read More

---

Kuweka components zikiwa pure

Baadhi ya functions za JavaScript ni pure (safi). Function iliyo pure:

• Hujishughulisha na mambo yake yenyewe. Haibadilishi objects au vigezo vyovyote vilivyokuwepo kabla haijaitwa.
• Ingizo sawa, matokeo sawa. Ikipewa maingizo sawa, function iliyo pure inapaswa kurudisha matokeo yaleyale kila wakati.

Kwa kuandika components zako kama functions pure pekee, unaweza kuepuka kundi zima la hitilafu (bugs) zenye kutatanisha na tabia zisizotabirika kadri msimbo wako unavyokua. Hapa kuna mfano wa component isiyo pure:

let guest = 0;

function Cup() {
  // Baya: kubadilisha kigezo kilichokuwepo awali!
  guest = guest + 1;
  return <h2>Kikombe cha chai kwa mgeni #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

Unaweza kuifanya component hii kuwa pure kwa kupitisha prop badala ya kurekebisha kigezo kilichokuwepo awali:

function Cup({ guest }) {
  return <h2>Kikombe cha chai kwa mgeni #{guest}</h2>;
}

export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

Ready to learn this topic?

Soma Kuweka Components Zikiwa Pure ili ujifunze jinsi ya kuandika components kama functions pure, zinazotabirika.

Read More

---

UI yako kama mti

React hutumia miti (trees) kuiga uhusiano kati ya components na modules.

Render tree ya React ni uwakilishi wa uhusiano wa mzazi na mtoto kati ya components.

Components zilizo karibu na kilele cha mti, karibu na component-mzizi (root), huchukuliwa kama components za ngazi ya juu. Components zisizo na components-watoto ni components za majani (leaf). Uainishaji huu wa components ni wa manufaa kwa kuelewa mtiririko wa data na utendaji wa ku-render.

Kuiga uhusiano kati ya modules za JavaScript ni njia nyingine ya manufaa ya kuelewa programu yako. Tunauita mti wa utegemezi wa modules (module dependency tree).

Mti wa utegemezi mara nyingi hutumiwa na zana za kujenga (build tools) kuunganisha msimbo wote muhimu wa JavaScript ili mteja aupakue na kuu-render. Ukubwa mkubwa wa bundle hudhoofisha uzoefu wa mtumiaji kwa programu za React. Kuelewa mti wa utegemezi wa modules ni jambo la manufaa kutatua hitilafu za aina hiyo.

Ready to learn this topic?

Soma UI Yako kama Mti ili ujifunze jinsi ya kuunda render tree na module dependency tree kwa programu ya React na jinsi zinavyokuwa mifano bora ya kifikra ya kuboresha uzoefu wa mtumiaji na utendaji.

Read More

---

Kinachofuata?

Elekea kwenye Component Yako ya Kwanza ili uanze kusoma sura hii ukurasa baada ya ukurasa!

Au, ikiwa tayari unazifahamu mada hizi, kwa nini usisome kuhusu Kuongeza Mwingiliano?