Understanding JSX

React.js 118 views Nov 05, 2025 2 min read

JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows you to write HTML-like code inside JavaScript, making UI code easier to read and write.

Why JSX?

Without JSX, UI code becomes harder to understand:

React.createElement("h1", null, "Hello World");

With JSX:

Hello World

JSX makes React code:

More readable
Easier to maintain
Closer to HTML structure

How JSX Works

JSX is not HTML.
It is transformed into JavaScript by tools like Babel.

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

Converted to:

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

JSX Rules

1. One Parent Element

JSX must return a single parent element.

❌ Invalid:

Hello
<p>Welcome</p>

✅ Valid:

<>
  <h1>Hello</h1>
  <p>Welcome</p>
</>

2. Use `className` Instead of `class`

"container">Content

3. JavaScript Expressions in JSX

Use {} to embed JavaScript expressions.

const name = "John";
<h1>Hello, {name}</h1>

4. Self-Closing Tags

Tags without content must be self-closed.

<>< class>"logo.png" />
<input type="text" />

5. Inline Styles Use Objects

const style = { color: "blue", fontSize: "20px" };
<h1 style={style}>Styled Text</h1>

JSX with Components

function Welcome() {
  return <h2>Welcome to React</h2>;
}

function App() {
  return <Welcome />;
}

Component names must start with capital letters

JSX vs HTML (Key Differences)

JSX	HTML
`className`	`class`
`{}` for JS	No JS
camelCase styles	kebab-case
Self-closing tags required	Optional

Advantages of JSX

Improves code readability
Combines UI and logic
Reduces errors
Encourages component-based design

Summary

JSX allows React developers to write UI code that looks like HTML but works as JavaScript. It is a core part of React and essential for building modern React applications.

Some advanced sections are available for Registered Members

← Previous

Setting Up React Environment

React Components Basics