Kas ir React? Vienkāršs ceļvedis nespeciālistiem

React ir JavaScript bibliotēka lietotāja saskarņu veidošanai — tajā lietotnes daļā, ko cilvēki redz un uz kuras spiež. Ekrānus veidojat no atkārtoti lietojamām daļām, ko sauc par komponentiem, piemēram, pogas, produkta kartītes vai visas lapas, un React sinhronizē ekrānu ar jūsu datiem: kad dati mainās, React atjauno tās lapas daļas, kas no tiem ir atkarīgas. To izveidoja Facebook (tagad Meta), tas ir atvērtā koda, un tas ir viens no visplašāk izmantotajiem veidiem, kā veidot tīmekļa lietotnes.

Kāpēc tas ir svarīgi, veidojot ar MI

Ja veidojat tīmekļa lietotni ar MI rīku, ir liela iespēja, ka tā ir rakstīta React. Daudzi MI lietotņu veidotāji pēc noklusējuma izmanto React, jo tas ir populārs, labi dokumentēts un MI modeļiem ir milzums React koda, no kura mācīties.

Lai veidotu ar MI, jums nav jāraksta React. Taču mazliet to zinot, jūs varat:

• Precīzi aprakstīt izmaiņas. „Mainīt ProductCard komponentu, lai cena būtu treknrakstā” ir skaidrāk nekā „padari cenas kaut kur izceltas”.
• Saprast kļūdas. Ziņojumi, piemēram, „Cannot read properties of undefined” vai „Too many re-renders”, kļūst saprotamāki.
• Pieņemt saprātīgas izvēles. Vienkārša React lietotne renderējas pārlūkprogrammā, un tas ietekmē redzamību meklētājprogrammās un pirmās ielādes ātrumu. To zinot, varat izlemt, kad lūgt citu uzstādījumu.
• Vēlāk strādāt ar izstrādātājiem. React ir izplatīta prasme, tāpēc izstrādātājs parasti var uzreiz iepazīties ar React kodbāzi.

Ikdienas salīdzinājums

Iedomājieties LEGO. Tā vietā, lai no viena bloka izgrieztu visu modeli, jūs to veidojat no standarta klucīšiem. Daži klucīši veido riteni; četri riteņi un dažas citas detaļas veido automašīnu. Ja vēlaties, lai visām automašīnām būtu sarkani riteņi, jūs mainat riteņa dizainu vienreiz.

React komponenti ir šie klucīši. Komponents Button tiek lietots komponentā ProductCard, kas tiek lietots komponentā ProductGrid, kas ir daļa no ShopPage. Mainiet Button vienreiz, un katra poga lietotnē mainās.

Otra analoģijas puse: iedomājieties, ka LEGO modelis pārbūvējas pats, kad maināt instrukcijas. Tā ir React otra īpašība — jūs aprakstāt, kādam jābūt ekrānam pašreizējiem datiem, un React izdomā, ko lapā mainīt.

Galvenās idejas

Komponenti

Komponents ir JavaScript funkcija, kas atgriež saskarnes daļu. React dokumentācija apraksta komponentu kā UI daļu, kurai ir sava loģika un izskats. Komponentu nosaukumi sākas ar lielo burtu.

JSX

Komponenti parasti tiek rakstīti JSX, kas izskatās pēc HTML, sajaukta ar JavaScript:

function Greeting() {
  return <h1>Esiet sveicināts atpakaļ!</h1>;
}

JSX nav obligāts, taču React dokumentācija norāda, ka lielākā daļa projektu to izmanto. Pirms izpildes pārlūkprogrammā tas tiek pārveidots par parastu JavaScript.

Props

Props ir ievades, ko padodat komponentam, piemēram, atkārtoti lietojamas daļas iestatījumi:

<ProductCard name="Lavandas svece" price={24} />

Tas pats ProductCard var parādīt jebkuru produktu.

State

State ir informācija, ko komponents atceras un kas var mainīties, kamēr lietotne darbojas — vai izvēlne ir atvērta, kas ierakstīts meklēšanas lodziņā, cik preču ir grozā. Kad state mainās, React pārrenderē komponentu, lai ekrāns atbilstu.

Hooks

Hooks ir funkcijas, kuru nosaukums sākas ar use, piemēram, useState (atcerēties vērtību) un useEffect (izpildīt kodu pēc renderēšanas, piemēram, datu ielādei). Tos redzēsiet visur MI ģenerētajā React kodā.

Darba piemērs: groza skaitītājs

Pieņemsim, ka jūsu tiešsaistes veikalam ir poga „Pievienot grozam” un groza ikona, kas rāda preču skaitu. React tas izskatās aptuveni šādi:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavandas svece"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Grozs ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Pievienot grozam</button>
    </div>
  );
}

Kas notiek, kad pircējs noklikšķina uz „Pievienot grozam”:

1. Pogas onClick izsauc onAdd, kas izsauc setCartCount.
2. React atjaunina cartCount state no 0 uz 1.
3. React pārrenderē Shop, nododot count={1} komponentam CartIcon.
4. Lapā tagad redzams „Grozs (1)”. Neviens nerakstīja kodu, kas saka „atrod groza tekstu un nomaini to” — ekrāns seko datiem.

Ievērojiet arī ierobežojumus. Šis skaitītājs atrodas pārlūkprogrammas atmiņā. Atjaunojot lapu, tas atkal ir 0. Lai saglabātu grozu, jums tas jāsaglabā ilgstošā vietā — sīkdatnē, pārlūkprogrammas krātuvē vai datu bāzē caur jūsu backend. React pārvalda ekrānu; tas neglabā jūsu datus.

Kur React ietilpst tīmekļa lietotnē

Lietotne „Vite + React” renderējas pārlūkprogrammā (viena lapa, single-page app). Next.js lietotne var vispirms renderēt lapas serverī, kas palīdz meklētājprogrammām un pirmās ielādes ātrumam.

Biežāk lietotie termini

Biežākās kļūdas un nepareizi priekšstati

• „React ir programmēšanas valoda.” Tā ir bibliotēka, kas rakstīta JavaScript (vai TypeScript) un tiek lietota no tās.
• „React glabā manus datus.” State atrodas pārlūkprogrammā un pazūd, atjaunojot lapu. Pastāvīgiem datiem vajadzīgs backend un datu bāze.
• Noslēpumu ievietošana React kodā. Viss React lietotnē tiek nosūtīts apmeklētāja pārlūkprogrammai. API atslēgas tur ir publiskas. Glabājiet tās serverī.
• „React lietotnes nevar gūt vietu meklēšanā.” Renderēšana tikai klientā ir vājāka meklēšanai, bet iepriekšēja renderēšana vai servera renderēšana to lielākoties novērš.
• Milzīgi komponenti. Viens 1000 rindu komponents ir grūti droši mainīt gan cilvēkiem, gan MI. Lūdziet mazākus.
• Pieņemt, ka React tīmekļa lietotne ir tālruņa lietotne. Tā darbojas pārlūkprogrammā, arī tālruņos, bet nav App Store lietotne.

Ko prasīt no sava MI veidotāja

• „Sadali šo lapu mazos, nosauktos komponentos un pasaki, kurā failā atrodas katrs no tiem.”
• „Padari ProductCard komponentu atkārtoti lietojamu, ar name, price un image kā props.”
• „Saglabā grozu datu bāzē, lai tas saglabājas pēc lapas atjaunošanas.”
• „Visas API atslēgas glabā serverī; React kodam jāizsauc mūsu pašu API.”
• „Pievieno ielādes un kļūdu stāvokļus datiem, kas nāk no servera.”
• „Ja šajās lapās svarīga redzamība meklētājprogrammās, iepriekš renderē tās vai izmanto servera renderētu uzstādījumu.”
• „Vienkāršā valodā paskaidro, ko nozīmē šī kļūda un no kura komponenta tā nāk.”

Plašākam skatījumam skatiet frontend un backend, bet MI rakstītā koda pārskatīšanai — kā pārskatīt MI ģenerētu kodu.

React Mythex

Ja neprasāt citu, Mythex jaunos projektus sāk ar Vite + React + TypeScript + Tailwind, un tērzēšanas laikā darbojas tiešraides priekšskatījums. Pirmajā uzvednē varat norādīt citu uzstādījumu — piemēram, „Izmanto Next.js” vai „vienkārša statiska HTML nosēšanās lapa” — un Mythex to izvēlas pēc tā, ko rakstāt; šim nolūkam nav iestatījumu ekrāna. Dokumentācijas lapa par tehnoloģiju izvēli izskaidro iespējas. Koda redaktors bezmaksas plānā ir tikai lasāms; Pro plānā varat rediģēt React kodu tieši un eksportēt projektu, lai turpinātu strādāt citur.

Jautājumi