React · Core Concepts

Components and Props

Master React components and props. Learn how to create reusable building blocks and pass data between them effectively.

Find videos you like?

Save to resource drawer for future reference!

Understanding React Components

Learn the fundamental building blocks of React applications

What is a Component?

A React component is a reusable piece of UI that combines HTML structure and styling. Think of components as building blocks - like LEGO bricks - that you can combine to create complex interfaces.

Components are JavaScript functions that return JSX (HTML-like code). They encapsulate their own structure and can be reused throughout your application with different data.

Function Components (Modern)

function Welcome() {
  return <h1>Hello!</h1>;
}

• Simple and clean syntax
• Modern React standard
• Easy to read and maintain

Traditional HTML

<div>
  <h1>Hello!</h1>
</div>

• Static structure
• Not reusable
• No data passing

Key Insight

Components make your code reusable and maintainable. Write once, use everywhere with different data!

Understanding Props

Learn how to pass data to components using props

What are Props?

Props (short for "properties") are how you pass data from a parent component to a child component. Think of props as function parameters - they allow components to receive and display different data.

Props are read-only, meaning a component cannot modify the props it receives. This ensures predictable data flow from parent to child components.

How Props Flow

Parent Component

Child Component

Data flows in one direction: from parent to child

Remember

Props are read-only! Components receive props and use them, but cannot change them.

Your First Props

See props in action with a simple greeting component

Destructuring Props

Write cleaner code by destructuring props

Cleaner Code with Destructuring

Instead of writing props.name repeatedly, you can destructure props directly in the function parameters. This makes your code cleaner and more readable.

Without Destructuring

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.role}</p>
      <span>{props.avatar}</span>
    </div>
  );
}

Repetitive props. prefix

With Destructuring ✨

function UserCard({ name, role, avatar }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
      <span>{avatar}</span>
    </div>
  );
}

Clean and readable!

Multiple Props in Action

Create rich components by passing multiple props

Conditional Rendering & CSS

Dynamic styling and conditional rendering with inline to external CSS conversion

Default Props

Provide fallback values when props aren't passed

Setting Default Values

Sometimes you want a prop to have a default value if it's not provided. You can use default parameters in destructuring to set fallback values, making your components more flexible.

function Button({ text = "Click me", color = "blue" }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

// Usage examples:
<Button />                    // Uses both defaults
<Button text="Submit" />       // text="Submit", color="blue"
<Button text="Delete" color="red" />  // Both custom

Pro Tip

Default props make your components more robust and prevent errors when props are missing!

Props Best Practices

Follow these guidelines to use props effectively

✅ Do This

•Use descriptive prop names like userName not x
•Destructure props for cleaner code
•Provide default values when appropriate
•Keep props simple and focused
•Use meaningful component names

❌ Don't Do This

•Don't modify props - they're read-only!
•Don't pass too many props to one component
•Don't use unclear names like data1, data2
•Don't create deeply nested prop structures
•Don't repeat prop names in the same component

Golden Rule

Components should be small, focused, and reusable. Props are the key to making components flexible!

Key Takeaways

What you've learned about components and props

Components

• Reusable building blocks
• Functions that return JSX
• Can accept data via props
• Make code maintainable

Props

• Pass data from parent to child
• Read-only (cannot be modified)
• Can have default values
• Make components flexible

Previous Topic

JavaScript in JSX

Use JavaScript expressions in JSX, handle events, render lists, conditionally render content, and apply styles dynamically.

Next Topic

Conditional Rendering

Master conditional rendering techniques: if statements, ternary operators, logical AND, and rendering patterns.

Ask a Question

Have a question about Components & Props? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Core Concepts

Components and Props

Master React components and props. Learn how to create reusable building blocks and pass data between them effectively.

Find videos you like?

Save to resource drawer for future reference!

Understanding React Components

Learn the fundamental building blocks of React applications

What is a Component?

A React component is a reusable piece of UI that combines HTML structure and styling. Think of components as building blocks - like LEGO bricks - that you can combine to create complex interfaces.

Components are JavaScript functions that return JSX (HTML-like code). They encapsulate their own structure and can be reused throughout your application with different data.

Function Components (Modern)

function Welcome() {
  return <h1>Hello!</h1>;
}

• Simple and clean syntax
• Modern React standard
• Easy to read and maintain

Traditional HTML

<div>
  <h1>Hello!</h1>
</div>

• Static structure
• Not reusable
• No data passing

Key Insight

Components make your code reusable and maintainable. Write once, use everywhere with different data!

Understanding Props

Learn how to pass data to components using props

What are Props?

Props (short for "properties") are how you pass data from a parent component to a child component. Think of props as function parameters - they allow components to receive and display different data.

Props are read-only, meaning a component cannot modify the props it receives. This ensures predictable data flow from parent to child components.

How Props Flow

Parent Component

Child Component

Data flows in one direction: from parent to child

Remember

Props are read-only! Components receive props and use them, but cannot change them.

Your First Props

See props in action with a simple greeting component

Destructuring Props

Write cleaner code by destructuring props

Cleaner Code with Destructuring

Instead of writing props.name repeatedly, you can destructure props directly in the function parameters. This makes your code cleaner and more readable.

Without Destructuring

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.role}</p>
      <span>{props.avatar}</span>
    </div>
  );
}

Repetitive props. prefix

With Destructuring ✨

function UserCard({ name, role, avatar }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{role}</p>
      <span>{avatar}</span>
    </div>
  );
}

Clean and readable!

Multiple Props in Action

Create rich components by passing multiple props

Conditional Rendering & CSS

Dynamic styling and conditional rendering with inline to external CSS conversion

Default Props

Provide fallback values when props aren't passed

Setting Default Values

Sometimes you want a prop to have a default value if it's not provided. You can use default parameters in destructuring to set fallback values, making your components more flexible.

function Button({ text = "Click me", color = "blue" }) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

// Usage examples:
<Button />                    // Uses both defaults
<Button text="Submit" />       // text="Submit", color="blue"
<Button text="Delete" color="red" />  // Both custom

Pro Tip

Default props make your components more robust and prevent errors when props are missing!

Props Best Practices

Follow these guidelines to use props effectively

✅ Do This

•Use descriptive prop names like userName not x
•Destructure props for cleaner code
•Provide default values when appropriate
•Keep props simple and focused
•Use meaningful component names

❌ Don't Do This

•Don't modify props - they're read-only!
•Don't pass too many props to one component
•Don't use unclear names like data1, data2
•Don't create deeply nested prop structures
•Don't repeat prop names in the same component

Golden Rule

Components should be small, focused, and reusable. Props are the key to making components flexible!

Key Takeaways

What you've learned about components and props

Components

• Reusable building blocks
• Functions that return JSX
• Can accept data via props
• Make code maintainable

Props

• Pass data from parent to child
• Read-only (cannot be modified)
• Can have default values
• Make components flexible

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

JavaScript in JSX

Conditional Rendering

Building Your Learning Module...

Components and Props

What is a Component?

Function Components (Modern)

Traditional HTML

Key Insight

What are Props?

How Props Flow

Remember

Your First Props

Cleaner Code with Destructuring

Without Destructuring

With Destructuring ✨

Multiple Props in Action

Conditional Rendering & CSS

Setting Default Values

Pro Tip

✅ Do This

❌ Don't Do This

Golden Rule

Components

Props

JavaScript in JSX

Conditional Rendering

Components and Props

What is a Component?

Function Components (Modern)

Traditional HTML

Key Insight

What are Props?

How Props Flow

Remember

Your First Props

Cleaner Code with Destructuring

Without Destructuring

With Destructuring ✨

Multiple Props in Action

Conditional Rendering & CSS

Setting Default Values

Pro Tip

✅ Do This

❌ Don't Do This

Golden Rule

Components

Props