Mikä on React? Opas aloittelijoille

01Mikä React on ja mihin sitä lyhyesti käytetään?

Lyhin vastaus kysymykseen mikä React on: JavaScript-kirjasto, jolla rakennetaan selaimessa toimivia käyttöliittymiä. Verkkosivun osat, kuten valikko, tuotekortti, ostoskori tai lomake, määritellään erikseen, ja ne yhdistämällä muodostat koko sivun.

React ei ole kehys (framework) vaan kirjasto. Reititys, datan haku tai palvelinpuolen työt vaativat lisätyökaluja. Tämän joustavuuden ansiosta sitä voi käyttää kaikissa mittakaavoissa pienestä widgetistä suureen hallintapaneeliin.

Reactin ymmärtämiseksi on ensin tunnettava itse kieli. Jos perusteet puuttuvat, suosittelemme aloittamaan artikkelista Mikä JavaScript on; kaikki Reactissa kirjoittamasi on lopulta JavaScriptiä.

02Mihin Reactia käytetään?

Reactin todellinen voima on, että se päivittää käyttöliittymän automaattisesti datan muuttuessa. Kun tuote lisätään ostoskoriin, laskuri kasvaa; kun suodatin valitaan, lista päivittyy; kehittäjän ei tarvitse kirjoittaa näitä päivityksiä käsin yksitellen.

Toinen hyöty on ylläpidon helppous. Koska käyttöliittymä on jaettu komponentteihin, painikkeen ulkoasun muuttaminen koskee vain yhtä tiedostoa; muutos näkyy kaikkialla, missä kyseistä komponenttia käytetään. Suurissa tiimeissä työnjako selkeytyy, kun kaikki voivat työskennellä eri komponenttien parissa.

Reactin laaja yhteisö on myös käytännön etu. Päivämäärävalitsimille, taulukoille, kaavioille tai lomakkeiden validoinnille löytyy kypsiä avoimen lähdekoodin paketteja; jokainen riippuvuus kuitenkin lisää projektiin ylläpitotaakkaa, joten pakettien valinta on tehtävä harkiten.

Siksi React korostuu näytöissä, joissa käyttäjä on paljon vuorovaikutuksessa. Tyypillisiä käyttöalueita ovat:

• Hallintapaneelit ja raportointinäytöt
• Verkkokaupan tuotelistat, suodattimet ja ostoskorin kulut
• Monivaiheiset kulut, kuten varaus-, ajanvaraus- ja tarjouslomakkeet
• Reaaliaikaista dataa näyttävät live-näytöt (tilaus, varasto, viestintä)
• Mobiilisovellukset React Nativella (sama ajattelumalli, eri alusta)

03Miten Reactin komponenttirakenne toimii?

Reactissa kaikki on komponentti (component). Komponentti on funktio, joka sisältää käyttöliittymän osan ja sen toiminnan. Kirjoitat “TuoteKortti”-komponentin kerran ja käytät sitä sivulla sadoissa paikoissa eri datalla.

Komponentit saavat dataa ulkopuolelta props-arvoina ja säilyttävät muuttuvan tiedon sisäisesti state-tilassa. Props on kuin funktion parametri; state on komponentin muisti. Kun state muuttuu, React piirtää komponentin uudelleen.

import { useState } from "react";

function Sayac({ baslik }) {
  const [adet, setAdet] = useState(0);

  return (
    <div>
      <h3>{baslik}</h3>
      <p>Adet: {adet}</p>
      <button onClick={() => setAdet(adet + 1)}>Lisää</button>
    </div>
  );
}

export default Sayac;

Mikä JSX on?

Yllä olevassa esimerkissä HTML:n näköinen osa on JSX. JSX on syntaksi, jonka avulla voit kuvata käyttöliittymän luettavasti JavaScriptin sisällä. Selain ei ymmärrä JSX:ää suoraan; käännöstyökalut muuntavat sen tavallisiksi JavaScript-kutsuiksi.

Mitä hookit tarjoavat?

Hookit, kuten useState ja useEffect, antavat funktiokomponenteille kyvyn säilyttää tilaa, hakea dataa ja hallita sivuvaikutuksia. Aloittelijalle riittää, että ymmärtää ensin useStaten ja useEffectin hyvin.

04Virtuaalinen DOM ja suorituskyky

Selaimessa olevaa sivurakennetta kutsutaan DOMiksi, ja DOMin muuttaminen usein on kallista. React pitää muistissa kevyttä kopiota käyttöliittymästä; sitä kutsutaan virtuaaliseksi DOMiksi. Kun data muuttuu, se vertaa uutta kopiota vanhaan ja soveltaa oikeaan DOMiin vain eron.

Tämä lähestymistapa säästää kehittäjän kirjoittamasta yksittäisiä DOM-operaatioita. Silti virtuaalinen DOM ei yksin takaa nopeutta. Suuri pakettikoko, turhat uudelleenpiirrot ja optimoimattomat kuvat voivat hidastaa myös React-sivustoa.

Käyttäjän kokema nopeus mitataan Core Web Vitalsilla: LCP ≤ 2,5 s, INP ≤ 200 ms ja CLS ≤ 0,1 katsotaan hyviksi. Näiden rajojen saavuttamiseksi nopeus- ja suorituskykyoptimointi tulee käsitellä teknologiasta riippumattomana erillisenä työnä.

05Missä projekteissa React valitaan?

Kaikki verkkosivustot eivät vaadi Reactia. Muutaman sivun esittelysivustolle pelkkä HTML, CSS ja vähän JavaScriptiä on useimmiten nopeampi ja edullisempi. Reactin arvo korostuu, kun vuorovaikutus ja datan määrä kasvavat.

Alla oleva taulukko antaa yleisen kehyksen päätöksen tueksi:

06React-oppimisen tiekartta

Reactia oppiville yleisin virhe on siirtyä suoraan kirjastoon ennen kuin JavaScriptin perusteet ovat hallussa. Alla oleva järjestys tarjoaa vankan polun pysyvään oppimiseen:

1. Opettele HTML:llä ja CSS:llä sivun rakenne ja asettelun logiikka.
2. Opi JavaScriptissä muuttujat, taulukot, oliot, funktiot, map/filter ja async/await.
3. Harjoittele komponentit, props ja state virallisen dokumentaation oppaan avulla.
4. Tee pieni projekti: tehtävälista, säätila tai tuotesuodatin.
5. Siirry lomakkeiden hallintaan, datan hakuun ja reititykseen.
6. Lisää kasvavissa projekteissa TypeScript tyyppiturvallisuutta varten.

Ensimmäisen projektin aloittaminen

Uuden React-projektin yleinen aloitustapa on käyttää Vite-tyyppistä käännöstyökalua. Koneellesi on oltava asennettuna Node.js:n ajantasainen LTS-versio. Seuraa ajantasaisia suosituksia osoitteessa react.dev olevasta virallisesta dokumentaatiosta.

npm create vite@latest ilk-react-projem -- --template react
cd ilk-react-projem
npm install
npm run dev

07React, TypeScript ja ekosysteemi

React on yksinään käyttöliittymäkerros; oikeassa projektissa valitaan myös sitä ympäröivät työkalut. Palvelinpuolen renderöintiin ja reititykseen käytetään usein Next.js:n kaltaisia kehyksiä, tyyppiturvallisuuteen TypeScriptiä ja testaukseen Testing Libraryn kaltaisia työkaluja.

Tiimin kasvaessa TypeScriptistä tulee lähes vakio; koodissa kirjoitetaan selvästi, mitä propseja komponentit odottavat, ja virheet saadaan kiinni käännösvaiheessa. Lisätietoja löydät artikkelistamme Mikä TypeScript on.

On myös tärkeää selkeyttää, millä kerroksella React projektissa on. Käyttöliittymäpuoli on frontend, tietokanta ja liiketoimintasäännöt backend; näiden rajan olemme käsitelleet artikkelissa frontendin ja backendin ero.

08Hyvään käyttöliittymään ei riitä pelkkä React

React on hyvä tapa koodata käyttöliittymä, mutta se ei määritä, mitä näytetään, missä järjestyksessä ja kenelle. Nämä päätökset kuuluvat käyttökokemuksen suunnittelulle. Epäselvän kulun näytön kirjoittaminen uusimmalla teknologialla tarkoittaa vain ongelman tuottamista nopeammin.

Siksi projekteissa suunnitellaan ensin käyttäjäpolku, näyttöluonnokset ja komponenttikirjasto; koodi rakennetaan niiden päälle. UI/UX-suunnittelu tuottaa myös React-komponenttien luonnollisen kartan.

Sivuilla, joilla hakunäkyvyys on tärkeää, tekninen perusta ja sisällön rakenne on mietittävä yhdessä. Hakukoneystävällisessä verkkosivujen suunnittelussa otsikkohierarkia, palvelimella tuotettu HTML ja nopeus käsitellään samanaikaisesti.