JSX stands for JavaScript XML. Previously we have written JavaScript into HTML file within script block. But we can do the opposite using JSX, meaning now we can write HTML into JavaScript file. It enhances React's createElement function. Since JSX syntax is closer to HTML, so React DOM uses camelCase naming convesion for HTML Attributes, for example className instead of class.

It's not mandatory using JSX in React but it's helpful and it helps better describing UI elements within the React component. First example uses JSX and the second example doen't: Consider a div with an id of example for the HTML markup of both examples.

#Example-1: const ourExample = <h1>This example uses JSX</h1> ReactDOM.render(React.createElement(ourExample), document.querySelector("#example"))

#Example-2: ReactDOM.render(React.createElement("h1", null, "This example does not uses JSX"), document.querySelector("#example"))

Also you can use JavaScript Expression into JSX using ${} syntax. Anyways, you may think that why it's so impressive or why it's so usefull declaring a silly h1 tag. But in reality, it's super helpful to organizing your code & creating UI components using JSX while your project will become larger. Another benefit, you can compile your JSX using Babel.