What Is React & JSX?

JSX is one of the most important concepts you will learn when working with React. It allows you to write HTML-like markup directly inside JavaScript code, making it much easier to describe what a React component should display.

At first, JSX may look unusual because it combines JavaScript with syntax that resembles HTML. However, JSX is not HTML, and it is not a completely separate programming language. It is a syntax extension for JavaScript that React developers use to describe user interfaces in a readable and expressive way.

For example, a React component can return JSX like this:

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

The markup inside the return statement is JSX.

Instead of creating HTML separately and manually connecting it with JavaScript, JSX allows developers to describe the UI directly alongside the component’s logic.

Why Is JSX Used in React?

React applications are made up of components, and each component needs a way to describe what should appear on the screen.

JSX provides a convenient syntax for doing this.

Without JSX, you can create React elements using JavaScript functions:

const heading = React.createElement(
  "h1",
  null,
  "Welcome to React"
);

Although this works, it becomes difficult to read when the interface becomes more complex.

With JSX, the same UI can be written as:

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

The JSX version is much easier to understand because it resembles the structure of the resulting interface.

JSX Makes UI Code Easier to Read

Consider a more complex interface:

function Profile() {
  return (
    <section>
      <img src="/profile.jpg" alt="User profile" />
      <div>
        <h2>John Smith</h2>
        <p>Frontend Developer</p>
        <button>View Profile</button>
      </div>
    </section>
  );
}

The structure of the user interface is immediately visible.

You can see the section, image, heading, paragraph, and button directly in the component.

This makes JSX particularly useful when building component-based interfaces.

JSX Is Not HTML

One of the most common beginner mistakes is assuming that JSX is simply HTML written inside JavaScript.

JSX looks similar to HTML, but there are important differences.

For example, HTML uses:

<div class="container">

JSX uses:

<div className="container">

HTML uses:

<label for="email">

JSX uses:

<label htmlFor="email">

JSX follows JavaScript naming conventions for many attributes, so some familiar HTML attributes have different names.

HTML vs JSX

HTML	JSX
class	className
for	htmlFor
onclick	onClick
onchange	onChange
tabindex	tabIndex
readonly	readOnly
maxlength	maxLength

JSX also allows JavaScript expressions to be embedded directly into markup, which is one of its most powerful features.

JSX Allows JavaScript Expressions

One of the biggest advantages of JSX is that you can use JavaScript expressions inside it.

JavaScript expressions are placed inside curly braces:

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

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

The browser will display:

Hello, Arafat!

The curly braces tell JSX that the content inside them should be evaluated as JavaScript.

Using Variables in JSX

You can use variables inside JSX:

function App() {
  const title = "Learn React";
  const description = "Build modern user interfaces.";

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

This makes components dynamic because the displayed content can be generated from JavaScript data.

Using Expressions in JSX

You can also perform JavaScript expressions inside JSX.

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

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

The expression:

{price * quantity}

is evaluated by JavaScript before the resulting value is displayed.

The output will be:

Total: ₹1000

What Can You Put Inside JSX Curly Braces?

Curly braces can contain JavaScript expressions such as:

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

For example:

function App() {
  const user = {
    name: "Alex",
    age: 25
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

You can also call functions:

function getMessage() {
  return "Welcome to React!";
}

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

JSX Supports Conditional Rendering

JavaScript conditional expressions can be used inside JSX.

A common approach is the ternary operator:

function App() {
  const isLoggedIn = true;

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

If isLoggedIn is true, React displays:

Welcome back!

Otherwise, it displays:

Please log in.

Conditional rendering becomes extremely important when building real applications because interfaces often need to display different content depending on application state or user information.

JSX Supports JavaScript Logical Operators

You can also use the logical AND operator to conditionally display content.

function App() {
  const isAdmin = true;

  return (
    <div>
      {isAdmin && <button>Admin Dashboard</button>}
    </div>
  );
}

If isAdmin is true, the button is displayed.

If it is false, the button is not rendered.

This pattern is commonly used for simple conditional UI.

JSX Requires a Single Parent

A React component must return a single JSX element at the top level.

For example, this is valid:

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

The <div> acts as the single parent element.

This is not valid:

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

There are two sibling elements at the top level.

Using a Fragment

You do not always need to add an extra <div> just to create a parent.

React provides Fragments for grouping elements without adding an additional DOM element.

You can use the short syntax:

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

The:

<>

and:

</>

are shorthand syntax for a React Fragment.

Fragments are useful when you want to return multiple elements without adding unnecessary elements to the HTML structure.

JSX Elements Must Be Properly Closed

JSX follows XML-like rules, so elements must be properly closed.

For example:

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

The <img> element uses the self-closing syntax:

/>

Similarly:

<input type="text" />

is valid JSX.

For elements with content, use an opening and closing tag:

<p>Hello React</p>

Incorrect JSX:

<img src="/logo.png">

Correct JSX:

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

This is an important difference beginners should remember when moving from HTML to JSX.

JSX Uses className Instead of class

One of the first JSX differences you will encounter is className.

In HTML:

<div class="card">

In JSX:

<div className="card">

For example:

function ProductCard() {
  return (
    <div className="card">
      <h2>React Course</h2>
      <p>Learn React from beginner to advanced.</p>
    </div>
  );
}

You can then style the class using CSS:

.card {
  padding: 20px;
  border-radius: 12px;
}

JSX Attributes

JSX supports attributes similar to HTML, but JavaScript values can also be assigned to them.

For example:

const imageUrl = "/images/react-logo.png";

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

Here, src receives the value of the JavaScript variable imageUrl.

When using a JavaScript expression as an attribute value, use curly braces:

<img src={imageUrl} />

Do not use:

<img src="{imageUrl}" />

The second example treats {imageUrl} as a literal string rather than a JavaScript expression.

String Attributes

Regular strings can be written inside quotation marks:

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

JavaScript Attributes

JavaScript expressions use curly braces:

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

You can also use a variable:

const isDisabled = false;

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

JSX Can Render Images

Images can be displayed using JSX just like HTML, but JavaScript variables can be used for dynamic image sources.

function App() {
  const logo = "/images/react-logo.png";

  return (
    <img
      src={logo}
      alt="React logo"
    />
  );
}

You can also import images from the src/assets directory in a Vite React project:

import logo from "./assets/react-logo.png";

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

This approach allows Vite to process the imported asset as part of the application’s build.

JSX Can Render Lists

JavaScript array methods can be used with JSX.

For example:

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

  return (
    <ul>
      {technologies.map((technology) => (
        <li key={technology}>
          {technology}
        </li>
      ))}
    </ul>
  );
}

Here, the map() method creates a <li> element for each item in the array.

This pattern becomes extremely important when building interfaces such as:

• Product lists
• User lists
• Navigation menus
• Notifications
• Search results
• Comments
• Dashboard tables

You will explore lists and keys in greater detail later.

JSX Can Contain Nested Elements

JSX allows elements to be nested just like HTML.

function App() {
  return (
    <main>
      <section>
        <h1>Learn React</h1>
        <p>Build modern web applications.</p>
      </section>

      <section>
        <h2>What You Will Learn</h2>
        <ul>
          <li>Components</li>
          <li>Props</li>
          <li>State</li>
          <li>Hooks</li>
        </ul>
      </section>
    </main>
  );
}

This nested structure makes it possible to describe complex user interfaces within a component.

JSX and JavaScript Work Together

JSX becomes particularly powerful because it allows UI markup and JavaScript logic to work together.

Consider:

function UserProfile() {
  const user = {
    name: "Sarah",
    role: "Frontend Developer",
    isOnline: true
  };

  return (
    <section>
      <h2>{user.name}</h2>
      <p>{user.role}</p>

      {user.isOnline && (
        <span>Online</span>
      )}
    </section>
  );
}

The JSX describes the interface, while JavaScript provides the data and logic.

This combination is a major reason React components are so useful for building dynamic interfaces.

How JSX Is Transformed

Browsers do not directly execute JSX syntax.

JSX must first be transformed into regular JavaScript that the browser can execute.

For example:

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

is transformed conceptually into a React element creation call.

Modern React tooling and compilers handle this transformation during development and build processes.

You do not normally need to perform this transformation manually.

JSX Transformation Flow

The process can be visualized as:

JSX
  ↓
JavaScript Transformation
  ↓
React Elements
  ↓
React Rendering
  ↓
Browser DOM
  ↓
User Interface

This is why tools such as Vite are important in a React development environment. They process your source files and prepare the application for development and production.

JSX vs HTML

Although JSX resembles HTML, understanding the differences will prevent many common errors.

Feature	HTML	JSX
CSS class	class	className
Label association	for	htmlFor
Events	onclick	onClick
JavaScript values	Not embedded this way	{expression}
Self-closing elements	Often optional in HTML	Required for JSX elements such as <img />
Multiple root elements	Normal	Use a parent or Fragment
JavaScript logic	Separate from markup	Can be embedded using expressions
Component syntax	Not applicable	<Component />

Common JSX Mistakes

Using class Instead of className

Incorrect:

<div class="container">

Correct:

<div className="container">

Forgetting to Close Elements

Incorrect:

<img src="/logo.png">

Correct:

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

Using Multiple Root Elements

Incorrect:

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

Correct:

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

Putting JavaScript Variables in Quotes

Incorrect:

<h1>"{name}"</h1>

Correct:

<h1>{name}</h1>

Quotes turn the value into text, while curly braces tell JSX to evaluate a JavaScript expression.

Using JavaScript Statements Directly Inside JSX

JSX accepts JavaScript expressions, but not arbitrary statements directly inside curly braces.

For example, this does not work:

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

Instead, use a ternary expression:

{
  isLoggedIn
    ? <p>Welcome</p>
    : <p>Please log in</p>
}

Or perform more complex logic before the return statement.

Practical JSX Example

Let’s create a small profile card using several JSX concepts together.

function ProfileCard() {
  const name = "Alex Johnson";
  const role = "Frontend Developer";
  const isAvailable = true;

  return (
    <article className="profile-card">
      <img
        src="/profile.jpg"
        alt={`${name} profile`}
      />

      <h2>{name}</h2>

      <p>{role}</p>

      {isAvailable && (
        <span>Available for work</span>
      )}

      <button>
        View Profile
      </button>
    </article>
  );
}

export default ProfileCard;

This example demonstrates several JSX concepts:

• JavaScript variables
• JSX expressions
• className
• Image attributes
• Template literals
• Conditional rendering
• Nested elements
• React components

The component is still a JavaScript function, but JSX makes its user interface structure easy to understand.

Image Placement: JSX Basics

Place this visual after introducing JSX and explaining that JSX combines JavaScript with UI markup.

Create a 16:9 infographic showing:

JavaScript
     +
JSX Markup
     ↓
React Component
     ↓
User Interface

Include a small code example such as:

const name = "Alex";

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

Caption:
JSX allows React developers to combine JavaScript expressions with HTML-like UI markup.

Alt text:
JSX combining JavaScript expressions with HTML-like markup in React

Image Placement: JSX Expressions

Place this visual after the section explaining curly braces.

Create a visual showing:

const name = "Alex";

<h1>Hello, {name}!</h1>

Highlight:

{name}
   ↓
JavaScript expression

Caption:
Curly braces allow JavaScript expressions to be used directly inside JSX.

Alt text:
JavaScript expression inside JSX using curly braces

Image Placement: HTML vs JSX

Place this comparison image after the HTML vs JSX table.

Create a two-column comparison:

HTML                    JSX

class                   className
onclick                 onClick
for                     htmlFor

<div class="box">      <div className="box">

Use clear visual differences and keep the text minimal.

Caption:
JSX resembles HTML but uses JavaScript-friendly syntax for attributes and expressions.

Alt text:
Comparison of HTML and JSX syntax in React

Image Placement: JSX Transformation

Place this diagram after the JSX transformation section.

Show the flow:

JSX
 ↓
Compiler / Build Tool
 ↓
JavaScript
 ↓
React
 ↓
Browser
 ↓
User Interface

Use a clean developer-style 16:9 infographic with arrows and small code snippets.

Caption:
JSX is transformed into JavaScript before React renders the interface in the browser.

Alt text:
JSX transformation from source code to JavaScript and browser interface

JSX Cheat Sheet

Keep this quick reference available while learning React.

JSX Requirement	Example
JavaScript expression	{name}
CSS class	className="card"
Click event	onClick={handleClick}
Image	<img src={image} alt="Logo" />
Fragment	<>...</>
Component	<Header />
Conditional UI	{isLoggedIn && <Dashboard />}
Ternary	{isAdmin ? <Admin /> : <User />}

Practice Exercise

Create a React component called StudentCard.

The component should display:

• Student name
• Course name
• Learning status
• Profile image
• A button

Start with:

function StudentCard() {
  const name = "Your Name";
  const course = "React Development";
  const isLearning = true;

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

export default StudentCard;

Try to use:

{name}
{course}

and conditionally display a message when isLearning is true.

For example:

{isLearning && (
  <p>Currently learning React</p>
)}

This exercise will help you become comfortable with JSX expressions, variables, attributes, and conditional rendering.

Key Takeaways

JSX provides a readable way to describe the user interface of React components while keeping UI structure close to the JavaScript logic that controls it.

The most important concepts to remember are:

• JSX is a syntax extension for JavaScript.
• JSX looks similar to HTML but is not HTML.
• React components commonly return JSX.
• JavaScript expressions can be embedded using curly braces.
• JSX uses className instead of class.
• JSX attributes can receive JavaScript expressions.
• Elements must be properly closed.
• Multiple top-level elements can be grouped using a Fragment.
• JSX can be used for conditional rendering.
• JSX can be used to render lists from JavaScript arrays.
• JSX is transformed into JavaScript before it runs in the browser.

A useful way to think about JSX is:

JavaScript
     +
UI Markup
     ↓
    JSX
     ↓
React Component
     ↓
User Interface

Once you understand JSX, React components become much easier to read and write because you can describe both the structure of the interface and the JavaScript data that controls it in the same component.

The next concepts build directly on JSX, especially JavaScript expressions, props, conditional rendering, lists, and event handling.