JSX is a syntax extension to JavaScript. Stands for javascript XML. It allows us to write HTML along with javascript in react.
Look at the below variable declaration.
const test = <h1>Hello, world!</h1>;This tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript.
JSX is recommended to use in React as it comes with the full power of JavaScript.
One Good Reason to answer Why JSX ?
Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both of them in single file.
Now adding expression in the JSX.
Example
const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);so you can add any kind of valid javascript expression inside the curly braces.
Summary
In this article, we learnt about JSX in react.
Please let us know in the comments below about your thoughts and queries.
Hope you liked it !