JSX si componente

JSX (JavaScript XML) permite scrierea de markup direct in JavaScript. Desi arata ca HTML, exista cateva diferente importante:

Reguli JSX fundamentale:

• Un singur element root - fiecare componenta returneaza un singur element parinte (folositi <div> sau <>...</> Fragment)
• Expresii JS in acolade - {variabila}, {conditie ? 'da' : 'nu'}
• Atribute camelCase - className, onClick, htmlFor
• Toate tag-urile se inchid - inclusiv <img />, <br />, <input />

Componentele sunt blocurile de constructie ale oricarei aplicatii React. In 2026, se folosesc exclusiv componente functionale (class components sunt considerate legacy).

// Componenta simpla
function Welcome() {
return <h1>Bine ati venit!</h1>;
}

// Arrow function (la fel de valida)
const Welcome = () => {
return <h1>Bine ati venit!</h1>;
};

// Utilizare in alta componenta
function App() {
return (
<div>
<Welcome />
<Welcome />
</div>
);
}

Props sunt mecanismul prin care componentele primesc date de la parinti. Props sunt read-only - o componenta nu isi poate modifica propriile props.

// Componenta cu props
function UserCard({ name, email, role = "user" }) {
return (
<div className="card">
<h2>{name}</h2>
<p>{email}</p>
<span>{role}</span>
</div>
);
}

// Utilizare
<UserCard name="Dorel" email="contact@goai.ro" role="admin" />
<UserCard name="Maria" email="maria@test.ro" /> {/* role = "user" (default) */}

Children prop:

// Componenta wrapper
function Card({ children, title }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="card-body">
{children}
</div>
</div>
);
}

// Utilizare - orice intre tag-urile deschidere/inchidere devine children
<Card title="Informatii">
<p>Continut oarecare</p>
<button>Actiune</button>
</Card>

function Dashboard({ user, isAdmin }) {
return (
<div>
{/* Operator ternar */}
{user ? <p>Salut, {user.name}!</p> : <p>Va rugam autentificati-va</p>}

{/* Operator && (short-circuit) */}
{isAdmin && <AdminPanel />}

{/* If complex - extrasi in variabila */}
{user?.role === 'premium' && <PremiumFeatures />}
</div>
);
}

function ProductList({ products }) {
return (
<ul>
{products.map((product) => (
<li key={product.id}>
{product.name} - {product.price} RON
</li>
))}
</ul>
);
}

// IMPORTANT: key trebuie sa fie unic si stabil (nu index!)