Reactin perusajatus on yksinkertaistaa käyttäjäliittymien (UI) rakentamista ja hallintaa. Tämä olisi hyvin työlästä ja virhealttiista, jos käyttäisimme pelkkää tavallista JavaScriptiä. React tekee tämän mahdolliseksi hyödyntämällä JSX:ää, joka on paranneltu JavaScriptin ja HTML:n yhdistelmä, joka käännetään lopulta tavalliseksi JavaScript-koodiksi. Tarkemmin sanottuna JSX on Reactin käyttäjäliittymien ja interaktiivisten toiminnallisuuksien rakentamiseen käytettävä JavaScriptin laajennus, joka mahdollistaa HTML:n kaltaisen koodin kirjoittamisen suoraan JavaScriptin sisään. Tämä tekee koodista helpommin ymmärrettävää ja ylläpidettävää.

JSX on se liima, joka pitää koko Reactin käsitteen koossa. Reactin sivu tai sovellus koostuu pienistä rakennuspalikoista, joita kutsutaan React-elementeiksi. Esimerkiksi yksinkertainen elementti voisi näyttää tältä:

jsx
Copy code
const title = <h1>The Car Sales App</h1>

Tämä koodi näyttää HTML:n h1-elementiltä, mutta samalla se on myös JavaScriptiä. Molemmat huomiot ovat oikeita, sillä JSX:n avulla voi luoda React-elementtejä, jotka lisätään Reactin virtuaaliseen DOM-puuhun, joka on erillinen todellisesta HTML:stä. React huolehtii vaivalloisesta työstä, joka liittyy DOM:n päivittämiseen virtuaalisen DOM:in mukaiseksi prosessilla nimeltä "diffing", ja kääntää JSX-elementit (käyttämällä Babel-nimistä työkalua) todellisiksi HTML-elementeiksi.

React-elementit ovat muuttumattomia, mikä tarkoittaa, että niitä ei voida muuttaa sen jälkeen, kun ne on luotu. Kuten Reactin verkkosivustolla todetaan, ne ovat kuin elokuvan yksittäiset kuvat. Kuitenkin niitä voidaan korvata uusilla elementeillä tai "kehyksillä". On tärkeää huomata, että jokaisen React-komponentin, myös App.jsx-tiedoston, joka on tällä hetkellä ainoa komponentti, täytyy palauttaa vain yksi elementti—esimerkiksi div-elementti tai fragmentti (tyhjä merkki <></>), ja kaikki React-elementit tulee liittää sen sisään.

Tässä on esimerkki yksinkertaisesta komponentista App.jsx-tiedostossa:

jsx
Copy code
export default function App() {

  const data = [
    { id: 1, name: "Fiat" },
    { id: 2, name: "Peugeot" },
    { id: 3, name: "Ford" },
    { id: 4, name: "Renault" },
    { id: 5, name: "Citroen" }
  ];
  return (
    <div>
      <h1>Your budget is {budget}</h1>
      <input 
        type="number" 
        value={budget} 
        onChange={(e) => setBudget(e.target.value)} 
      />
      {data.filter((el) => el.price <= budget).map((el) => (
        <div key={el.id}>{el.name}</div>
      ))}
    </div>
  );
}

Kun suoritat verkkosovelluksesi, sinun pitäisi nähdä seuraava sivu renderöitynä:

swift
Copy code
Hello FARM stack!

Cars listed as FIAT
Cars listed as PEUGEOT
Cars listed as FORD
Cars listed as RENAULT
Cars listed as CITROEN

Tässä luodussa React-sovelluksessa on kolme pääosaa. Ensimmäinen vaihe oli datan määrittäminen, joka oli yksinkertainen lista autojen merkeistä taulukossa. Tässä vaiheessa data on kovakoodattu, mutta tulevaisuudessa se voidaan ladata ulkoiselta API:ltä. Toinen vaihe oli sen jälkeen, että suoritettiin map-toiminnon avulla listan iteroiminen ja jokaisen elementin käsittely niin, että niiden nimet tulostetaan isoin kirjaimin. Kolmas vaihe oli tärkeä yksityiskohta, jossa käytettiin key-ominaisuutta. Tämä on Reactin vaatimus, jotta se osaa käsitellä listaelementtien järjestyksiä oikein, erityisesti silloin, kun lista muuttuu.

Tämä on melko yksinkertainen esimerkki, mutta se havainnollistaa JSX:n perusvoimaa. Tärkeä muistisääntö Reactin kanssa työskennellessä on, että joka kerta, kun luot komponentteja, ne palauttavat vain yhden elementin, kuten div-elementin tai React-fragmentin. Toisin kuin perinteisissä templaattiluokissa, joissa käytetään erityistä syntaksia, Reactissa voit hyödyntää JavaScriptin täyttä voimaa—esimerkiksi map-metodia taulukoiden iteroimiseen, filter-metodia datan suodattamiseen ja ternäärisiä operaattoreita ehtojen tarkistamiseen.

Komponentit ovat Reactin käyttöliittymän rakennuspalikoita. Ne ovat funktioita, jotka palauttavat käyttöliittymäelementtejä JSX:ssä. Komponentit mahdollistavat koodin uudelleenkäytettävyyden ja modulaarisuuden. Ne voivat olla yksinkertaisia, kuten sivun otsikko, mutta myös monimutkaisempia osia, kuten kortteja tai listoja. Kun suunnittelet React-sivuston kehittämistä, on tärkeää tunnistaa ne alueet, jotka voidaan abstrahoida komponenteiksi ja käyttää uudelleen eri osissa sovellusta.

Kun luot uuden komponentin, esimerkiksi otsikon näyttämistä varten, voit aloittaa seuraavasti:

1. Luo kansio nimeltä "components" src-kansioon ja lisää sinne tiedosto nimeltä Header.jsx.

2. Avaa Header.jsx ja kirjoita sinne rafce, jolloin editori ehdottaa sinulle valmiin komponenttipohjan.

3. Valitse tämä ehdotus ja täydennä komponentti seuraavasti:

jsx
Copy code
const Header = () => {

  return <h1>Page Title</h1>;
};

Miten toteuttaa käyttäjien autentikointi ja valtuutus React- ja FastAPI-sovelluksissa?

FastAPI tarjoaa tehokkaan ja joustavan tavan toteuttaa JWT-pohjainen autentikointi backendissä. Käyttäjät luodaan ja kirjataan sisään palvelimella, joka generoi heille JSON Web Tokenin (JWT). Tämä token toimii todistuksena käyttäjän oikeutuksesta päästä suojatuille reiteille ja suorittaa pyyntöjä. Tokenin muokkaaminen tai sen vanheneminen johtaa virheilmoitukseen "Invalid token" ja HTTP-statukseen 401 Unauthorized, mikä varmistaa, ettei valtuuttamattomia pyyntöjä hyväksytä.

Frontend-puolella React tarjoaa lukuisia tapoja hallita autentikointia. Koska FastAPI:n JWT-autentikointi toimii palvelinpuolella, on valittava, miten JWT käsitellään selaimessa. Yleisimmin käytettyjä tallennusmenetelmiä ovat muistin käyttö ja selaimen localStorage. LocalStorage on HTML5:n tarjoama keino tallentaa avain-arvopareja pysyvästi selaimeen ilman vanhenemisaikaa, mikä tekee siitä helpon käyttää ja kehittäjäystävällisen ratkaisun. SessionStorage puolestaan säilyttää tiedot vain istunnon ajan.

Vaikka localStorage on kätevä ja sallii monimutkaisten JSON-rakenteiden tallentamisen, siihen liittyy tietoturvariskejä, sillä se on JavaScriptin luettavissa, ja haittaohjelmat voivat mahdollisesti saada tokenin haltuunsa. Siksi useimmat asiantuntijat suosittelevat JWT:n säilyttämistä HTTP-only evästeissä, jotka eivät ole JavaScriptin saatavilla ja vaativat frontendin ja backendin toimivan samalla domainilla. Tämä parantaa turvallisuutta, mutta vaatii monimutkaisempaa konfiguraatiota, kuten proxyjen käyttöä tai reitityksen sovittamista.

Monet järjestelmät käyttävät myös refresh-token -mekanismia, jossa käyttäjän kirjautuessa sisään annetaan pääsytoken ja erillinen virkistystoken. Virkistystokenia käytetään uuden pääsytokenin hakemiseen automaattisesti, mikä tarjoaa paremman tasapainon turvallisuuden ja käyttömukavuuden välillä.

Reactissa autentikoinnin hallintaa helpottaa Context API. Se korvaa perinteisen "prop drillingin", jossa tila kulkee komponenttien läpi tarpeettomasti, ja mahdollistaa tilan jakamisen syvälle rakenteeseen ilman ylimääräistä koodia. Esimerkiksi AuthContext.jsx tiedostossa voidaan luoda konteksti, joka säilyttää käyttäjätiedot, JWT-tokenin ja viestit koko sovelluksen käytettäväksi. Tämä tekee tilan hallinnasta selkeämpää ja koodista uudelleenkäytettävämpää.

On tärkeää ymmärtää, että autentikointi on monisyinen ja kriittinen osa sovelluksen turvallisuutta. Ratkaisujen valinnassa on punnittava sekä turvallisuusnäkökulmia että käyttäjäkokemusta. Esimerkiksi vaikka localStorage tarjoaa helppokäyttöisyyttä, se altistaa tokenin helpommalle varastamiselle. Toisaalta evästeet parantavat turvallisuutta, mutta voivat vaatia monimutkaisempaa backendin ja frontendin yhteensovittamista. Lisäksi refresh-tokenien käyttö auttaa minimoimaan käyttökatkot ja parantamaan käyttömukavuutta.

Selaimen tallennusratkaisut eroavat toisistaan kapasiteetin ja eliniän osalta. Evästeet voivat sisältää vain yksinkertaisia ja pieniä tietoja (~4 KB), kun taas localStorage ja sessionStorage voivat tallentaa monimutkaisia JSON-rakenteita jopa 10 MB asti. SessionStorage säilyy vain selaimen istunnon ajan, kun taas localStorage jää pysyvästi, ellei sitä erikseen poisteta.