Šta je React? Objašnjenje bez žargona za one koji nisu programeri

React je JavaScript biblioteka za pravljenje korisničkih sučelja, odnosno dijela aplikacije koji ljudi vide i klikću. Ekrane gradite od ponovo upotrebljivih dijelova zvanih komponente, poput dugmeta, kartice proizvoda ili cijele stranice, a React drži ekran usklađenim s vašim podacima: kad se podaci promijene, React ažurira dijelove stranice koji od njih zavise. Nastao je u Facebooku (sada Meta), otvorenog je koda i jedan je od najrasprostranjenijih načina za pravljenje web aplikacija.

Zašto je važan kad pravite uz AI

Ako pravite web aplikaciju uz AI alat, dobra je šansa da je napisana u Reactu. Mnogi AI alati za izradu aplikacija koriste React po defaultu, jer je popularan, dobro dokumentovan i postoji ogromna količina React koda iz koje AI modeli uče.

Ne morate pisati React da biste pravili uz AI. Ali malo razumijevanja pomaže vam da:

• Precizno opišete izmjene. „Promijeni komponentu ProductCard tako da cijena bude podebljana“ jasnije je od „nekako istakni cijene“.
• Razumijete greške. Poruke poput „Cannot read properties of undefined“ ili „Too many re-renders“ imaju više smisla.
• Donosite razumne odluke. Obični React aplikacije se renderuju u pregledaču, što utiče na vidljivost u pretrazi i brzinu prvog učitavanja. Znanje o tome pomaže vam da odlučite kad da tražite drugačiju postavku.
• Kasnije radite s programerima. React je česta vještina, pa programer obično može preuzeti React kodnu bazu.

Analogija iz svakodnevnog života

Zamislite LEGO. Umjesto da cijeli model isklešete iz jednog komada, gradite ga od standardnih kockica. Nekoliko kockica čini točak; četiri točka i još neki dijelovi čine auto. Ako želite da svaki auto ima crvene točkove, promijenite dizajn točka jednom.

React komponente su kockice. Komponenta Button koristi se unutar ProductCard, koja se koristi unutar ProductGrid, koji je dio ShopPage. Promijenite Button jednom i svako dugme u aplikaciji se mijenja.

Druga polovina analogije: zamislite da se LEGO model sam preslaže kad promijenite uputstva. To je druga React fora: opisujete kako ekran treba izgledati za trenutne podatke, a React sam odredi šta treba promijeniti na stranici.

Osnovne ideje

Komponente

Komponenta je JavaScript funkcija koja vraća dio sučelja. React dokumentacija opisuje komponentu kao dio UI-ja koji ima svoju logiku i izgled. Nazivi komponenti počinju velikim slovom.

JSX

Komponente se obično pišu u JSX-u, koji izgleda kao HTML pomiješan s JavaScriptom:

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

JSX nije obavezan, ali React dokumentacija navodi da većina projekata ipak koristi JSX. Prije nego što se izvrši u pregledaču, pretvara se u običan JavaScript.

Props

Props su ulazi koje prosljeđujete komponenti, kao postavke na ponovo upotrebljivom dijelu:

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

Isti ProductCard može prikazati bilo koji proizvod.

State

State je informacija koju komponenta pamti i koja se može mijenjati dok aplikacija radi: da li je meni otvoren, šta je upisano u polje za pretragu, koliko je stavki u korpi. Kad se state promijeni, React ponovo renderuje komponentu da bi ekran odgovarao.

Hookovi

Hookovi su funkcije čija imena počinju s use, na primjer useState (pamti vrijednost) i useEffect (izvršava kod nakon renderovanja, na primjer za učitavanje podataka). Viđat ćete ih posvuda u React kodu koji generiše AI.

Radni primjer: brojač korpe

Recimo da vaša online prodavnica ima dugme „Dodaj u korpu“ i ikonicu korpe koja pokazuje broj stavki. U Reactu to otprilike izgleda ovako:

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

Šta se dešava kad kupac klikne „Dodaj u korpu“:

1. onClick dugmeta poziva onAdd, koji poziva setCartCount.
2. React ažurira cartCount state sa 0 na 1.
3. React ponovo renderuje Shop, prosljeđujući count={1} u CartIcon.
4. Stranica sada prikazuje „Cart (1)“. Niko nije napisao kod koji kaže „pronađi tekst korpe i promijeni ga“ — ekran prati podatke.

Primijetite i ograničenja. Ovaj brojač živi u memoriji pregledača. Osvježite stranicu i vrati se na 0. Da biste sačuvali korpu, trebate je negdje trajno upisati: u kolačić, u skladište pregledača ili u bazu podataka preko vašeg backenda. React vodi ekran; ne čuva vaše podatke.

Gdje React stoji u web aplikaciji

Aplikacija „Vite + React“ renderuje se u pregledaču (single-page aplikacija). Next.js aplikacija može prvo renderovati stranice na serveru, što pomaže pretraživačima i brzini prvog učitavanja.

Često korišteni pojmovi objašnjeni

Česte greške i zablude

• „React je programski jezik.“ To je biblioteka napisana u JavaScriptu (ili TypeScriptu) i koristi se iz njega.
• „React čuva moje podatke.“ State živi u pregledaču i nestaje pri osvježavanju. Trajni podaci trebaju backend i bazu.
• Stavljanje tajni u React kod. Sve u React aplikaciji šalje se pregledaču posjetioca. API ključevi tamo su javni. Držite ih na serveru.
• „React aplikacije ne mogu biti na vrhu pretrage.“ Renderovanje samo u klijentu slabije je za pretragu, ali unaprijed renderovanje ili renderovanje na serveru riješava većinu toga.
• Ogromne komponente. Jedna komponenta od 1.000 linija teško je sigurno mijenjati, i ljudima i AI-ju. Tražite manje.
• Pretpostavka da je React web aplikacija telefonska aplikacija. Radi u pregledaču, uključujući telefone, ali nije aplikacija iz App Store-a.

Šta tražiti od vašeg AI alata

• „Podijeli ovu stranicu na male, imenovane komponente i reci mi u kojem je fajlu svaka.“
• „Učini komponentu ProductCard ponovo upotrebljivom, s imenom, cijenom i slikom kao props.“
• „Sačuvaj korpu u bazi da preživi osvježavanje.“
• „Čuvaj sve API ključeve na serveru; React kod treba zvati naš vlastiti API.“
• „Dodaj stanja učitavanja i grešaka za podatke koji dolaze sa servera.“
• „Ako su nam bitne pretrage za ove stranice, unaprijed ih renderuj ili koristi postavku s renderovanjem na serveru.“
• „Objasni jednostavno šta znači ova greška i iz koje komponente dolazi.“

Za širu sliku pogledajte frontend vs backend, a za pregled onoga što je AI napisao, kako pregledati kod generisan uz AI.

React u Mythexu

Osim ako ne tražite drugačije, Mythex počinje nove projekte na Vite + React + TypeScript + Tailwind osnovi, uz uživo pregled dok razgovarate u chatu. U prvom promptu možete navesti drugačiju postavku, na primjer „Koristi Next.js“ ili „običnu statičku HTML landing stranicu“, a Mythex je prepozna iz onoga što napišete; nema ekrana s postavkama za to. Stranica dokumentacije o tome kako se bira tehnologija objašnjava opcije. Editor koda je samo za čitanje u Free paketu; na Pro paketu možete direktno uređivati React kod i izvesti projekat da nastavite rad negdje drugo.

Pitanja