React Tutorial 0/120 lessons ~6 min read Lesson 18“Modern frontend engineering”

JSX Syntax

JSX Syntax explains JSX expressions, attributes, fragments, event handlers, conditional and list rendering, inline styles, accessibility, compilation, and common syntax mistakes.

Course progress0%

Focus

70 guided sections

Practice signal

Examples included

Career prep

Interview Q&A included

JSX is one of the most important concepts in React.

It allows you to write HTML-like markup directly inside JavaScript, making React UI easier to describe and compose.

A simple example:

jsx

function Welcome() {
  return <h1>Hello, React!</h1>;
}

The <h1>Hello, React!</h1> part is JSX.

Learning Objectives

By the end of this lesson, you will understand:

What JSX is
Why React uses JSX
JSX expressions
JavaScript inside JSX
JSX attributes
className
Self-closing elements
Multiple elements
Fragments
JSX nesting
Conditional rendering
Rendering lists
JavaScript expressions in JSX
Common JSX mistakes
JSX vs HTML
JSX compilation
JSX best practices

What Is JSX?

JSX stands for JavaScript XML.

It is a syntax extension that allows you to write markup that looks similar to HTML inside JavaScript.

Example:

jsx

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

It looks like HTML:

html

<h1>Hello World</h1>

But JSX is being written inside JavaScript.

Why Does React Use JSX?

Without JSX, you can create React elements using JavaScript APIs.

For example:

javascript

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

With JSX:

jsx

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

JSX is much easier to read.

So JSX gives developers a convenient way to describe UI.

JSX Is Not HTML

This is a very important distinction.

JSX:

jsx

<h1>Hello</h1>

looks like HTML, but it is not HTML.

It is JavaScript syntax that gets transformed into React element creation instructions.

Conceptually:

text

JSX
 ↓
Transformation
 ↓
JavaScript
 ↓
React
 ↓
UI

JSX Inside a Functional Component

The most common use is inside a component:

jsx

function Welcome() {
  return (
    <h1>
      Welcome to React
    </h1>
  );
}

The component is JavaScript.

The returned markup is JSX.

JSX Must Be Returned

For example:

jsx

function Greeting() {
  return <h1>Hello</h1>;
}

The JSX is returned by the component.

JSX Expressions

One of the most powerful JSX features is the ability to insert JavaScript expressions using {}.

Example:

jsx

function Greeting() {
  const name = "Jagannath";

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

Result:

text

Hello, Jagannath

The {name} is a JavaScript expression embedded inside JSX.

Curly Braces {}

Curly braces tell JSX:

Evaluate this as JavaScript.

Example:

jsx

const age = 25;

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

You can also perform calculations:

jsx

function Price() {
  const price = 5000;
  const discount = 500;

  return (
    <p>
      Final price: ₹{price - discount}
    </p>
  );
}

Result:

text

Final price: ₹4500

What Can Go Inside {}?

You can use JavaScript expressions.

For example:

jsx

{name}

jsx

{price * 2}

jsx

{user.name}

jsx

{isLoggedIn ? "Logout" : "Login"}

jsx

{items.length}

Expressions vs Statements

This distinction is important.

An expression produces a value:

jsx

{price * 2}

A ternary is also an expression:

jsx

{isLoggedIn ? "Logout" : "Login"}

But a statement such as:

javascript

if (isLoggedIn) {
  // ...
}

cannot be placed directly inside JSX curly braces like this:

jsx

// ❌ Not valid
<div>
  {if (isLoggedIn) {
    // ...
  }}
</div>

Instead, use JavaScript before the return:

jsx

function UserStatus({ isLoggedIn }) {
  if (isLoggedIn) {
    return <p>Welcome!</p>;
  }

  return <p>Please log in.</p>;
}

Or use a ternary:

jsx

function UserStatus({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn
        ? "Welcome!"
        : "Please log in."}
    </p>
  );
}

JSX Attributes

JSX supports attributes that look similar to HTML attributes.

Example:

jsx

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

You can also use JavaScript expressions:

jsx

const imageUrl = "/logo.png";

<img
  src={imageUrl}
  alt="Company logo"
/>

Notice:

jsx

src={imageUrl}

instead of:

jsx

src="imageUrl"

The first evaluates the JavaScript variable.

The second is simply the text "imageUrl".

String Attributes

You can use quotes for string values:

jsx

<h1 className="title">
  React
</h1>

Here "title" is a string.

JavaScript Attribute Values

Use curly braces for JavaScript:

jsx

const className = "title";

<h1 className={className}>
  React
</h1>

You can also write:

jsx

<img
  src={imageUrl}
  alt={imageDescription}
/>

className Instead of class

In HTML:

html

<div class="container">

In JSX:

jsx

<div className="container">

React uses:

jsx

className

rather than:

jsx

class

Example:

jsx

function Card() {
  return (
    <div className="card">
      <h2>React</h2>
    </div>
  );
}

Why className?

Because class has special meaning in JavaScript syntax.

JSX uses JavaScript-compatible property naming.

Therefore:

jsx

className

is the standard JSX attribute.

Other JSX Attribute Differences

Some HTML attributes use different names in JSX.

Examples:

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`tabindex`	`tabIndex`
`onclick`	`onClick`

React generally follows JavaScript-style property naming conventions.

Event Attributes

HTML:

html

<button onclick="save()">

JSX:

jsx

<button onClick={handleSave}>
  Save
</button>

Notice:

text

onclick
   ↓
onClick

And the handler is provided as JavaScript:

jsx

onClick={handleSave}

Don't Call the Event Handler Immediately

Usually:

jsx

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

Not:

jsx

<button onClick={handleClick()}>
  Click
</button>

The first gives React the function to call when the event happens.

The second calls the function during rendering.

If you need arguments, use a function:

jsx

<button
  onClick={() => handleDelete(id)}
>
  Delete
</button>

JSX Requires Proper Closing Tags

HTML can sometimes tolerate omitted closing tags.

JSX is stricter.

Correct:

jsx

<p>Hello</p>

Correct:

jsx

<div>
  Content
</div>

Incorrect:

jsx

<p>Hello

JSX expects properly structured markup.

Self-Closing Elements

Elements without children can be self-closing.

Correct:

jsx

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

Correct:

jsx

<input type="text" />

Correct:

jsx

<Component />

Notice the /:

jsx

/>

JSX Must Have One Root

Traditionally, JSX returned by a component needs a single enclosing structure.

This is problematic:

jsx

function App() {
  return (
    <h1>Hello</h1>
    <p>Welcome</p>
  );
}

There are two sibling elements without a common parent.

You can wrap them:

jsx

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>Welcome</p>
    </div>
  );
}

Or use a Fragment.

React Fragments

A Fragment lets you group elements without adding an extra DOM element.

jsx

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome</p>
    </>
  );
}

The shorthand:

jsx

<>
</>

represents a Fragment.

Explicit Fragment Syntax

You can also write:

jsx

import { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>Hello</h1>
      <p>Welcome</p>
    </Fragment>
  );
}

The shorthand is usually more convenient.

Why Use Fragments?

Suppose you have:

jsx

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

The extra <div> becomes part of the DOM.

With:

jsx

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

there is no additional wrapper element.

This can be useful when the DOM structure matters.

JSX Nesting

JSX elements can be nested.

jsx

function Profile() {
  return (
    <section>
      <h1>Profile</h1>

      <div>
        <h2>Student</h2>
        <p>React Developer</p>
      </div>
    </section>
  );
}

The hierarchy is:

text

section
├── h1
└── div
    ├── h2
    └── p

JSX Can Contain Components

JSX isn't limited to HTML elements.

You can write:

jsx

function Header() {
  return <header>Header</header>;
}

function App() {
  return (
    <>
      <Header />
      <main>
        <h1>Home</h1>
      </main>
    </>
  );
}

Here:

jsx

<Header />

is a React component.

JSX Is Case-Sensitive

This:

jsx

<CourseCard />

is different from:

jsx

<courseCard />

React uses capitalization to distinguish custom components from intrinsic HTML elements.

Use:

jsx

<CourseCard />

for React components.

JSX and JavaScript Variables

You can display variables:

jsx

function Profile() {
  const name = "Rahul";
  const course = "React";

  return (
    <div>
      <h2>{name}</h2>
      <p>{course}</p>
    </div>
  );
}

JSX and Objects

You can access object properties:

jsx

function User() {
  const user = {
    name: "Rahul",
    age: 25
  };

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.age}</p>
    </div>
  );
}

JSX and Arrays

You can render arrays using JavaScript methods.

jsx

function Courses() {
  const courses = [
    "React",
    "Java",
    "Spring Boot"
  ];

  return (
    <ul>
      {courses.map(course => (
        <li key={course}>
          {course}
        </li>
      ))}
    </ul>
  );
}

The important pattern is:

text

array
 ↓
map()
 ↓
JSX elements

JSX and Conditional Rendering

You can use the ternary operator:

jsx

function Status({ loggedIn }) {
  return (
    <div>
      {loggedIn
        ? <p>Welcome!</p>
        : <p>Please log in.</p>}
    </div>
  );
}

Or:

jsx

function Status({ loggedIn }) {
  return (
    <div>
      {loggedIn && <p>Welcome!</p>}
    </div>
  );
}

The && pattern is useful when you only need to show something when a condition is true.

JSX Comments

JavaScript comments:

javascript

// comment

Inside JSX, comments need curly braces:

jsx

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

Don't write:

jsx

<!-- comment -->

That's an HTML comment, not JSX syntax.

JSX and Inline Styles

JSX allows style objects.

HTML:

html

<div style="color: red;">

JSX:

jsx

<div style={{ color: "red" }}>
  Hello
</div>

Why two curly braces?

text

{       → JavaScript expression
 { ... } → JavaScript object
}

So:

jsx

style={{ color: "red" }}

means:

text

JSX expression
     ↓
JavaScript object

CSS Property Names

Because styles are JavaScript objects, CSS properties generally use camelCase.

CSS:

css

background-color: red;
font-size: 20px;

JSX style object:

jsx

style={{
  backgroundColor: "red",
  fontSize: "20px"
}}

JSX Boolean Attributes

Some properties can be expressed as booleans.

For example:

jsx

<button disabled>
  Save
</button>

This means:

jsx

disabled={true}

You can also use:

jsx

<button disabled={isDisabled}>
  Save
</button>

JSX null

Sometimes you don't want to render anything.

You can return:

jsx

return null;

For example:

jsx

function AdminPanel({ isAdmin }) {
  if (!isAdmin) {
    return null;
  }

  return <div>Admin Panel</div>;
}

JSX Rendering of Values

React can render many JavaScript values.

For example:

jsx

<p>{name}</p>

Strings and numbers are commonly rendered.

Be careful with values such as objects:

jsx

const user = {
  name: "Rahul"
};

This is not generally something you render directly:

jsx

<div>{user}</div>

Instead:

jsx

<div>{user.name}</div>

or transform the data appropriately.

JSX and undefined / null

Values such as:

jsx

null
undefined
false

are generally rendered as no visible content when used as JSX children.

This is useful for conditional rendering.

For example:

jsx

{isLoading && <p>Loading...</p>}

When isLoading is false, the expression doesn't produce visible UI.

JSX Expressions Can Call Functions

For example:

jsx

function formatName(name) {
  return name.toUpperCase();
}

function User() {
  return (
    <h1>
      {formatName("Rahul")}
    </h1>
  );
}

Result:

text

RAHUL

Keep Complex Logic Outside JSX

This is technically possible:

jsx

<div>
  {users
    .filter(user => user.active)
    .sort(...)
    .map(...)}
</div>

But if the expression becomes difficult to understand, move the logic outside the JSX.

For example:

jsx

function UserList({ users }) {
  const activeUsers =
    users.filter(user => user.active);

  return (
    <ul>
      {activeUsers.map(user => (
        <li key={user.id}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}

This is easier to read.

JSX Attribute Expressions

Expressions can also be used in attributes:

jsx

function Avatar({ user }) {
  return (
    <img
      src={user.avatar}
      alt={user.name}
    />
  );
}

Here:

jsx

user.avatar

and:

jsx

user.name

are JavaScript expressions.

Dynamic Class Names

A common pattern:

jsx

function Button({ active }) {
  return (
    <button
      className={
        active
          ? "button active"
          : "button"
      }
    >
      Save
    </button>
  );
}

Or:

jsx

const className = active
  ? "button active"
  : "button";

return (
  <button className={className}>
    Save
  </button>
);

JSX and Accessibility

JSX makes it easy to use semantic HTML:

jsx

<button>
  Save
</button>

jsx

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

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

Notice:

jsx

htmlFor

instead of HTML's:

html

for

JSX and aria-* Attributes

ARIA attributes can be written using their standard hyphenated names.

For example:

jsx

<button
  aria-label="Close"
>
  ×
</button>

These attributes are important for accessible interfaces.

JSX and data-* Attributes

You can also use:

jsx

<div data-testid="course-card">
  React
</div>

or custom data attributes:

jsx

<div data-course-id="123">
  React
</div>

JSX Compilation

You write:

jsx

const element = (
  <h1>
    Hello
  </h1>
);

A build tool transforms JSX into JavaScript that React can work with.

Modern React tooling uses the JSX transform during the build process.

Conceptually:

text

JSX
 ↓
Babel / compiler / build tool
 ↓
JavaScript
 ↓
React runtime

With Vite, this transformation is integrated into the development/build pipeline.

JSX Is Not Required

React can technically be used without JSX.

For example:

javascript

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

But JSX is generally preferred because it makes UI structure much easier to read.

JSX vs HTML

HTML	JSX
`class`	`className`
`for`	`htmlFor`
`onclick`	`onClick`
Attribute strings	Can use JavaScript expressions
HTML comments	JSX comments
Can be more forgiving	More syntax rules
Browser parses it directly	Build tooling transforms it

JSX vs JavaScript

JSX:

jsx

const element = (
  <h1>Hello</h1>
);

JavaScript without JSX:

javascript

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

JSX gives us a much more readable representation of UI.

JSX Is Declarative

Consider:

jsx

<h1>
  Welcome
</h1>

You are describing:

The UI should contain a heading with this content.

You aren't manually telling the browser:

text

Create an h1
Set its text
Find the DOM
Append the node
Update it later

React handles the UI update process.

This is part of React's declarative programming model.

JSX and Component Composition

JSX makes component composition very readable.

jsx

function App() {
  return (
    <Layout>
      <Header />
      <Sidebar />
      <MainContent />
      <Footer />
    </Layout>
  );
}

You can almost read the UI hierarchy directly from the code.

JSX Children

Components can contain content:

jsx

<Card>
  <h2>React</h2>
  <p>Learn React.</p>
</Card>

The content between:

jsx

<Card>
   ...
</Card>

is passed to the component as children.

For example:

jsx

function Card({ children }) {
  return (
    <article>
      {children}
    </article>
  );
}

This is an extremely important JSX and composition pattern.

Nested JSX Components

You can compose multiple layers:

jsx

<Layout>
  <Header />

  <main>
    <CourseList>
      <CourseCard />
      <CourseCard />
    </CourseList>
  </main>

  <Footer />
</Layout>

This creates a component hierarchy directly through JSX.

JSX Formatting

JSX can be formatted across multiple lines:

jsx

function CourseCard() {
  return (
    <article className="course-card">
      <h2>React Fundamentals</h2>

      <p>
        Learn modern React
        from the basics.
      </p>

      <button>
        Start Learning
      </button>
    </article>
  );
}

Good formatting makes JSX much easier to maintain.

JSX and Prettier

Most modern React projects use a formatter such as Prettier.

It can automatically format:

jsx

<button className="primary" onClick={handleClick}>
  Save
</button>

into a readable structure when lines become long.

Consistent formatting isn't just cosmetic—it makes code reviews and maintenance easier.

Common Mistake: Using class

Incorrect:

jsx

<div class="container">

Correct:

jsx

<div className="container">

Common Mistake: Forgetting Self-Closing Tags

Incorrect:

jsx

<img src="/logo.png">

Correct:

jsx

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

Common Mistake: Multiple Root Elements

Incorrect:

jsx

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

Correct:

jsx

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

Common Mistake: Using HTML Comments

Incorrect:

jsx

<!-- Header -->

Correct:

jsx

{/* Header */}

Common Mistake: Forgetting {}

Suppose:

jsx

const name = "Rahul";

Incorrect:

jsx

<h1>name</h1>

This displays:

text

name

Correct:

jsx

<h1>{name}</h1>

This displays:

text

Rahul

Common Mistake: Putting Statements Inside JSX

Incorrect:

jsx

<div>
  {if (loggedIn) {
    return "Welcome";
  }}
</div>

Use:

jsx

<div>
  {loggedIn ? "Welcome" : "Please login"}
</div>

or move the logic outside the JSX.

Common Mistake: Calling Event Handlers

Usually incorrect:

jsx

<button onClick={handleClick()}>
  Save
</button>

Correct:

jsx

<button onClick={handleClick}>
  Save
</button>

With arguments:

jsx

<button onClick={() => handleClick(id)}>
  Save
</button>

Common Mistake: Confusing Strings and Expressions

Compare:

jsx

<img src="imageUrl" />

and:

jsx

<img src={imageUrl} />

The first means:

text

Use the literal string "imageUrl"

The second means:

text

Evaluate the variable imageUrl

A Complete JSX Example

jsx

function CourseCard({
  title,
  instructor,
  price,
  isAvailable
}) {
  return (
    <article className="course-card">
      <h2>{title}</h2>

      <p>
        Instructor: {instructor}
      </p>

      <p>
        Price: ₹{price}
      </p>

      {isAvailable ? (
        <button>
          Enroll Now
        </button>
      ) : (
        <p>
          Currently unavailable
        </p>
      )}
    </article>
  );
}

This example demonstrates:

text

JSX
+
Expressions
+
Props
+
Attributes
+
Conditional rendering
+
Components

Practical Example: Product Card

Let's create a more realistic JSX component.

jsx

function ProductCard({
  image,
  name,
  price,
  inStock
}) {
  return (
    <article className="product-card">
      <img
        src={image}
        alt={name}
      />

      <h2>{name}</h2>

      <p>
        ₹{price}
      </p>

      {inStock && (
        <span>
          In Stock
        </span>
      )}

      <button
        disabled={!inStock}
      >
        {inStock
          ? "Add to Cart"
          : "Out of Stock"}
      </button>
    </article>
  );
}

Notice how JavaScript and markup work together naturally.

JSX Mental Model

The most useful mental model is:

text

                 JSX
                  │
       ┌──────────┴──────────┐
       │                     │
   UI Structure        JavaScript Expressions
       │                     │
       │                     │
       └──────────┬──────────┘
                  ↓
             React Element
                  ↓
                React
                  ↓
                  UI

JSX is essentially the bridge between your JavaScript logic and your UI structure.

JSX Cheat Sheet

Basic element

jsx

<h1>Hello</h1>

Variable

jsx

<h1>{name}</h1>

Expression

jsx

<p>{price * 2}</p>

Attribute

jsx

<img src={imageUrl} />

Class

jsx

<div className="card">

Event

jsx

<button onClick={handleClick}>

Conditional

jsx

{isLoggedIn && <Profile />}

Ternary

jsx

{isLoggedIn ? <Profile /> : <Login />}

List

jsx

{items.map(item => (
  <li key={item.id}>
    {item.name}
  </li>
))}

Fragment

jsx

<>
  <Header />
  <Main />
</>

Comment

jsx

{/* Comment */}

Self-closing

jsx

<img />

Interview questions & answers

Interview preparation

6 questions grouped by difficulty — expand any card for a model answer and follow-up probe.

Beginner

1What Is JSX?
Beginner
Model answer
JSX is a syntax extension for JavaScript commonly used with React to describe UI using an HTML-like syntax.
JSX isn't HTML; it is transformed into JavaScript representations that React can use to create and update the UI.
It also allows JavaScript expressions to be embedded using curly braces.
2Is JSX Mandatory in React?
Beginner
Model answer
No.
createElement directly.
However, JSX is generally preferred because it makes UI structure significantly easier to read and maintain.

Intermediate

3Why Does JSX Use className?
Intermediate
Model answer
JSX uses JavaScript-style property naming, so the HTML class attribute is represented as className.
This avoids conflicts with JavaScript syntax and matches the property naming convention used by React.
4What Are Curly Braces Used For?
Intermediate
Model answer
Curly braces in JSX allow JavaScript expressions to be embedded within markup.
They can contain values, calculations, function calls, property access, conditional expressions, and other JavaScript expressions.
5Can You Use if Directly Inside JSX?
Intermediate
Model answer
Generally, no.
if is a statement, while JSX curly braces expect an expression.
Move the logic outside JSX or use an expression such as a ternary.

Advanced

6Why Do JSX Elements Need to Be Properly Closed?
Advanced
Model answer
JSX uses a stricter syntax structure than HTML because it is part of JavaScript code.
Elements without children must be explicitly self-closed, for example img with a closing slash.

Important JSX Rules to Remember

If you remember nothing else from this lesson, remember these:

text

1. JSX looks like HTML but is JavaScript syntax.
2. Use {} for JavaScript expressions.
3. Use className instead of class.
4. Close every JSX element.
5. Self-close elements with no children.
6. Use a common parent or Fragment for siblings.
7. Use PascalCase for React components.
8. Use camelCase for most JSX properties/events.
9. Use {/* */} for JSX comments.
10. Keep complex logic outside the JSX when it hurts readability.

Practice Exercise

Create a StudentCard component that accepts:

text

name
course
progress
isActive

Usage:

jsx

<StudentCard
  name="Rahul"
  course="React"
  progress={75}
  isActive={true}
/>

It should render:

text

Rahul
React
Progress: 75%
Active

Bonus

If isActive is false, show:

text

Inactive

Possible solution

jsx

function StudentCard({
  name,
  course,
  progress,
  isActive
}) {
  return (
    <article className="student-card">
      <h2>{name}</h2>

      <p>
        Course: {course}
      </p>

      <p>
        Progress: {progress}%
      </p>

      <p>
        {isActive
          ? "Active"
          : "Inactive"}
      </p>
    </article>
  );
}

The most important idea is:

JSX lets you describe what your React UI should look like while still using JavaScript expressions and logic.

Think of JSX as:

text

JavaScript
    +
UI Markup
    ↓
   JSX
    ↓
React Elements
    ↓
React
    ↓
Browser UI

Once JSX becomes comfortable, the next major step is understanding JSX expressions and embedding JavaScript in JSX in depth, because that is what makes React components dynamic rather than static.

Ready to mark this lesson complete?Track your journey across the entire course.