JSX în React – Ghid pentru utilizare

Crearea interfețelor utilizatorului (UIs) în React este simplificată prin intermediul lui JSX, o extensie sintactică a limbajului JavaScript. JSX îți permite să folosești o sintaxă similară cu cea a HTML-ului în JavaScript, făcând crearea componentelor mai intuitivă. Această ghid îți arată cum să folosești eficient JSX pentru a crea componente în React și îți oferă o perspectivă valoroasă asupra modului în care funcționează JSX-ul în spatele scenei.

Cele mai importante idei

• JSX este o extensie sintactică pentru JavaScript, care permite crearea de structuri similare cu HTML.
• JSX este transpilat în JavaScript regulat pentru a asigura compatibilitatea cu browserele.
• Prin metoda createElement poți crea elemente React direct fără JSX.
• Există anumite diferențe între HTML-ul tradițional și JSX, care ar trebui luate în considerare.

Ghid pas cu pas

Pasul 1: Introducerea JSX-ului

În primul rând, deschide aplicația ta React și examinează structura de bază. Vei observa că JSX-ul este deja folosit în proiectul tău. Un exemplu simplu de JSX ar fi:

. Poți încerca asta ajustând corespunzător componenta principală a aplicației tale.

Pasul 2: Înțelegerea sintaxei JSX

Când folosești JSX în codul tău, arată ca HTML. Cu toate acestea, reține că acest cod nu funcționează direct într-un mediu JavaScript normal. Încearcă să rulezi codul JSX în browser și vei primi o eroare de sintaxă. Asta pentru că JSX-ul trebuie tradus într-un JavaScript valid printr-un transpiler.

Pasul 3: Lucrul cu React.createElement

Pentru a înțelege cum funcționează JSX-ul, aruncă o privire asupra metodei createElement din React. Această metodă îți oferă posibilitatea de a crea un element React prin transmiterea numelui tag-ului, posibililor prop-uri și copiilor. Astfel, în loc de codul JSX, ai putea folosi un cod ca cel de mai jos:

React.createElement('div', null, 'Hello World')

Acest cod generează același rezultat ca și expresia JSX.

Pasul 4: Elemente încorporate cu createElement

Pentru a crea un element mai complex cu structuri încorporate, poți apela de mai multe ori metoda createElement. Să presupunem că vrei să creezi un element div în interiorul altui element div. Iată un exemplu:

React.createElement('div', null, React.createElement('div', null, 'Hello World')
);

Acest lucru creează un element div exterior care conține un element div interior cu textul Hello World.

Pasul 5: Utilizarea componentelor în JSX

Dacă vrei să-ți creezi propriile componente, poți folosi JSX direct pentru a le insera. Definește o funcție simplă care returnează componenta ta și apoi folosește-o în interiorul JSX-ului:

function MyComponent() { return <div>Hello from MyComponent</div>;
}

// În blocul tău principal de renderizare:

Această componentă va fi apoi randată corect în aplicația ta.

Pasul 6: Diferențe între HTML și JSX

Fii atent că unele atribute în JSX au o altă scriere decât în HTML-ul tradițional. De exemplu, clasa în JSX este numită className, deoarece clasa este un cuvânt cheie rezervat în JavaScript. Așadar, ai putea scrie ceva de genul:

<div className="my-class">Content</div>

Sumar