Understanding JSX: Writing HTML in JavaScript

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript. It is commonly used in React to define the structure of user interfaces. JSX makes code more readable and expressive while keeping the logic and UI in one place.

This guide will cover JSX, its syntax, benefits, and best practices for writing JSX efficiently.

1. What is JSX?

JSX allows developers to write HTML-like code inside JavaScript, making UI components easier to build and manage. Although JSX looks like HTML, it is transformed into JavaScript functions by Babel before being executed by the browser.

For example, this JSX code:

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

Gets converted into JavaScript:

const element = React.createElement('h1', null, 'Hello, JSX!');

This transformation ensures that JSX is compatible with JavaScript and React’s virtual DOM.

2. Why Use JSX?

JSX offers several advantages:

• Improved Readability: JSX closely resembles HTML, making it easier to understand and write UI components.

• Enhanced Maintainability: Combining markup and logic in the same file improves organization.

• Prevents Injection Attacks: JSX automatically escapes expressions to prevent cross-site scripting (XSS) vulnerabilities.

• Optimized Performance: JSX is compiled into efficient JavaScript code, ensuring fast rendering.

3. Writing JSX: Syntax and Rules

3.1. JSX Must Have a Single Parent Element

JSX expressions must be wrapped in a single parent element. This is required because JSX transforms into a function that returns a single value.

❌ Incorrect:

return <h1>Title</h1> <p>Description</p>;

✅ Correct:

return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

Alternatively, React provides a Fragment (<>...</>) to avoid unnecessary <div> elements:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

3.2. Embedding JavaScript Expressions in JSX

JSX allows JavaScript expressions inside curly braces {}.

Example:

const name = "React";
const element = <h1>Welcome to {name}!</h1>;

Expressions inside {} can include variables, functions, or calculations.

3.3. Using Attributes in JSX

JSX uses a syntax similar to HTML for attributes, but some attributes differ from standard HTML:

• Use className Instead of class:

  <h1 className="heading">Hello</h1>
  

• Use camelCase for Event Handlers:

  <button onClick={handleClick}>Click Me</button>
  

• Boolean Attributes Do Not Require a Value:

  <input type="checkbox" defaultChecked />
  

3.4. Conditional Rendering in JSX

JSX allows conditional rendering using the ternary operator (condition ? true : false) or && (logical AND).

Using the Ternary Operator

const isLoggedIn = true;
const message = <h1>{isLoggedIn ? "Welcome back!" : "Please log in"}</h1>;

Using Logical AND (&&)

const notifications = 5;
return (
  <div>
    {notifications > 0 && <p>You have {notifications} new messages.</p>}
  </div>
);

3.5. Looping Through Arrays in JSX

JSX uses .map() to render lists dynamically.

Example:

const items = ["Apple", "Banana", "Cherry"];
return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

Each element should have a unique key to help React track changes efficiently.

4. Styling JSX Elements

4.1. Using Inline Styles

JSX allows inline styles using objects with camelCase properties:

const headingStyle = { color: "blue", fontSize: "24px" };
return <h1 style={headingStyle}>Styled Text</h1>;

4.2. Using CSS Classes

The className attribute applies external CSS styles:

return <h1 className="title">Styled with CSS</h1>;

5. Handling Events in JSX

JSX event handling follows JavaScript conventions but uses camelCase:

Example:

function handleClick() {
  alert("Button clicked!");
}

return <button onClick={handleClick}>Click Me</button>;

6. JSX Best Practices

• Keep Components Small and Focused: Each component should serve a single purpose.

• Use Meaningful Variable Names: Improve code readability and maintainability.

• Avoid Inline Functions in JSX: Extract functions outside JSX to optimize performance.

• Wrap Long JSX Code in Parentheses: Improves readability and prevents errors.

Bad:

return <div><h1>Hello</h1><p>World</p></div>;

Good:

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

7. Conclusion

JSX simplifies React development by combining JavaScript and HTML-like syntax. It enhances readability, improves code organization, and offers flexibility with expressions and attributes. By following best practices, JSX can help build scalable and maintainable React applications efficiently.