JSX in React

Introduction

JSX is one of the most important concepts in React. JSX makes React code easier to write and understand because it allows developers to write HTML-like syntax inside JavaScript.

Although JSX looks similar to HTML, it is actually a syntax extension for JavaScript that gets converted into regular JavaScript code behind the scenes.

In this tutorial, you will learn what JSX is, why it is used, syntax, examples, real-life use cases, common mistakes, interview questions, and best practices.

What is JSX in React?

JSX stands for JavaScript XML.

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

JSX makes React code:

• Easier to read
• Easier to write
• More understandable
• More maintainable

React uses JSX to describe how the user interface should look.

Benefits of JSX

1. Easier Syntax

JSX looks similar to HTML, making it beginner-friendly.

2. Improves Readability

Developers can easily understand UI structure.

3. Faster Development

Writing UI code becomes quicker.

4. JavaScript Support

JSX allows JavaScript expressions inside UI code.

5. Better Developer Experience

Modern editors provide syntax highlighting and autocomplete for JSX.

Syntax of JSX

Basic JSX syntax:

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

Here:

• <h1> looks like HTML
• But it is actually JSX syntax

JSX Example in React

function App() {
 return (
   <h1>Welcome to React JSX</h1>
 );
}
export default App;

Output

How JSX Works Internally

Browsers do not understand JSX directly.

React converts JSX into JavaScript using tools like:

• Babel
• Vite
• Webpack

For example:

const element = <h1>Hello</h1>

Converted JavaScript:

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

This conversion happens automatically during compilation.

Rules of JSX

React JSX follows several important rules.

1. JSX Must Return a Single Parent Element

Wrong:

return (
 <h1>Hello</h1>
 <p>React</p>
);

Correct:

return (
 <div>
   <h1>Hello</h1>
   <p>React</p>
 </div>
);

2. JSX Uses className Instead of class

Because class is a JavaScript keyword, React uses className..

Wrong:

<h1 class="title">Hello</h1>

Correct:

<h1 className="title">Hello</h1>

3. JSX Tags Must Be Closed

Wrong:

<img src="image.jpg">

Correct:

<img src="image.jpg" />

4. JavaScript Expressions Use Curly

Example:

const name = "Gaurav";
function App() {
 return <h1>Hello {name}</h1>;
}

Output

Embedding JavaScript in JSX

JSX supports JavaScript expressions inside curly braces.

Example

function App() {
 const age = 25;
 return (
   <h1>Age: {age}</h1>
 );
}

Output

JSX with Functions

You can call JavaScript functions inside JSX.

Example

function greet() {
 return "Welcome User";
}
function App() {
 return <h1>{greet()}</h1>;
}

Output

JSX Attributes

JSX supports attributes similar to HTML.

Example

function App() {
 return (
   <a href="https://example.com">
     Visit Website
   </a>
 );

Inline CSS in JSX

React uses JavaScript objects for inline styles.

Example

function App() {
 return (
   <h1 style={{ color: "blue" }}>
     React JSX
   </h1>
 );
}

JSX Conditional Rendering

JSX allows conditions using JavaScript expressions.

Example

function App() {
 const isLoggedIn = true;
 return (
   <h1>
     {isLoggedIn ? "Welcome" : "Please Login"}
   </h1>
 );
}

Output

JSX Lists Rendering

JSX can display lists using JavaScript methods like map().

Example

function App() {
 const fruits = ["Apple", "Mango", "Orange"];
 return (
   <ul>
     {fruits.map((fruit, index) => (
       <li key={index}>{fruit}</li>
     ))}
   </ul>
 );
}

Output

Fragments in JSX

Fragments allow grouping elements without adding extra HTML tags.

Example

function App() {
 return (
   <>
     <h1>React</h1>
     <p>JSX Example</p>
   </>
 );
}

Real-Life Example of JSX

Suppose you are creating an e-commerce website.

JSX can build reusable UI components such as:

• Product Cards
• Navigation Bar
• Shopping Cart
• Footer
• Login Form

Example:

function ProductCard() {
 return (
   <div>
     <h2>Mobile Phone</h2>
     <p>Price: ₹20,000</p>
   </div>
 );
}

This component can be reused multiple times.

Advantages of JSX

JSX vs HTML

Common Mistakes in JSX

1. Returning Multiple Elements Without

Wrong:

return (
 <h1>Hello</h1>
 <p>World</p>
);

Correct:

return (
 <div>
   <h1>Hello</h1>
   <p>World</p>
 </div>
);

2. Using class Instead of className

Wrong:

<h1 class="title">React</h1>

Correct:

<h1 className="title">React</h1>

3. Forgetting to Close Tags

Wrong:

<input type="text">

Correct:

<input type="text" />

4. Writing Statements Inside JSX

Wrong:

{
 if (true) {
   return "Hello";
 }
}

Use expressions instead.

5. Missing key in Lists

Wrong:

items.map(item => <li>{item}</li>)

Correct:

items.map(item => (
 <li key={item.id}>{item.name}</li>
))

JSX in React – Interview Questions

JSX in React – Objective Questions (MCQs)

Conclusion

JSX is one of the most important concepts in React because it simplifies UI development by allowing developers to write HTML-like syntax inside JavaScript. It improves readability, developer productivity, and application structure.

By combining JavaScript logic with UI code, JSX makes React applications more dynamic and easier to maintain. Although JSX may look like HTML, it provides additional features such as JavaScript expressions, conditional rendering, and component-based UI development.

Continue Learning React