JSX syntax is the foundation for describing user interfaces inside React components. If you have already learned what JSX is and how it differs from HTML, the next step is understanding how to correctly write JSX and how its syntax works inside a React application.

JSX looks familiar because many of its elements resemble HTML. However, JSX follows JavaScript syntax rules and React conventions, which means there are several important rules you need to understand before writing larger components.

A simple JSX example looks like this:

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>Learn how to build modern web applications.</p>
    </div>
  );
}

export default App;

The JSX inside the return statement describes the structure of the user interface.

As you become more comfortable with JSX syntax, you will be able to create components that combine HTML-like elements, JavaScript values, expressions, functions, attributes, and conditional content.

Understanding the Basic JSX Structure

The simplest JSX expression can contain an element:

<h1>Hello React</h1>

You can place this JSX inside a React component:

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

Here, App is the React component and:

<h1>Hello React</h1>

is the JSX returned by that component.

A component can also return multiple nested elements:

function App() {
  return (
    <main>
      <h1>Learn React</h1>

      <section>
        <h2>Getting Started</h2>
        <p>Build your first React application.</p>
      </section>
    </main>
  );
}

This structure is similar to the structure of an HTML document, but it is written inside JavaScript.

JSX Elements

A JSX element generally consists of an opening tag, content, and a closing tag.

For example:

<p>Hello World</p>

The parts are:

Opening Tag
    ↓
<p>
    ↓
Content
    ↓
Hello World
    ↓
Closing Tag
    ↓
</p>

You can also nest elements inside one another:

<div>
  <h1>Hello React</h1>
  <p>Welcome to JSX.</p>
</div>

Here, the <h1> and <p> elements are children of the <div> element.

JSX Must Be Properly Nested

JSX elements must be correctly nested.

Correct:

<div>
  <h1>Hello React</h1>
  <p>Welcome to JSX</p>
</div>

Incorrect:

<div>
  <h1>Hello React
  </div>
</h1>

The opening and closing tags must follow the correct hierarchy.

This is similar to XML-style syntax and helps React understand the structure of the interface.

JSX Elements Must Be Closed

JSX requires elements to be properly closed.

Elements that contain content use an opening and closing tag:

<h1>Hello React</h1>

Elements that do not contain children should be self-closing:

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

Other examples include:

<input type="text" />

<br />

<hr />

The self-closing / is required for these JSX elements.

JSX Requires a Single Root

A React component must return a single root element.

For example:

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>Welcome to my application.</p>
    </div>
  );
}

The <div> acts as the root element.

Without a parent, this is invalid:

function App() {
  return (
    <h1>Hello React</h1>
    <p>Welcome to my application.</p>
  );
}

There are two elements at the top level.

You can solve this by using a Fragment:

function App() {
  return (
    <>
      <h1>Hello React</h1>
      <p>Welcome to my application.</p>
    </>
  );
}

Fragments allow you to group elements without adding an extra element to the DOM.

JSX Parent and Child Relationships

JSX elements can contain other JSX elements.

For example:

<section>
  <h1>React</h1>

  <div>
    <p>Learn components.</p>
    <p>Learn JSX.</p>
  </div>
</section>

The structure can be represented as:

<section>
    │
    ├── <h1>
    │
    └── <div>
          ├── <p>
          └── <p>

Understanding this hierarchy is important because React interfaces are built by combining nested elements and components.

JSX Uses Curly Braces for JavaScript

One of the most important JSX syntax rules is the use of curly braces.

Curly braces allow you to insert JavaScript expressions into JSX.

For example:

function App() {
  const name = "Alex";

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

The value of name is inserted into the JSX.

The result is:

Hello, Alex!

The basic syntax is:

{JavaScriptExpression}

You will use this syntax extensively in React applications.

JSX Text and JavaScript Expressions

Normal text can be written directly:

<h1>Welcome to React</h1>

JavaScript values use curly braces:

<h1>{title}</h1>

You can also combine both:

<h1>Welcome to {name}</h1>

This produces dynamic content while keeping the markup easy to read.

JSX Supports JavaScript Expressions

You can place many JavaScript expressions inside JSX.

For example:

function App() {
  const price = 500;
  const quantity = 3;

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

The expression:

price * quantity

is evaluated by JavaScript.

The result displayed by React is:

Total: ₹1500

You can use:

• Variables
• Arithmetic
• Function calls
• Object properties
• Array methods
• Ternary expressions
• Logical expressions

inside JSX expressions.

JSX Attribute Syntax

JSX elements can have attributes.

For example:

<img
  src="/images/react.png"
  alt="React logo"
/>

Here, src and alt are JSX attributes.

You can place attributes on one line:

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

Or format them across multiple lines:

<button
  className="primary"
  type="button"
  disabled={false}
>
  Click Me
</button>

Multiline formatting is particularly useful when an element contains several attributes.

String Attribute Values

String values can be written using quotation marks:

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

The values:

"/logo.png"
"React Logo"

are strings.

JavaScript Attribute Values

When an attribute needs a JavaScript value, use curly braces.

For example:

const imageUrl = "/logo.png";

function App() {
  return (
    <img
      src={imageUrl}
      alt="React Logo"
    />
  );
}

Here:

src={imageUrl}

tells JSX to use the value stored in the imageUrl variable.

Do not write:

src="{imageUrl}"

because the value inside quotation marks is treated as a string.

JSX Boolean Attributes

JSX can also work with boolean values.

For example:

<button disabled={true}>
  Submit
</button>

You can also use a variable:

const isDisabled = true;

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

When isDisabled is true, the button is disabled.

When it is false, the button is enabled.

JSX Event Syntax

React events use camelCase syntax.

For example:

function App() {
  function handleClick() {
    console.log("Button clicked");
  }

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

Notice:

onClick

instead of:

onclick

The event handler receives a JavaScript function:

onClick={handleClick}

You can also use an arrow function:

<button
  onClick={() => console.log("Clicked")}
>
  Click Me
</button>

JSX Supports Nested Components

JSX is not limited to standard HTML elements. React components can also be placed inside JSX.

For example:

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

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

Here:

<Header />

is a React component.

This is one of the most important parts of JSX syntax because React applications are built by composing components together.

JSX Supports Fragments

Fragments allow you to return multiple elements without adding an unnecessary DOM element.

The short syntax is:

<>
  <h1>Hello React</h1>
  <p>Welcome to JSX.</p>
</>

You can also use the full syntax:

<React.Fragment>
  <h1>Hello React</h1>
  <p>Welcome to JSX.</p>
</React.Fragment>

The short syntax is more commonly used when you do not need to provide a key.

Fragments are especially useful when a component needs to return several sibling elements.

JSX Comments

JSX comments use JavaScript comment syntax inside curly braces.

Correct:

function App() {
  return (
    <div>
      {/* Main heading */}
      <h1>Welcome to React</h1>
    </div>
  );
}

HTML comments should not be used directly inside JSX:

<!-- This will cause an error -->

Instead, use:

{/* This is a JSX comment */}

Comments can be useful for explaining complicated sections of a component, although unnecessary comments should generally be avoided when the code is already clear.

JSX Supports Expressions in Multiple Locations

JavaScript expressions can appear in several places within JSX.

For example:

function App() {
  const name = "Alex";
  const image = "/profile.jpg";
  const isOnline = true;

  return (
    <div>
      <h1>{name}</h1>

      <img
        src={image}
        alt={name}
      />

      {isOnline && (
        <p>Online now</p>
      )}
    </div>
  );
}

Here, JavaScript expressions are used in:

Text
↓
{name}

Attribute
↓
src={image}

Conditional UI
↓
{isOnline && ...}

This ability makes JSX highly flexible.

JSX Naming Conventions

React follows JavaScript naming conventions for many JSX properties and events.

For example:

className
onClick
onChange
tabIndex
htmlFor
readOnly
maxLength

These names commonly use camelCase.

React component names conventionally use PascalCase:

<Header />
<ProductCard />
<UserProfile />
<NavigationBar />

Following these conventions makes React code easier to read and maintain.

JSX Can Be Stored in Variables

JSX can be assigned to JavaScript variables.

For example:

const heading = <h1>Welcome to React</h1>;

function App() {
  return (
    <div>
      {heading}
    </div>
  );
}

You can also conditionally assign JSX:

const message = isLoggedIn
  ? <p>Welcome back!</p>
  : <p>Please log in.</p>;

Then:

return (
  <div>
    {message}
  </div>
);

This demonstrates that JSX can be treated as a value inside JavaScript.

JSX Can Be Returned From Functions

A function can return JSX.

function getMessage() {
  return <p>Welcome to React!</p>;
}

function App() {
  return (
    <div>
      {getMessage()}
    </div>
  );
}

This works because the function returns a JSX value that React can render.

However, in larger applications, reusable UI is usually better represented by components when appropriate.

JSX Syntax for Lists

You can use JavaScript array methods to generate JSX.

function App() {
  const skills = [
    "HTML",
    "CSS",
    "JavaScript",
    "React"
  ];

  return (
    <ul>
      {skills.map((skill) => (
        <li key={skill}>
          {skill}
        </li>
      ))}
    </ul>
  );
}

The JSX:

<li key={skill}>{skill}</li>

is generated for each item in the array.

The key helps React identify individual elements in a list. You will learn more about keys and list rendering later.

JSX Syntax for Conditional Content

JSX can display content based on conditions.

For example:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && (
        <h1>Welcome back!</h1>
      )}
    </div>
  );
}

You can also use a ternary expression:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

Conditional JSX is widely used in real React applications for authentication states, loading screens, error messages, empty states, permissions, and other dynamic UI situations.

JSX Formatting

JSX can be written on one line when it is simple:

return <h1>Hello React</h1>;

For more complex markup, multiple lines are easier to read:

return (
  <section className="hero">
    <h1>Learn React</h1>
    <p>
      Build modern and interactive applications.
    </p>
    <button>
      Get Started
    </button>
  </section>
);

Consistent indentation makes nested JSX much easier to understand.

Most React projects use automatic formatting tools such as Prettier to keep JSX formatting consistent.

JSX Syntax Rules Cheat Sheet

Rule	Example
Return JSX from a component	return <h1>Hello</h1>
Use one root	<div>...</div>
Use Fragment	<>...</>
Close elements	<img />
Use JavaScript expressions	{name}
Use CSS classes	className="card"
Use camelCase events	onClick={handleClick}
Use components	<Header />
Use JSX comments	{/* Comment */}
Use JavaScript attributes	src={image}
Render arrays	{items.map(...)}
Conditional rendering	{isVisible && <Box />}

Common JSX Syntax Mistakes

Forgetting the Closing Tag

Incorrect:

<p>Hello React

Correct:

<p>Hello React</p>

Forgetting the Self-Closing Slash

Incorrect:

<img src="/logo.png">

Correct:

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

Using class Instead of className

Incorrect:

<div class="card">

Correct:

<div className="card">

Using Lowercase Event Names

Incorrect:

<button onclick={handleClick}>

Correct:

<button onClick={handleClick}>

Forgetting Curly Braces for JavaScript

Incorrect:

<h1>name</h1>

Correct:

<h1>{name}</h1>

Using Quotes Around JavaScript Expressions

Incorrect:

<img src="{imageUrl}" />

Correct:

<img src={imageUrl} />

Returning Multiple Root Elements

Incorrect:

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

Correct:

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

Practical JSX Example

Let’s combine several JSX syntax rules into one component.

function ProductCard() {
  const productName = "React Course";
  const price = 999;
  const imageUrl = "/react-course.jpg";
  const isAvailable = true;

  function handleBuy() {
    console.log("Product selected");
  }

  return (
    <article className="product-card">
      <img
        src={imageUrl}
        alt={productName}
      />

      <h2>{productName}</h2>

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

      {isAvailable ? (
        <button onClick={handleBuy}>
          Buy Now
        </button>
      ) : (
        <p>Currently unavailable</p>
      )}
    </article>
  );
}

export default ProductCard;

This single component demonstrates many JSX syntax concepts:

JSX Feature	Example
JavaScript variable	{productName}
Expression	{price}
JavaScript attribute	src={imageUrl}
CSS class	className="product-card"
Conditional JSX	{isAvailable ? ... : ...}
Event handler	onClick={handleBuy}
Nested elements	<article>...</article>
Component	ProductCard

Understanding these patterns will make it much easier to read real React applications.

Image Placement: JSX Syntax Structure

Place this image after the basic JSX structure section.

Create a clean 16:9 infographic showing:

React Component
       ↓
    return
       ↓
   JSX Element
       ↓
┌─────────────────┐
│ <div>            │
│   <h1>Hello</h1> │
│   <p>Welcome</p> │
│ </div>           │
└─────────────────┘

Highlight the opening tag, content, nested elements, and closing tag.

Caption:
The basic structure of JSX inside a React component.

Alt text:
Basic JSX syntax structure showing nested elements inside a React component

Image Placement: JSX Syntax Rules

Place this infographic after the JSX syntax rules cheat sheet.

Show the most important rules visually:

JSX
│
├── One Root Element
├── Close Every Element
├── Self-Close Empty Elements
├── Use className
├── Use camelCase Events
├── Use {} for JavaScript
└── Use Fragments When Needed

Caption:
Essential JSX syntax rules every React developer should understand.

Alt text:
Essential JSX syntax rules for React components

Image Placement: JSX Expressions and Attributes

Place this visual after explaining JavaScript expressions and JSX attributes.

Show:

const name = "Alex";
const image = "/profile.jpg";

<h1>{name}</h1>

<img
  src={image}
  alt={name}
/>

Visually highlight the curly braces and explain that they represent JavaScript expressions.

Caption:
JavaScript expressions can be used inside JSX content and attribute values.

Alt text:
JavaScript expressions used in JSX content and attributes

Practice Exercise

Create a React component called CourseCard.

The component should contain:

• A course image
• Course title
• Instructor name
• Course price
• Course availability
• A button

Start with:

function CourseCard() {
  const title = "React Development";
  const instructor = "John Smith";
  const price = 1499;
  const isAvailable = true;

  return (
    <article>
      {/* Write your JSX here */}
    </article>
  );
}

export default CourseCard;

Try to use the following JSX features:

JavaScript expressions
JSX attributes
className
Conditional JSX
Event handlers
Nested elements

Then render your component inside App.jsx:

import CourseCard from "./components/CourseCard";

function App() {
  return (
    <main>
      <CourseCard />
    </main>
  );
}

export default App;

Run your application with:

npm run dev

Open the local development URL in your browser and verify that the component renders correctly.

Key Takeaways

JSX syntax provides a structured and readable way to describe React user interfaces. Although JSX looks similar to HTML, it follows JavaScript and React conventions that make it suitable for building dynamic component-based applications.

The most important JSX syntax rules to remember are:

• JSX is normally returned from React components.
• JSX elements must be properly nested.
• Elements must be closed correctly.
• Elements such as <img> and <input> use self-closing syntax.
• A component should return a single root or use a Fragment.
• JavaScript expressions are written inside {}.
• JavaScript values can be used inside JSX attributes.
• CSS classes use className.
• React events use camelCase such as onClick.
• Custom React components use an uppercase naming convention.
• JSX supports nested elements and components.
• JSX can generate lists using JavaScript array methods.
• JSX can display content conditionally.
• JSX comments use {/* ... */}.

A useful mental model is:

React Component
      ↓
JavaScript
      +
JSX
      ↓
Dynamic User Interface

Once you are comfortable with these syntax rules, you will be able to write React components confidently and move on to more powerful concepts such as JSX expressions, JavaScript inside JSX, variables, functions, objects, arrays, attributes, inline styles, fragments, and conditional JSX.