How JSX works in React.js?

JSX (JavaScript XML) in React is a syntax extension that lets you write HTML-like code inside JavaScript, which React then transforms into React.createElement() calls using a compiler like Babel.

How it works:

// JSX
const element = <h1>Hello, world!</h1>;

// Gets compiled to:
const element = React.createElement('h1', null, 'Hello, world!');

Summary:

• JSX makes code more readable and declarative.
• It’s not required, but widely used in React.
• It compiles to efficient JavaScript that React understands.