JSX stands for JavaScript XML. JSX helps us to write HTML code inside the JavaScript code. JSX was introduced with ES6.
Any component that we will use in React JS will use JSX.
Example :-
You can or can’t use JSX in your React Js applications, its just a matter of convenience.
JSX helps in writing Javascript inside the html code using curly braces {}. After compilation JSX expressions become regular javascript function calls. We can use JSX inside the if-else statements, inside loops and we can also assign JSX as a value to any variable.
Due to some reserved keywords of Javascript, which are used as HTML attributes, JSX uses camelCase notation for specifying the attributes of a HTML element. For example, class as className, for as htmlFor, etc.
The singleton tags or void tags need to be closed inside the JSX code. Otherwise it will throw an error.
JSX also prevents injection attacks, as the ReactDOM coverts any value which is inside the JSX to strings before rendering them. This helps in preventing the cross-site-scripting attacks.