Ensimmäinen komponenttisi

Komponentit: UI:n rakennuspalikoita

Verkkossa HTML antaa meidän luoda monipuoliset jäsennellyt dokumentit sen sisäänrakennetuilla tageilla kuten <h1> ja <li>:

<article>
  <h1>Ensimmäinen komponenttini</h1>
  <ol>
    <li>Komponentit: UI:n rakennuspalikoita</li>
    <li>Komponentin määrittely</li>
    <li>Komponentin käyttäminen</li>
  </ol>
</article>

Tämä merkintä edustaa tätä artikkelia <article>, sen otsikkoa <h1>, ja (lyhennettyä) sisällysluetteloa järjestettynä listana <ol>. Tämänkaltainen merkintä yhdistettynä CSS:ään tyylejä varten ja JavaScriptiin vuorovaikutteisuutta varten, löytyy jokaisen sivupalkin, avatarin, modaalilaatikon ja alasvetovalikon takaa—kaikki palaset UI:ta verkossa jota näet.

Reactilla voit yhdistää merkinnän, CSS ja JavaScriptin mukautetuiksi “komponenteiksi,” uudelleenkäytettäviksi UI elementeiksi sovelluksellesi. Sisällysluettelon koodi yllä voitaisiin muuttaa <TableOfContents> komponentiksi, jota voisit renderöidä jokaisella sivulla. Konepellin alla se käyttää silti samoja HTML tageja, kuten <article>, <h1>, jne.

Kuten HTML tageilla, voit luoda, järjestää ja upottaa komponentteja koko sivun suunnittelua varten. Esimerkiksi, dokumentaatio jota luet koostuu React komponenteista:

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

Kun sovelluksesi kasvaa huomaat, että suuri osa malleista voidaan luoda uudelleenkäyttämällä komponentteja joita olet jo kirjoittanut, nopeuttaen kehitystä. Yllä oleva sisällysluettelo voitaisiin lisätä mille tahansa ruudulle kirjoittamalla <TableOfContents>! Voit aloittaa projektisi nopeasti Reactin avoimen lähdekoodin yhteisön jakamien tuhansien komponenttien avulla, kuten Chakra UI:lla ja Material UI:lla.

Komponentin määrittely

Perinteisesti verkkosivuja luodessa kehittäjät lisäsivät merkintäkoodia sisältöön ja sitten lisäsivät toiminnallisuutta ripottelemalla vähän JavaScriptia. Tämä toimi hyvin kun toiminnot olivat mukavuustekijöitä verkossa. Nyt sitä odotetaan monilta sivuilta ja kaikilta sovelluksilta. React laittaa interaktiivisuuden ensiksi käyttäen silti samaa teknologiaa: React komponentti on JavaScript funktio, jota voit ripotella merkintäkoodilla. Tässä miltä se näyttää (voit muokata esimerkkiä alla):

Ja tässä miten rakennat komponentin:

1. Vaihe: Exporttaa komponentti

export default etuliite on vakio JavaScript syntaksi (ei erityisesti Reactille). Sillä voit merkitä pääfunktion tiedostossa, jotta voit myöhemmin importata sen muista tiedostoista. (Lisää importtaamisesta Komponenttien importtaus ja exporttaus -sivulta!)

2. Vaihe: Määritä funktio

Käyttämällä function Profile() { } määrität JavaScript funktion nimeltään Profile..

3. Vaihe: Lisää merkintäkoodia

Komponentti palauttaa <img /> tagin src ja alt attribuuteilla. ` on kirjoitettu kuten HTML:ssä, mutta se on oikeasti JavaScriptia konepellin alla! Tätä syntaksia kutsutaan nimeltään JSX, ja sillä voit upottaa merkintäkoodia JavaScriptissa.

Palautuslause voidaan kirjoittaa yhdellä rivillä, kuten tässä komponentissa:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Mutta jos merkintäkoodisi ei ole samalla rivillä kuin return avainsana, täytyy koodi kääriä sulkujen sisään:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Komponentin käyttäminen

Nyt kun olet määritellyt Profile komponentin, voit upottaa sen toisten komponenttien sisään. Esimerkiksi voit exportata Gallery komponentin, joka käyttää useampia Profile komponentteja:

Mitä selain näkee

Huomaa kirjainkokojen ero:

• <section> on pienin kirjaimin, joten React tietää viittaamme HTML tagiin.
• <Profile /> alkaa isolla P kirjaimella, joten React tietää, että haluamme käyttää omaa komponenttiaan nimeltään Profile.

Ja Profile sisältää vielä enemmän HTML koodia: <img />. Lopuksi selain näkee seuraavaa:

<section>
  <h1>Amazing scientists</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>

Komponenttien upottaminen ja järjestäminen

Komponentit ovat tavallisia JavaScript funktioita, joten voit pitää useita komponentteja samassa tiedostossa. Tämä on hyödyllistä kun komponentit ovat suhteellisen pieniä tai liitttyvät tiiviisti toisiinsa. Jos tämä tiedosto kasvaa suureksi, voit aina siirtää Profile komponentin eri tiedostoon. Tulet oppimaan miten tämän voi tehdä sivulla importeista..

Sillä Profile komponentit renderöidään Gallery komponentin sisällä-jopa useita kertoa!-voimme sanoa, että Gallery on kuin pääkomponentti, joka renderöi jokaisen Profile:n “lapsena”. Tämä on osa Reactin taikaa: voit määritellä komponentin kerran ja käyttää sitä niin monessa paikassa ja niin monta kertaa kuin haluat.

export default function Galleria() {
  // 🔴 Älä määrittele komponenttia toisen komponentin sisällä!
  function Profiili() {
    // ...
  }
  // ...
}

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

// ✅ Määrittele komponenttisi ylätasolla
function Profiili() {
  // ...
}