What is JSX?

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).

1. Example without JSX:

const element = React.createElement(
"h1",
null,
"Hello Sathish!"
);

1. Example with JSX:

const element =

Hello Sathish!

;

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

1. 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.

1. 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() {
return

Hello, {name}!

;
}

Output:

Hello, Sathish!