What is JSX?
JSX (JavaScript + XML) was introduced in 2013 with React. It’s NOT intended to be implemented by engines or browsers. It’s intended to be used by various preprocessors (Transpilers) to transform these tokens into standard ECMAScript.
JSX is an extension of JavaScript that allows you to write HTML directly within JavaScript, which has a few benefits of making your code more readable and exercising the full power of JavaScript within HTML.
JS code
const App = () => {
return React.createElement("div", {className='header'}, "Hello world!");
};
Equivalent JSX code
const App = () => {
return <div className='header'>Hello world!</div>
}
Difference between JSX and HTML / JavaScript
HTML | JSX |
class | ClassName (May Change in Newer version) |
for | htmlFor |
In HTML almost all tags have an opening and a closing tag except probably a few like | In JSX, however, any element can be written as a self-closing tag |
<input maxlength=”16″/> | <input maxLength=”16″ /> |
It is not necessary to use camelCase for attributes, ids and event references | All HTML attributes and event references in JSX become camelCase, |