Mis on React? Lihtne juhend mitte-arendajatele

React on JavaScripti teek kasutajaliideste ehitamiseks – rakenduse osa, mida inimesed näevad ja millel klõpsavad. Ehitad ekraane taaskasutatavatest osadest, mida nimetatakse komponentideks, näiteks nupp, tootekaart või terve leht, ja React hoiab ekraani sinu andmetega sünkroonis: kui andmed muutuvad, uuendab React lehe need osad, mis neist sõltuvad. Selle lõi Facebook (nüüd Meta), see on avatud lähtekoodiga ja on üks laialdasemalt kasutatud viise veebirakenduste ehitamiseks.

Miks see on oluline, kui ehitad AI-ga

Kui ehitad veebirakendust AI-tööriistaga, on hea võimalus, et see on kirjutatud Reactis. Paljud AI rakenduste ehitajad kasutavad Reacti vaikimisi, sest see on populaarne, hästi dokumenteeritud ja AI mudelitel on õppimiseks tohutult Reacti koodi.

AI-ga ehitamiseks ei pea Reacti kirjutama. Kuid natukesest arusaamisest on kasu:

• Muudatuste täpne kirjeldamine. „Muuda ProductCard komponenti nii, et hind oleks paks” on selgem kui „tee hinnad kuskil silmatorkavamaks”.
• Vigade mõistmine. Sõnumid nagu „Cannot read properties of undefined” või „Too many re-renders” on arusaadavamad.
• Mõistlike valikute tegemine. Lihtsad React-rakendused renderdavad brauseris, mis mõjutab otsinganähtavust ja esimese laadimise kiirust. Selle teadmine aitab otsustada, millal paluda teistsugust seadistust.
• Töötamine hiljem arendajatega. React on levinud oskus, seega saab arendaja tavaliselt Reacti koodibaasiga kiiresti tuttavaks.

Igapäevane analoogia

Mõtle LEGO peale. Mudeli ei nikerdata ühest plokist välja, vaid ehitatakse standardsetest tellistest. Mõned tellised teevad ratta; neli ratast ja mõned muud osad teevad auto. Kui tahad, et kõigil autodel oleksid punased rattad, muudad ratta disaini ühe korra.

Reacti komponendid on need tellised. Button komponenti kasutatakse ProductCard-i sees, mis on ProductGrid-i sees, mis on osa ShopPage-ist. Muuda Button-it üks kord ja iga nupp rakenduses muutub.

Analoogia teine pool: kujuta ette, et LEGO mudel ehitab end ise ümber, kui muudad juhendit. See on Reacti teine nipp – kirjeldad, milline ekraan peaks praeguste andmete jaoks välja nägema, ja React arvutab välja, mida lehel muuta.

Põhiideed

Komponendid

Komponent on JavaScripti funktsioon, mis tagastab liidese tüki. Reacti dokumentatsioon kirjeldab komponenti kui UI tükki, millel on oma loogika ja välimus. Komponentide nimed algavad suure tähega.

JSX

Komponente kirjutatakse tavaliselt JSX-is, mis näeb välja nagu JavaScripti sisse segatud HTML:

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

JSX on valikuline, aga Reacti dokumentatsioon märgib, et enamik projekte kasutab seda. See teisendatakse tavaliseks JavaScriptiks enne, kui see brauseris käivitub.

Props

Props on sisendid, mis antakse komponendile, nagu seaded taaskasutatavas osas:

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

Sama ProductCard võib näidata iga toodet.

Olek (state)

Olek on info, mida komponent mäletab ja mis võib rakenduse töötamise ajal muutuda – kas menüü on lahti, mis on otsikasti kirjutatud, mitu eset on ostukorvis. Kui olek muutub, renderdab React komponendi uuesti, et ekraan vastaks.

Hook’id

Hook’id on funktsioonid, mille nimed algavad sõnaga use, näiteks useState (mäleta väärtust) ja useEffect (käivita kood pärast renderdamist, näiteks andmete laadimiseks). Neid näed kõikjal AI-genereeritud React-koodis.

Näide: ostukorvi loendur

Oletame, et su veebipoes on nupp „Lisa ostukorvi” ja ostukorvi ikoon, mis näitab esemete arvu. Reactis näeb see välja umbes selline:

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>Ostukorv ({count})</span>;
}

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

Mis juhtub, kui ostja klõpsab „Lisa ostukorvi”:

1. Nupu onClick kutsub onAdd-i, mis kutsub setCartCount-i.
2. React uuendab cartCount olekut 0-st 1-ks.
3. React renderdab Shop-i uuesti, andes CartIcon-ile kaasa count={1}.
4. Lehel näidatakse nüüd „Ostukorv (1)”. Keegi ei kirjutanud koodi, mis ütleks „leia ostukorvi tekst ja muuda see” – ekraan järgib andmeid.

Piirangud on samuti olemas. See loendur elab brauseri mälus. Lehe värskendamisel läheb ta jälle 0-ks. Ostukorvi säilitamiseks tuleks see salvestada kuhugi püsivalt – küpsisesse, brauseri salvestusse või andmebaasi läbi oma backend’i. React haldab ekraani; see ei salvesta sinu andmeid.

Kus React veebirakenduses asub

Rakendus „Vite + React” renderdab brauseris (ühe lehe rakendus). Next.js-rakendus võib renderdada lehed esmalt serveris, mis aitab otsingumootoreid ja esimese laadimise kiirust.

Levinud mõisted selgitatult

Levinud vead ja arusaamatused

• „React on programmeerimiskeel.” See on teek, mis on kirjutatud JavaScriptis (või TypeScriptis) ja mida kasutatakse neist.
• „React salvestab mu andmed.” Olek elab brauseris ja kaob värskendamisel. Püsivad andmed vajavad backend’i ja andmebaasi.
• Saladuste panemine React-koodi. Kõik React-rakenduse sisu saadetakse külastaja brauserisse. API-võtmed seal on avalikud. Hoia need serveris.
• „React-rakendusi ei saa otsingus edetabelisse.” Ainult kliendipoolne renderdamine on otsingu jaoks nõrgem, kuid eelrenderdamine või serveripoolne renderdamine parandab enamiku sellest.
• Hiiglaslikud komponendid. Üks 1000-realine komponent on raske nii inimestele kui AI-le turvaliselt muuta. Palu väiksemaid.
• Eeldamine, et React-veebirakendus on telefonirakendus. See töötab brauseris, sealhulgas telefonides, kuid pole App Store’i rakendus.

Mida küsida oma AI ehitajalt

• „Jaga see leht väikesteks, nimega komponentideks ja ütle, mis failis iga komponent on.”
• „Tee ProductCard komponent taaskasutatavaks, nime, hinna ja pildi propsidena.”
• „Salvesta ostukorv andmebaasi, et see säiliks ka lehe värskendamisel.”
• „Hoia kõik API-võtmed serveris; React-kood peaks kutsuma meie oma API-t.”
• „Lisa laadimise ja vea olekud serveris olevatele andmetele.”
• „Kui nende lehtede otsinganähtavus on oluline, eelrenderda need või kasuta serveris renderdatud seadistust.”
• „Selgita lihtsas keeles, mida see viga tähendab ja millisest komponendist see tuleb.”

Laiema pildi jaoks vaata frontend vs backend ja AI kirjutatud koodi ülevaatamiseks kuidas üle vaadata AI-genereeritud koodi.

React Mythexis

Kui sa midagi muud ei palu, alustab Mythex uusi projekte Vite + React + TypeScript + Tailwind kombinatsiooniga, kusjuures sinu vestluse ajal töötab elav eelvaade. Võid oma esimeses promptis nimetada teise seadistuse – näiteks „Kasuta Next.js-i” või „lihtne staatiline HTML maandumisleht” – ja Mythex valib selle sellest, mida kirjutad; seadete ekraani selleks ei ole. Dokumentatsiooni lehel kuidas tehnoloogia valitakse on valikud selgitatud. Koodiredaktor on Free-plaanil ainult lugemiseks; Pro-plaanil saad React-koodi otse muuta ja projekti eksportida, et seda mujal jätkata.

Küsimused