All Roadmaps›⚛️ React Mastery›Phase 3›Components & Props

Components & Props

0/2 in this phase0/36 across the roadmap

📖 Concept

Components are the building blocks of a React app. Think of them as custom HTML elements.

Function Components: Modern React uses Function Components. They are just JavaScript functions that take an object called Props (short for properties) and return JSX.

Props (Properties): Props are the way you pass data from a parent component to a child component.

  • ReadOnly: A component must never modify its own props. They should be treated as immutable.
  • Unidirectional: Data flows down (Parent -> Child).

Composition over Inheritance: React encourages building complex UIs by combining smaller components. Instead of creating a giant UserDashboard, you create a Sidebar, a Header, and a ContentArea, and then "compose" them together.

Children Prop: The special children prop allows you to pass JSX directly into a component, making "wrapper" components (like Layouts or Cards) possible.

💻 Code Example

codeTap to expand ⛶
1import React from 'react';
2

3// 1. Child Component with Destructured Props
4const Button = ({ label, onClick, variant = 'primary' }) => {
5  const styles = {
6    primary: 'bg-blue-500 text-white',
7    secondary: 'bg-gray-200 text-gray-800',
8    danger: 'bg-red-500 text-white'
9  };
10

11  return (
12    <button 
13      onClick={onClick}
14      className={`px-4 py-2 rounded font-medium ${styles[variant]}`}
15    >
16      {label}
17    </button>
18  );
19};
20

21// 2. Wrapper Component using 'children'
22const Card = ({ title, children }) => {
23  return (
24    <div className="border rounded-lg shadow-sm bg-white overflow-hidden">
25      <div className="px-4 py-2 border-b font-bold bg-gray-50">{title}</div>
26      <div className="p-4">{children}</div>
27    </div>
28  );
29};
30

31// 3. Parent Component Composing the others
32function App() {
33  const handleAction = () => alert('Action triggered!');
34

35  return (
36    <div className="p-10 space-y-6 max-w-2xl mx-auto">
37      <h1 className="text-3xl font-bold">Component Composition</h1>
38      
39      <Card title="Account Settings">
40        <p className="mb-4 text-gray-600">
41          Update your profile information and email preferences here.
42        </p>
43        <div className="flex space-x-2">
44          <Button label="Save Changes" onClick={handleAction} />
45          <Button label="Cancel" onClick={() => {}} variant="secondary" />
46        </div>
47      </Card>
48

49      <Card title="Danger Zone">
50        <p className="mb-4 text-red-600 font-medium">
51          Once you delete your account, there is no going back.
52        </p>
53        <Button 
54          label="Delete Account" 
55          onClick={() => confirm('Are you sure?')} 
56          variant="danger" 
57        />
58      </Card>
59    </div>
60  );
61}
62

63export default App;

🏋️ Practice Exercise

  1. Create a Greeting component that takes a name prop and displays it.
  2. Build a List component that takes an array of items and a renderItem function as props (this is a common pattern called 'Render Props').
  3. Create a Layout component that uses children to wrap every page of your app with a common Header and Footer.
  4. Experiment with 'Prop Drilling': Pass a piece of data through 3 levels of components and notice how tedious it becomes (you'll solve this later with Context).

⚠️ Common Mistakes

  • Trying to change a prop value inside a child component (Props are read-only).

  • Not destructuring props, leading to messy code like 'props.user.name' everywhere.

  • Using PascalCase for prop names (prop names should be camelCase).

  • Forgetting to provide a 'key' when rendering a list of components.

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for Components & Props

← PreviousJSX Deep DiveNext →useState Hook