JSX stands for JavaScript XML. It is a syntax extension used in React that allows developers to describe the UI using HTML-like code inside JavaScript files. Although JSX looks similar to HTML, it is not HTML. Behind the scenes, JSX is converted into JavaScript function calls that React understands.

The main purpose of JSX is to make React components easier to read and write. Without JSX, developers would have to create UI elements using plain JavaScript functions, which becomes difficult to read and maintain for complex interfaces. JSX provides a cleaner and more intuitive way to define the structure of the UI.

A basic example of JSX looks like this:

const element = <h1>Hello, React!</h1>;

This code creates a React element using JSX. Internally, React converts it into a JavaScript function call before rendering it in the browser.

JSX Syntax Basics

JSX allows you to write UI elements that look like HTML tags. These tags can represent standard HTML elements like div, h1, p, or custom React components. Custom components must always start with a capital letter.

Example:

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

Here, Welcome is a React component written using JSX.

JSX Rules

JSX follows several important rules that developers must follow to avoid errors.

First, JSX must return a single parent element. This means you cannot return multiple elements side by side without wrapping them inside a parent element like a div or a fragment.

Incorrect example:

return <h1>Hello</h1><p>Welcome</p>;

Correct example:

return (
  <div>
    <h1>Hello</h1>
    <p>Welcome</p>
  </div>
);

Second, JSX tags must be properly closed. Even self-closing elements like input or img must end with a closing slash.

Example:

<input type="text" />

Third, JSX uses camelCase for attributes instead of standard HTML attribute names. For example, class becomes className, and for becomes htmlFor.

Example:

<label htmlFor="email">Email</label>
<input id="email" className="input" />

Fourth, JavaScript keywords cannot be used directly as attribute names in JSX. This is why class is replaced with className.

JSX Expressions

JSX allows embedding JavaScript expressions using curly braces. This is one of the most powerful features of JSX, as it enables dynamic rendering.

Example:

const name = "Akbar";

function Greeting() {
  return <h1>Hello, {name}</h1>;
}

Inside the curly braces, you can use variables, function calls, calculations, or conditional logic.

Example with expression:

const isLoggedIn = true;

function Status() {
  return <p>{isLoggedIn ? "Welcome back!" : "Please log in"}</p>;
}

Only JavaScript expressions are allowed inside JSX, not statements. For example, if statements or loops cannot be written directly inside JSX, but expressions like ternary operators and map functions are allowed.

Example using map:

const skills = ["HTML", "CSS", "React"];

function SkillList() {
  return (
    <ul>
      {skills.map(skill => (
        <li key={skill}>{skill}</li>
      ))}
    </ul>
  );
}

Real-World Example

In a real-world application like a resume builder, JSX is used to dynamically render user information, skills, and sections. For example, when a user types their name, JSX expressions can instantly update the UI to reflect the change without reloading the page. Conditional JSX can show or hide sections such as projects or certifications based on user input.

Important Notes and Best Practices

JSX should remain simple and readable. Complex logic should be handled outside JSX and passed in as variables or functions. Overloading JSX with too much logic can make components difficult to understand and maintain.

Always keep JSX clean by breaking large components into smaller reusable components. This improves readability and scalability.

In summary, JSX syntax allows React developers to write UI code in a clear and expressive way. Understanding JSX rules and expressions is essential for building dynamic, error-free, and maintainable React applications.