Kas yra React? Paprastas vadovas ne programuotojams

React – tai JavaScript biblioteka vartotojo sąsajoms kurti: ta programos dalis, kurią žmonės mato ir spaudžia. Ekranus sudarote iš pakartotinai naudojamų dalių, vadinamų komponentais, pavyzdžiui, mygtuko, produkto kortelės ar viso puslapio, o React palaiko ekraną sinchronizuotą su jūsų duomenimis: pasikeitus duomenims, React atnaujina tas puslapio dalis, kurios nuo jų priklauso. Ją sukūrė Facebook (dabar Meta), ji atvirojo kodo ir yra vienas plačiausiai naudojamų būdų kurti žiniatinklio programas.

Kodėl tai svarbu kuriant su AI

Jei kuriate žiniatinklio programą su AI įrankiu, didelė tikimybė, kad ji parašyta React. Daugelis AI programų kūrėjų naudoja React pagal numatytuosius nustatymus, nes jis populiarus, gerai dokumentuotas ir AI modeliai turi labai daug React kodo, iš kurio galėjo mokytis.

React rašyti nereikia, kad kurtumėte su AI. Tačiau šiek tiek jo išmanymas padeda:

• Tiksliai aprašyti pakeitimus. „Pakeisk ProductCard komponentą, kad kaina būtų paryškinta“ aiškiau nei „padaryk, kad kainos kažkur išsiskirtų“.
• Suprasti klaidas. Pranešimai, tokie kaip „Cannot read properties of undefined“ ar „Too many re-renders“, tampa suprantamesni.
• Priimti protingus sprendimus. Paprastos React programos atvaizduojamos naršyklėje, o tai veikia paieškos matomumą ir pirmo įkrovimo greitį. Žinodami tai, galite nuspręsti, kada prašyti kitokios sąrankos.
• Vėliau dirbti su programuotojais. React yra įprastas įgūdis, todėl programuotojas paprastai lengvai įsilieja į React kodo bazę.

Kasdienė analogija

Pagalvokite apie LEGO. Vietoj to, kad iš vieno bloko išdrožtumėte visą modelį, jį statote iš standartinių kaladėlių. Keli kaladėlės sudaro ratą; keturi ratai ir kitos dalys – automobilį. Jei norite, kad visi automobiliai turėtų raudonus ratus, pakeičiate rato dizainą vieną kartą.

React komponentai yra tos kaladėlės. Button komponentas naudojamas ProductCard viduje, kuris naudojamas ProductGrid viduje, kuris yra ShopPage dalis. Pakeiskite Button vieną kartą – ir kiekvienas mygtukas programoje pasikeis.

Kita analogijos pusė: įsivaizduokite, kad LEGO modelis pats persistatytų, kai pakeičiate instrukcijas. Tai kita React savybė – aprašote, kaip ekranas turi atrodyti esamiems duomenims, o React išsiaiškina, ką puslapyje reikia pakeisti.

Pagrindinės idėjos

Komponentai

Komponentas – tai JavaScript funkcija, kuri grąžina sąsajos dalį. React dokumentacijoje komponentas aprašomas kaip sąsajos dalis, turinti savo logiką ir išvaizdą. Komponentų pavadinimai prasideda didžiąja raide.

JSX

Komponentai dažniausiai rašomi JSX, kuris atrodo kaip HTML, įterptas į JavaScript:

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

JSX nėra privalomas, bet React dokumentacijoje pažymima, kad dauguma projektų jį naudoja. Prieš paleidžiant naršyklėje, jis konvertuojamas į įprastą JavaScript.

Props

Props – tai įvestys, kurias perduodate komponentui, lyg nustatymai pakartotinai naudojamai daliai:

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

Tas pats ProductCard gali rodyti bet kurį produktą.

State

State – tai informacija, kurią komponentas prisimena ir kuri gali keistis programai veikiant: ar atidarytas meniu, kas įrašyta į paieškos lauką, kiek prekių krepšelyje. Pasikeitus state, React perpiešia komponentą, kad ekranas atitiktų duomenis.

Hooks

Hooks – tai funkcijos, kurių pavadinimai prasideda use, pavyzdžiui, useState (prisiminti reikšmę) ir useEffect (paleisti kodą po atvaizdavimo, pavyzdžiui, įkelti duomenis). Jų pilna AI sugeneruotame React kode.

Darbo pavyzdys: krepšelio skaitiklis

Tarkime, jūsų internetinė parduotuvė turi mygtuką „Add to cart“ ir krepšelio piktogramą, rodančią prekių skaičių. React tai atrodytų maždaug taip:

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

Kas nutinka, kai pirkėjas paspaudžia „Add to cart“:

1. Mygtuko onClick iškviečia onAdd, o tas iškviečia setCartCount.
2. React atnaujina cartCount state nuo 0 iki 1.
3. React perpiešia Shop, perduodamas count={1} į CartIcon.
4. Puslapyje dabar rodoma „Cart (1)“. Niekas nerašė kodo „surask krepšelio tekstą ir pakeisk“ – ekranas seka duomenis.

Verta pastebėti ir apribojimus. Šis skaičius gyvena naršyklės atmintyje. Perkrovus puslapį, jis vėl 0. Norint išsaugoti krepšelį, reikėtų jį įrašyti į ilgalaikę vietą – slapuką, naršyklės saugyklą arba duomenų bazę per serverinę dalį. React tvarko ekraną; jis nesaugo jūsų duomenų.

Kur React tinka žiniatinklio programoje

„Vite + React“ programa atvaizduojama naršyklėje (vieno puslapio programa). Next.js programa gali pirmiausia atvaizduoti puslapius serveryje, o tai padeda paieškos sistemoms ir pirmam įkrovimo greičiui.

Dažniausiai vartojami terminai

Dažnos klaidos ir klaidingos nuomonės

• „React yra programavimo kalba.“ Tai biblioteka, parašyta ir naudojama su JavaScript (arba TypeScript).
• „React saugo mano duomenis.“ State gyvena naršyklėje ir dingsta perkrovus puslapį. Ilgalaikiams duomenims reikia serverinės dalies ir duomenų bazės.
• Paslapčių dėjimas į React kodą. Viskas React programoje siunčiama lankytojo naršyklei. API raktai ten yra vieši. Laikykite juos serveryje.
• „React programos negali būti paieškoje.“ Tik kliento pusėje atvaizduojamas turinys paieškai silpnesnis, bet išankstinis atvaizdavimas arba serverio pusės atvaizdavimas tai ištaiso daugeliu atvejų.
• Milžiniški komponentai. Vienas 1 000 eilučių komponentas sunkiai saugiai pakeičiamas tiek žmonėms, tiek AI. Prašykite mažesnių.
• Manymas, kad React žiniatinklio programa yra telefono programa. Ji veikia naršyklėje, įskaitant telefonus, bet nėra App Store programa.

Ko paprašyti savo AI kūrėjo

• „Padalink šį puslapį į mažus, pavadintus komponentus ir nurodyk, kuriame faile yra kiekvienas.“
• „Padaryk ProductCard komponentą pakartotinai naudojamu, su name, price ir image kaip props.“
• „Išsaugok krepšelį duomenų bazėje, kad jis išliktų perkrovus puslapį.“
• „Laikyk visus API raktus serveryje; React kodas turėtų kviesti mūsų pačių API.“
• „Pridėk įkėlimo ir klaidų būsenas duomenims, kurie ateina iš serverio.“
• „Jei šiems puslapiams svarbus paieškos matomumas, iš anksto atvaizduok juos arba naudok serverio pusės atvaizdavimą.“
• „Paaiškink paprasta kalba, ką reiškia ši klaida ir iš kurio komponento ji kyla.“

Platesniam vaizdui žr. frontend ir backend, o AI parašyto kodo peržiūrai – kaip peržiūrėti AI sugeneruotą kodą.

React Mythex

Jei nieko kito nepaprašote, Mythex naujus projektus pradeda su Vite + React + TypeScript + Tailwind, o pokalbio metu veikia gyva peržiūra. Pirmame pranešime galite nurodyti kitokią sąranką – pavyzdžiui, „Use Next.js“ arba „paprastas statinis HTML nukreipimo puslapis“ – ir Mythex ją pasirenka pagal tai, ką parašote; nustatymų ekrano tam nėra. Dokumentacijos puslapyje apie kaip parenkamos technologijos aprašytos galimybės. Nemokamame plane kodo redaktorius tik skaitymui; Pro plane galite tiesiogiai redaguoti React kodą ir eksportuoti projektą, kad tęstumėte darbą kitur.

Klausimai