JSX Syntax

A simple JSX element can be written like an HTML element.

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

Here, the h1 element is written inside JavaScript code.

Every normal JSX opening tag should have a corresponding closing tag.

<p>Welcome to React</p>

The opening tag is <p> and the closing tag is </p>.

Elements that do not contain child content can use self-closing syntax.

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

<input type="text" />

<br />

The /> closes the JSX element.

When a component returns multiple elements, they should be wrapped inside one parent element or a Fragment.

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

A Fragment can be used when you do not want to add an extra HTML element.

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

JavaScript expressions are written inside curly braces { }.

const name = "Amit";

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

The value of name is displayed inside the heading.

Numbers can be displayed inside JSX using curly braces.

const age = 25;

return (
    <p>Age: {age}</p>
);

You can perform calculations inside JSX expressions.

const price = 100;
const quantity = 3;

return (
    <p>Total: {price * quantity}</p>
);

The result displayed is 300.

Variables can be used inside JSX with curly braces.

const course = "React";

return (
    <h2>Learning {course}</h2>
);

JSX elements can have attributes.

<img
    src="photo.jpg"
    alt="Student"
 />

Attributes provide additional information to JSX elements.

In JSX, use className instead of the HTML class attribute.

<div className="container">
    <h1>React Tutorial</h1>
</div>

For a label element, JSX commonly uses htmlFor instead of HTML's for attribute.

<label htmlFor="email">
    Email
</label>

<input id="email" type="email" />

Boolean attributes can be used in JSX to enable certain properties.

<input
    type="text"
    disabled
/>

The disabled property makes the input unavailable for user interaction.

A JavaScript boolean expression can also be passed using curly braces.

const isDisabled = true;

return (
    <button disabled={isDisabled}>
        Submit
    </button>
);

Inline styles in JSX use a JavaScript object.

const style = {
    color: "blue",
    fontSize: "24px"
};

return (
    <h1 style={style}>
        Hello React
    </h1>
);

The style object can also be written directly inside JSX.

<h1
    style={{
        color: "green",
        fontSize: "30px"
    }}
>
    React
</h1>

React events are written using camelCase names such as onClick.

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

This differs from writing event attributes in lowercase HTML style.

Comments inside JSX are written using JavaScript comment syntax inside curly braces.

return (
    <div>

        {/* This is a JSX comment */}

        <h1>Hello</h1>

    </div>
);

String values can be written directly as attribute values.

<input
    type="text"
    placeholder="Enter your name"
/>

Curly braces are useful when the value comes from JavaScript.

JavaScript variables can be used as attribute values with curly braces.

const imageUrl = "photo.jpg";

return (
    <img
        src={imageUrl}
        alt="Profile"
    />
);

JSX elements can be nested inside other JSX elements.

<div>

    <h1>React Course</h1>

    <div>
        <p>Learn JSX</p>
    </div>

</div>

The ternary operator can be used inside JSX for simple conditions.

const loggedIn = true;

return (
    <h2>
        {loggedIn ? "Welcome" : "Please Login"}
    </h2>
);

The logical AND operator can conditionally display JSX content.

const isAdmin = true;

return (
    <div>
        {isAdmin && <p>Admin Panel</p>}
    </div>
);

The paragraph is rendered when isAdmin is true.

Arrays can be rendered using JavaScript expressions.

const names = ["Amit", "Ravi", "Neha"];

return (
    <div>
        {names.map(name => (
            <p key={name}>{name}</p>
        ))}
    </div>
);

JavaScript functions can be called inside JSX expressions.

function getName() {
    return "Rahul";
}

return (
    <h1>Hello {getName()}</h1>
);

Parentheses are commonly used when JSX contains multiple lines.

return (
    <div>
        <h1>Welcome</h1>
        <p>Learn React</p>
    </div>
);

They make multiline JSX easier to read.

JSX handles text and whitespace according to its own rendering rules. For readable layouts, use CSS rather than relying on repeated spaces.

<p>
    Welcome to the React tutorial.
</p>

Forgetting to close a JSX element can cause a syntax error.

// Incorrect

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

The heading should be properly closed:

// Correct

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

• Close every JSX element properly.
• Use self-closing syntax when appropriate.
• Use one parent element or a Fragment.
• Use className instead of class.
• Use htmlFor for label associations.
• Use camelCase for React event names such as onClick.
• Use curly braces for JavaScript expressions.
• Keep JSX properly formatted and readable.
• Use meaningful variable and component names.

function App() {

    const name = "Rahul";
    const course = "React";
    const loggedIn = true;

    function handleClick() {
        alert("Welcome " + name);
    }

    return (
        <div className="container">

            <h1>
                Hello {name}
            </h1>

            <p>
                You are learning {course}.
            </p>

            {loggedIn && (
                <p>You are logged in.</p>
            )}

            <button
                className="btn"
                onClick={handleClick}
            >
                Start Learning
            </button>

        </div>
    );

}

export default App;

This example combines variables, expressions, attributes, events, conditional rendering, and nested JSX elements.