Introduction to JSX

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code inside JavaScript files when working with React. Instead of keeping markup and logic separate, JSX brings them together, making UI code more readable, expressive, and easier to maintain.

With JSX, your components describe what the UI should look like in a way that closely resembles HTML, while still allowing full access to JavaScript’s power.

Why Does JSX Exist?

In traditional web development, HTML, CSS, and JavaScript lived in separate files. As applications became more dynamic, JavaScript started generating most of the HTML anyway. Managing UI logic and structure separately became cumbersome.

JSX was introduced to solve this problem by:

Keeping related logic and UI together
Improving readability for complex interfaces
Making component-based development more intuitive

Instead of switching between files and mental contexts, JSX lets you see how your UI behaves and looks in one place.

How JSX Works

JSX may look like HTML, but it is not HTML. Under the hood, JSX is transformed into plain JavaScript.

Key points to understand:

HTML-like syntax in JavaScript
You write JSX inside .js or .jsx files along with JavaScript logic.
JSX gets compiled
Browsers do not understand JSX. Tools like Babel convert JSX into React.createElement() calls.
JavaScript expressions inside JSX
You can embed any JavaScript expression using curly braces {}.

Example:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

All tags must be closed
JSX is stricter than HTML. Every element must have a closing tag or be self-closing.
Single parent element rule
JSX must return a single parent element. Use a wrapper element or a React Fragment.

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

JSX vs Regular HTML

Although JSX looks similar to HTML, there are important differences:

CSS classes
HTML uses class, JSX uses className
```
<div className="header"></div>
```
Event handlers
HTML events are lowercase strings, JSX uses camelCase and function references
```
<button onClick={handleClick}>Click</button>
```

Inline styles
In JSX, styles are JavaScript objects

<div style={{ color: "red", fontSize: "16px" }}></div>

Self-closing tags
Tags like img or input must be self-closed
```
<img src="photo.jpg" />
```
Attribute naming
JSX uses camelCase for attributes such as tabIndex, htmlFor, etc.

Benefits of Using JSX

Better readability
UI structure is easy to understand at a glance.
Powerful and flexible
You can mix JavaScript logic directly into your UI.
Faster development
Clear syntax and tooling support make development quicker.
Improved security
JSX automatically escapes values, protecting against injection attacks.

JSX in Action

Here’s a simple React component using JSX:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Welcome name="Developer" />;

Without JSX, the same code would be much more verbose and harder to read.

How JSX Makes React Components Easier

JSX encourages you to think in components. Each component:

Knows how it should look
Knows how it should behave
Can be reused anywhere in the app

By combining UI and logic, JSX makes components modular, maintainable, and easy to scale as your application grows.

Conclusion

JSX is not mandatory for using React, but it is the preferred and most widely used approach. Its clean syntax, tight integration with JavaScript, and strong tooling support make it ideal for modern React development.

If you want to write clearer, more maintainable React code, mastering JSX is a must.

What is JSX? A Complete Guide