React JSX

What is JSX?

JSX bridges the gap between HTML’s readability and JavaScript’s power, making UI creation both intuitive and dynamic.It allows developers to write UI components using an XML-like structure that resembles HTML. This syntax improves code readability and simplifies component rendering. JSX gets compiled into JavaScript by Babel before execution.

JSX Syntax & Rules

• Declarative Structure : Enables a concise and readable way to define component hierarchies.
• Integration with JavaScript : Allows embedding of expressions within markup.
• Componentization : Facilitates modular development by structuring UI as reusable units.
• Enhanced Debugging : Easier to trace errors due to the close resemblance to traditional HTML.

1. Encapsulation in Parent Element

Every JSX expression must be wrapped in a single parent element, ensuring a structured and valid component tree.

Example:

return (
    <div>
        <h1>Welcome to JSX </h1>
    </div>
);

2. Embedding JavaScript Expressions

Curly braces {} allow integration of dynamic values.

Example:

const username = "Sahand";
return<h2>Hello, {username}!</h2>;

3. Self-Closing Tags

Similar to XML, some elements must be self-closed.

Example:

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

4. Class Attribute as className

Since class is a reserved JavaScript keyword, JSX uses className.

Example:

return <p className="text-primary">Styled Text</p>;

5. Inline Styling

Uses a JavaScript object for defining styles

Example:

const styles = { color: "blue", fontSize: "20px" };
return <p style={styles}>Styled with JSX</p>;

6. Conditional Rendering

Supports ternary operators for dynamic UI updates.

Example:

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

7. Lists & Keys

Rendering lists requires unique key attributes.

Example:

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

Complete JSX Example in a Functional Component

Example:

import React from "react";

function Greeting() {
  const name = "Sahand";
  const isMember = true;

  return (
    <div>
        <h1>Hello, {name}!</h1>
        <p>{isMember ? "Thank you for being a member." : "Join us today!"}</p>
        <button className="btn-primary">Click Me</button>
    </div>
  );
}
export default Greeting;

JSX Compilation Process

JSX is not valid JavaScript; it undergoes transformation via Babel.

Example:

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

compiles into:

const element = React.createElement("h1", null, "Hello, World!");

This ensures compatibility across browsers.

Conclusion

JSX simplifies UI development by making React components more expressive. It enables a seamless combination of markup and logic, improving both readability and maintainability. By understanding JSX rules and conventions, developers can efficiently build dynamic and interactive web applications.