React.js Tutorials
WhatsApp Channel
Join
Facebook Page
Follow

Understanding JSX

📘 React.js 👁 47 views 📅 Nov 05, 2025
⏱ Estimated reading time: 2 min

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)

JSXHTML
classNameclass
{} for JSNo JS
camelCase styleskebab-case
Self-closing tags requiredOptional

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
Register Now
← Previous
Setting Up React Environment
Next →
React Components Basics
Share this Post
🚀 Want to Test Your Knowledge?

Take quizzes related to this topic and see where you stand!

Start Quiz Now
← Back to Tutorials

Popular Competitive Exam Quizzes

GK/GS Quiz | UPSC Exam Quiz | English Grammar Basics Quiz | Science Quiz