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)

In the example below, the text inside

<h1>

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