Miksi ammattilaiset käyttävät Reactia

Muistatko valikon kopioimisen?

Tasolla 1 sinulla oli header valikolla jokaisella sivulla. Ja aina kun lisäsit uuden sivun, sinun piti kopioida valikko – ja korjata se kaikkialla jokaisella muutoksella. Ärsyttävää kolmella sivulla, painajainen kolmellakymmenellä. Ja juuri tuo tuska on tarinamme alku.

Komponentit: kirjoita kerran, käytä kaikkialla

Ammattilaiset ajattelivat: entä jos valikko olisi yksi koodipala joka vain “asetetaan” jokaiselle sivulle? Muuta sitä yhdessä paikassa – se muuttuu kaikkialla. Tällaista palaa kutsutaan komponentiksi.

Ja se ei ole vain valikko. Katso verkkosivuasi rakennuspalikkasarjan silmin:

• pelaajakortti (sinulla on sitä 4× – ja se eroaa vain nimellä ja paikalla),
• kuva galleriassa (10× – vain kuva eroaa),
• painike (kaikkialla – vain teksti eroaa).

Ammattilaisen verkkosivu ei ole kasa HTML-tiedostoja. Se on LEGO-laatikko: kourallinen omia palikoita (komponentteja) koottu kokonaiseksi sovellukseksi.

Mikä React on

React on työkalu (kirjasto) JavaScriptille joka hoitaa tämän kokoamisen. Se keksittiin Facebookissa, se on ilmainen, ja valtava osa internetistä on rakennettu sille: Facebook, Instagram, Netflix, Airbnb… Komponentti Reactissa näyttää tältä – älä huoli, katsomme vain nyt:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

Ja sitä käytetään kuin omaa HTML-tagia:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Tunnistatko tämän? Se on funktio (tasolta 2) joka palauttaa HTML:ää. Kortti kirjoitetaan kerran ja käytetään eri datalla – kuin kumileima vaihdettavilla kirjaimilla.

Supervoima numero kaksi: React hoitaa uudelleenpiirtämisen

Tasolla 2 kirjoitit: “löydä elementti, vaihda teksti, lisää luokka…” Isoissa sovelluksissa tätä manuaalista järjestelyä on niin paljon että voit eksyä. React kääntää sen:

Kuvailet miltä sivun pitäisi näyttää annetulla datalla. Kun data muuttuu, React selvittää itse mitä uudelleenpiirtää.

Pisteet muuttuvat 0:sta 1:ksi? Et etsi elementtiä – muutat vain numeron, ja React piirtää tarvittavat uudelleen. Näet sen toiminnassa tilaa käsittelevässä oppitunnissa.

Mitä tässä tasossa on edessä

1. Asennat ammattilaisen työkalut: terminaalin ja Node.js:n (seuraava oppitunti).
2. Asetat ensimmäisen React-sovelluksesi Vitellä.
3. Opit komponentit, propsit ja tilan.
4. Rakennat tason 1 verkkosivusi uudelleen Reactissa.
5. Rakennat oman Node.js-palvelimesi ja yhdistät siihen vieraskirjan.

Mitä opit tästä oppitunnista

• Sama koodi useaan paikkaan on ansa – huomasit sen jo itse tasolla 1.
• Komponentti on funktio joka palauttaa palan sivusta. Kirjoita kerran, käytä monta kertaa eri datalla.
• React piirtää sivun puolestasi: muutat dataa, se muuttaa näyttöä.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot