Chapter 1: Introduction to React
1. What is React & why should YOU use it? React is a JavaScript library created by Facebook (now Meta) in 2013. Its only job is to help you build beautiful, fast, interactive user...
Category: React
Chapter 2: JSX Basics
1. What is JSX actually? JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that lets you write HTML-like code inside JavaScript. Important: JSX is NOT HTML — it’s just a nicer...
Chapter 3: Components in React
Components in React — this is where React really starts to feel powerful and fun. Today we’re going to cover: Functional vs Class components Creating and nesting components Component composition Exporting & importing components...
Chapter 4: Props
1. What are Props? (The most important concept) Props = Properties They are read-only data that a parent component passes down to a child component. Analogy: Imagine a toy factory that makes customizable teddy...
Chapter 5: State & useState Hook
1. What is State in React? State is memory that a component can remember between renders. It’s the data that can change over time and when it changes → React automatically re-renders the component...
Chapter 6: Handling Events
1. Event Handling in React – The Basics In plain HTML/JavaScript, we write event handlers like this: HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<button onclick="handleClick()">Click me</button> <script> function handleClick() { alert("Clicked!"); } </script> |
In React → we do it differently (and much cleaner): We use camelCase event names:...
Chapter 7: Conditional Rendering
1. What is Conditional Rendering? Conditional rendering means showing different JSX based on a condition. In React, you never use if statements directly inside JSX (because JSX is not JavaScript code block). Instead, we...
Chapter 8: Rendering Lists & Keys
We’ll go through everything step by step, like I’m sitting next to you in Mumbai showing you live examples. 1. Why We Use .map() to Render Lists In React, you cannot just write a...
Chapter 9: Forms in React
Almost every real app has forms: login, signup, search, comments, checkout, contact us… you name it. Today we’ll learn how to handle forms the React way — correctly, efficiently, and in a way that...
Chapter 10: Lifting State Up
Once you master this, you’ll stop fighting with props drilling and your components will feel much more organized. Let’s go step-by-step, like I’m sitting next to you in Mumbai with our laptops open, chai...
