Difference between JSX and HTML

One of the requirements when you start to learn React is learning JSX. So what is JSX? This is a JavaScript syntax extension. When you are new to it and have a glance at the syntax for the first time, it looks like a mixture of both JavaScript and HTML. Here is an example;

const heading = <h1>Hello world</h1>;

JSX is popularly used in React and in this post, I will be highlighting the key differences between JSX and HTML syntax.

Use of className instead of class attribute

In JSX we use className attribute whereas in HTML we use the class attribute. This is because JSX is transpiled into JavaScript and class is a reserved word in JavaScript.
JSX
<div className = "container"></div>
HTML
<div class = "container"></div>

Self closing tags

Self-closing tags in JSX must have the forward slash whereas the forward slash is optional in the HTML self-closing tags.
JSX
<img src="#" />
<br/>

HTML
<img src="#" >
<br>

Event listeners

Event listeners in JSX are written in camelCase, for instance, onClick whereas in HTML, they are written in lowercase for instance, onclick

These are some of the key differences. You can have a look at the React documentation if you would like to learn more about JSX.
Happy coding!