JSX

JSX is a powerful feature of React which allows you to write HTML-like syntax in JavaScript. It makes React components more readable and maintainable.

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML inside JavaScript. It makes code cleaner compared to using React.createElement().

Example without JSX:

return (
  React.createElement("h1", {}, "Hello, World!");
);

Example with JSX:

return (
  <h1>Hello, World!</h1>;
);

Now you can see how JSX makes code more clean and readable.

Important JSX Rules

To write better JSX, keep these rules in mind:

1. One Parent Element is Required

It’s a must to wrap multiple elements inside a single parent element.

Incorrect:

return (
  <h1>Hello</h1>
  <p>Welcome to React!</p>
);

Always wrap the elements in a <div> or <React.Fragment>.

Correct:

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

Or you can use short syntax (React Fragment <></>):

return (
  <>
    <h1>Hello</h1>
    <p>Welcome to React!</p>
  </>
);

2. Write JavaScript Expressions inside {}

If you want to write any expression of JavaScript inside JSX, then wrap the JavaScript expression inside {}.

For example:

const name = "Shefali";
 
return <h1>Hello, {name}!</h1>;

This will render "Hello, Shefali!".

Note: You cannot use statements like if-else directly inside {}.

3. Attribute Names Must Use CamelCase

In JSX, you can’t write HTML-style attributes. Instead, you have to use camelCase format.

For example: You can’t write onclick, instead write onClick.

// Incorrect:
return (
  <button onclick="handleClick()">Click Me</button>  // HTML-style syntax
);
 
// Correct:
return (
  <button onClick={handleClick}>Click Me</button>
);
 

4. Inline Styles are JavaScript Objects

In JSX, the style attribute uses an object with camelCase properties.

For example:

const styleObj = { color: "blue", fontSize: "20px" };
return (
  <p style={styleObj}>Styled Text</p>;
);
 
// OR
return (
  <p style={{ color: "blue", fontSize: "20px" }}>Styled Text</p>;
);

Note: Always use camelCase properties. For example, use backgroundColor not background-color.

5. Conditional Rendering in JSX

Use ternary operators or && for conditions.

Using a Ternary Operator:

const isLoggedIn = true;
 
return <h1>{isLoggedIn ? "Welcome Back!" : "Please Sign In"}</h1>;

Using && Operator:

const showMessage = true;
 
return <>{showMessage && <p>Hello, User!</p>}</>;

6. Rendering Lists in JSX

Use .map() to render lists, and always provide a key prop.

For example:

const names = ["Alice", "Bob", "Charlie"];
 
return (
  <ul>
    {names.map((name) => (
      <li key={name}>{name}</li>
    ))}
  </ul>
);

7. class Attribute is className in JSX

In HTML, you use class, but in JSX, it’s className.

return <h1 className="heading">Hello, JSX!</h1>;

8. Self-Closing Tags Must Have /

Self-closing elements like <img> and <input> must have a / in JSX.

return <img src="image.jpg" alt="Example" />;

JSX Compilation Process

JSX doesn’t directly run in the browser. The Babel compiler converts JSX code into React.createElement().

JSX code:

return (
  <h1>Hello, JSX!</h1>;
);

Babel converts it like this:

return (
  React.createElement("h1", {}, "Hello, JSX!");
);

This proves that JSX is just syntactic sugar, making writing React code easier.

Why is Compilation Needed?

• Browsers don’t understand JSX, but they understand JavaScript.
• Babel translates JSX into React function calls, ensuring compatibility.
• This optimizes performance by converting JSX into efficient JavaScript.

Using JSX in Functional Components

You can use JSX inside functional components.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

And this can be used in other components like this:

<Welcome name="Shefali" />

This will render "Hello, Shefali!".

JSX vs Traditional JavaScript