Think JSX is HTML? Think Again! 🤔

If you are learning React JS, JSX is one of the first concepts you need to understand.

At first, JSX may look like HTML written inside JavaScript. But JSX is actually a JavaScript syntax extension that makes it easier to describe the UI of a React application.

Let's understand JSX step by step.

What is JSX?
JSX stands for JavaScript XML.

JSX allows us to write HTML-like syntax inside JavaScript.

For example:

const element =

Welcome to the React World!

;
Although this looks like HTML, it is not HTML.

JSX is JavaScript syntax with an XML/HTML-like structure that React uses to describe UI.
It makes React code more readable and easier to maintain.

Why Do We Use JSX?
React can create elements without JSX, but the code can become difficult to read.

Without JSX:

const element = React.createElement(
"h1",
null,
"Hi, Welcome to the React World!"
);
With JSX:

const element =

Hi, Welcome to the React World!

;
The second version is much easier to understand.

That's the main benefit of JSX: it provides a clean and readable way to describe the UI.

A Simple JSX Component
Let's look at a basic React component:

const Welcome = () => {
return (

Welcome to React JS

Let's learn About JSX.

);
}

export default Welcome;
Here:

is the root JSX element.

represents the heading.

represents the paragraph. The component returns JSX to describe what should appear in the UI. JSX and JavaScript Expressions One of the most useful features of JSX is that you can use JavaScript expressions inside JSX. Expressions are written inside curly braces {}. For example: const name = "Rachna"; const App =() => { return

Welcome, {name}!

; } Output: Welcome, Rachna! You can also perform calculations: const a = 10; const b = 20; const App = () => { return

Total: {a + b}

; } Output: Total: 30 Remember {} allows you to insert JavaScript expressions into JSX. For example: {name} {user.name} {10 + 20} {isLoggedIn ? "Logout" : "Login"} Important Rules of JSX Understanding a few JSX rules will help you avoid common errors. 1. JSX Must Have a Single Root A JSX expression cannot have multiple elements at the same level. Incorrect: return (

Hello

Welcome

);
You can wrap them inside a parent element:

return (

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

);
Or use a Fragment:

return (
<>

Hello

Welcome

</>
);
A Fragment allows you to group elements without adding an extra DOM element.

1. Use className Instead of class In HTML, we normally write:

In JSX, we write:

className is the JSX/React prop used to specify a CSS class.

This is one of the most common differences beginners notice when moving from HTML to JSX.

1. JSX Attributes Use JavaScript-Friendly Naming Many JSX attributes follow camelCase naming conventions.

For example:

className
onClick
onChange
htmlFor
tabIndex
For event handling, React uses a function rather than an HTML string.

Example:

const handleClick = () => {
console.log("Button clicked");
}

Click Me

Notice:

onClick={handleClick}
Here, handleClick is passed as a function reference.

1. Close JSX Elements Properly JSX requires elements to be properly closed.

Correct:

Correct:

For elements without children, use the self-closing syntax />.

JSX with Conditional Rendering
JSX works naturally with JavaScript expressions, which makes conditional rendering easy.

For example:

const App = () => {
const isLoggedIn = true;
return (
<>
{isLoggedIn ? (

Welcome!

) : (

Please Login

)}
</>
);
}
Here, the ternary operator determines which UI should be displayed.

You can also use logical && for simple conditions:

{isLoggedIn &&

Welcome!

}
This displays the heading only when isLoggedIn is true.

JSX with Lists
Displaying lists is another common use of JSX.

React applications often receive data in the form of arrays. We can use JavaScript's map() method to convert that data into JSX elements.

Example:

const App = () => {
const students = ["Aman", "Priya", "Rahul"];
return (

{students.map((student) => (
• {student}
))}

);
}
The map() method creates one

for each student.

Why is key important?
The key prop helps React identify list items efficiently when the list changes.

Keys should be stable and unique among the items in that list.

Is JSX Mandatory in React?
No, JSX is not mandatory.

React can be used without JSX by using JavaScript APIs such as:

React.createElement()
However, JSX is widely used because it makes component code more readable, expressive, and easier to maintain.

How Does JSX Work?
Browsers do not understand JSX directly.

Before the code runs in the browser, JSX is transformed into JavaScript by the project's build/transformation tooling.

For example:

const element =

Welcome to the React World

; is transformed into JavaScript that creates the corresponding React element.

Conceptually, the process can be understood as:

JSX
↓
Transformation
↓
JavaScript
↓
Browser
Important Modern React Note
Older React examples often show JSX being transformed into:

React.createElement(...)
Modern React projects can use the automatic JSX transform, which uses JSX runtime functions instead.

So, in an interview, it is better to say:

JSX is transformed into JavaScript by the build process; the exact transformation depends on the JSX transform being used.
JSX vs HTML
The easiest way to remember the difference is:

HTML describes web documents, while JSX allows React developers to describe UI using JavaScript and HTML-like syntax.
Common JSX Mistakes
Mistake 1: Using class
Incorrect:

Correct: Mistake 2: Forgetting to close an element Incorrect:

Correct:

Mistake 3: Treating a JavaScript variable as plain text
Suppose we have:

const name = "Rachna";
Incorrect:

name

This displays the word name.

Correct:

{name}

The curly braces tell JSX to evaluate the JavaScript expression.

Mistake 4: Returning Multiple Root Elements
Incorrect:

return (

Hello

Welcome

); Correct:

return (
<>

Hello

Welcome

</> ); JSX Interview Questions

1. What is JSX in React?
   JSX is a JavaScript syntax extension that allows developers to write HTML-like syntax within JavaScript to describe UI.

2. Is JSX HTML?
   No.

JSX looks similar to HTML, but it is JavaScript syntax used with React.

1. Is JSX mandatory in React? No.

React can be used without JSX. However, JSX makes UI code easier to read and maintain.

1. Why do we use className instead of class? Because JSX uses JavaScript/React property naming conventions, and className is the property used for CSS classes in JSX.

Example:

1. How do you write JavaScript expressions inside JSX? Use curly braces {}.

Example:

const name = "Rachna";

Hello, {name}

1. Can we write an if statement directly inside JSX? No.

An if statement is a JavaScript statement, not an expression, so it cannot be placed directly inside JSX braces.

Instead, you can use:

Ternary operator
Logical &&
An if statement before the return

Example:

{isLoggedIn ? : }

1. What is a Fragment in JSX? A Fragment lets you group multiple JSX elements without adding an extra DOM element.

Example:

<>

Hello

Welcome

</>

1. What happens to JSX before it reaches the browser? JSX is transformed into JavaScript by the project's JSX transformation/build tooling.

The browser ultimately executes JavaScript, not JSX.

1. What is the difference between JSX and React.createElement()? JSX provides a more readable syntax for describing React UI.

For example:

Hello

is easier to read than:

React.createElement("h1", null, "Hello");
Both can describe the same basic UI element, but modern JSX transformation may use the newer JSX runtime rather than directly generating React.createElement().

1. Why do we use key when rendering lists? The key helps React identify individual items in a list so it can efficiently determine which items have changed, been added, or been removed.

Example:

students.map((student) => (

{student}

))
Quick JSX Revision
For interviews and practical development, remember these points:

JSX
JavaScript syntax extension with XML/HTML-like syntax

JavaScript inside JSX
Use:

{expression}
CSS class
Use:

className
Events
Use camelCase:

onClick
onChange
Multiple elements
Use a single root or Fragment.

Lists
Use:

map()
and provide a suitable key.

Browser
The browser does not execute JSX directly. JSX is transformed into JavaScript first.

JSX is optional
React can be used without JSX, but JSX is generally more convenient for writing components.

Final Takeaway
As a React developer, don't try to memorize every JSX rule.

Instead, understand the core idea:

JSX gives us a convenient way to describe React UI using JavaScript and HTML-like syntax.
Start practicing with small components:

Heading
↓
Card
↓
Navbar
↓
Form
↓
List
↓
Complete React Page
Once you start writing JSX regularly, these rules will become natural.

Learn the concept → Write the code → Practice → Build projects.

That's the best way to become confident with React JS.

Keep Coding. Keep Learning. 🚀