JSX in React

What is JSX?

JSX stands for JavaScript XML. It basically allows us to write HTML in React.

Normally if we want to write HTML elements in JavaScript and want to place the DOM then we need to use the createElement() or appendChild() method. But with the help of JSX, we can directly write HTML elements in JavaScript and place them in the DOM.

JSX is an extension of Javascript (based on ES6) which translates regular Javascript at runtime.

for eg:

const greet = <h1>Hello, World </h1>;

The syntax above is called JSX.

Can we use expressions in JSX?

Yes, we can embed expressions in JSX in the following manner:

const name= "John";
const greet = <h1>Hello, {name} </h1>;

you can put any valid JavaScript expression inside the curly braces in JSX.

The recommended way of using JSX is by splitting it over multiple lines by wrapping it in parentheses. for eg :

const greet = (
  <h1>
    Hello , World!
  </h1>
);

NOTE: JSX is closer to javascript than to HTML so React DOM uses camelCase property naming convention.

for eg: we use className instead of class in JSX and tabIndex instead of tabindex.