JSX Explained

JSX Explained in React js

JSX in React JS

When developers first look at React code, one thing immediately stands out - it doesn’t look like normal JavaScript. You’ll see something that looks like HTML written directly inside JavaScript files. At first, it feels strange. Mixing HTML and JavaScript in the same place? But once you understand the idea behind it, JSX actually makes writing UI much more natural.

JSX stands for JavaScript XML. It is a syntax extension used in React that allows you to write HTML-like structures directly inside JavaScript. It is not required to use React, but almost every React developer uses it because it makes UI code easier to read and manage.

Why JSX Was Introduced

Before JSX, developers had to write React components using pure JavaScript functions like React.createElement(). That approach worked, but it quickly became hard to read.

Imagine building a complex layout using only nested JavaScript function calls. The code would become messy and difficult to maintain.

JSX solves this by allowing developers to write UI in a way that visually looks like HTML, while still having the full power of JavaScript.

Basic Example of JSX

function Welcome() {
  return <h2>Welcome to React</h2>;
}
  

At first glance, it looks like we are returning HTML. But in reality, this JSX gets converted into regular JavaScript by a compiler (usually Babel).

Behind the scenes, it becomes something like this:

React.createElement("h2", null, "Welcome to React");
  

So JSX is simply a more readable way to describe UI elements.

JSX is Not Exactly HTML

Even though JSX looks like HTML, there are some differences you must remember.

1. Use className Instead of class

In HTML, we use class, but in JSX we use className.

<div className="container">Hello</div>
  

2. Self-Closing Tags Must Be Closed

In HTML, you can sometimes leave tags open. In JSX, every tag must be properly closed.

<img src="logo.png" alt="Logo" />
  

Using JavaScript Inside JSX

One of the most powerful features of JSX is that you can write JavaScript expressions inside curly braces.

function Greeting() {
  const name = "Kamran";
  return <h3>Hello, {name}!</h3>;
}
  

Inside the curly braces, you can write:

• Variables
• Functions
• Math expressions
• Ternary conditions
• Array mapping

Conditional Rendering in JSX

JSX does not allow traditional if statements directly inside the return block, but you can use ternary operators or logical AND operators.

function Status(props) {
  return (
    <div>
      {props.isLoggedIn ? <p>Welcome back!</p> : <p>Please login.</p>}
    </div>
  );
}
  

This keeps UI logic clean and readable.

Rendering Lists in JSX

In real applications, you often need to display lists of items. JSX works smoothly with JavaScript’s map() function.

function UserList() {
  const users = ["Aman", "Ravi", "Sana"];

  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}
  

Each element in a list should have a unique key prop. This helps React efficiently update the UI.

Why JSX Makes Development Easier

Once you start building larger components, you’ll notice that JSX keeps everything organized. Instead of separating HTML and JavaScript into different files, JSX allows you to keep UI and logic together.

This might feel unusual in the beginning, but it actually improves readability and maintainability.

When you open a component file, you can immediately understand:

• What the UI looks like
• What logic controls it
• How data flows inside it

Common Mistakes Beginners Make with JSX

• Forgetting to wrap multiple elements inside a parent element.
• Using class instead of className.
• Trying to write normal if statements directly inside JSX.
• Forgetting to close tags properly.

To return multiple elements without adding extra divs, you can use React Fragments:

function Example() {
  return (
    <>
      <h2>Title</h2>
      <p>Description</p>
    </>
  );
}
  

Final Thoughts

JSX may look unusual at first, but it quickly becomes one of the most enjoyable parts of working with React. It allows you to think in terms of components and UI structure rather than manually updating the DOM.

Instead of writing complex JavaScript to create and update elements, you simply describe how the UI should look, and React takes care of the rest.

If you practice writing components using JSX regularly, it will start to feel completely natural. And once that happens, building dynamic user interfaces becomes much easier and more structured.