Kaj je React? Preprost vodnik za nerazvijalce

React je knjižnica JavaScript za gradnjo uporabniških vmesnikov – dela aplikacije, ki ga ljudje vidijo in klikajo. Zaslone sestavite iz ponovno uporabnih delov, imenovanih komponente, na primer gumba, kartice izdelka ali celotne strani, React pa zaslon sinhronizira s podatki: ko se podatki spremenijo, posodobi dele strani, ki so od njih odvisni. Nastal je pri Facebooku (zdaj Meta), je odprtokoden in je eden najbolj razširjenih načinov gradnje spletnih aplikacij.

Zakaj je to pomembno, ko gradite z AI

Če spletno aplikacijo gradite z orodjem z AI, obstaja velika verjetnost, da je napisana v Reactu. Mnogi gradniki aplikacij z AI privzeto uporabljajo React, ker je priljubljen, dobro dokumentiran in ker obstaja ogromno kode v Reactu, iz katere se modeli AI lahko učijo.

Za gradnjo z AI vam React ni treba pisati. Malo poznavanja pa vam pomaga:

• Natančno opisati spremembe. »Spremeni komponento ProductCard, tako da bo cena krepka« je jasneje kot »nekje naredi cene bolj opazne«.
• Razumeti napake. Sporočila, kot sta »Cannot read properties of undefined« ali »Too many re-renders«, postanejo smiselna.
• Sprejemati smiselne odločitve. Čisto React aplikacije se upodabljajo v brskalniku, kar vpliva na vidnost v iskalnikih in hitrost prvega nalaganja. Če to veste, lažje presodite, kdaj prositi za drugačno postavitev.
• Pozneje delati z razvijalci. React je pogosta veščina, zato lahko razvijalec običajno hitro prevzame kodno bazo v Reactu.

Vsakdanja primerjava

Pomislite na LEGO. Namesto da celoten model izrežete iz enega bloka, ga sestavite iz standardnih kock. Nekaj kock naredi kolo; štirje kolesi in še nekaj delov naredijo avto. Če želite, da imajo vsi avtomobili rdeča kolesa, spremenite zasnovo kolesa enkrat.

Komponente v Reactu so te kocke. Komponenta Button je uporabljena znotraj ProductCard, ta znotraj ProductGrid, ta pa je del ShopPage. Spremenite Button enkrat in vsi gumbi v aplikaciji se spremenijo.

Drugi del primerjave: predstavljajte si, da se model LEGO sam prestavi, ko spremenite navodila. To je drugi trik Reacta – opišete, kako naj zaslon izgleda za trenutne podatke, React pa ugotovi, kaj na strani spremeniti.

Osnovne ideje

Komponente

Komponenta je funkcija JavaScript, ki vrne del vmesnika. Dokumentacija Reacta opisuje komponento kot del uporabniškega vmesnika, ki ima svojo logiko in videz. Imena komponent se začnejo z veliko začetnico.

JSX

Komponente so ponavadi napisane v JSX, ki je videti kot HTML, pomešan z JavaScriptom:

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

JSX ni obvezen, a dokumentacija Reacta opozarja, da ga večina projektov uporablja. Pred zagonom v brskalniku se pretvori v navaden JavaScript.

Props

Props so vhodi, ki jih podate komponenti, kot nastavitve na ponovno uporabnem delu:

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

Isti ProductCard lahko prikaže kateri koli izdelek.

Stanje (state)

Stanje so podatki, ki si jih komponenta zapomni in se lahko spremenijo med delovanjem aplikacije – ali je meni odprt, kaj je vpisano v iskalno polje, koliko izdelkov je v košarici. Ko se stanje spremeni, React komponento ponovno upodobi, da se zaslon ujema s stanjem.

Hooks

Hooks so funkcije, katerih imena se začnejo z use, na primer useState (zapomni si vrednost) in useEffect (zaženi kodo po upodobitvi, na primer za pridobivanje podatkov). V kodi Reacta, ustvarjeni z AI, jih boste videli povsod.

Delovni primer: števec košarice

Recimo, da ima vaša spletna trgovina gumb »Dodaj v košarico« in ikono košarice, ki prikazuje število izdelkov. V Reactu bi bilo to približno tako:

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>
  );
}

Kaj se zgodi, ko kupec klikne »Dodaj v košarico«:

1. Gumb onClick pokliče onAdd, ta pa pokliče setCartCount.
2. React posodobi stanje cartCount z 0 na 1.
3. React ponovno upodobi Shop in v CartIcon poda count={1}.
4. Stran zdaj prikazuje »Cart (1)«. Nihče ni napisal kode, ki bi rekla »poišči besedilo košarice in ga spremeni« – zaslon sledi podatkom.

Opazite tudi omejitve. To število živi v pomnilniku brskalnika. Če stran osvežite, je spet 0. Če želite ohraniti košarico, jo morate shraniti nekam trajno – v piškotek, shrambo brskalnika ali bazo podatkov prek zaledja. React upravlja zaslon; podatkov ne shranjuje.

Kje je React v spletni aplikaciji

Aplikacija »Vite + React« se upodablja v brskalniku (enostranska aplikacija, SPA). Aplikacija Next.js lahko strani najprej upodobi na strežniku, kar pomaga iskalnikom in hitrosti prvega nalaganja.

Razlaga pogostih pojmov

Pogoste napake in napačna razumevanja

• »React je programski jezik.« Je knjižnica, napisana v JavaScriptu (ali TypeScriptu) in uporabljena iz njega.
• »React shranjuje moje podatke.« Stanje živi v brskalniku in ob osvežitvi izgine. Trajni podatki potrebujejo zaledje in bazo.
• Skrivnosti v kodi Reacta. Vse v aplikaciji React se pošlje v brskalnik obiskovalca. API ključi tam so javni. Hranite jih na strežniku.
• »Aplikacije React ne morejo biti na vrhu iskanja.« Upodabljanje samo na strani odjemalca je za iskalnike šibkejše, a predhodno upodabljanje ali upodabljanje na strežniku to večinoma odpravi.
• Ogromne komponente. Ena komponenta s 1.000 vrsticami je težko varno spremeniti tako za ljudi kot za AI. Zahtevajte manjše.
• Predpostavka, da je spletna aplikacija React mobilna aplikacija. Teče v brskalniku, tudi na telefonih, vendar ni aplikacija iz App Storea.

Kaj zahtevati od svojega gradnika z AI

• »Razdeli to stran na majhne, poimenovane komponente in povej, v kateri datoteki je vsaka.«
• »Naredi komponento ProductCard ponovno uporabno, z imenom, ceno in sliko kot props.«
• »Shrani košarico v bazo, da preživi osvežitev strani.«
• »Vse API ključe hrani na strežniku; koda Reacta naj kliče naš lastni API.«
• »Dodaj stanja nalaganja in napake za podatke, ki prihajajo s strežnika.«
• »Če je iskalna vidnost za te strani pomembna, jih predhodno upodobi ali uporabi strežniško upodobljeno postavitev.«
• »V preprostem jeziku razloži, kaj pomeni ta napaka in iz katere komponente izvira.«

Za širšo sliko glejte frontend proti backendu, za pregled kode, ki jo je napisal AI, pa kako pregledati kodo, ustvarjeno z AI.

React v Mythex

Če ne zahtevate drugače, Mythex nove projekte začne z Vite + React + TypeScript + Tailwind, med klepetom pa teče živi predogled. V prvem pozivu lahko navedete drugo postavitev – na primer »Uporabi Next.js« ali »preprosta statična pristajalna stran v HTML-ju« – Mythex jo prepozna iz besedila; nastavitvenega zaslona za to ni. Stran dokumentacije o tem, kako se izbira tehnologija, razloži možnosti. Urejevalnik kode je v brezplačnem paketu samo za branje; v paketu Pro lahko React kodo urejate neposredno in projekt izvozite, da ga lahko nadaljujete drugje.

Vprašanja