Next ❯

What is JSX?

  • This lesson introduces JSX, a syntax extension used in React to describe UI elements using JavaScript and HTML-like code.

  • Topic Overview

    React Fundamentals help students understand how React works internally.
    These concepts are very important before learning components, props, and state.

    What is JSX?

    JSX (JavaScript XML) is a syntax extension used in React that allows writing HTML-like code inside JavaScript.

    In simple words:
    JSX lets us write UI code in a clean and readable way.

    Example:

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

  • JSX is not HTML. It is converted into JavaScript by Babel.

    Introduction to JSX

    JSX makes React code:

    • Easier to read

    • Easier to write

    • Easier to maintain

    Without JSX:

React.createElement("h1", null, "Hello React");

  • With JSX:

<h1>Hello React</h1>

  • JSX is optional, but almost all React apps use it.

    JSX Syntax Rules

    JSX follows some strict rules.

    Rule 1: Single Parent Element

<div>
  <h1>Hello</h1>
  <p>Welcome</p>
</div>

  • Rule 2: Use className Instead of class

<div className="container"></div>

  • Rule 3: Self-Closing Tags

<img src="logo.png" />

  • Rule 4: JavaScript Expressions Only

    JSX allows expressions, not statements.

    ✅ Allowed:

{count + 1}
  • ❌ Not Allowed:

if (x > 5) {}

  • JSX vs HTML

    Feature

    JSX

    HTML

    Syntax

    JS + HTML

    Only HTML

    Attributes

    camelCase

    lowercase

    class

    className

    class

    Dynamic Data

    Supported

    Not supported

    JSX is more powerful than HTML.

    Embedding JavaScript in JSX

    JavaScript expressions can be embedded using {}.

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

  • Common Uses:

    • Variables

    • Functions

    • Conditions

    • Calculations

    This makes JSX dynamic.

Next ❯