JSX

JSX is a shorthand for JavaScript XML.
JSX allows us to write HTML in React.
JSX makes it easier to write and add HTML in React.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements.
You are not required to use JSX, but JSX makes it easier to write React applications.

Why can’t browsers read JSX ?
Browsers can only read JavaScript objects but JSX in not a regular JavaScript object.
Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.

Ex : with JSX

const myelement =

I Love JSX!

; ReactDOM.render(myelement, document.getElementById('root'));

Ex : without JSX
const myelement = React.createElement('h1', {}, 'I do not use JSX!'); ReactDOM.render(myelement, document.getElementById('root'));


With JSX you can write expressions inside curly braces { }.
The expression can be a React variable, or property, or any other valid JavaScript expression.
JSX will execute the expression and return the result
Ex : Execute the expression 5 + 5

const myelement =
React is {5 + 5} times better with JSX
;