Componente, props și JSX
Componente pure, reguli JSX, key în liste și compoziție cu children.
Actualizat
Ce este React
React e o librărie pentru construirea interfețelor din componente. Ideea centrală: UI = f(state) — descrii cum arată interfața pentru niște date, iar când datele se schimbă, React actualizează singur DOM-ul.
| Imperativ (DOM direct) | Declarativ (React) |
|---|---|
„găsește lista, creează un li, pune textul, adaug-o” |
„pentru array-ul ăsta, lista arată așa” |
| tu ții minte ce e pe ecran | React compară și aplică doar diferențele |
Ce este o componentă
O componentă e o funcție care returnează UI (JSX). O scrii o dată și o folosești ca pe un tag HTML propriu, de oricâte ori.
type Props = { name: string; role?: 'admin' | 'user' }
export function UserBadge({ name, role = 'user' }: Props) {
return <span className="badge">{name} · {role}</span>
}
<UserBadge name="Ana" role="admin" />
<UserBadge name="Ion" />- Numele începe cu literă mare — altfel React o tratează ca tag HTML.
- Primește props — datele de la părinte, ca argumente.
- Props-urile sunt read-only: nu le modifici niciodată în componentă.
- Trebuie să fie pură: aceleași props → același JSX, fără efecte secundare în timpul randării.
Ce este JSX
JSX e o sintaxă care arată ca HTML, dar e JavaScript: <Card title="x" /> devine un apel de funcție. Diferențe față de HTML:
| HTML | JSX | De ce |
|---|---|---|
class |
className |
class e cuvânt rezervat în JS |
for |
htmlFor |
la fel |
onclick="..." |
onClick={fn} |
camelCase, primești funcția |
style="color: red" |
style={{ color: 'red' }} |
obiect JS |
<br> |
<br /> |
toate tag-urile se închid |
| mai multe elemente la rădăcină | un singur root sau <>...</> (fragment) |
o funcție returnează o valoare |
Între {} pui orice expresie JS: variabile, apeluri, ternare, map.
Randare condiționată — variante
| Variantă | Când |
|---|---|
{isAdmin && <Panel />} |
afișezi sau nu |
{loading ? <Spinner /> : <List />} |
una din două |
if (!user) return <Login /> înainte de return principal |
ramuri mari, early return |
obiect-map: {icons[status]} |
multe variante |
Capcana: {count && <List />} cu count = 0 randează 0. Folosește count > 0 &&.
Liste și key
<ul>
{products.map(p => (
<li key={p.id}>{p.name}</li>
))}
</ul>key spune lui React care element e care între randări. Trebuie să fie unic între frați și stabil:
| Key | Rezultat |
|---|---|
item.id din date |
✓ corect |
indexul (i) |
✗ la ștergere / reordonare, state-ul (input-uri, focus) rămâne pe poziția greșită |
Math.random() |
✗ fiecare randare = element nou, se pierde tot |
Truc: schimbi key-ul unei componente → React o resetează complet.
Compoziție cu children
children = ce pui între tag-urile componentei. Așa construiești componente flexibile fără zeci de props:
function Card({ title, children }: { title: string; children: React.ReactNode }) {
return (
<section className="card">
<h2>{title}</h2>
{children}
</section>
)
}
<Card title="Profil">
<UserBadge name="Ana" />
<button>Editează</button>
</Card>| Abordare | Exemplu | Problemă |
|---|---|---|
| props-uri de configurare | <Card showHeader showFooter footerText="..." /> |
crește la nesfârșit |
| compoziție | <Card><Card.Header />...</Card> |
flexibilă |
Pe scurt
- Componentă = funcție pură care primește props și returnează JSX.
- JSX = JS cu sintaxă de HTML:
className,onClick={fn},{expresii}. keystabil din date în liste; compoziție cuchildren.