Understanding React JSX & Rendering Elements
What is JSX?
JSX (JavaScript XML) is a special syntax used in React that allows us to write HTML-like code inside JavaScript. It makes the code more readable and simplifies the creation of user interfaces.
Why Use JSX?
✅ Easier to Read and Write – JSX looks like HTML, making it easier to understand and maintain.
✅ Efficient – JSX compiles down to optimized JavaScript code for better performance.
✅ Safer – JSX prevents injection attacks by escaping embedded values automatically.
JSX Syntax Rules
1️⃣ Must Have One Parent Element
JSX elements must be wrapped in a single parent element.
return (
<div>
<p>Hello</p>
<p>Welcome to React!</p>
</div>
);
📌 Explanation:
• The <div> acts as a wrapper around both <p> elements.
• React requires all JSX elements to be wrapped inside a single parent.
👉 Alternatively, you can use React Fragments (`<>…</>`) instead of a `<div>`.
return (
<>
<p>Hello</p>
<p>Welcome to React!</p>
</>
);
📌 Why Use ?
• It doesn’t add extra elements to the DOM.
• Keeps the HTML structure clean.
2️⃣ Use className Instead of class
Since `class` is a reserved keyword in JavaScript, use `className` instead.
<h1 className=”heading”>Hello React</h1>
3️⃣ Self-Closing Tags
Elements like `<img>`, `<input>`, and `<br>` must be self-closed.
<input type=”text” />
4️⃣ JavaScript Expressions in JSX
Use `{}` to insert dynamic values.
const name = “John”;
const element = <h1>Hello, {name}!</h1>;
📌 Explanation:
• We declare a variable name = “John”.
• Inside JSX, we use {name} to dynamically insert the value.
Rendering Elements in React
React renders elements using the `createRoot()` function and the `render()` method.
Steps to Render Elements
1️⃣ Find the Root Element
Every React app needs a root HTML element where it will be displayed. This is usually a `<div id=”root”>` in `index.html`.
<body>
<div id=”root”></div>
</body>
2️⃣ Rendering an Element
Use ReactDOM to render JSX into the root element.
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(<h1>Hello, React!</h1>);
📌 Explanation:
• ReactDOM.createRoot(document.getElementById(“root”)) selects the root element from index.html.
• .render(<h1>Hello, React!</h1>) displays the JSX inside #root.
• This renders an <h1> heading with “Hello, React!” on the webpage.
Rendering Multiple Elements
You can render multiple elements using a parent container or a fragment:
const element = (
<>
<h1>Title</h1>
<p>This is a paragraph.</p>
</>
);
root.render(element);
✔️ Advantage: No extra <div> in the DOM.
✔️ React Fragments (<>…</>) are recommended for cleaner HTML output.
Conditional Rendering in JSX
You can use conditional statements in JSX with the ternary operator.
👉 Example:
const isLoggedIn = true;
const element = <h1>{isLoggedIn ? “Welcome Back!” : “Please Log In”}</h1>;
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(element);
✔️ If isLoggedIn is true, it displays: Welcome Back!
✔️ If isLoggedIn is false, it displays: Please Log In
👉 Alternatively, use an `if` statement before returning JSX:
const isLoggedIn = true; // Change to false to test
let message;
if (isLoggedIn) {
message = <h1>Welcome Back!</h1>;
} else {
message = <h1>Please Log In</h1>;
}
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(message);
✔️ If isLoggedIn = true, it renders: Welcome Back!
✔️ If isLoggedIn = false, it renders: Please Log In
Conditions - if statements in JSX
JSX does not support if statements inside the return statement, but there are different ways to apply conditions:
1️⃣ Using If Statements Before JSX
Define a variable and assign JSX elements based on a condition.
const isMember = true; // Change to false to test
let greeting;
if (isMember) {
greeting = <h1>Welcome, Member!</h1>;
} else {
greeting = <h1>Please Sign Up</h1>;
}
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(greeting);
✔️ If isLoggedIn = true, it renders: Welcome Back!
✔️ If isLoggedIn = false, it renders: Please Log In
2️⃣ Using Ternary Operator in JSX
Use a ternary operator to handle simple conditions directly inside JSX.
const isAdmin = false;
const message = <h1>{isAdmin ? “Admin Panel” : “User Dashboard”}</h1>;
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(message);
✔️ If isAdmin = true, it renders: “Admin Panel”
✔️ If isAdmin = false, it renders: “User Dashboard”
3️⃣ Using Logical && Operator
If you only need to render something when a condition is true, use &&.
const hasMessages = true;
const notifications = (
<>
<h1>Welcome</h1>
{hasMessages && <p>You have new messages!</p>}
</>
);
const root = ReactDOM.createRoot(document.getElementById(“root”));
root.render(notifications);
✔️ If hasMessages = true, it renders:
• “Welcome”
• “You have new messages!”
✔️ If hasMessages = false, it renders only: “Welcome” (The <p> tag is not rendered)—
JSX vs. JavaScript
| Feature | JSX | JavaScript |
|---|---|---|
| Syntax | HTML-like | Pure JavaScript |
| Readability | Easier | Harder |
| Performance | Optimized | Requires manual DOM updates |
Conclusion
JSX makes writing React components easier and more intuitive by allowing HTML-like syntax inside JavaScript. Understanding JSX and rendering elements efficiently is key to building dynamic web applications with React!
