Čo je React? Jednoduchý sprievodca pre nevývojárov

React je JavaScriptová knižnica na tvorbu používateľského rozhrania — časti aplikácie, ktorú ľudia vidia a klikajú. Obrazovky skladáte z opakovane použiteľných častí zvaných komponenty, napríklad tlačidlo, kartu produktu alebo celú stránku, a React drží obrazovku v súlade s vašimi dátami: keď sa dáta zmenia, React aktualizuje tie časti stránky, ktoré na nich závisia. Vytvorila ho spoločnosť Facebook (dnes Meta), je open source a patrí medzi najpoužívanejšie spôsoby tvorby webových aplikácií.

Prečo na tom záleží, keď budujete s AI

Ak budujete webovú aplikáciu s AI nástrojom, je dobrá šanca, že je napísaná v Reacte. Mnohí tvorcovia aplikácií s AI používajú React predvolene, pretože je populárny, dobre zdokumentovaný a existuje obrovské množstvo kódu v Reacte, z ktorého sa AI modely mohli učiť.

Na tvorbu s AI nepotrebujete písať React. Ale trocha ho poznať vám pomôže:

• Presne opisovať zmeny. „Zmeň komponent ProductCard tak, aby bola cena tučne“ je jasnejšie než „niekde zvýrazni ceny“.
• Rozumieť chybám. Hlásenia ako „Cannot read properties of undefined“ alebo „Too many re-renders“ dávajú väčší zmysel.
• Robiť rozumné voľby. Jednoduché aplikácie v Reacte sa renderujú v prehliadači, čo ovplyvňuje viditeľnosť vo vyhľadávaní a rýchlosť prvého načítania. Keď to viete, pomôže vám rozhodnúť, kedy si pýtať iné nastavenie.
• Neskôr spolupracovať s vývojármi. React je bežná zručnosť, takže vývojár zvyčajne dokáže prevziať kódovú základňu v Reacte.

Každodenné prirovnanie

Predstavte si LEGO. Namiesto toho, aby ste celý model vyrezali z jedného kusu, zostavíte ho zo štandardných kociek. Pár kociek vytvorí koleso; štyri kolesá a ďalšie diely tvoria auto. Ak chcete, aby mali všetky autá červené kolesá, zmeníte dizajn kolesa len raz.

Komponenty v Reacte sú kocky. Komponent Button sa používa vnútri ProductCard, ten je vnútri ProductGrid a ten je súčasťou ShopPage. Zmeňte Button raz a zmení sa každé tlačidlo v aplikácii.

Druhá polovica prirovnania: predstavte si, že sa LEGO model sám prestavuje zakaždým, keď zmeníte návod. To je ďalší trik Reactu — opíšete, ako má obrazovka vyzerať pre aktuálne dáta, a React zistí, čo na stránke zmeniť.

Základné myšlienky

Komponenty

Komponent je JavaScriptová funkcia, ktorá vracia kúsok rozhrania. Dokumentácia Reactu opisuje komponent ako časť UI, ktorá má vlastnú logiku a vzhľad. Názvy komponentov začínajú veľkým písmenom.

JSX

Komponenty sa zvyčajne píšu v JSX, ktoré vyzerá ako HTML zmiešané s JavaScriptom:

function Greeting() {
  return <h1>Vitajte späť!</h1>;
}

JSX je voliteľné, ale dokumentácia Reactu uvádza, že väčšina projektov ho používa. Pred spustením v prehliadači sa prevedie na čistý JavaScript.

Props

Props sú vstupy, ktoré odovzdáte komponentu, ako nastavenia na opakovane použiteľnej časti:

<ProductCard name="Levanduľová sviečka" price={24} />

Rovnaký ProductCard môže zobraziť ľubovoľný produkt.

Stav

Stav je informácia, ktorú si komponent pamätá a ktorá sa môže meniť počas behu aplikácie — či je ponuka otvorená, čo je napísané vo vyhľadávacom poli, koľko položiek je v košíku. Keď sa stav zmení, React komponent znovu vykreslí, aby obrazovka zodpovedala.

Hooky

Hooky sú funkcie, ktorých názov začína use, napríklad useState (zapamätá si hodnotu) a useEffect (spustí kód po vykreslení, napríklad na načítanie dát). Uvidíte ich všade v kóde Reactu vygenerovanom AI.

Pracovný príklad: počítadlo košíka

Predstavte si, že váš online obchod má tlačidlo „Pridať do košíka“ a ikonu košíka zobrazujúcu počet položiek. V Reacte to približne vyzerá takto:

import { useState } from "react";

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

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Levanduľová sviečka"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Košík ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Pridať do košíka</button>
    </div>
  );
}

Čo sa stane, keď nakupujúci klikne na „Pridať do košíka“:

1. onClick tlačidla zavolá onAdd, ktorá zavolá setCartCount.
2. React zmení stav cartCount z 0 na 1.
3. React znovu vykreslí Shop a do CartIcon odovzdá count={1}.
4. Stránka teraz ukazuje „Košík (1)“. Nikto nenapísal kód typu „nájdi text košíka a zmeň ho“ — obrazovka nasleduje dáta.

Všimnite si aj obmedzenia. Tento počet žije v pamäti prehliadača. Ak stránku obnovíte, vráti sa na 0. Ak chcete uchovať košík, musíte ho uložiť niekam trvalo — do cookie, do úložiska prehliadača alebo do databázy cez váš backend. React spravuje obrazovku; nie je to úložisko vašich dát.

Kde React zapadá do webovej aplikácie

Aplikácia „Vite + React“ sa renderuje v prehliadači (jednostránková aplikácia). Aplikácia v Next.js môže najprv renderovať stránky na serveri, čo pomáha vyhľadávačom aj rýchlosti prvého načítania.

Vysvetlenie bežných pojmov

Bežné chyby a mylné predstavy

• „React je programovací jazyk.“ Je to knižnica napísaná a používaná v JavaScripte (alebo TypeScripte).
• „React ukladá moje dáta.“ Stav žije v prehliadači a pri obnovení zmizne. Trvalé dáta potrebujú backend a databázu.
• Vkladanie tajomstiev do kódu Reactu. Všetko v aplikácii React sa posiela do prehliadača návštevníka. API kľúče tam sú verejné. Držte ich na serveri.
• „Aplikácie v Reacte sa nedajú umiestniť vo vyhľadávaní.“ Renderovanie iba na strane klienta je pre vyhľadávanie slabšie, ale predrenderovanie alebo renderovanie na serveri väčšinu problému vyrieši.
• Obrovské komponenty. Jeden komponent s 1 000 riadkami sa ľuďom aj AI ťažko bezpečne mení. Požiadajte o menšie.
• Predpoklad, že webová aplikácia v Reacte je telefónna aplikácia. Beží v prehliadači, aj na telefónoch, ale nie je to aplikácia z App Store.

Čo požiadať od svojho AI nástroja na tvorbu

• „Rozdeľ túto stránku na malé, pomenované komponenty a povedz mi, v ktorom súbore je každý z nich.“
• „Urob komponent ProductCard znovupoužiteľný s name, price a image ako props.“
• „Ulož košík do databázy, aby prežil obnovenie stránky.“
• „Drž všetky API kľúče na serveri; kód Reactu nech volá naše vlastné API.“
• „Pridaj stavy načítavania a chýb pre dáta, ktoré prichádzajú zo servera.“
• „Ak na týchto stránkach záleží na viditeľnosti vo vyhľadávaní, predrenderuj ich alebo použi nastavenie s renderovaním na serveri.“
• „Vysvetli jednoducho, čo znamená táto chyba a z ktorého komponentu pochádza.“

Pre väčší obraz pozrite frontend vs backend a na kontrolu toho, čo AI napísala, ako kontrolovať kód vygenerovaný AI.

React v Mythex

Ak nepožiadate o niečo iné, Mythex začína nové projekty na Vite + React + TypeScript + Tailwind, s živým náhľadom bežiacim počas chatu. Iné nastavenie môžete uviesť v prvom prompte — napríklad „Použi Next.js“ alebo „jednoduchá statická HTML titulná stránka“ — a Mythex ho vyberie z toho, čo napíšete; nie je na to žiadna obrazovka nastavení. Stránka dokumentácie o výbere technológie vysvetľuje možnosti. Editor kódu je v bezplatnom pláne len na čítanie; v Pro môžete React kód upravovať priamo a exportovať projekt, aby ste na ňom mohli pracovať inde.

Otázky