Introducere în React – componente, state și props

Introducere în React: componente, state și props. React este o bibliotecă JavaScript dezvoltată de Meta (fostul Facebook) pentru construirea interfețelor utilizator.

Lansată în 2013, React a revoluționat modul în care dezvoltatorii construiesc aplicații web, introducând conceptul de componente reutilizabile și un Virtual DOM care optimizează actualizările interfeței.

În 2025, React rămâne cea mai utilizată bibliotecă JavaScript pentru frontend, cu un ecosistem imens de librării și instrumente auxiliare. Spre deosebire de framework-urile complete precum Angular, React se concentrează exclusiv pe stratul de vizualizare, lăsând alegerea soluțiilor pentru routing și gestionarea stării la latitudinea dezvoltatorului.

Componentele React

Componentele sunt blocurile de construcție fundamentale ale oricărei aplicații React. O componentă encapsulează o porțiune a interfeței utilizator împreună cu logica sa, poate fi refolosită în mai multe locuri și poate conține alte componente mai mici.

Componente funcționale

În React modern (de la versiunea 16.8), componentele funcționale sunt forma standard de scriere a componentelor. O componentă funcțională este o funcție JavaScript care primește un obiect de props și returnează JSX, sintaxa specială care permite scrierea markup-ului HTML-like direct în JavaScript.

JSX nu este HTML, deși seamănă foarte mult cu acesta. Este o extensie de sintaxă JavaScript transpilată de Babel în apeluri de funcție React.createElement(), cu diferențe față de HTML: className în loc de class, camelCase pentru atribute și obligativitatea unui singur element rădăcină.

Compunerea componentelor

React încurajează descompunerea interfețelor complexe în componente mici, cu responsabilitate unică, care pot fi compuse pentru a construi interfețe mai mari. O componentă poate include alte componente în JSX-ul returnat, exact ca tag-urile HTML standard.

O bună strategie de componentizare urmărește Principiul Responsabilității Unice: fiecare componentă ar trebui să facă un singur lucru bine. Componentele mari care gestionează prea multă logică sunt dificil de testat, reutilizat și modificat fără efecte secundare nedorite.

Props și state în React

Props și state sunt cele două mecanisme principale prin care React gestionează datele în aplicații. Înțelegerea diferenței dintre ele este esențială pentru orice dezvoltator React.

Props: date din exterior

Props (prescurtare de la properties) sunt mecanismul prin care datele sunt transmise de la o componentă părinte la componentele copil. Props sunt read-only: o componentă nu poate modifica props primite, doar le poate citi și afișa.

Orice tip de valoare JavaScript poate fi transmis ca prop: string-uri, numere, boolean-uri, obiecte, array-uri și chiar funcții. Transmiterea funcțiilor ca props este mecanismul standard prin care componentele copil comunică cu părinții lor, notificând evenimente și acțiuni ale utilizatorului.

Destructurarea props

O practică comună este destructurarea obiectului props direct în parametrii funcției, pentru a accesa valorile individuale mai concis. Poți defini și valori implicite pentru props prin destructurare cu sintaxa assignment, aplicată când prop-ul respectiv nu este transmis sau este undefined.

Hook-ul useState

State reprezintă datele interne ale unei componente care se pot schimba în timp ca răspuns la interacțiunile utilizatorului sau la date primite de la server. useState este hook-ul fundamental pentru gestionarea stării în componentele funcționale.

Apelul returnează un array cu două elemente: valoarea curentă a stării și o funcție pentru actualizarea ei. Când funcția de actualizare este apelată cu o nouă valoare, React re-randează componenta. Când noua valoare depinde de cea anterioară, se transmite o funcție updater pentru a garanta accesul la starea curentă corectă.

• useState returnează valoarea curentă și funcția de actualizare
• Actualizările stării sunt asincrone și pot fi grupate de React
• Folosește funcția updater când noua valoare depinde de cea anterioară
• Starea nu trebuie mutată direct, ci înlocuită cu o valoare nouă

Hook-ul useEffect și efectele secundare

useEffect este hook-ul pentru gestionarea efectelor secundare: apeluri API, subscripții la evenimente, manipularea directă a DOM-ului sau orice operație care interacționează cu lumea din afara React.

Array-ul de dependențe

Al doilea argument al useEffect controlează când efectul se re-execută. Un array gol înseamnă că efectul rulează o singură dată, după primul randare. Dacă array-ul conține variabile, efectul se re-execută de fiecare dată când vreuna din ele se schimbă.

Funcția de cleanup returnată opțional din useEffect se execută înainte de fiecare re-executare și la unmount-ul componentei. Este esențială pentru anularea fetch-urilor în curs, dezabonarea de la subscripții și curățarea timer-elor, pentru a preveni memory leaks.

Formulare și gestionarea datelor

Formularele în React pot fi gestionate ca componente controlate, unde starea React este sursa unică de adevăr pentru valorile câmpurilor, sau ca componente necontrolate, unde DOM-ul gestionează datele.

Componentele controlate sunt abordarea recomandată pentru că oferă control complet asupra datelor formularului, permit validare în timp real și facilitează integrarea cu starea aplicației. Librăriile React Hook Form sau Formik simplifică semnificativ codul boilerplate necesar.

Pașii următori în ecosistemul React

Odată înțelese componentele, props și state, pasul următor este familiarizarea cu ecosistemul React. Consultă JavaScript modern pentru a înțelege bazele ES6 necesare în React.

• React Router pentru navigare între pagini
• Zustand sau Redux Toolkit pentru gestionarea stării globale
• React Query sau SWR pentru sincronizarea cu serverul
• Tailwind CSS pentru stilizare rapidă
• Node.js și Next.js pentru aplicații full-stack

Next.js a devenit framework-ul recomandat oficial de echipa React pentru aplicații de producție, adăugând server-side rendering, static site generation și optimizare SEO avansată. Dacă construiești o aplicație React serioasă în 2025, Next.js este punctul de pornire recomandat față de Create React App, care nu mai este activ întreținut. Contactează echipa noastră dacă ai nevoie de suport pentru integrarea React în proiectul tău web.