Lesson 2 • Beginner
Components and Props ⚛️
Learn to build reusable UI pieces and pass data between them using props — the foundation of every React application.
What You'll Learn in This Lesson
- • How to create and export function components
- • Passing data with props and destructuring them
- • Default props and the children prop
- • Rendering lists with
map()and keys - • Conditional rendering with ternary and &&
npm create vite@latest my-app -- --template react.1️⃣ Function Components
A React component is simply a JavaScript function that returns JSX. Components must start with a capital letter (PascalCase) — otherwise React treats them as plain HTML elements. Each component should do one thing well.
Try It: Function Components
Create and reuse basic React components
// React Components — Function Components
console.log("=== Function Components ===");
console.log();
// A component is just a function that returns UI
function Greeting() {
return "Hello, World!"; // In React: return <h1>Hello, World!</h1>
}
console.log("function Greeting() {");
console.log(" return <h1>Hello, World!</h1>;");
console.log("}");
console.log();
console.log("Output:", Greeting());
console.log();
// Components can be reused
console.log("=== Reusing Components ===");
console.lo
...2️⃣ Props — Passing Data
Props (short for "properties") are how you pass data from a parent component to a child. They're read-only — a child should never modify its own props. Use destructuring for cleaner code, and set default values for optional props.
Try It: Props
Pass data to components and use default values
// Props — Passing Data to Components
console.log("=== What Are Props? ===");
console.log("Props are like function arguments for components.");
console.log("They let you pass data from parent to child.");
console.log();
// Simulating props
function UserCard(props) {
return `[${props.name} | Age: ${props.age} | Role: ${props.role}]`;
}
console.log("// Component definition:");
console.log("function UserCard({ name, age, role }) {");
console.log(" return (");
console.log(" <div>");
console.
...3️⃣ Children & Composition
The special children prop lets components wrap other content. This is the core of composition — React's preferred pattern over inheritance. Build complex UIs by nesting simple components inside wrapper components.
Try It: Children & Lists
Use the children prop, compose components, and render lists
// Children Prop — Component Composition
console.log("=== The children Prop ===");
console.log("Components can wrap other content using 'children'.");
console.log();
function CardWrapper(props) {
return "╔═══════════════════╗\n║ " + props.children + " ║\n╚═══════════════════╝";
}
console.log("function Card({ children }) {");
console.log(" return (");
console.log(" <div className='card'>");
console.log(" {children}");
console.log(" </div>");
console.log(" );");
console.log("}");
...4️⃣ Conditional Rendering
React gives you multiple ways to show or hide content based on conditions: if/else for complex logic, ternary operators for inline toggling, and the && operator for "show if true" patterns.
Try It: Conditional Rendering
Show different content based on conditions
// Conditional Rendering in React
console.log("=== Conditional Rendering ===");
console.log("Show or hide content based on conditions.");
console.log();
// Method 1: if/else
function StatusBadge(props) {
if (props.isOnline) {
return "🟢 Online";
}
return "⚫ Offline";
}
console.log("// Method 1: if/else");
console.log("function StatusBadge({ isOnline }) {");
console.log(" if (isOnline) return <span>🟢 Online</span>;");
console.log(" return <span>⚫ Offline</span>;");
console.log("}")
...⚠️ Common Mistakes
props.name = "New". Props are read-only.key when mapping. Use unique IDs, not array indices.📋 Quick Reference
| Pattern | Syntax |
|---|---|
| Component | function Name() { return <div />; } |
| Props | function Card({ title, children }) {} |
| Default prop | { color = "blue" } |
| List rendering | {items.map(i => <li key={i.id}>{i.name}</li>)} |
| Conditional | {show && <Modal />} |
🎉 Lesson Complete!
You can now create components, pass props, compose UIs, and render content conditionally. Next, let's make components dynamic with state!
Sign up for free to track which lessons you've completed and get learning reminders.