Co je React? Srozumitelný průvodce pro nevývojáře

React je JavaScriptová knihovna pro tvorbu uživatelského rozhraní, tedy té části aplikace, kterou lidé vidí a klikají. Obrazovky skládáte z opakovaně použitelných dílů zvaných komponenty, například tlačítko, kartu produktu nebo celou stránku. React udržuje obrazovku v souladu s vašimi daty: když se data změní, aktualizuje části stránky, které na nich závisí. Vytvořila ho společnost Facebook (dnes Meta), je open source a patří k nejrozšířenějším způsobům tvorby webových aplikací.

Proč na tom záleží, když stavíte s AI

Pokud stavíte webovou aplikaci pomocí nástroje s AI, je dobrá šance, že je napsaná v Reactu. Mnoho nástrojů na tvorbu aplikací s AI používá React jako výchozí volbu, protože je populární, dobře zdokumentovaný a modely AI se na obrovském množství kódu v Reactu mohly učit.

React psát nemusíte, abyste s AI stavěli. Trochu ho znát ale pomůže:

• Přesně popsat změny. „Změň komponentu ProductCard tak, aby byla cena tučně“ je jasnější než „někde zvýrazni ceny“.
• Rozumět chybám. Hlášení jako „Cannot read properties of undefined“ nebo „Too many re-renders“ dávají větší smysl.
• Dělat rozumné volby. Čisté aplikace v Reactu se vykreslují v prohlížeči, což ovlivňuje viditelnost ve vyhledávání i rychlost prvního načtení. Když to víte, lépe poznáte, kdy si říct o jiné nastavení.
• Později spolupracovat s vývojáři. React je běžná dovednost, takže vývojář obvykle zvládne kódovou základnu v Reactu rychle.

Každodenní přirovnání

Představte si LEGO. Místo abyste celý model vyřezali z jedné kostky, stavíte ho ze standardních kostek. Několik kostek udělá kolo; čtyři kola a další díly udělají auto. Pokud chcete, aby všechna auta měla červená kola, změníte návrh kola jednou.

Komponenty v Reactu jsou kostky. Komponenta Button se používá uvnitř ProductCard, ten je uvnitř ProductGrid a ten je součástí ShopPage. Když změníte Button jednou, změní se každé tlačítko v aplikaci.

Druhá polovina přirovnání: představte si, že se model LEGO přestaví sám, kdykoli změníte návod. To je druhý trik Reactu. Popíšete, jak má obrazovka vypadat pro aktuální data, a React zjistí, co na stránce změnit.

Základní myšlenky

Komponenty

Komponenta je JavaScriptová funkce, která vrací kus rozhraní. Dokumentace Reactu popisuje komponentu jako část UI, která má vlastní logiku a vzhled. Názvy komponent začínají velkým písmenem.

JSX

Komponenty se obvykle píšou v JSX, což vypadá jako HTML smíchané s JavaScriptem:

function Greeting() {
  return <h1>Vítejte zpět!</h1>;
}

JSX je volitelné, ale dokumentace Reactu uvádí, že většina projektů ho používá. Před spuštěním v prohlížeči se převede na obyčejný JavaScript.

Props

Props jsou vstupy, které do komponenty předáváte, jako nastavení na opakovaně použitelném dílu:

<ProductCard name="Levandulová svíčka" price={24} />

Stejná komponenta ProductCard může ukázat jakýkoli produkt.

Stav (state)

Stav jsou informace, které si komponenta pamatuje a které se mohou za běhu aplikace měnit: zda je menu otevřené, co je napsané ve vyhledávacím poli, kolik položek je v košíku. Když se stav změní, React komponentu znovu vykreslí, aby obrazovka odpovídala.

Hooky

Hooky jsou funkce, jejichž názvy začínají na use, například useState (zapamatuje si hodnotu) a useEffect (spustí kód po vykreslení, například pro načtení dat). Uvidíte je všude v kódu Reactu vygenerovaném AI.

Praktický příklad: počítadlo košíku

Řekněme, že váš online obchod má tlačítko „Přidat do košíku“ a ikonu košíku, která ukazuje počet položek. V Reactu to zhruba vypadá takto:

import { useState } from "react";

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

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Levandulová svíč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}>Přidat do košíku</button>
    </div>
  );
}

Co se stane, když nakupující klikne na „Přidat do košíku“:

1. onClick tlačítka zavolá onAdd, který zavolá setCartCount.
2. React změní stav cartCount z 0 na 1.
3. React znovu vykreslí Shop a do CartIcon předá count={1}.
4. Stránka teď ukazuje „Košík (1)“. Nikdo nenapsal kód typu „najdi text košíku a změň ho“. Obrazovka se řídí daty.

Vidět jsou i limity. Počet žije v paměti prohlížeče. Obnovíte stránku a je zase 0. Aby košík přežil, musel by se uložit někam trvale: do cookie, do úložiště prohlížeče, nebo do databáze přes váš backend. React se stará o obrazovku, data neukládá.

Kde je React v webové aplikaci

Aplikace „Vite + React“ se vykresluje v prohlížeči (jde o single-page aplikaci). Aplikace Next.js může stránky nejdřív vykreslit na serveru, což pomáhá vyhledávačům i rychlosti prvního načtení.

Vysvětlení běžných pojmů

Časté chyby a mylné představy

• „React je programovací jazyk.“ Je to knihovna napsaná v JavaScriptu (nebo TypeScriptu) a používaná z něj.
• „React ukládá moje data.“ Stav žije v prohlížeči a po obnovení zmizí. Trvalá data potřebují backend a databázi.
• Tajné hodnoty v kódu Reactu. Všechno v aplikaci Reactu se posílá do prohlížeče návštěvníka. API klíče tam jsou veřejné. Držte je na serveru.
• „Aplikace v Reactu se nemohou umístit ve vyhledávání.“ Vykreslování jen v klientu je pro vyhledávání slabší, ale předrenderování nebo vykreslování na serveru to z velké části spraví.
• Obří komponenty. Jednu komponentu s 1 000 řádky se těžko bezpečně mění, a to jak lidem, tak AI. Požádejte o menší.
• Předpoklad, že webová aplikace v Reactu je aplikace do telefonu. Běží v prohlížeči, včetně telefonů, ale není to aplikace z App Store.

Co žádat od svého AI nástroje

• „Rozděl tuto stránku na malé, pojmenované komponenty a řekni mi, v jakém souboru je každá z nich.“
• „Udělej z komponenty ProductCard znovu použitelný díl s name, price a image jako props.“
• „Ulož košík do databáze, aby přežil obnovení stránky.“
• „Drž všechny API klíče na serveru; kód Reactu má volat naše vlastní API.“
• „Přidej stavy načítání a chyb pro data, která přicházejí ze serveru.“
• „Pokud na těchto stránkách záleží na viditelnosti ve vyhledávání, předrenderuj je nebo použij nastavení s vykreslováním na serveru.“
• „Vysvětli srozumitelně, co znamená tato chyba a z které komponenty pochází.“

Pro širší souvislosti viz frontend vs backend a pro kontrolu toho, co AI napsala, jak kontrolovat kód vygenerovaný AI.

React v Mythexu

Pokud nepožádáte o něco jiného, Mythex zakládá nové projekty na Vite + React + TypeScript + Tailwind, s živým náhledem, který běží, zatímco chatujete. Jiné nastavení můžete uvést už v prvním promptu, například „Použij Next.js“ nebo „jednoduchá statická přistávací stránka v HTML“, a Mythex ho vybere podle toho, co napíšete. Žádná obrazovka nastavení pro to neexistuje. Stránka dokumentace o tom, jak se volí technologie vysvětluje možnosti. Editor kódu je v bezplatném tarifu jen pro čtení; v Pro můžete React kód upravovat přímo a projekt exportovat, abyste na něm mohli pracovat jinde.

Otázky