JSX Intro — Complete Guide

JSX Intro — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 8/7/2026

On this page

React.js Tutorial · Lesson 6 of 100

JSX Intro

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Learn by example · ~6 min · Module 1: React Basics & Setup

What is this?

JSX lets you write HTML-like tags inside JavaScript. It looks strange at first, but it is how almost every React app is written. Your editor shows it in one file — logic and layout together — which is easier to follow than jumping between files.

Why should you care?

You could build React without JSX, but you would write long, hard-to-read code. JSX is the friendly syntax beginners see in every tutorial and job codebase.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

function Welcome() {
  const name = 'Ravi';
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
    </div>
  );
}

Run Example »

Edit the code and click Run to see the result update live.

Code

Result

What happened?

Use className instead of class.
Put JavaScript expressions inside curly braces { }.
The return must have one parent element (or use a Fragment <>).

Try it yourself

Add a variable and show it inside { } in JSX.
Try className="title" on a div.
Wrap multiple siblings in <> ... .
Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.