JSX in React – What and Why?

JSX stands for JavaScript XML.

JSX is a syntax extension used in React that allows us to write HTML-like code inside JavaScript.

In simple words, JSX helps us write UI elements using HTML-like syntax inside JavaScript.

1. What is JSX? Without JSX, we create UI elements using JavaScript's React.createElement() method.

Without JSX:

import React from "react";

function App() {
  return React.createElement(
    "h1",
    null,
    "Hello World"
  );
}

export default App;

With JSX:

function App() {
  return <h1>Hello World</h1>;
}

export default App;

Both produce the same UI.

Easy to understand
JSX makes React code cleaner and easier to read.

1. Why do we use JSX? Imagine you are developing an e-commerce website.

You need:

• Navigation bar
• Product cards
• Search bar
• Add to cart button
• Footer If you use only JavaScript methods like React.createElement(), creating complex UI structures becomes difficult to read.

JSX makes this easier.

Main advantages:

1. Easy to write HTML-like UI inside JavaScript.
2. Makes code readable and maintainable.
3. Supports JavaScript expressions.
4. Helps create reusable React components.
5. Makes dynamic UI development easier.