Components & Props

Building Blocks of React

💡 Component, EK LEGO BLOCK hai — REUSABLE, SELF-CONTAINED, aur, DUSRE BLOCKS ke SAATH, COMBINE hoke, EK, BADA, STRUCTURE (POORI, APPLICATION) BANATA hai. Props, EK LEGO BLOCK ko, DIYE, GAYE, "CUSTOM INSTRUCTIONS" hain (jaise, COLOR, SIZE) — BLOCK, KHUD, DECIDE NAHI karta, PARENT, BATATA hai.

Component, EK, JavaScript FUNCTION hai, JO, JSX RETURN karta hai — REACT APPLICATIONS, COMPONENTS ke, TREE SE, BANI, HOTI, HAIN. Component NAAM, HAMESHA, CAPITAL LETTER SE, SHURU HOTA hai (jaise, Greeting), TAAKI, React, ISE, EK, HTML TAG SE, DIFFERENTIATE, KAR SAKE.

Props (Properties), PARENT COMPONENT SE, CHILD COMPONENT KO, DATA, PASS KARNE, KA, WAY hain — READ-ONLY hain (CHILD, PROPS, ko, MODIFY, NAHI, KAR, SAKTA). Props, FUNCTION ARGUMENTS jaise hi hain — COMPONENT, INPUT LETA hai, aur, JSX, OUTPUT DETA hai.

function UserCard({ name, age, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
}

// Usage — parent, props, PASS karta hai:
function App() {
  return <UserCard name="Aarav" age={22} avatar="/aarav.jpg" />;
}

🧩

Component, EK LEGO BLOCK hai — REUSABLE, SELF-CONTAINED, aur, DUSRE BLOCKS ke SAATH, COMBINE hoke, EK, BADA, STRUCTURE (POORI, APPLICATION) BANATA hai. Props, EK LEGO BLOCK ko, DIYE, GAYE, "CUSTOM INSTRUCTIONS" hain (jaise, COLOR, SIZE) — BLOCK, KHUD, DECIDE NAHI karta, PARENT, BATATA hai.

1 / 2

⚡ झट से Recap

Component = JavaScript function, JO, JSX return karta hai — naam, CAPITAL letter se
Props = parent se, child ko, data pass karne ka, READ-ONLY way
Destructuring se, props, EASILY, ACCESS kiye ja sakte hain

इस page में (2 subtopics)

Default, PARAMETER, VALUES (ES6, FEATURE) SE, PROPS, KI, DEFAULT, VALUES, DI, JA, SAKTI, HAIN — jaise, function Button({ variant = "primary" }) — AGAR, PARENT, variant, PASS, NAHI, KARTA, "primary", USE, HOGA.

function Button({ variant = "primary", children }) {
  return <button className={variant}>{children}</button>;
}

TypeScript, USE, NA, KARNE, PAR, PropTypes, LIBRARY, SE, PROPS, KA, RUNTIME, TYPE, CHECKING, KIYA, JA, SAKTA, hai — DEVELOPMENT, MEIN, WARNING, DETA, hai, AGAR, GALAT, TYPE, KA, PROP, PASS, HUA. MODERN, PROJECTS, MEIN, TypeScript, ZYAADA, COMMON, hai.

💡Tip: TypeScript, COMPILE-TIME, PAR, TYPE, ERRORS, PAKADТA, hai — PropTypes, SIRF, RUNTIME, PAR, (JAB, COMPONENT, ACTUALLY, RENDER, HO).

← पिछला📝 JSX Syntax अगला →🌳 Virtual DOM & Rendering

Code10x

Components & Props

Default Props Values

PropTypes for Runtime Type Checking