BASIC REACT

⚛️ React.js – Core Fundamentals Notes

Virtual DOM, Components, JSX, Props, State Hook (useState) aur Event Handling ka complete quick guide.

1️⃣ React Kya Hai?

Definition: React ek declarative aur component-based JavaScript UI library hai jiska use fast, dynamic aur modern single-page web applications (SPAs) banane ke liye hota hai.

Meta (Facebook) Innovation: Isse 2013 me Jordan Walke ne introduce kiya tha. Traditional dynamic pages me DOM direct update hone par lag aata tha; React ne Virtual DOM ke zariye updates ko ultra-fast bana diya.

• Single Page Application (SPA): Page reload hue bina content instantly switch aur update ho jata hai.
• Component-Driven: Poore web page ko chote-chote independent parts (Header, Card, Footer) me tod diya jata hai.

---

2️⃣ React Ke Core Features

• Virtual DOM (VDOM): Real DOM ki lightweight in-memory copy hoti hai. Jab bhi data badalta hai, React diffing algorithm ke zariye sirf badle hue hisse ko hi repaint karta hai, poore page ko nahi.
• JSX (JavaScript XML): JavaScript code ke andar hi direct HTML-like syntax likhne ki power.
• One-Way Data Binding: Data hamesha ek direction me (Parent se Child component ki taraf) flow hota hai, jisse state predictable rehti hai.
• Component Reusability: Ek component bana kar hazaron baar alag-alag data ke saath render kiya ja sakta hai.

---

3️⃣ React Project Setup

🔹 Tarika 1: Modern Vite Build Setup (Industry Standard)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

🔹 Tarika 2: Legacy Create-React-App (CRA)

npx create-react-app my-app
cd my-app
npm start

---

4️⃣ JSX (JavaScript XML)

Concept: JSX HTML jaisa dikhta hai, par background me compilation ke dauran yeh regular React.createElement() function calls me badal jata hai.

function App() {
  const platform = "React Masterclass";
  return (
    <div className="hero">
      <h1>Welcome to {platform}</h1>
      <p>Curly braces &#123;&#125; ke andar hum dynamic JS expressions likh sakte hain.</p>
    </div>
  );
}

JSX Golden Rules:

1. HTML class ki jagah className likhte hain (kyunki class JS ka reserved keyword hai).
2. Har self-closing tag ko close karna lazmi hai: <img />, <input />, <br />.
3. Component se return karte waqt sabhi elements ek single parent wrapper ya fragment <> ... </> me hona chahiye.

---

5️⃣ React Components

React do tarike ke components support karta hai (par modern React me 100% Functional Components use hote hain):

Component Type	Syntax Preview	Current Industrial Status
Functional Component	function Card() { return <h2>Title</h2>; }	Recommended (Clean, fast, uses Hooks)
Class Component	class Card extends React.Component { render() {} }	Legacy (Purane projects me maintenance ke liye)

---

6️⃣ Props (Properties)

Definition: Props ke zariye parent component apne child component ko custom data pass karta hai. Props strictly read-only (immutable) hote hain.

// Child Component
function UserBadge(props) {
  return <span className="badge">Welcome back, {props.userName}!</span>;
}

// Parent Component passing props
function Dashboard() {
  return (
    <div>
      <UserBadge userName="Rahul Sharma" />
      <UserBadge userName="Priya Verma" />
    </div>
  );
}

---

7️⃣ State & useState Hook

Definition: State component ki personal memory hoti hai. Jab bhi state variable update hota hai, React automatically component ko dobara re-render karke updated UI dikhata hai.

import { useState } from 'react';

function CounterApp() {
  // count = current value, setCount = state update function
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Live State Counter Demo (Pure HTML/JS Simulation)

Current Count: 0

Feature	Props	State
Origin	Parent component se pass hota hai	Component ke andar khud create hota hai
Mutability	Immutable (Read-only)	Mutable (Setter function ke sath change hota hai)

---

8️⃣ Event Handling

React me event handlers camelCase me likhe jaate hain aur function string ke bajay direct reference ke roop me pass kiye jate hain:

function ActionBanner() {
  function handleAlert() {
    alert("React Synthetic Event Triggered!");
  }

  return (
    <button onClick={handleAlert}>
      Trigger Event
    </button>
  );
}

• onClick → Button click handle karne ke liye.
• onChange → Input box me user typing track karne ke liye.
• onSubmit → Form submit hone par e.preventDefault() ke sath trigger karne ke liye.