JSX stands for JavaScript XML.

JSX is a syntax that allows us to write HTML-like code inside JavaScript. We commonly use it in React to create the user interface (UI).

Example without JSX:

const element = React.createElement(

"h1",

null,

"Hello Sathish!"

);

Example with JSX:

const element =

Hello Sathish!

;

Both examples create a heading that displays Hello Sathish! JSX makes the code easier to read.

JSX in a React component:

function App() {

return (

Hello Sathish!

Welcome to React!

);

}

export default App;

Expected browser output:

Hello Sathish!

Welcome to React!

Explanation:

function App() — creates a React component.

return — returns the UI.

— displays a heading.

— displays a paragraph.

export default App — allows the component to be imported into another file.

Important JSX rules:

Rule 1: Use className instead of class.

Hello

Rule 2: Close every HTML element.

Rule 3: Use curly braces {} to write JavaScript expressions inside JSX.

const name = "Sathish";

function App()…