What Is JSX?
JSX stands for JavaScript XML. It’s a special way to write code in React. JSX allows developers to write HTML code into JavaScript files. This process helps the user interface write all the logic in the same place and cleaner way.
React uses React.createElement() function to convert HTML code into JavaScript because the browser can’t directly understand the JSX.
In short, JSX helps us write UI in a simpler, readable way, and React turns it into the code it really needs to show the page.
Simple example of JSX:
// JSX
const element = <h1>Hello, world!</h1>;
// Compiled JavaScript
const element = React.createElement("h1", null, "Hello, world!");
How To Write JSX?
JSX syntax is similar to HTML, but with a few key differences:
a) Embedding Expressions in JSX
- We can use curly braces { } to insert JavaScript code inside the JSX.
- This functionality is helpful for dynamically displaying values on the screen, like a user’s name or the student’s result of a calculation.
Example:
const name = "John";
const greeting = <h1>Hello, {name}!</h1>;
- Here, we are embedding a {name} variable inside the JSX.
- Output: Hello, John!
b) JSX Attributes
- JSX attribute names follow JavaScript’s camelCase style. But Looks like HTML.
- For example:
- We use the class attribute in HTML, but here we use the className instead of class.
- HTML’s onclick becomes the onClick.
Example:
const button = <button onClick={handleClick} className="btn">Click Me</button>;
c) Self-Closing Tags
- You must add a closing slash / in the tags that don’t have any content inside
- JSX is not exactly HTML; it’s more like XML, which requires proper closing tags, even though tags are self-contained like <img>, <br>, and <input>.
For Example:
const image = <img src="logo.png" alt="Logo" />;
Embedding JavaScript Logic in JSX
One of the primary and powerful advantages of JSX is its excellent integration with JavaScript. This functionality allows developers to add complex logic directly within the HTML using JavaScript expressions.
a) Conditional Rendering
JSX use the conditional statements in the
We can’t use the if statements directly inside the JSX. instead, we will use the operators to apply the condition.
- Ternary Operator (? 🙂 – Add if/else statements in one line.
- Logical AND (&&) – It is used for true conditions. like show something if the condition is true.
Example:
const isLoggedIn = true;
const message = <h1>{isLoggedIn ? "Welcome back!" : "Please log in."}</h1>;
Code explanation:
If isLoggedIn is true, it shows: Welcome back!
If it’s false, it shows the message: Please log in.
b) Mapping Arrays to Render Lists
We are use the loop over an array using .map() function to create a list of elements (like <li> items).
Example:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map(number => <li key={number}>{number}</li>);
const list = <ul>{listItems}</ul>;
This will create this type of list:
<ul>
<li>1</li>
<li>2</li>
...
</ul>
React uses the {number} to keep track of list items efficiently.
c) Embedding Functions and Expressions
We can call functions or any expression (like math or string operations) inside { } in JSX (JavaScript XML).
Example:
const formatName = (user) => `${user.firstName} ${user.lastName}`;
const user = { firstName: "Jane", lastName: "Doe" };
const greeting = <h1>Hello, {formatName(user)}!</h1>;
Output: Hello, Jane Doe!
The formatName() function takes a user object and returns the full name of the user. Then JSX shows that item in the display.
How JSX Convert Into JavaScript?
When the JSX is compiled, it is converted into plain JavaScript using React.createElement() function. This function takes three arguments:
- Element types like (‘div’, ‘h1’, etc.)
- A properties object (e.g., className, onClick)
- Child elements or text content
For example:
// JSX
const element = <h1>Hello, JSX!</h1>;
// Compiled JavaScript
const element = React.createElement("h1", null, "Hello, JSX!");
This method helps React to manage and update the DOM by creating a virtual DOM representation.