Mikä on React? Selkeä opas ei-kehittäjille

React on JavaScript-kirjasto käyttöliittymien rakentamiseen, eli sovelluksen osaan, jonka ihmiset näkevät ja johon he napsauttavat. Rakennat näkymät uudelleenkäytettävistä osista, joita kutsutaan komponenteiksi, kuten painikkeesta, tuotekortista tai kokonaisesta sivusta. React pitää näkymän synkronissa datasi kanssa: kun data muuttuu, React päivittää ne sivun osat, jotka siitä riippuvat. Sen kehitti Facebook (nykyinen Meta), se on avointa lähdekoodia ja yksi laajimmin käytetyistä tavoista rakentaa verkkosovelluksia.

Miksi se on tärkeä, kun rakennat tekoälyllä

Jos rakennat verkkosovellusta tekoälytyökalulla, on hyvä mahdollisuus, että se on kirjoitettu Reactilla. Monet tekoälysovellusrakentajat käyttävät Reactia oletuksena, koska se on suosittu, hyvin dokumentoitu ja tekoälymalleilla on valtavasti React-koodia, josta oppia.

Et tarvitse Reactin kirjoittamiseen osaamista tekoälyllä rakentamiseen. Pieni ymmärrys auttaa silti:

• Kuvaat muutokset tarkasti. ”Muuta ProductCard-komponenttia niin, että hinta on lihavoitu” on selkeämpi kuin ”tee hinnoista jotenkin näkyvämpiä”.
• Ymmärrät virheet. Viestit kuten ”Cannot read properties of undefined” tai ”Too many re-renders” avautuvat paremmin.
• Teet järkeviä valintoja. Tavalliset React-sovellukset renderöityvät selaimessa, mikä vaikuttaa hakunäkyvyyteen ja ensilatauksen nopeuteen. Tämän tietäminen auttaa päättämään, milloin kannattaa pyytää toinen rakenne.
• Teet yhteistyötä kehittäjien kanssa myöhemmin. React on yleinen taito, joten kehittäjä pystyy yleensä tarttumaan React-koodiin nopeasti.

Arkinen vertaus

Ajattele LEGOa. Sen sijaan, että veistäisit koko mallin yhdestä palikasta, rakennat sen vakiopalikoista. Muutamasta palikasta syntyy pyörä, neljästä pyörästä ja muutamasta muusta osasta auto. Jos haluat, että jokaisella autolla on punaiset pyörät, muutat pyörän suunnittelua kerran.

React-komponentit ovat palikoita. Button-komponenttia käytetään ProductCard-komponentin sisällä, joka on ProductGrid-komponentin sisällä, joka on osa ShopPage-sivua. Muuta Button kerran, ja jokainen painike sovelluksessa muuttuu.

Analogian toinen puoli: kuvittele, että LEGO-malli rakentuu uudelleen aina, kun muutat ohjeita. Se on Reactin toinen temppu. Kuvailet, miltä ruudun pitäisi näyttää nykyisellä datalla, ja React selvittää, mitä sivulla pitää muuttaa.

Keskeiset ajatukset

Komponentit

Komponentti on JavaScript-funktio, joka palauttaa osan käyttöliittymää. Reactin dokumentaatio kuvaa komponenttia käyttöliittymän osana, jolla on oma logiikkansa ja ulkoasunsa. Komponenttien nimet alkavat isolla kirjaimella.

JSX

Komponentit kirjoitetaan yleensä JSX-kielellä, joka näyttää HTML:ltä, joka on sekoitettu JavaScriptiin:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX on valinnainen, mutta Reactin dokumentaation mukaan useimmat projektit käyttävät sitä. Se muunnetaan tavalliseksi JavaScriptiksi ennen kuin se ajetaan selaimessa.

Propsit

Propsit ovat syötteitä, jotka välität komponentille, kuten uudelleenkäytettävän osan asetuksia:

<ProductCard name="Lavender Candle" price={24} />

Sama ProductCard voi näyttää minkä tahansa tuotteen.

Tila

Tila on tietoa, jonka komponentti muistaa ja joka voi muuttua sovelluksen käydessä: onko valikko auki, mitä hakukenttään on kirjoitettu, montako tuotetta ostoskorissa on. Kun tila muuttuu, React renderöi komponentin uudelleen, jotta ruutu vastaa tilaa.

Hookit

Hookit ovat funktioita, joiden nimi alkaa sanalla use, kuten useState (muistaa arvon) ja useEffect (suorittaa koodia renderöinnin jälkeen, esimerkiksi datan hakemiseen). Näet niitä kaikkialla tekoälyn generoimassa React-koodissa.

Työstetty esimerkki: ostoskorilaskuri

Oletetaan, että verkkokauppasi on ”Lisää ostoskoriin” -painike ja ostoskorikuvake, joka näyttää tuotemäärän. Reactissa se näyttää suunnilleen tältä:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Mitä tapahtuu, kun ostaja napsauttaa ”Add to cart”:

1. Painikkeen onClick kutsuu onAdd-funktiota, joka kutsuu setCartCount-funktiota.
2. React päivittää cartCount-tilan arvosta 0 arvoon 1.
3. React renderöi Shop-komponentin uudelleen ja välittää count={1} arvon CartIcon-komponentille.
4. Sivulla lukee nyt ”Cart (1)”. Kukaan ei kirjoittanut koodia, joka sanoo ”etsi ostoskorin teksti ja vaihda se”. Ruutu seuraa dataa.

Huomaa myös rajoitukset. Tämä laskuri asuu selaimen muistissa. Kun sivu päivitetään, se palaa arvoon 0. Jotta ostoskori säilyisi, se pitäisi tallentaa pysyvästi, esimerkiksi evästeisiin, selaimen tallennukseen tai tietokantaan backendin kautta. React hoitaa ruudun, mutta se ei tallenna dataasi.

Missä React sijaitsee verkkosovelluksessa

”Vite + React” -sovellus renderöityy selaimessa (yksisivuinen sovellus eli SPA). Next.js-sovellus voi renderöidä sivut ensin palvelimella, mikä auttaa hakukoneita ja ensilatauksen nopeutta.

Yleiset termit selitettynä

Yleiset virheet ja väärinkäsitykset

• ”React on ohjelmointikieli.” Se on kirjasto, joka on kirjoitettu JavaScriptillä (tai TypeScriptillä) ja jota käytetään niistä.
• ”React tallentaa datani.” Tila asuu selaimessa ja katoaa päivityksessä. Pysyvä data tarvitsee backendin ja tietokannan.
• Salaisuuksien laittaminen React-koodiin. Kaikki React-sovelluksen sisältö lähetetään kävijän selaimelle. API-avaimet siellä ovat julkisia. Pidä ne palvelimella.
• ”React-sovelluksia ei voi sijoittaa hakutuloksiin.” Pelkästään asiakaspuolella renderöity sisältö on hakukoneille heikompi, mutta esirenderöinti tai palvelinpuolen renderöinti korjaa suurimman osan siitä.
• Jättimäiset komponentit. Yksi 1 000 rivin komponentti on vaikea muuttaa turvallisesti niin ihmisille kuin tekoälylle. Pyydä pienempiä.
• Olettamus, että React-verkkosovellus on puhelinsovellus. Se toimii selaimessa, myös puhelimilla, mutta se ei ole App Store -sovellus.

Mitä pyytää tekoälyrakentajalta

• ”Jaa tämä sivu pieniin, nimettyihin komponentteihin ja kerro, missä tiedostossa kukin on.”
• ”Tee ProductCard-komponentista uudelleenkäytettävä, jossa nimi, hinta ja kuva ovat propseja.”
• ”Tallenna ostoskori tietokantaan, jotta se säilyy sivun päivityksen jälkeen.”
• ”Pidä kaikki API-avaimet palvelimella; React-koodin pitää kutsua omaa API:amme.”
• ”Lisää lataus- ja virhetilat datalle, joka tulee palvelimelta.”
• ”Jos näiden sivujen hakunäkyvyys on tärkeä, esirenderöi ne tai käytä palvelinpuolen renderöityä rakennetta.”
• ”Selitä yksinkertaisesti, mitä tämä virhe tarkoittaa ja mistä komponentista se tulee.”

Laajempaan kuvaan katso frontend vs. backend. Tekoälyn kirjoittaman koodin tarkistamiseen katso miten tarkistat tekoälyn generoiman koodin.

React Mythexissä

Ellet pyydä muuta, Mythex aloittaa uudet projektit Vite + React + TypeScript + Tailwind -pinolla, ja live-esikatselu käy chatin aikana. Voit nimetä toisen rakenteen ensimmäisessä kehotteessa, esimerkiksi ”Käytä Next.js:ää” tai ”yksinkertainen staattinen HTML-laskeutumissivu”, ja Mythex valitsee sen kirjoittamastasi. Asetusnäkymää sille ei ole. Dokumentaation sivu miten tekniikka valitaan selittää vaihtoehdot. Koodieditori on vain luku -tilassa Free-tasolla. Pro-tasolla voit muokata React-koodia suoraan ja viedä projektin, jotta voit jatkaa työtä muualla.

Kysymykset