intro-frontend-course

Lesson 2: Components and Props in React

Introduction to Components

Components are the building blocks of a React application. They allow developers to break down complex user interfaces into smaller, reusable pieces that are easy to manage and reason about. Each component in React is like a JavaScript function or class that can accept inputs (props) and return a React element that describes how a section of the UI should appear.

Types of Components:

1. Functional Components:
   • These are JavaScript functions that accept props as an argument and return React elements.
   • They are easier to write and understand and are typically used for presentational purposes.
   • With the introduction of React Hooks, functional components can now manage state and lifecycle events.

   Example:

   function Greeting(props) {
     return <h1>Hello, {props.name}!</h1>;
   }
   

2. Class Components:
   • These are ES6 classes that extend React.Component and have a render() method that returns React elements.
   • Class components can manage their own state and lifecycle methods, but they are less commonly used in modern React development due to the advent of Hooks.

   Example:

   class Greeting extends React.Component {
     render() {
       return <h1>Hello, {this.props.name}!</h1>;
     }
   }
   

Understanding Props

Props (short for “properties”) are a mechanism for passing data from a parent component to a child component. They allow components to be dynamic and reusable by customizing their output based on the data they receive.

Key Characteristics of Props:

• Read-Only: Props are immutable, meaning a component cannot change the props it receives. Instead, the parent component should manage the data and provide updated props when necessary.
• Unidirectional Data Flow: Props flow in a unidirectional manner from parent to child components, making the data flow predictable and easy to trace.

Example: Passing Props:

Consider a UserCard component that displays a user’s information:

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="Alice" age={25} />
      <UserCard name="Bob" age={30} />
    </div>
  );
}

In this example, the App component passes name and age props to each UserCard, allowing it to display different information for each user.

Component Composition

One of the strengths of React is its ability to compose components. Component composition involves combining multiple components to create a more complex UI. This modular approach encourages reusability and simplifies the development process.

Example:

Consider a Dashboard component composed of several smaller components:

function Header() {
  return <header>Header Content</header>;
}

function Footer() {
  return <footer>Footer Content</footer>;
}

function Dashboard() {
  return (
    <div>
      <Header />
      <main>Main Content</main>
      <Footer />
    </div>
  );
}

Here, the Dashboard component is composed of Header and Footer components, creating a complete UI structure by combining smaller, reusable pieces.

Useful Resources

• React Official Documentation on Components and Props: Comprehensive guide and examples of how components and props work in React.
• React Hooks Documentation: Introduction to Hooks, which enhance functional components with state and lifecycle features.

Embedded Video: Components and Props

To deepen your understanding of components and props, watch this video:

This video provides an in-depth explanation of how components and props work in React, with practical examples.

Conclusion

In this lesson, you learned about the core concepts of components and props in React. Understanding these concepts is crucial for building dynamic and reusable UIs. In the next lesson, we’ll explore how to manage state and lifecycle events within components, enabling more interactive applications.

---

Components and props form the foundation of React development, enabling you to create flexible and efficient UIs by breaking down complex interfaces into smaller, manageable parts.