Components and Props

What Are Components?

Components are the building blocks of a React application. A component is a small, reusable UI element written as a JavaScript function that returns JSX. Each part of a webpage, such as a header, button, or sidebar, can be created as a component.

Example of a functional component:

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

Components help organize the UI into independent, reusable pieces, making applications easier to manage and scale.

Functional vs Class Components

React supports two types of components: functional and class components.

Functional components are modern and commonly used:

function Greeting() {
  return <h2>Welcome!</h2>;
}

Class components are older and mostly used in legacy code:

import React from "react";

class Greeting extends React.Component {
  render() {
    return <h2>Welcome!</h2>;
  }
}

Today, functional components are preferred because they are simpler and work well with React Hooks.

Reusability of Components

One of React’s biggest strengths is reusability. A component can be created once and used multiple times.

function Button() {
  return <button>Click Me</button>;
}

function App() {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
}

Each Button instance works independently while using the same component logic.

What Are Props?

Props (short for properties) are used to pass data from a parent component to a child component. They allow components to be dynamic and reusable.

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

function App() {
  return (
    <>
      <Greeting name="Alex" />
      <Greeting name="Maria" />
    </>
  );
}

Props make components flexible by allowing different data to be displayed in each instance.

Using Destructuring with Props

You can simplify prop usage using destructuring.

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

This makes the code cleaner and easier to read.

Passing Multiple Props

Components can receive multiple props.

function UserCard({ name, age, country }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>Country: {country}</p>
    </div>
  );
}

Props can hold different data types such as strings, numbers, arrays, objects, and functions.

Passing Functions as Props

Functions can also be passed as props, allowing child components to communicate with parent components.

function Child({ onMessage }) {
  return <button onClick={() => onMessage("Hello from Child!")}>Send</button>;
}

function Parent() {
  const showMessage = (msg) => alert(msg);

  return (
    <div>
      <Child onMessage={showMessage} />
    </div>
  );
}

This pattern helps manage interactions between components.

Default Props

You can provide default values to props in case they are not passed.

function Profile({ name = "Guest", role = "Visitor" }) {
  return <h3>{name} - {role}</h3>;
}

If no props are provided, default values are used.

Summary

In this chapter, you learned what components are and how they form the foundation of React applications. You explored functional and class components, understood how props pass data between components, and saw how to make components reusable and dynamic. You also learned how to pass multiple props, use destructuring, and send functions as props for communication.