Props Destructuring — Complete Guide
Props Destructuring — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.
On this page
React.js Tutorial · Lesson 12 of 100
JSX
Beginner → Intermediate → Advanced → Professional
Beginner · 1 — Foundations · ~12 min read · Module 2: JavaScript & React Fundamentals
Introduction
This lesson is part of the beginner section. We explain JSX slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. 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. 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.
JSX appears in almost every file you will write. Once it clicks, later lessons (hooks, routing, APIs) become much easier.
When will you use this?
You use this in every component you write from your first app to your tenth year on the job.
- Product pages, login forms, and todo lists all use components, props, and state.
- When a user types in a search box, React state holds the text and filters a list.
Real-world: Practo appointment booking UI
Practo booking screen mixes HTML structure with JavaScript expressions — doctor name, slot time, and fee come from variables, not hard-coded text.
Production-style code
function AppointmentSlot({ doctor, slot, fee, onBook }) {
const isEvening = slot.hour >= 17;
return (
<div className="slot-card">
<h3>{doctor.name}</h3>
<p>{doctor.specialty}</p>
<time dateTime={slot.iso}>{slot.label}</time>
<p className="fee">Consultation: ₹{fee}</p>
{isEvening && <span className="badge">Evening slot</span>}
<button type="button" onClick={() => onBook(slot.id)}>Book</button>
</div>
);
}What happens in production: Designers hand off Figma frames; developers translate them to JSX with dynamic data — one language for structure and logic.
Lesson example (start here)
Copy this smaller example first. Once it works, compare it with the real-world code above.
function Welcome() {
const name = 'Ravi';
return (
<div className="card">
<h1>Hello, {name}!</h1>
</div>
);
}Line-by-line walkthrough
| Code | What it means |
|---|---|
function Welcome() { | Defines a function — often a component or event handler. |
const name = 'Ravi'; | Part of the JSX example — read it together with the lines before and after. |
return ( | Sends UI or a value back to whoever called this function. |
<div className="card"> | JSX tag — a UI element or custom component on the page. |
<h1>Hello, {name}!</h1> | JSX tag — a UI element or custom component on the page. |
</div> | Part of the JSX example — read it together with the lines before and after. |
); | Closes a block started by { or ( above. |
} | Closes a block started by { or ( above. |
How it works (big picture)
- Use className instead of class.
- Put JavaScript expressions inside curly braces { }.
- The return must have one parent element (or use a Fragment <>).
Do this on your computer
- Add a variable and show it inside { } in JSX.
- Try className="title" on a div.
- Wrap multiple siblings in <> ... .
- Read the real-world section and name which part of the app uses this topic.
- Run the example locally and confirm the same behavior in the browser.
- Change one value in the example (text, initial state, or URL) and predict what will happen before you save.
Experiments — try changing this
- 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.
Remember
JSX = HTML-like syntax in JavaScript. Use { } for dynamic values and className for CSS classes.
Common questions
Can I use JavaScript without JSX?
Yes, but JSX is standard in React apps.
How long should I spend on JSX?
Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.
What if I get stuck on JSX?
Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.
Where is JSX used in real jobs?
See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.