JSX

JSX (JavaScript XML) is a syntax extension that allows HTML-like tags to be written inside JavaScript. It is most associated with React but is not valid JavaScript on its own: a compiler such as Babel, TypeScript, SWC or esbuild transforms it into ordinary function calls that create elements.

Why it matters

JSX keeps a component's markup and logic together, so the structure is visible next to the code that drives it. It is not a template language: expressions in curly braces are real JavaScript, so loops and conditions use map() and ternaries rather than special directives. JSX output is escaped by default, which reduces cross-site scripting risk when rendering text.

Example

function Greeting({ name, items }) {
  return (
    <div className="box">
      <h2>Hello, {name}</h2>
      <ul>
        {items.map((i) => <li key={i.id}>{i.label}</li>)}
      </ul>
    </div>
  );
}

Behind the scenes the <div> becomes a call like jsx("div", { className: "box", children: ... }). Note className instead of class.

Common mistakes

• Returning sibling elements without a wrapper or fragment (<>...</>).
• Using class and for instead of className and htmlFor.
• Forgetting the key prop on list items.
• Injecting raw HTML with dangerouslySetInnerHTML from untrusted data.

Related

• React
• Component
• Transpiler
• XSS

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.