Reactbeginner8 min read

JSX Basics

Understand JSX, the syntax extension that lets you write HTML-like markup directly inside your JavaScript code.

Learning Goals

Write JSX syntax to define component structure and layout.

Embed dynamic JavaScript expressions directly inside JSX tags.

Apply styling classes using className instead of class.

Follow the single parent element constraint when returning JSX.

The Core Concept

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that looks very similar to HTML. React uses JSX to describe what the user interface should look like. Although it looks like HTML, under the hood it compiles into standard JavaScript function calls (React.createElement).

There are a few key differences between HTML and JSX: first, you must close all tags (even self-closing ones like <img /> or <br />). Second, you use className instead of class for CSS styling, because class is a reserved keyword in JavaScript. Third, you can write any JavaScript expression inside JSX by wrapping it in curly braces {}.

Visual guide

React concept flow

A simple original diagram to connect the lesson idea with real project flow.

1Concept

2Example

3Output

4Mistakes

5Practice

Code & Implementation

react

export default function Profile() {
  const username = "Sophia";
  const avatarUrl = "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150";

  return (
    <div className="card">
      {/* 1. Using Javascript variable in JSX */}
      <h2>User Profile: {username}</h2>
      
      {/* 2. Self-closing tag with dynamic attribute */}
      <img src={avatarUrl} alt={username} style={{ borderRadius: '50%' }} />
      
      {/* 3. Evaluating math expression */}
      <p>Joined: {2026 - 2} years ago</p>
    </div>
  );
}

Expected Output

UI preview:
- Card with heading 'User Profile: Sophia'
- Avatar image with rounded borders
- Text 'Joined: 4 years ago'

Dynamic Product Card

Hands-on practice task

Required for Mastery

The Challenge

Create a React component that displays a product card. Use variables for title, price, and discounted status. If the discount is active, calculate and print the discounted price inside the card.

Helpful Hints

•Declare variables title = "Running Shoes", price = 100, and discount = 20.
•Inside JSX, write {price - discount} to display the price.

Quick Knowledge Check

Why can't I return two adjacent <div> elements from a component?

A function can only return a single value. In React, JSX compiled expressions require a single parent node. Use a Fragment (<></>) to group items without adding extra divs to the HTML DOM.

What are double curly braces {{}} used for in JSX?

The outer braces start the Javascript expression, and the inner braces declare a standard Javascript object (commonly used for inline style objects).

Continue Learning

Next steps after this lesson

Previous lessonReact Setup Next lessonComponents Dynamic Product CardCreate a React component that displays a product card. Use variables for title, price, and discounted status. If the discount is active, calculate and print the discounted price inside the card.Reading Time EstimatorUse this free tool while practicing the lesson.Free Developer Learning HubExplore coding tutorials, tools, projects, automation guides, and resume resources.

Practice task

Create a React component that displays a product card. Use variables for title, price, and discounted status. If the discount is active, calculate and print the discounted price inside the card.

Ready to take action?

Supercharge your career workflows!

Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.

Browse 80+ Free Tools Build Professional Resume