Šta je React? Vodič za one koji nisu programeri, jednostavno

React je JavaScript biblioteka za pravljenje korisničkih interfejsa, odnosno onog dela aplikacije koji ljudi vide i na koji klikću. Ekrani se prave od komponenti koje se ponovo koriste, na primer dugmeta, kartice proizvoda ili cele stranice, a React drži ekran usklađenim sa podacima: kada se podaci promene, React ažurira delove stranice koji od njih zavise. Napravila ga je kompanija Facebook (danas Meta), otvorenog je koda i jedan je od najšire korišćenih načina za pravljenje veb aplikacija.

Zašto je važan kada pravite aplikacije uz AI

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

Ne morate da pišete React da biste pravili uz AI. Ali malo znanja pomaže da:

• Precizno opišete izmene. „Promeni komponentu ProductCard da cena bude podebljana“ je jasnije od „negde istakni cene“.
• Razumete greške. Poruke kao „Cannot read properties of undefined“ ili „Too many re-renders“ postaju razumljivije.
• Donosite razumne odluke. Obične React aplikacije se renderuju u pregledaču, što utiče na vidljivost u pretrazi i brzinu prvog učitavanja. Kada to znate, lakše ćete odlučiti kada da tražite drugačije podešavanje.
• Kasnije radite sa programerima. React je česta veština, pa programer obično lako preuzima React kodnu bazu.

Svakodnevna analogija

Zamislite LEGO. Umesto da model isečete iz jednog bloka, pravite ga od standardnih kockica. Nekoliko kockica čini točak; četiri točka i još neki delovi čine auto. Ako želite da svi auti imaju crvene točkove, promenite dizajn točka samo jednom.

React komponente su kockice. Komponenta Button se koristi unutar ProductCard, koja se koristi unutar ProductGrid, koja je deo ShopPage. Promenite Button jednom i sva dugmad u aplikaciji se menjaju.

Drugi deo analogije: zamislite da se LEGO model sam ponovo sastavlja kada promenite uputstvo. To je druga React ideja: opisujete kako ekran treba da izgleda za trenutne podatke, a React sam računa šta treba promeniti na stranici.

Osnovne ideje

Komponente

Komponenta je JavaScript funkcija koja vraća deo interfejsa. React dokumentacija opisuje komponentu kao deo korisničkog interfejsa koji ima sopstvenu logiku i izgled. Imena komponenti počinju velikim slovom.

JSX

Komponente se obično pišu u JSX-u, koji izgleda kao HTML umešan u JavaScript:

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

JSX nije obavezan, ali React dokumentacija napominje da ga većina projekata koristi. Pretvara se u običan JavaScript pre nego što se pokrene u pregledaču.

Props

Props su ulazi koje prosleđujete komponenti, kao podešavanja na delu koji se ponovo koristi:

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

Isti ProductCard može da prikaže bilo koji proizvod.

State

State su informacije koje komponenta pamti i koje se mogu menjati dok aplikacija radi, na primer da li je meni otvoren, šta je ukucano u polje za pretragu ili koliko stavki ima u korpi. Kada se state promeni, React ponovo renderuje komponentu tako da ekran odgovara.

Hookovi

Hookovi su funkcije čija imena počinju sa use, na primer useState (pamti vrednost) i useEffect (pokreće kod nakon renderovanja, na primer da učita podatke). Videćete ih svuda u React kodu koji generiše AI.

Radni primer: brojač korpe

Recimo da vaša online prodavnica ima dugme „Dodaj u korpu“ i ikonicu korpe koja prikazuje broj stavki. U Reactu to izgleda otprilike 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 kada kupac klikne „Dodaj u korpu“:

1. Dugme onClick poziva onAdd, koji poziva setCartCount.
2. React menja state cartCount sa 0 na 1.
3. React ponovo renderuje Shop i prosleđuje count={1} komponenti CartIcon.
4. Stranica sada prikazuje „Cart (1)“. Niko nije napisao kod koji kaže „pronađi tekst korpe i promeni ga“. Ekran prati podatke.

Primetite i ograničenja. Ovaj broj živi u memoriji pregledača. Osvežite stranicu i vrati se na 0. Da biste sačuvali korpu, morali biste je negde trajno upisati: u kolačić, u skladište pregledača ili u bazu podataka preko backenda. React upravlja ekranom; ne čuva vaše podatke.

Gde se React uklapa u veb aplikaciju

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

Pojmovi objašnjeni

Česte greške i zablude

• „React je programski jezik.“ To je biblioteka napisana i korišćena iz JavaScripta (ili TypeScripta).
• „React čuva moje podatke.“ State živi u pregledaču i nestaje pri osvežavanju. Trajni podaci traže backend i bazu.
• Stavljanje tajni u React kod. Sve u React aplikaciji šalje se pregledaču posetioca. API ključevi tamo su javni. Držite ih na serveru.
• „React aplikacije ne mogu da se rangiraju u pretrazi.“ Renderovanje samo na klijentu slabije je za pretragu, ali unapred renderovanje ili renderovanje na serveru rešava većinu problema.
• Ogromne komponente. Jedna komponenta od 1.000 linija teško se bezbedno menja i ljudima i AI-ju. Tražite manje.
• Pretpostavka da je React veb aplikacija telefonska aplikacija. Radi u pregledaču, uključujući telefone, ali nije aplikacija iz App Store-a.

Šta da tražite od AI alata za pravljenje aplikacija

• „Podeli ovu stranicu na male, imenovane komponente i reci mi u kom fajlu je svaka.“
• „Napravi komponentu ProductCard za ponovnu upotrebu, sa imenom, cenom i slikom kao props.“
• „Sačuvaj korpu u bazu da preživi osvežavanje.“
• „Sve API ključeve drži na serveru; React kod neka poziva naš sopstveni API.“
• „Dodaj stanja učitavanja i greške za podatke koji dolaze sa servera.“
• „Ako su nam važne pretrage za ove stranice, unapred ih renderuj ili koristi podešavanje sa renderovanjem na serveru.“
• „Objasni mi običnim jezikom šta znači ova greška i iz koje komponente dolazi.“

Za širu sliku pogledajte frontend i backend, a za pregled koda koji je AI napisao kako pregledati kod generisan AI-jem.

React u Mythex-u

Osim ako ne tražite nešto drugo, Mythex nove projekte pokreće na Vite + React + TypeScript + Tailwind osnovi, uz živi pregled koji radi dok razgovarate u chatu. Drugo podešavanje možete navesti u prvoj poruci, na primer „Koristi Next.js“ ili „običan statički HTML landing page“, a Mythex ga prepoznaje iz onoga što napišete; ne postoji podešavanje u meniju. Stranica dokumentacije o načinu izbora tehnologije objašnjava opcije. Editor koda je samo za čitanje u Free paketu; u Pro paketu možete direktno da menjate React kod i izvezete projekat da biste nastavili rad negde drugde.

Pitanja