How JSX Works in React

Learn JSX in React with practical examples. Understand JSX syntax, expressions, attributes, fragments, conditional rendering, and how JSX works behind the scenes.
JSX in React: What It Is and How It Works
If you've started learning React, you've probably seen code that looks like HTML inside JavaScript files.
Example:
function App() {
return (
<h1>Hello React</h1>
);
}
At first glance, this looks like HTML.
However, it isn't actually HTML.
This syntax is called JSX.
JSX is one of the most important concepts in React because almost every React component uses it.
In this guide, you'll learn what JSX is, why React uses it, and how to write JSX correctly.
Prerequisites
Before learning JSX, make sure you understand:
These concepts will help you understand JSX more easily.
What is JSX?
JSX stands for:
JavaScript XML
JSX is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript.
Example:
const element = (
<h1>Hello World</h1>
);
This makes React code easier to read and understand.
Why Does React Use JSX?
Without JSX:
React.createElement(
"h1",
null,
"Hello World"
);
With JSX:
<h1>Hello World</h1>
Both produce the same result.
However, JSX is much easier to read and write.
This is why most React developers prefer JSX.
How JSX Works Behind the Scenes
Many beginners think browsers understand JSX directly.
They don't.
React tools convert JSX into regular JavaScript.
Example:
<h1>Hello World</h1>
becomes:
React.createElement(
"h1",
null,
"Hello World"
);
This conversion happens automatically during development.
Returning JSX from Components
React components return JSX.
Example:
function App() {
return (
<h1>
Welcome to React
</h1>
);
}
export default App;
The JSX returned by the component is rendered on the screen.
Writing Multiple Elements
This will cause an error:
function App() {
return (
<h1>Title</h1>
<p>Description</p>
);
}
React requires a single parent element.
Correct example:
function App() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
);
}
Using React Fragments
Sometimes you don't want unnecessary HTML elements.
Example:
function App() {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
}
This is called a React Fragment.
Fragments group elements without creating additional DOM nodes.
Embedding JavaScript in JSX
One of JSX's biggest advantages is the ability to use JavaScript directly inside markup.
Example:
function App() {
const name = "Sachin";
return (
<h1>
Hello {name}
</h1>
);
}
Output:
Hello Sachin
Curly braces allow JavaScript expressions inside JSX.
Using Variables
Example:
const course = "React";
return (
<h1>
Learn {course}
</h1>
);
Using Expressions
Example:
const age = 20;
return (
<h1>
{age + 5}
</h1>
);
Output:
25
Rendering Arrays
Example:
const skills = [
"HTML",
"CSS",
"JavaScript"
];
return (
<ul>
{skills.map(skill => (
<li>{skill}</li>
))}
</ul>
);
This is commonly used for rendering dynamic lists.
JSX Attributes
JSX supports attributes similar to HTML.
Example:
<img
src="/logo.png"
alt="Logo"
/>
However, some HTML attributes use different names.
Class vs ClassName
HTML:
<div class="card">
</div>
JSX:
<div className="card">
</div>
React uses:
className
instead of:
class
because class is a reserved JavaScript keyword.
HTML vs JSX Differences
| HTML | JSX |
|---|---|
| class | className |
| for | htmlFor |
| onclick | onClick |
| tabindex | tabIndex |
These differences are important to remember.
Self-Closing Tags
HTML often allows:
<input>
In JSX:
<input />
Self-closing tags are required.
Examples:
<img />
<input />
<br />
<hr />
Conditional Rendering in JSX
Example:
const isLoggedIn = true;
return (
<h1>
{
isLoggedIn
? "Welcome"
: "Login First"
}
</h1>
);
JSX works seamlessly with JavaScript conditions.
Real-World Example
A simple profile card:
function Profile() {
const name = "Sachin";
return (
<div className="card">
<h2>
{name}
</h2>
<p>
MERN Developer
</p>
</div>
);
}
This combines HTML-like structure with JavaScript data.
Common Beginner Mistakes
Using Class Instead of ClassName
Incorrect:
<div class="card">
</div>
Correct:
<div className="card">
</div>
Returning Multiple Root Elements
Always wrap JSX inside a parent element or Fragment.
Forgetting Self-Closing Tags
Incorrect:
<input>
Correct:
<input />
Using Statements Inside JSX
This will not work:
{
if (true) {
return "Hello";
}
}
Only expressions can be used inside JSX.
Watch Full JSX Tutorial
If you prefer video learning, watch the complete tutorial below where we explore JSX syntax, JavaScript expressions, attributes, fragments, and real-world examples.
This tutorial demonstrates how JSX works behind the scenes and how it's used in React applications.
React vs Next.js
React provides the UI library.
Next.js provides a complete framework built on top of React.
If React is the engine, Next.js is the complete car.
Understanding JSX is important because both React and Next.js use it extensively.
Build Something
Practice JSX by creating:
- Profile Card
- Product Card
- Blog Card
- User Dashboard Header
- Portfolio Hero Section
These projects will help reinforce JSX concepts.
Production Tip
Professional React developers usually:
- keep JSX clean and readable
- avoid deeply nested structures
- create reusable components
- use meaningful variable names
- separate logic from UI when possible
Readable JSX makes applications easier to maintain.
Why JSX Matters
JSX helps developers:
- write UI faster
- combine JavaScript and markup
- improve code readability
- create reusable components
- build scalable applications
It is one of the core building blocks of React development.
Conclusion
JSX is a syntax extension that allows developers to write HTML-like structures inside JavaScript.
It makes React applications easier to build, read, and maintain while still providing the full power of JavaScript.
Once you're comfortable with JSX, learning components, props, state, and other React concepts becomes much easier.