What is JSX in ReactJS? Syntax, Uses & Examples

JSX and How React Renders

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside JavaScript files.

const heading = <h1>Student Dashboard</h1>;

That line is not valid JavaScript on its own. Before it reaches the browser, a build tool converts it into a real JavaScript function call:

const heading = React.createElement("h1", null, "Student Dashboard");

You will never write createElement yourself. But knowing this conversion happens explains a lot of JSX's rules JSX is JavaScript, so it follows JavaScript's rules.

Why is it Used?

Compare writing a small card both ways.

Without JSX:

React.createElement(
"div",
{ className: "card" },
React.createElement("h2", null, "React Basics"),
React.createElement("p", null, "60% complete")
);

With JSX:

<div className="card">
<h2>React Basics</h2>
<p>60% complete</p>
</div>

The second version is readable. That is the entire reason JSX exists.