JSX Explained: A Beginner-Friendly Guide With Practical Examples
Introduction
If you are learning React to build modern websites and web applications, you will probably encounter something called JSX. At first glance, JSX may look like HTML mixed with JavaScript, which can make it confusing for beginners. However, once you understand its basic rules, JSX becomes one of the easiest ways to create user interfaces in React.
JSX allows developers to describe how a website should look directly inside JavaScript code. Instead of keeping HTML-like markup separate from the logic that controls it, JSX makes it possible to combine both in a readable and organized way.
In this guide, we will explore what JSX is, how it works, its syntax rules, and practical examples you can use in your React projects.
What Is JSX?
JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows developers to write HTML-like markup inside JavaScript files.
JSX is commonly used with React, a JavaScript library for building user interfaces.
Here is a simple example:
```jsx
const element = <h1>Hello, World!</h1>;
```
This code looks similar to HTML, but it is written inside a JavaScript file. The JSX expression creates a description of a heading that React can render on the screen.
Without JSX, you would typically write the same element using React's `createElement()` function:
```jsx
const element = React.createElement(
"h1",
null,
"Hello, World!"
);
```
Both approaches describe a heading. JSX simply makes the code easier for many developers to read and maintain.
It is important to understand that browsers do not directly execute JSX syntax. Development tools such as Babel or a modern build tool transform JSX into regular JavaScript that the browser can process.
Why Is JSX Used in React?
JSX is popular because it makes user interface code easier to understand and organize.
Here are some important benefits.
* Readable code: JSX uses familiar HTML-like tags.
* JavaScript integration: You can include variables, calculations, and expressions directly in markup.
* Reusable components: You can create interface elements and reuse them throughout an application.
* Dynamic content: JSX works with changing data, such as usernames, product prices, and notification counts.
* Easier maintenance: Keeping a component's structure and related logic together can make applications easier to manage.
For example, imagine you are building a shopping website. You might need to display product names, prices, images, and availability. JSX lets you organize these elements in a component and use JavaScript to supply the changing information.
1. Writing Your First JSX Code
Let's begin with a simple example.
```jsx
function App() {
return (
<div>
<h1>Welcome to My Website</h1>
<p>This website is built with React.</p>
</div>
);
}
export default App;
```
Understanding the code
* `function App()` defines a React component.
* `return` specifies the interface the component should render.
* `<div>` groups the elements together.
* `<h1>` displays a main heading.
* `<p>` displays a paragraph.
* `export default App` makes the component available for import into another file.
When this component is rendered by a React application, the page displays a heading and a paragraph.
One important rule is that a component generally returns a single enclosing JSX element. You can use a `<div>` or a React fragment (`<>...</>`) to group multiple elements.
2. Using JavaScript Variables in JSX
One of the most useful features of JSX is the ability to display JavaScript values inside markup.
To insert a JavaScript expression, use curly braces `{}`.
Consider this example:
```jsx
function App() {
const name = "Rahul";
const age = 15;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
</div>
);
}
```
The curly braces tell JSX to evaluate the JavaScript expressions inside them.
The rendered content will be:
* Hello, Rahul!
* You are 15 years old.
You can also perform calculations inside curly braces.
```jsx
function App() {
const price = 500;
const quantity = 3;
return (
<h2>Total Price: ₹{price * quantity}</h2>
);
}
```
The displayed total will be ₹1500.
This technique is useful for displaying calculations, user information, product details, and other dynamic values.
3. JSX Syntax Rules You Must Know
JSX resembles HTML, but it follows several important rules.
Rule 1: Close all tags
In JSX, elements must be properly closed.
Incorrect:
```jsx
<img src="photo.jpg">
```
Correct:
```jsx
<img src="photo.jpg" />
```
The same principle applies to elements such as `<input />` and `<br />`.
Rule 2: Use `className` instead of `class`
In ordinary HTML, you use the `class` attribute to assign a CSS class. In JSX, you normally use `className`.
```jsx
function App() {
return (
<h1 className="main-title">
Learning JSX
</h1>
);
}
```
This class can be styled using CSS:
```css
.main-title {
color: blue;
font-size: 32px;
}
```
Rule 3: Use camelCase for many attributes
Many JSX attributes use camelCase naming.
For example:
```jsx
<button onClick={handleClick}>
Click Me
</button>
```
Notice `onClick` rather than the lowercase HTML-style `onclick`.
Rule 4: Return one enclosing element
You cannot return two separate sibling elements directly from a component without grouping them.
Incorrect:
```jsx
return (
<h1>Hello</h1>
<p>Welcome!</p>
);
```
Correct:
```jsx
return (
<>
<h1>Hello</h1>
<p>Welcome!</p>
</>
);
```
The empty tags are called a React Fragment. They group elements without adding an extra DOM element.
Rule 5: Use curly braces for JavaScript expressions
For dynamic values, use `{}`.
```jsx
const score = 95;
return <p>Your score is {score}</p>;
```
Remember that curly braces in JSX accept expressions, not arbitrary JavaScript statements. For example, you cannot directly place a traditional `if` statement inside a JSX expression.
4. Using Conditions in JSX
Websites often need to display different content depending on a condition.
For example, a dashboard might display a welcome message if a user is logged in and a login prompt otherwise.
You can use the ternary operator:
```jsx
function App() {
const isLoggedIn = true;
return (
<div>
{isLoggedIn ? (
<h1>Welcome Back!</h1>
) : (
<h1>Please Log In</h1>
)}
</div>
);
}
```
If `isLoggedIn` is `true`, React renders "Welcome Back!" Otherwise, it renders "Please Log In".
For displaying something only when a condition is true, you can use the logical AND (`&&`) operator.
```jsx
function App() {
const hasNotification = true;
return (
<div>
<h1>Dashboard</h1>
{hasNotification && (
<p>You have a new notification.</p>
)}
</div>
);
}
```
This approach is useful for notification messages, error warnings, optional sections, and user-specific content.
Be careful when using `&&` with numbers: an expression such as `{count && <p>...</p>}` can display `0` when `count` is zero. A comparison such as `{count > 0 && <p>...</p>}` avoids that issue.
5. Rendering Lists in JSX
Many applications need to display lists of information, such as products, students, articles, or tasks.
React commonly uses JavaScript's `map()` method to transform an array into JSX elements.
```jsx
function App() {
const fruits = ["Apple", "Banana", "Mango"];
return (
<div>
<h2>My Favorite Fruits</h2>
<ul>
{fruits.map((fruit) => (
<li key={fruit}>{fruit}</li>
))}
</ul>
</div>
);
}
```
The `map()` method processes each item in the array and creates a list element for it.
The `key` attribute helps React identify list items when the list changes. In a real application, use a stable, unique identifier when one is available rather than relying on an item's position.
This technique is particularly helpful when building product catalogs, blog listings, navigation menus, and task management applications.
6. Passing CSS Styles in JSX
You can style elements using regular CSS classes or pass inline styles through the `style` attribute.
Unlike HTML's string-based inline style syntax, JSX expects a JavaScript object for inline styles.
```jsx
function App() {
return (
<h1
style={{
color: "purple",
backgroundColor: "lightyellow",
padding: "15px"
}}
>
Styled with JSX
</h1>
);
}
```
Notice two details:
* CSS property names such as `background-color` become `backgroundColor`.
* The style value is a JavaScript object enclosed in curly braces.
The outer braces introduce a JavaScript expression, while the inner braces define the object.
For larger projects, regular CSS files, CSS Modules, or other styling approaches can help keep presentation separate from component logic.
7. Handling Events in JSX
Interactive websites need buttons, forms, menus, and other elements that respond to user actions.
React lets you attach event handlers through JSX attributes such as `onClick`.
```jsx
function App() {
function showMessage() {
alert("Button clicked!");
}
return (
<button onClick={showMessage}>
Click Me
</button>
);
}
```
When the user clicks the button, React calls `showMessage()`.
Notice that the handler is passed as `onClick={showMessage}`, without parentheses. Writing `onClick={showMessage()}` would call the function while rendering instead of passing the function for the click event.
Event handling is useful for:
* Opening menus.
* Submitting forms.
* Updating counters.
* Showing notifications.
* Responding to user selections.
For more complex interactions, React state is usually used to update the interface in response to user actions.
8. Creating Reusable JSX Components
One of React's greatest strengths is component reusability.
Instead of writing the same interface repeatedly, you can create a component and use it wherever needed.
For example, let's create a reusable greeting component.
```jsx
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
function App() {
return (
<div>
<Greeting name="Amit" />
<Greeting name="Priya" />
<Greeting name="Rohan" />
</div>
);
}
export default App;
```
The `Greeting` component receives a prop called `name` and displays a personalized greeting.
The rendered result contains:
* Hello, Amit!
* Hello, Priya!
* Hello, Rohan!
Props allow you to pass data from a parent component to a child component. They make components flexible and reusable.
For example, a website could have one `ProductCard` component and use it to display hundreds of products with different names, prices, and images.
9. Using JSX With React State
JSX becomes even more powerful when combined with React state.
State allows a component to remember information and update its rendered output when that information changes.
Here is a simple counter:
```jsx
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default App;
```
### How it works
* `useState(0)` creates a state variable with an initial value of `0`.
* `count` holds the current value.
* `setCount` updates that value.
* Clicking the button requests an update to the count.
* React renders the component again with the updated value.
When the user clicks the button, the counter changes from `0` to `1`, then `2`, and continues increasing.
For counters that depend on the previous state, the updater form is often safer:
```jsx
<button onClick={() => setCount(previous => previous + 1)}>
Increase
</button>
```
This example demonstrates how JSX, event handlers, and state work together to create an interactive user interface.
10. Common JSX Mistakes Beginners Should Avoid
Beginners sometimes encounter errors because JSX looks almost identical to HTML. Understanding a few common mistakes can save debugging time.
| Common mistake | Correct approach |
| --------------------------------------- | ------------------------------------ |
| Using class | Use className |
| Forgetting to close a tag | Close tags such as <img /> |
| Returning multiple ungrouped elements | Use a parent element or fragment |
| Using onclick | Use onClick |
| Writing JavaScript variables without {} | Insert expressions with curly braces |
| Calling event handlers during rendering | Pass the function reference |
| Rendering lists without keys | Add stable, unique key values |
Another important point is that JSX does not make your application automatically interactive. You still need JavaScript logic, React components, event handlers, and state where appropriate.
JSX vs HTML: What Is the Difference?
Although JSX looks similar to HTML, they are not the same.
| Feature | HTML | JSX |
| ---------------------- | --------------------------------------------------- | --------------------------------------- |
| Purpose | Defines web page structure | Describes UI inside JavaScript |
| CSS class attribute | class | className |
| Event handlers | HTML event attributes | React event props such as onClick |
| JavaScript expressions | Not directly embedded in ordinary markup | Inserted using {} |
| Rendering lists | Usually generated using HTML or JavaScript DOM APIs | Commonly generated using map() |
| Browser support | Browsers parse HTML directly | JSX must be transformed into JavaScript |
The key difference is that JSX lets you describe a user interface while taking advantage of JavaScript expressions and React's component model.
Where Is JSX Used in Real Projects?
JSX is widely used in React-based applications, including:
* E-commerce websites.
* Personal portfolios.
* News and blog websites.
* Admin dashboards.
* Learning platforms.
* Social media interfaces.
* Progressive web applications.
* React-based mobile applications using React Native.
For example, in an e-commerce project, you might use JSX to create product cards, shopping cart summaries, search results, and checkout forms.
Each component can receive data through props and update dynamically using state.
If you are learning full-stack development, JSX can be used on the frontend while a backend built with Node.js, Express, or another server technology supplies data through an API.
How to Start Learning JSX
If you are new to React, follow this learning sequence:
* Learn JavaScript fundamentals, including variables, functions, arrays, objects, and arrow functions.
* Understand basic HTML and CSS.
* Learn JSX syntax, expressions, attributes, and fragments.
* Practice building React components and passing props.
* Learn event handling and state using `useState`.
* Practice rendering arrays with `map()` and conditional content.
* Build a small project, such as a to-do list, personal portfolio, or product catalog.
You can start a React project with a modern tool such as Vite. Once the project is set up, you can write JSX in files such as `App.jsx` and run the development server to see your changes in the browser.
The best way to learn JSX is to write small examples, experiment with them, and gradually combine them into a complete application.
Conclusion
JSX is an important part of React development because it allows developers to write HTML-like markup inside JavaScript. It supports dynamic expressions, conditional rendering, lists, styling, event handling, reusable components, and state-driven interfaces.
Although its syntax may initially look unfamiliar, the fundamental rules are straightforward: close your tags, use `className`, insert JavaScript expressions with curly braces, and group sibling elements correctly.
Once you understand these basics, you can begin creating practical React applications, from simple interactive components to complete websites.
Start small, practise regularly, and use JSX to turn your JavaScript knowledge into real user interfaces.
