Çfarë është React? Udhëzues i thjeshtë për jo-zhvilluesit

React është një librari JavaScript për ndërtimin e ndërfaqeve të përdoruesit — pjesa e aplikacionit që njerëzit e shohin dhe klikojnë. Ndërton ekrane nga pjesë të ripërdorshme të quajtura komponentë, si një buton, një kartë produkti ose një faqe e tërë, dhe React e mban ekranin në përputhje me të dhënat: kur të dhënat ndryshojnë, React përditëson pjesët e faqes që varen prej tyre. U krijua te Facebook (tani Meta), është me kod të hapur dhe është një nga mënyrat më të përdorura për të ndërtuar aplikacione web.

Pse ka rëndësi kur ndërton me AI

Nëse ndërton një aplikacion web me një mjet AI, ka gjasa të mirë që është shkruar në React. Shumë ndërtues aplikacionesh me AI përdorin React si parazgjedhje, sepse është i njohur, mirë i dokumentuar dhe ka një sasi të madhe kodi React nga i cili modelet e AI-së kanë mësuar.

Nuk të duhet të shkruash React për të ndërtuar me AI. Por të dish pak të ndihmon të:

• Përshkruash ndryshimet saktë. “Ndrysho komponentin ProductCard që çmimi të jetë i trashë” është më e qartë sesa “bëj që çmimet të dallojnë diku”.
• Kuptosh gabimet. Mesazhe si “Cannot read properties of undefined” ose “Too many re-renders” kuptohen më mirë.
• Bësh zgjedhje të arsyeshme. Aplikacionet e thjeshta React renderohen në shfletues, gjë që ndikon në dukshmërinë në kërkim dhe shpejtësinë e ngarkimit të parë. Ta dish këtë të ndihmon të vendosësh kur të kërkosh një konfigurim tjetër.
• Të punosh më vonë me zhvillues. React është një aftësi e zakonshme, kështu që një zhvillues zakonisht mund të marrë përsipër një bazë kodi React.

Një analogji e përditshme

Mendo për LEGO. Në vend që të skalitësh një model të tërë nga një bllok i vetëm, e ndërton nga tulla standarde. Disa tulla bëjnë një rrotë; katër rrota dhe disa pjesë të tjera bëjnë një makinë. Nëse dëshiron që çdo makinë të ketë rrota të kuqe, e ndryshon dizajnin e rrotës një herë.

Komponentët React janë tullat. Një komponent Button përdoret brenda një ProductCard, që përdoret brenda një ProductGrid, që është pjesë e ShopPage. Ndrysho Button një herë, dhe çdo buton në aplikacion ndryshon.

Pjesa tjetër e analogjisë: imagjino që modeli LEGO ndërtohet vetë sa herë ndryshon udhëzimet. Kjo është tjetra e React: përshkruan si duhet të duket ekrani për të dhënat aktuale, dhe React përcakton çfarë duhet ndryshuar në faqe.

Idetë kryesore

Komponentët

Një komponent është një funksion JavaScript që kthen një pjesë ndërfaqeje. Dokumentacioni i React e përshkruan një komponent si një pjesë të UI-së që ka logjikën dhe pamjen e vet. Emrat e komponentëve fillojnë me shkronjë të madhe.

JSX

Komponentët shkruhen zakonisht në JSX, që duket si HTML i përzier me JavaScript:

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

JSX është opsional, por dokumentacioni i React thotë se shumica e projekteve e përdorin. Konvertohet në JavaScript të thjeshtë përpara se të ekzekutohet në shfletues.

Props

Props janë hyrjet që i kalon një komponenti, si cilësimet e një pjese të ripërdorshme:

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

I njëjti ProductCard mund të shfaqë çdo produkt.

State

State është informacion që një komponent e mban mend dhe që mund të ndryshojë ndërsa aplikacioni po funksionon — nëse një menu është hapur, çfarë është shkruar në një kutii kërkimi, sa artikuj janë në shportë. Kur ndryshon state, React e rirenderon komponentin që ekrani të përputhet.

Hooks

Hooks janë funksione emrat e të cilave fillojnë me use, si useState (mban mend një vlerë) dhe useEffect (ekzekuton kod pas renderimit, për shembull për të marrë të dhëna). Do t’i shohësh kudo në kodin React të gjeneruar nga AI.

Një shembull i punuar: një numërues shportë

Të themi se dyqani yt online ka një buton “Shto në shportë” dhe një ikonë shporte që shfaq numrin e artikujve. Në React duket më ose më pak kështu:

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

Çfarë ndodh kur një blerës klikon “Shto në shportë”:

1. Butoni onClick thërret onAdd, që thërret setCartCount.
2. React e përditëson state cartCount nga 0 në 1.
3. React e rirenderon Shop, duke kaluar count={1} te CartIcon.
4. Faqja tani shfaq “Cart (1)”. Askush nuk shkroi kod që thoshte “gjej tekstin e shportës dhe ndrysho” — ekrani ndjek të dhënat.

Vini re edhe kufijtë. Ky numërim jeton në memorien e shfletuesit. Rifreskoje faqen dhe kthehet në 0. Për ta ruajtur shportën, do ta ruaje diku të qëndrueshëm — një cookie, depozitimin e shfletuesit, ose një bazë të dhënash përmes backend-it tënd. React e menaxhon ekranin; nuk ruan të dhënat e tua.

Ku përshtatet React në një aplikacion web

Një aplikacion “Vite + React” renderohet në shfletues (një single-page app). Një aplikacion Next.js mund të renderojë faqet në server më parë, gjë që ndihmon motorët e kërkimit dhe shpejtësinë e ngarkimit të parë.

Termat e zakonshëm të shpjeguar

Gabimet dhe keqkuptimet e zakonshme

• “React është një gjuhë programimi.” Është një librari e shkruar dhe e përdorur nga JavaScript (ose TypeScript).
• “React ruan të dhënat e mia.” State jeton në shfletues dhe zhduket kur rifreskon. Të dhënat e qëndrueshme kërkojnë backend dhe bazë të dhënash.
• Vendosja e sekreteve në kodin React. Gjithçka në një aplikacion React dërgohet te shfletuesi i vizitorit. Çelësat API aty janë publikë. Mbaji në server.
• “Aplikacionet React nuk mund të renditen në kërkim.” Renderimi vetëm në klient është më i dobët për kërkimin, por renderimi paraprak ose në server e zgjidh pjesën më të madhe.
• Komponentë shumë të mëdhenj. Një komponent me 1,000 rreshta është i vështirë për t’u ndryshuar në mënyrë të sigurt, si nga njerëzit ashtu edhe nga AI-ja. Kërko më të vegjël.
• Supozimi se një aplikacion web React është aplikacion celulari. Ekzekutohet në shfletues, përfshirë në telefona, por nuk është një aplikacion nga App Store.

Çfarë t’i kërkosh ndërtuesit tënd të AI-së

• “Ndaji këtë faqe në komponentë të vegjël, me emra, dhe më thuaj cilin skedar është secili.”
• “Bëje komponentin ProductCard të ripërdorshëm, me name, price dhe image si props.”
• “Ruaje shportën në bazën e të dhënave që të mbijetojë një rifreskim.”
• “Mbaji të gjithë çelësat API në server; kodi React duhet të thërrasë API-n tonë.”
• “Shto gjendje ngarkimi dhe gabimi për të dhënat që vijnë nga serveri.”
• “Nëse dukshmëria në kërkim ka rëndësi për këto faqe, renderoji paraprakisht ose përdor një konfigurim të renderuar në server.”
• “Shpjego me gjuhë të thjeshtë çfarë do të thotë ky gabim dhe nga cili komponent vjen.”

Për pamjen më të gjerë, shiko frontend kundrejt backend, dhe për të rishikuar atë që shkroi AI-ja, si të rishikosh kodin e gjeneruar nga AI.

React në Mythex

Nëse nuk kërkon ndryshe, Mythex fillon projekte të reja me Vite + React + TypeScript + Tailwind, me një pamje paraprake live që ekzekutohet ndërsa bisedon. Mund të emërosh një konfigurim tjetër në mesazhin e parë — për shembull “Përdor Next.js” ose “faqe statike HTML e thjeshtë” — dhe Mythex e zgjedh nga ajo që shkruan; nuk ka ekran cilësimesh për këtë. Faqja e dokumentacionit për si zgjidhet teknologjia shpjegon opsionet. Redaktuesi i kodit është vetëm për lexim në planin Free; në Pro mund ta ndryshosh kodin React drejtpërdrejt dhe ta eksportosh projektin për ta vazhduar diku tjetër.

Pyetje