JSX Explained: A Beginner-Friendly Guide With Practical Examples
React is one of the most popular JavaScript libraries for building modern user interfaces. One of its most useful features is JSX (JavaScript XML), a syntax that allows developers to write HTML-like code inside JavaScript.
If you are starting your journey with React, understanding JSX will make it easier to build interactive websites, reusable components, and dynamic user interfaces. In this guide, we will explore what JSX is, how it works, its rules, and practical examples for beginners.
What Is JSX?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that lets you describe the structure of a user interface using tags that look similar to HTML.
Although JSX looks like HTML, it is not HTML. Development tools transform JSX into regular JavaScript that React can use to create and update the user interface.
Here is a simple example:
const heading = <h1>Hello, World!</h1>;This code creates a JSX element representing a heading. React can use that element to display the text on a page.
Why Do Developers Use JSX?
Without JSX, developers can create React elements using JavaScript function calls. JSX provides a more readable way to describe the same interface.
Here are some important benefits:
- Easy to read: JSX resembles familiar HTML markup.
- Reusable components: You can combine JSX with React components to build larger interfaces.
- Dynamic content: JavaScript expressions can be included inside JSX.
- Clear structure: Markup and related rendering logic can be kept together in a component.
- Developer productivity: JSX makes complex interfaces easier to organize and maintain.
Example 1: Creating a Simple JSX Element
Let's begin with a basic heading and paragraph.
function App() {
return (
<div>
<h1>Welcome to My Website</h1>
<p>I am learning React and JSX.</p>
</div>
);
}
export default App;In this example, the App function is a React component. It returns JSX containing a heading and a paragraph.
The surrounding div groups the elements together. In JSX, when returning multiple sibling elements, you generally need one enclosing element or a React Fragment.
Example 2: Displaying JavaScript Variables
JSX allows you to insert JavaScript expressions inside curly braces. This is useful when you want to display variable values dynamically.
function App() {
const name = "Alex";
const age = 20;
return (
<div>
<h1>Hello, {name}!</h1>
<p>Your age is {age}.</p>
</div>
);
}
export default App;The curly braces tell React to evaluate the JavaScript expressions. The resulting interface displays a greeting and the person's age.
Example 3: Using Expressions in JSX
You can perform calculations and use other JavaScript expressions inside JSX.
function App() {
const a = 10;
const b = 5;
return (
<div>
<p>Sum: {a + b}</p>
<p>Product: {a * b}</p>
</div>
);
}
export default App;The expressions inside curly braces are evaluated before their results are displayed. In this example, the page shows the sum as 15 and the product as 50.
Example 4: JSX Attributes
JSX supports attributes that configure HTML elements. However, some attribute names differ from standard HTML because JSX follows JavaScript naming conventions.
function App() {
return (
<div>
<h1 className="title">My First React Page</h1>
<button onClick={() => alert("Hello!")}>
Click Me
</button>
</div>
);
}
export default App;Notice that className is used instead of class. The onClick attribute accepts a JavaScript function that runs when the button is clicked.
Example 5: Conditional Rendering
Sometimes an application needs to display different content depending on a condition. JSX supports JavaScript conditional expressions.
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<h2>Welcome Back!</h2>
) : (
<h2>Please Log In</h2>
)}
</div>
);
}
export default App;The ternary operator checks the value of isLoggedIn. If it is true, the welcome message appears. Otherwise, the login message is displayed.
Example 6: Rendering a List
JSX can display lists by using JavaScript array methods such as map(). This technique is common when showing products, articles, users, or other collections of data.
function App() {
const fruits = ["Apple", "Banana", "Mango"];
return (
<div>
<h2>Fruit List</h2>
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
</div>
);
}
export default App;The map() method creates a list item for each fruit. The key attribute helps React identify individual items when the list changes. In this example, each fruit name is unique and works as a key.
Important JSX Rules to Remember
- Return one enclosing element: Wrap multiple sibling elements in a parent element or a Fragment.
- Close every tag: Self-closing elements such as img and input must be written with a closing slash in JSX.
- Use className: Write className instead of class for CSS classes.
- Use curly braces for expressions: Put JavaScript expressions inside curly braces when inserting them into JSX.
- Use camelCase for many event handlers: Write onClick instead of onclick.
- Add keys to list items: Give elements rendered from lists stable, unique keys among their siblings.
- Keep JavaScript expressions valid: You can use expressions inside JSX braces, but you cannot place arbitrary statements such as a standard if statement directly inside them.
JSX vs HTML: What Is the Difference?
JSX and HTML look similar, but they serve different purposes.
- HTML describes the structure of web pages.
- JSX lets you describe a user interface within JavaScript code.
- JSX uses JavaScript-friendly attribute names such as className.
- JSX expressions can include JavaScript variables and calculations inside curly braces.
- JSX is transformed into JavaScript during the development build process.
Does JSX Work Without React?
JSX is not exclusive to React in every possible setup, but it is most commonly associated with React development. JSX requires a compatible transformation setup to turn its syntax into JavaScript that the runtime can understand.
When creating a React project with a tool such as Vite, the necessary JSX transformation is generally configured for you.
Common JSX Mistakes Beginners Make
Forgetting to close tags: Incorrectly written or unclosed elements can cause compilation errors.
Using class instead of className: Use className for CSS classes in JSX.
Forgetting keys in lists: React may show a warning when mapped list items do not have keys.
Putting strings and variables together incorrectly: Use curly braces when inserting JavaScript expressions into JSX.
Calling an event handler immediately: Pass a function to onClick rather than calling it during rendering, unless immediate execution is specifically intended.
Conclusion
JSX makes React development easier by allowing developers to describe user interfaces with familiar, HTML-like syntax inside JavaScript. Once you understand elements, curly-brace expressions, attributes, conditional rendering, and lists, you have the foundation needed to build more advanced React applications.
The best way to learn JSX is to practise with small projects. Start with a simple page, add dynamic data, create reusable components, and gradually explore interactive features. With consistent practice, JSX will become a natural part of your React workflow.
