juniorReact

What is JSX in React?

Updated Feb 20, 2026

Short answer

In React, JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code inside JavaScript. It makes UI code easier to write and understand.

Deep explanation

JSX is not real HTML—it gets converted into JavaScript by React before being rendered in the browser.

For example:

TypeScript
const element = <h1>Hello World</h1>;

This is converted into:

TypeScript
const element = React.createElement("h1", null, "Hello World");

JSX allows you to:

  • Write UI in a readable format
  • Combine JavaScript and HTML-like syntax
  • Build components easily

You can also use JavaScript inside JSX using {}:

TypeScript
function App() {
  const name = "Amit";


  return <h1>Hello {name}</h1>;
}

Unlock with a Pro subscription to view this section.

View pricing

Real-world example

No real-world example available yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

Common mistakes

No common mistakes listed yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

Follow-up questions

No follow-up questions available yet.

Unlock with a Pro subscription to view this section.

Upgrade to Pro

More React interview questions

View all →