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 კოდს აძლევს იმ მარკაპის ნიშნებს, რომელსაც აწარმოებს, რაც ბევრად უფრო წაკითხვადია, ვიდრე ერთმანეთში დაკვრული ფუნქციის გამოძახებები.