JSX είναι μια επέκταση σύνταξης που σας επιτρέπει να γράψετε σήμανση που μοιάζει με HTML μέσα σε JavaScript. Το πρόγραμμα περιήγησης δεν κατανοεί JSX — ένας μεταγλωττιστής (Babel, SWC, esbuild) το μετατρέπει σε κανονικές κλήσεις συναρτήσεων πριν εκτελεστεί ο κώδικας.
el = ;
el = .(
,
{ : },
, name
);
Το αποτέλεσμα είναι ένα απλό αντικείμενο JavaScript (ένα "React element") που περιγράφει το UI — δεν είναι ακόμα ένας πραγματικός κόμβος DOM. Το React διαβάζει αυτό το αντικείμενο για να κατασκευάσει το Virtual DOM.
function Card({ user }) {
return (
<> {/* Fragment: one root without an extra <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, not class */}
{user.isAdmin && <Badge />} {/* {} embeds any JS expression */}
</>
);
}
className, onClick) επειδή αντιστοιχούν σε JS, όχι σε HTML.{ } ενσωματώνει εκφράσεις (τιμές, τριαδικές, .map()), αλλά όχι δηλώσεις όπως if.Το JSX είναι απλώς συντακτικό γλυκό για createElement, οπότε ό,τι μπορείτε να κάνετε στο JSX μπορείτε να κάνετε σε απλό JS — απλώς κάνει τον κώδικα UI να διαβάζεται όπως η σήμανση που παράγει, η οποία είναι πολύ πιο αναγνώσιμη από τις ένθετες κλήσεις συναρτήσεων.