Što je React? Jednostavan vodič za one koji nisu programeri

React je JavaScript biblioteka za izradu korisničkih sučelja, dijela aplikacije koji ljudi vide i na koji klikaju. Ekrani se grade od ponovno upotrebljivih dijelova zvanih komponente, poput gumba, kartice proizvoda ili cijele stranice, a React drži ekran sinkroniziranim s podacima: kad se podaci promijene, React ažurira dijelove stranice koji o njima ovise. Stvoren je u Facebooku (danas Meta), otvorenog je koda i jedan je od najrasprostranjenijih načina izrade web aplikacija.

Zašto je važan kad gradite uz AI

Ako izrađujete web aplikaciju uz AI alat, dobro su šanse da je napisana u Reactu. Mnogi AI alati za izradu aplikacija koriste React kao zadani, jer je popularan, dobro dokumentiran i postoji ogromna količina React koda iz koje AI modeli mogu učiti.

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

• Precizno opišete promjene. „Promijeni komponentu ProductCard tako da cijena bude podebljana“ jasnije je od „negdje istakni cijene“.
• Razumijete greške. Poruke poput „Cannot read properties of undefined“ ili „Too many re-renders“ postaju razumljivije.
• Donosite razumne odluke. Obične React aplikacije renderiraju se u pregledniku, što utječe na vidljivost u pretraživačima i brzinu prvog učitavanja. Kad to znate, lakše ćete zatražiti drugačije postavljanje.
• Kasnije radite s programerima. React je česta vještina, pa programer obično može preuzeti React kod.

Svakodnevna usporedba

Zamislite LEGO. Umjesto da cijeli model isklešete iz jedne kocke, sastavljate ga od standardnih kockica. Nekoliko kockica čini kotač; četiri kotača i još neki dijelovi čine auto. Ako želite da svaki auto ima crvene kotače, promijenite dizajn kotača jednom.

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

Druga polovica usporedbe: zamislite da se LEGO model sam preslaže kad promijenite upute. To je Reactov drugi trik: opišete kako ekran treba izgledati za trenutačne podatke, a React sam otkriva što treba promijeniti na stranici.

Osnovne ideje

Komponente

Komponenta je JavaScript funkcija koja vraća dio sučelja. React dokumentacija opisuje komponentu kao dio korisničkog sučelja koji ima vlastitu logiku i izgled. Imena 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>Dobro došli natrag!</h1>;
}

JSX nije obavezan, ali React dokumentacija napominje da većina projekata to koristi. Prije nego se pokrene u pregledniku, pretvara se u običan JavaScript.

Props

Props su ulazi koje prosljeđujete komponenti, poput postavki na ponovno upotrebljivom dijelu:

<ProductCard name="Sveća od lavande" price={24} />

Ista ProductCard može prikazati bilo koji proizvod.

State

State je informacija koju komponenta pamti, a koja se može mijenjati dok aplikacija radi: je li izbornik otvoren, što je upisano u polje za pretragu, koliko je stavki u košarici. Kad se state promijeni, React ponovno renderira komponentu tako da ekran odgovara.

Hookovi

Hookovi su funkcije čija imena počinju s use, poput useState (pamti vrijednost) i useEffect (pokreće kod nakon renderiranja, primjerice za dohvat podataka). Vidjet ćete ih posvuda u React kodu generiranom s AI-jem.

Primjer na djelu: brojač košarice

Recimo da vaša online trgovina ima gumb „Dodaj u košaricu“ i ikonu košarice koja prikazuje 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="Sveća od lavande"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

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

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Dodaj u košaricu</button>
    </div>
  );
}

Što se događa kad kupac klikne „Dodaj u košaricu“:

1. onClick gumba poziva onAdd, koji poziva setCartCount.
2. React mijenja cartCount state s 0 na 1.
3. React ponovno renderira Shop, prosljeđujući count={1} u CartIcon.
4. Stranica sada prikazuje „Košarica (1)“. Nitko nije napisao kod koji kaže „pronađi tekst košarice i promijeni ga“; ekran prati podatke.

Primijetite i ograničenja. Ovaj brojač živi u memoriji preglednika. Osvježite stranicu i opet je 0. Da biste zadržali košaricu, trebali biste je spremiti negdje trajno: u kolačić, u pohranu preglednika ili u bazu podataka preko backenda. React upravlja ekranom; ne sprema vaše podatke.

Gdje React stoji u web aplikaciji

Aplikacija „Vite + React“ renderira se u pregledniku (jednostranična aplikacija, SPA). Next.js aplikacija može prvo renderirati stranice na serveru, što pomaže tražilicama i brzini prvog učitavanja.

Uobičajeni 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 sprema moje podatke.“ State živi u pregledniku i nestaje pri osvježavanju. Trajni podaci traže backend i bazu podataka.
• Stavljanje tajni u React kod. Sve u React aplikaciji šalje se pregledniku posjetitelja. API ključevi tamo su javni. Držite ih na serveru.
• „React aplikacije ne mogu biti rangirane u pretraživanju.“ Renderiranje samo na klijentu slabije je za pretraživanje, ali prerenderiranje ili renderiranje na serveru rješava većinu toga.
• Ogromne komponente. Jedna komponenta od 1.000 redaka teška je za sigurnu promjenu, i za ljude i za AI. Tražite manje.
• Pretpostavka da je React web aplikacija telefonska aplikacija. Radi u pregledniku, uključujući na telefonima, ali nije aplikacija iz App Storea.

Što tražiti od AI alata za izradu

• „Razdvoji ovu stranicu na male, imenovane komponente i reci mi u kojoj je datoteci svaka.“
• „Učini komponentu ProductCard ponovno upotrebljivom, s nazivom, cijenom i slikom kao props.“
• „Spremi košaricu u bazu podataka da preživi osvježavanje.“
• „Čuvaj sve API ključeve na serveru; React kod neka zove naš vlastiti API.“
• „Dodaj stanja učitavanja i grešaka za podatke koji dolaze s servera.“
• „Ako su vidljivost u pretraživačima važni za ove stranice, prerenderiraj ih ili koristi postavljanje s renderiranjem na serveru.“
• „Objasni običnim jezikom što znači ova greška i iz koje komponente dolazi.“

Za širu sliku pogledajte frontend naspram backenda, a za pregled koda koji je AI napisao kako pregledati kod generiran AI-jem.

React u Mythexu

Osim ako ne zatražite nešto drugo, Mythex nove projekte pokreće na Vite + React + TypeScript + Tailwind, uz pokrenuti pregled dok razgovarate u chatu. Drugo postavljanje možete navesti u prvoj poruci, primjerice „Koristi Next.js“ ili „običnu statičku HTML stranicu“, i Mythex ga odabere iz onoga što napišete; za to ne postoji zaseban zaslon s postavkama. Stranica dokumentacije o tome kako se bira tehnologija objašnjava mogućnosti. Uređivač koda je samo za čitanje na Free planu; na Pro planu možete izravno uređivati React kod i izvesti projekt kako biste nastavili rad drugdje.

Pitanja