Mi az a React? Közérthető útmutató nem fejlesztőknek

A React egy JavaScript-könyvtár felhasználói felületek építésére – az alkalmazás azon része, amelyet az emberek látnak és kattintanak. Képernyőket építesz újrafelhasználható egységekből, úgynevezett komponensekből, például gombokból, termékkártyákból vagy egész oldalakból, a React pedig szinkronban tartja a képernyőt az adataiddal: ha az adatok megváltoznak, a React frissíti az oldal azon részeit, amelyek ezektől függnek. A Facebookon (ma Metán) hozták létre, nyílt forráskódú, és a webalkalmazás-építés egyik legszélesebb körben használt módja.

Miért fontos, ha AI-val építkezel

Ha AI-eszközzel építesz webalkalmazást, jó eséllyel React-ben íródik. Sok AI-alkalmazás-építő alapértelmezésben a Reactot használja, mert népszerű, jól dokumentált, és hatalmas mennyiségű React-kód áll rendelkezésre, amelyből az AI-modellek tanulhattak.

Az AI-val való építéshez nem kell React-ben programoznod. Ha viszont valamennyit tudsz róla, az segít:

• Pontosan leírhatod a változtatásokat. A „változtasd meg a ProductCard komponenst úgy, hogy az ár félkövér legyen” pontosabb, mint a „valahol emeld ki az árakat”.
• Megérted a hibákat. Az olyan üzenetek, mint a „Cannot read properties of undefined” vagy a „Too many re-renders”, értelmesebbek lesznek.
• Észszerű döntéseket hozol. A sima React-alkalmazások a böngészőben renderelnek, ami befolyásolja a keresési láthatóságot és az első betöltés sebességét. Ha ezt tudod, eldöntheted, mikor érdemes más felépítést kérni.
• Később fejlesztőkkel dolgozol együtt. A React gyakori tudás, így egy fejlesztő általában könnyen beletanul egy React-kódbázisba.

Hétköznapi hasonlat

Gondolj a LEGO-ra. Ahelyett, hogy egy egész modellt egyetlen blokkból faragnál ki, szabványos kockákból építed fel. Néhány kocka kereket alkot; négy kerék és néhány más alkatrész autót. Ha minden autónak piros kerekei akarnak lenni, a kerékterveket egyszer változtatod meg.

A React-komponensek a kockák. Egy Button komponenst egy ProductCard-on belül használsz, az egy ProductGrid-ben van, az pedig a ShopPage része. Ha egyszer megváltoztatod a Button-t, az alkalmazás minden gombja megváltozik.

A hasonlat másik fele: képzeld el, hogy a LEGO-modell újraépíti magát, valahányszor módosítod az utasításokat. Ez a React másik trükkje – leírod, hogyan kell kinéznie a képernyőnek az aktuális adatokkal, a React pedig kitalálja, mit kell változtatnia az oldalon.

Az alapvető elvek

Komponensek

A komponens egy JavaScript-függvény, amely felületrészt ad vissza. A React dokumentációja úgy írja le, mint a felületnek egy részét, amelynek saját logikája és megjelenése van. A komponensnevek nagybetűvel kezdődnek.

JSX

A komponenseket általában JSX-ben írják, amely HTML-hez hasonlít, JavaScripten belül:

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

A JSX nem kötelező, de a React dokumentációja megjegyzi, hogy a legtöbb projekt használja. Mielőtt a böngészőben lefutna, sima JavaScriptté alakul.

Props

A props azok a bemenetek, amelyeket egy komponensnek átadsz, mint egy újrafelhasználható elem beállításai:

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

Ugyanaz a ProductCard bármilyen terméket megjeleníthet.

State

A state olyan információ, amelyet egy komponens megjegyez, és amely az alkalmazás futása közben változhat – hogy nyitva van-e egy menü, mi van beírva egy keresőmezőbe, hány termék van a kosárban. Amikor a state változik, a React újrarendereli a komponenst, hogy a képernyő egyezzen vele.

Hookok

A hookok olyan függvények, amelyek neve use-zal kezdődik, például a useState (egy érték megjegyzése) és a useEffect (kód futtatása a renderelés után, például adatlekéréshez). Ezeket mindenütt látni fogod az AI által generált React-kódban.

Munkapélda: egy kosárszámláló

Tegyük fel, hogy az online boltodban van egy „Kosárba” gomb és egy kosárikon, amely a termékek számát mutatja. Reactban nagyjából így néz ki:

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

Mi történik, amikor a vásárló a „Kosárba” gombra kattint:

1. A gomb onClick eseménye meghívja az onAdd-et, az pedig a setCartCount-ot.
2. A React a cartCount state-et 0-ról 1-re frissíti.
3. A React újrarendereli a Shop-ot, és a count={1} értéket átadja a CartIcon-nak.
4. Az oldal most azt mutatja: „Cart (1)”. Senki nem írt olyan kódot, hogy „keresd meg a kosárszöveget és változtasd meg” – a képernyő követi az adatot.

Figyelj a korlátokra is. Ez a szám a böngésző memóriájában él. Frissítsd az oldalt, és újra 0 lesz. Ha meg akarod őrizni a kosarat, valahol tartósan kell tárolni – sütiben, a böngésző tárhelyén, vagy egy adatbázisban, a backendeden keresztül. A React a képernyőt kezeli; nem tárolja az adataidat.

Hol helyezkedik el a React egy webalkalmazásban

Egy „Vite + React” alkalmazás a böngészőben renderel (egyoldalas alkalmazás). Egy Next.js-alkalmazás az oldalakat először a szerveren is renderelheti, ami segít a keresőmotoroknak és az első betöltés sebességének.

Gyakori fogalmak magyarázata

Gyakori hibák és tévhitek

• „A React programozási nyelv.” Egy könyvtár, amely JavaScriptben (vagy TypeScriptben) íródik, és onnan használják.
• „A React tárolja az adataimat.” A state a böngészőben él, és frissítésnél eltűnik. A tartós adatokhoz backend és adatbázis kell.
• Titkok a React-kódban. Egy React-alkalmazás mindent elküld a látogató böngészőjének. Az ott lévő API-kulcsok nyilvánosak. Tartsd őket a szerveren.
• „A React-alkalmazások nem szerepelhetnek a keresésben.” A csak kliensoldali renderelés gyengébb a keresésben, de az előrerenderelés vagy a szerveroldali renderelés a legtöbb problémát megoldja.
• Óriás komponensek. Egy 1000 soros komponenst nehéz biztonságosan módosítani, akár embernek, akár AI-nak. Kérj kisebbeket.
• Azt feltételezni, hogy a React webalkalmazás mobilalkalmazás. A böngészőben fut, telefonokon is, de nem App Store-alkalmazás.

Mit kérj az AI-építődtől

• „Bontsd ezt az oldalt kis, nevesített komponensekre, és mondd meg, melyik fájlban van mindegyik.”
• „A ProductCard komponens legyen újrafelhasználható, a névvel, árral és képpel mint propokkal.”
• „A kosarat mentsd el az adatbázisba, hogy frissítés után is megmaradjon.”
• „Minden API-kulcs maradjon a szerveren; a React-kód a saját API-nkat hívja.”
• „Adj betöltési és hibaállapotokat a szerverről érkező adatokhoz.”
• „Ha ezeknek az oldalaknak fontos a keresési láthatóság, rendereld előre őket, vagy használj szerveroldali felépítést.”
• „Magyarázd el egyszerűen, mit jelent ez a hiba, és melyik komponensből származik.”

A nagyobb képért lásd: frontend vs. backend, az AI által írt kód átnézéséhez pedig: hogyan nézd át az AI által generált kódot.

React a Mythexben

Ha nem kérsz mást, a Mythex új projekteket Vite + React + TypeScript + Tailwind alapokon indít, a csevegés közben futó élő előnézettel. Az első üzenetedben más felépítést is megnevezhetsz – például „Használj Next.js-t” vagy „sima statikus HTML-es céloldal” –, és a Mythex abból választ, amit írsz; erre nincs külön beállítási képernyő. A technológiaválasztás dokumentációs oldala ismerteti a lehetőségeket. A kódszerkesztő a Free csomagban csak olvasható; a Pro csomagban közvetlenül szerkesztheted a React-kódot, és exportálhatod a projektet, hogy máshol folytathasd a munkát.

Kérdések