JSX Introduction

JSX stands for JavaScript XML. It allows developers to write HTML-like elements inside JavaScript code.

function App() {

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

}

The <h1> element is written directly inside the JavaScript function.

JSX makes it easier to describe what the user interface should look like.

function App() {

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

}

The structure of the user interface is easy to understand from the code.

JSX uses HTML-like tags such as headings, paragraphs, buttons, and div elements.

<h1>Hello</h1>

<p>Welcome to React</p>

<button>Click Me</button>

This makes JSX familiar to developers who already know HTML.

JSX can be returned from a JavaScript function.

function Welcome() {

    return (
        <h2>Welcome to My Website</h2>
    );

}

Here, Welcome is a JavaScript function that returns JSX.

Although JSX looks like HTML, it follows some different rules. For example, JSX uses className instead of the HTML class attribute.

<div className="box">
    Hello
</div>

When returning multiple JSX elements, they normally need to be contained inside one parent element.

function App() {

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

}

The following structure has two sibling root elements:

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

Instead, place them inside a parent element or use a React Fragment.

A simple way to group multiple JSX elements is to use a div.

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

A React Fragment can group multiple elements without adding an extra HTML element to the page.

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

JavaScript expressions can be written inside JSX using curly braces.

function App() {

    let name = "Rahul";

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

}

The value of name is displayed inside the heading.

JavaScript numbers can also be displayed using curly braces.

function App() {

    let age = 20;

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

}

JavaScript expressions can perform calculations inside JSX.

function App() {

    let a = 10;
    let b = 20;

    return (
        <h2>Total: {a + b}</h2>
    );

}

The result displayed on the page is 30.

Variables can be created in JavaScript and then displayed in JSX.

function App() {

    const course = "React";

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

}

function App() {

    const price = 500;
    const quantity = 2;

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

}

Expressions inside JSX can use variables and JavaScript operators.

JavaScript-style comments can be written inside JSX expressions.

function App() {

    return (
        <div>
            {/* This is a JSX comment */}
            <h1>Hello React</h1>
        </div>
    );

}

JSX elements can have attributes similar to HTML elements.

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

JSX attributes are used to provide additional information to elements.

In JSX, the HTML class attribute is normally written as className.

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

Elements without child content can be written using a self-closing syntax.

<img src="image.jpg" alt="Image" />

<input type="text" />

<br />

The closing slash is important for JSX self-closing elements.

JSX uses JavaScript-based naming conventions for many properties. For example, className is used instead of class.

<button className="btn">
    Click Me
</button>

CSS classes can be applied using className.

function App() {

    return (
        <div className="card">
            <h2>React Course</h2>
        </div>
    );

}

The class can then be styled using CSS.

JSX can also contain event attributes such as onClick.

function App() {

    function showMessage() {
        alert("Hello!");
    }

    return (
        <button onClick={showMessage}>
            Click Me
        </button>
    );

}

JavaScript conditional expressions can be used inside JSX.

function App() {

    const isLoggedIn = true;

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

}

JavaScript arrays can be used to create dynamic content in React.

function App() {

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

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

}

Text can be written directly, while JavaScript values are generally placed inside curly braces.

<h1>Hello React</h1>

<h1>Hello {name}</h1>

The second example uses the JavaScript variable name.

JSX elements can be placed inside other JSX elements.

<div>

    <h1>React Course</h1>

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

</div>

Components commonly return JSX that describes their user interface.

function Welcome() {

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

}

This JSX becomes part of the component's rendered output.

JSX is not directly understood by the JavaScript engine as normal JavaScript syntax. The React development toolchain transforms JSX into JavaScript that can create the required React elements.

JSX
 ↓
Transformation
 ↓
JavaScript
 ↓
React Elements
 ↓
User Interface

function App() {

    const name = "Rahul";

    return (
        <div>
            <h1>Hello {name}</h1>
            <p>Welcome to React.</p>
            <button>Learn More</button>
        </div>
    );

}

export default App;

• Keep JSX readable and properly formatted.
• Use one parent element when required.
• Use fragments when an extra HTML element is unnecessary.
• Use className instead of HTML class.
• Close JSX elements properly.
• Use curly braces for JavaScript expressions.
• Break large components into smaller components.
• Use meaningful names for variables and components.

function App() {

    const student = "Rahul";
    const course = "React";

    return (
        <div className="container">

            <h1>Welcome {student}</h1>

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

            <button className="btn">
                Start Learning
            </button>

        </div>
    );

}

export default App;

This example combines JSX elements, variables, expressions, attributes, and a CSS class in a React component.