Ce este React? Un ghid simplu pentru non-dezvoltatori

React este o bibliotecă JavaScript pentru construirea interfețelor cu utilizatorul — partea din aplicație pe care oamenii o văd și pe care dau clic. Construiești ecranele din piese refolosibile numite componente, cum ar fi un buton, un card de produs sau o pagină întreagă, iar React menține ecranul sincronizat cu datele tale: când datele se schimbă, React actualizează părțile paginii care depind de ele. A fost creat la Facebook (acum Meta), este open source și este una dintre cele mai larg folosite modalități de a construi aplicații web.

De ce contează când construiești cu AI

Dacă construiești o aplicație web cu un instrument AI, există șanse bune ca ea să fie scrisă în React. Multe constructoare de aplicații AI folosesc React implicit, pentru că este popular, bine documentat și există o cantitate enormă de cod React din care modelele AI au putut învăța.

Nu ai nevoie să scrii React ca să construiești cu AI. Dar a ști puțin te ajută să:

• Descrii modificările precis. „Schimbă componenta ProductCard ca prețul să fie îngroșat” este mai clar decât „fă prețurile să iasă în evidență undeva”.
• Înțelegi erorile. Mesaje precum „Cannot read properties of undefined” sau „Too many re-renders” au mai mult sens.
• Faci alegeri sănătoase. Aplicațiile React simple se randează în browser, ceea ce afectează vizibilitatea în căutări și viteza de încărcare inițială. Să știi asta te ajută să decizi când să ceri o altă configurație.
• Lucrezi mai târziu cu dezvoltatori. React este o competență comună, așa că un dezvoltator poate prelua de obicei un proiect React.

O analogie din viața de zi cu zi

Gândește-te la LEGO. În loc să sculptezi un model întreg dintr-un singur bloc, îl construiești din cărămizi standard. Câteva cărămizi fac o roată; patru roți și alte piese fac o mașină. Dacă vrei ca fiecare mașină să aibă roți roșii, schimbi designul roții o singură dată.

Componentele React sunt cărămizile. O componentă Button este folosită în interiorul unui ProductCard, care este folosit într-un ProductGrid, care face parte din ShopPage. Schimbi Button o singură dată, și fiecare buton din aplicație se schimbă.

Cealaltă jumătate a analogiei: imaginează-ți modelul LEGO care se reconstruiește singur ori de câte ori schimbi instrucțiunile. Acesta este celălalt truc al React — descrii cum ar trebui să arate ecranul pentru datele curente, iar React își dă seama ce să schimbe pe pagină.

Ideile de bază

Componente

O componentă este o funcție JavaScript care returnează o bucată de interfață. Documentația React descrie o componentă ca pe o bucată a interfeței care are propria logică și propriul aspect. Numele componentelor încep cu literă mare.

JSX

Componentele se scriu de obicei în JSX, care arată ca HTML amestecat în JavaScript:

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

JSX este opțional, dar documentația React notează că majoritatea proiectelor îl folosesc. Este convertit în JavaScript simplu înainte să ruleze în browser.

Props

Props sunt intrările pe care le transmiți unei componente, ca setările unei piese refolosibile:

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

Același ProductCard poate afișa orice produs.

State

State-ul este informația pe care o componentă și-o amintește și care se poate schimba cât timp rulează aplicația — dacă un meniu este deschis, ce s-a scris într-o casetă de căutare, câte articole sunt în coș. Când state-ul se schimbă, React re-randează componenta ca ecranul să corespundă.

Hooks

Hooks sunt funcții al căror nume începe cu use, cum ar fi useState (ține minte o valoare) și useEffect (rulează cod după randare, de exemplu ca să aducă date). Le vei vedea peste tot în codul React generat de AI.

Un exemplu lucrat: un contor de coș

Să spunem că magazinul tău online are un buton „Adaugă în coș” și o iconiță de coș care arată numărul de articole. În React arată cam așa:

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

Ce se întâmplă când un cumpărător apasă „Adaugă în coș”:

1. onClick al butonului apelează onAdd, care apelează setCartCount.
2. React actualizează state-ul cartCount de la 0 la 1.
3. React re-randează Shop, transmițând count={1} către CartIcon.
4. Pagina arată acum „Cart (1)”. Nimeni nu a scris cod care să spună „găsește textul coșului și schimbă-l” — ecranul urmează datele.

Dar observă și limitele. Acest număr trăiește în memoria browserului. Reîncarci pagina și revine la 0. Ca să păstrezi un coș, ar trebui să-l salvezi undeva durabil — un cookie, stocarea browserului sau o bază de date prin backend-ul tău. React se ocupă de ecran; nu stochează datele tale.

Unde se încadrează React într-o aplicație web

O aplicație „Vite + React” se randează în browser (o aplicație cu o singură pagină). O aplicație Next.js poate randa paginile mai întâi pe server, ceea ce ajută motoarele de căutare și viteza de încărcare inițială.

Termeni comuni explicați

Greșeli frecvente și idei greșite

• „React este un limbaj de programare.” Este o bibliotecă scrisă și folosită din JavaScript (sau TypeScript).
• „React îmi stochează datele.” State-ul trăiește în browser și dispare la reîncărcare. Datele durabile au nevoie de un backend și de o bază de date.
• Secrete în codul React. Tot ce este într-o aplicație React este trimis în browserul vizitatorului. Cheile API din acel cod sunt publice. Păstrează-le pe server.
• „Aplicațiile React nu pot fi indexate.” Randarea doar pe client este mai slabă pentru căutare, dar preprocesarea sau randarea pe server rezolvă cea mai mare parte a problemei.
• Componente gigantice. O componentă de 1.000 de linii este greu de schimbat în siguranță, atât pentru oameni, cât și pentru AI. Cere unele mai mici.
• Credința că o aplicație web React este o aplicație de telefon. Rulează în browser, inclusiv pe telefoane, dar nu este o aplicație din App Store.

Ce să ceri constructorului tău AI

• „Împarte această pagină în componente mici, cu nume, și spune-mi în ce fișier se află fiecare.”
• „Fă componenta ProductCard refolosibilă, cu nume, preț și imagine ca props.”
• „Salvează coșul în baza de date ca să supraviețuiască unei reîncărcări.”
• „Păstrează toate cheile API pe server; codul React ar trebui să apeleze propriul nostru API.”
• „Adaugă stări de încărcare și de eroare pentru datele care vin de pe server.”
• „Dacă vizibilitatea în căutări contează pentru aceste pagini, preprocesează-le sau folosește o configurare randată pe server.”
• „Explică în limbaj simplu ce înseamnă această eroare și din ce componentă provine.”

Pentru imaginea de ansamblu, vezi frontend vs backend, iar pentru verificarea codului scris de AI, cum revizuiești codul generat de AI.

React în Mythex

Dacă nu ceri altceva, Mythex începe proiectele noi pe Vite + React + TypeScript + Tailwind, cu o previzualizare live care rulează în timp ce scrii în chat. Poți numi o altă configurație în primul prompt — de exemplu „Folosește Next.js” sau „pagină de destinație statică simplă în HTML” — iar Mythex o alege din ce scrii; nu există un ecran de setări pentru asta. Pagina din documentație despre cum este aleasă tehnologia explică opțiunile. Editorul de cod este doar pentru citire în planul gratuit; pe Pro poți edita direct codul React și poți exporta proiectul ca să continui lucrul în altă parte.

Întrebări