What is JSX?

JSX stands for JavaScript XML and it is an XML-like syntax extension to ECMAScript. Basically it just provides the syntactic sugar for the React.createElement(type, props, ...children) function, giving us expressiveness of JavaScript along with HTML like template syntax.

In the example below, the text inside <h1> tag is returned as JavaScript function to the render function.

export default function App() {
return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}

If you don't use JSX syntax then the respective JavaScript code should be written as below,

import { createElement } from "react";

export default function App() {
return createElement(
 "h1",
 { className: "greeting" },
 "Hello, this is a JSX Code!"
);
}

class App extends React.Component {
render() {
 return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}
}

Note: JSX is stricter than HTML