Hvað er React? Einföld leiðsögn fyrir þá sem eru ekki forritarar

React er JavaScript-bókasafn til að smíða notendaviðmót, það hluta forritsins sem fólk sér og smellir á. Þú byggir skjái úr endurnýtanlegum einingum sem kallast íhlutir, til dæmis hnappi, vörukorti eða heilli síðu. React heldur skjánum í samræmi við gögnin þín: þegar gögnin breytast uppfærir React þá hluta síðunnar sem reiða sig á þau. Það var búið til hjá Facebook (nú Meta), er opinn hugbúnaður og er ein mest notaða leiðin til að smíða vefforrit.

Af hverju React skiptir máli þegar þú smíðar með gervigreind

Ef þú smíðar vefforrit með gervigreindartóli eru góðar líkur á að það sé skrifað í React. Mörg smíðatól fyrir gervigreindarforrit nota React sjálfgefið, því það er vinsælt, vel skjalfest og gríðarlegt magn af React-kóða er til sem gervigreindarlíkön hafa lært af.

Þú þarft ekki að skrifa React til að smíða með gervigreind. En smá þekking hjálpar þér að:

• Lýsa breytingum nákvæmlega. „Breyttu ProductCard-íhlutanum svo verðið sé feitletrað“ er skýrara en „láttu verð standa betur út einhvers staðar“.
• Skilja villur. Skilaboð eins og „Cannot read properties of undefined“ eða „Too many re-renders“ verða skiljanlegri.
• Taka skynsamlegar ákvarðanir. Einföld React-forrit birta sig í vafranum, sem hefur áhrif á sýnileika í leitarvélum og hraða fyrstu hleðslu. Það hjálpar þér að ákveða hvenær þú átt að biðja um aðra uppsetningu.
• Vinna með forriturum síðar. React er algeng færni, þannig að forritari getur yfirleitt tekið við React-kóðasafni.

Hversdagslíking

Hugsaðu um LEGO. Í stað þess að skera heila fyrirmynd úr einum kubbi byggirðu hana úr stöðluðum kubbum. Nokkrir kubbar mynda hjól; fjögur hjól og aðrir hlutar mynda bíl. Ef þú vilt að öll hjól séu rauð breytirðu hönnun hjólsins einu sinni.

React-íhlutir eru kubbarnir. Hnappinn Button er notaður innan í ProductCard, sem er notað innan í ProductGrid, sem er hluti af ShopPage. Breytirðu Button einu sinni breytast allir hnappar forritsins.

Hinn helmingur líkingarinnar: ímyndaðu þér að LEGO-fyrirmyndin byggi sig sjálf upp aftur þegar þú breytir leiðbeiningunum. Það er hitt bragð React: þú lýsir því hvernig skjárinn á að líta út fyrir núverandi gögn og React reiknar út hvað þarf að breyta á síðunni.

Helstu hugmyndirnar

Íhlutir (components)

Íhluti er JavaScript-fall sem skilar hluta af viðmóti. Í skjölum React er íhlutur lýstur sem hluti af viðmótinu sem hefur sína eigin rökfræði og útlit. Heiti íhluta byrja á hástaf.

JSX

Íhlutir eru yfirleitt skrifaðir í JSX, sem lítur út eins og HTML blandað saman við JavaScript:

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

JSX er valkvætt, en í skjölum React kemur fram að flest verkefni noti það. Það er breytt í venjulegt JavaScript áður en það keyrir í vafranum.

Props

Props eru inntökin sem þú sendir í íhlut, eins og stillingar á endurnýtanlegum hluta:

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

Sami ProductCard getur birt hvaða vöru sem er.

State

State er upplýsingar sem íhluturinn man og geta breyst meðan forritið keyrir, til dæmis hvort valmynd er opin, hvað er slegið inn í leitarreit eða hversu margir hlutir eru í körfunni. Þegar state breytist endurbirtir React íhlutinn svo skjárinn passi við.

Hook-ar

Hook-ar eru föll sem heiti byrja á use, til dæmis useState (man gildi) og useEffect (keyrir kóða eftir birtingu, til dæmis til að sækja gögn). Þú sérð þá alls staðar í kóða sem gervigreind skrifar fyrir React.

Dæmi: körfuteljari

Segjum að netverslunin þín sé með hnappinn „Setja í körfu“ og körfutákn sem sýnir fjölda hluta. Í React lítur það nokkurn veginn svona út:

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

Þetta gerist þegar kaupandi smellir á „Setja í körfu“:

1. onClick á hnappnum kallar á onAdd, sem kallar á setCartCount.
2. React uppfærir state cartCount úr 0 í 1.
3. React endurbirtir Shop og sendir count={1} inn í CartIcon.
4. Síðan sýnir „Cart (1)“. Enginn skrifaði kóða sem segir „finndu körfutextann og breyttu honum“ — skjárinn fylgir gögnunum.

Takið líka eftir takmörkunum. Þessi teljari býr í minni vafrans. Endurhlaðir þú síðuna er hann aftur 0. Til að geyma körfu þyrfti að vista hana á varanlegum stað, til dæmis í köku, geymslu vafrans eða gagnagrunni í gegnum bakendann. React sér um skjáinn, það geymir ekki gögnin þín.

Hvar React passar í vefforrit

Forrit sem er „Vite + React“ birtist í vafranum (einsíðuforrit). Next.js-forrit getur birt síður á þjóninum fyrst, sem hjálpar leitarvélum og hraða fyrstu hleðslu.

Helstu hugtök útskýrð

Algeng mistök og ranghugmyndir

• „React er forritunarmál.“ Það er bókasafn sem er skrifað í og notað frá JavaScript (eða TypeScript).
• „React geymir gögnin mín.“ State býr í vafranum og hverfur við endurhleðslu. Varanleg gögn þurfa bakenda og gagnagrunn.
• Að setja leyndarmál í React-kóða. Allt í React-forriti er sent í vafra gestsins. API-lyklar þar eru opinberir. Geymdu þá á þjóninum.
• „React-öpp geta ekki verið ofarlega í leit.“ Viðmót sem birtist eingöngu í vafranum er veikara í leit, en forbirting eða birting á þjóni lagar flest af því.
• Risavaxnir íhlutir. Einn íhlutur upp á 1.000 línur er erfiður fyrir fólk og gervigreind að breyta á öruggan hátt. Biddu um smærri.
• Að halda að React-vefforrit sé símaapp. Það keyrir í vafranum, líka í símum, en er ekki app í App Store.

Það sem þú getur beðið smíðatólið þitt um

• „Skiptu þessari síðu í litla, nafngreinda íhluti og segðu mér í hvaða skrá hver þeirra er.“
• „Gerðu ProductCard-íhlutann endurnýtanlegan, með nafni, verði og mynd sem props.“
• „Vistaðu körfuna í gagnagrunninn svo hún lifi endurhleðslu.“
• „Geymdu alla API-lykla á þjóninum; React-kóðinn á að kalla á okkar eigið API.“
• „Bættu við hleðslu- og villuástandi fyrir gögn sem koma frá þjóninum.“
• „Ef sýnileiki í leit skiptir máli fyrir þessar síður, forbirtu þær eða notaðu uppsetningu með birtingu á þjóni.“
• „Útskýrðu á einföldu máli hvað þessi villa þýðir og úr hvaða íhluti hún kemur.“

Fyrir stærri myndina, sjá framendi og bakendi, og til að yfirfara kóðann sem gervigreindin skrifaði, hvernig á að yfirfara kóða sem gervigreind skrifar.

React í Mythex

Nema þú biðjir um annað byrjar Mythex ný verkefni á Vite + React + TypeScript + Tailwind með lifandi forskoðun á meðan þú spjallar. Þú getur nefnt aðra uppsetningu í fyrstu skipun, til dæmis „Notaðu Next.js“ eða „einföld truflanaleg heimasíða í HTML“, og Mythex velur hana út frá því sem þú skrifar. Það er enginn stillingarskjár fyrir þetta. Skjalasíðan um hvernig tæknin er valin útskýrir valkostina. Kóðaritillinn er lesaður eingöngu á Free; á Pro getur þú breytt React-kóðanum beint og flutt verkefnið út til að halda áfram annars staðar.

Spurningar