JSX Basics
TechIdea Experts
Author & Reviewer
Understand JSX, the syntax extension that lets you write HTML-like markup directly inside your JavaScript code.
Learning Goals
Video Tutorial Coming Soon
Our expert team is currently recording the visual guide for JSX Basics.
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.
Code & Implementation
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
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?
What are double curly braces {{}} used for in JSX?
Continue Learning
Next steps after this lesson
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.
Supercharge your career workflows!
Discover free online utilities to format data, build job applications, and automate your productivity routine with TechIdea.
🎓 Why Trust This Course?
This curriculum was designed by senior software engineers to simulate real-world production environments. We focus on practical, project-based learning instead of abstract theory.
- ✓ Content Review Date: 7/9/2026
- ✓ Official Contact: contact.techideaonline@gmail.com
- ✓ Editorial Policy: Strict peer-review by industry professionals.
Editorial Integrity
Fact CheckedWritten By
TechIdea Learning TeamSenior Developer and Technical Instructor building enterprise-grade learning resources. View full profile.
Reviewed By
TechIdea Editorial Board
Technical accuracy verified by our expert engineering panel.
Why Trust TechIdea?