React:n avulla voidaan helpommin luoda web-käyttöliittymiä. Periaatteena on pilkkoa isot sivut pienempiin osiin, uudelleen käytettäviksi komponenteiksi.
React -komponentti on pala koodia, joka kuvaa jotain tiettyä osaa sivusta. Jokainen komponentti on JavaScript -funktio, joka palauttaa palan koodia, joka puolestaan kuvaa osaa verkkosivusta.
Sivu siis muodostuu Reactilla siten, että näitä funktioita kutsutaan ja kasataan tietyssä järjestyksessä, ja näytetään tuo järjestys käyttäjälle. React on JavaScript -kirjasto, joka käyttää JSX-syntaksia (JavaScript XML).
- JSX muistuttaa hyvin pitkälti HTML:ää.
- JSX on XML:n kaltainen syntaksi, eli jokainen tagi täytyy sulkea.
- JSX:n käyttö sallii Reactin näyttää hyödyllisempiä virhe -ja varoitusilmoituksia.
- JSX mahdollistaa dynaamisen sisällön luomisen helposti kirjoittamalla JavaScriptiä aaltosulkeiden sisälle.
Props on lyhenne sanasta “Properties”. Propseja käytetään tiedonvälitykseen komponenttien välillä. Perusidea propseissa on se, että voidaan kirjoittaa yksittäisiä komponentteja, joita voidaan sitten käyttää useilla eri sivuilla web-sovelluksessa.
Käyttöliittymiä tehtäessä, web-sivulla yleensä on painikkeita (nappeja), joita voidaan painella hiirellä. Ja kun käyttäjä painaa jotain painiketta web-sivulla, tästä liipaistaan joku toiminne, tapahtuma. Koodiin täytyy siten lisätä tapahtuman käsittelijöitä. Sitten voidaan sitten esittää tietoa eli “Renderöidä sivua“, sen mukaan mitä nappeja milloinkin käyttäjä painelee, ja missä tilassa web-sovellus on.
Tässä tuleekin se web-sovelluskehityksen haaste. Kun web-sivu kehittyy ja siihen lisätään yhä lisää uusia toimintoja ja lisää koodia, yllättäen voi tulla tilanteita jolloin koodi lakkaa toimimasta, Tällaisissa tilanteissa kannattaa lisätä tulostuksia konsoliin ja pyrkiä ymmärtämään miten react toimii. React:ia oppii itse tekemällä ja kokeilemalla. Sekä katselemalla videoita, saa vinkkejä miten kokeneemmat kehittäjät tekevät asioita. Kannattaa lähteä vaan rohkeasti kokeilemaan ja tekemään omaa projektia.
