Components and Props

Building with Components

Think of a React application like a set of LEGO bricks. Each brick is a self-contained, reusable piece called a component. You can combine these bricks in different ways to build anything you can imagine, from a simple button to a complex user profile page.

Every React application is made up of at least one component, usually called App, which acts as the root. From there, you build out your user interface by nesting components inside other components. This approach makes your code modular, easier to manage, and simple to debug.

Component-based architecture is an approach where an application is broken down into smaller, self-contained components.

Two Types of Components

In React, there are two main ways to create components: functional components and class components. While they can achieve the same results, functional components are the more modern and common approach.

Functional Components

A functional component is a plain JavaScript function that accepts an object of properties (we call these "props") and returns a React element (usually JSX). They are simple, concise, and easy to read.

// This is a functional component.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Components

Class components use ES6 classes to define a component. They are slightly more verbose but were the original way to include features like state and lifecycle methods before React Hooks were introduced. We'll stick with functional components for now, but it's good to recognize class components since you'll see them in older codebases.

// This is the same component, written as a class.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Passing Data with Props

Components would be pretty limited if they couldn't communicate. That's where props (short for properties) come in. Props allow you to pass data from a parent component down to a child component. Think of them as arguments you pass to a function.

This makes components dynamic and reusable. For example, you could have a single UserProfile component and use it to display information for many different users by passing each user's data as props.

An important rule to remember is that props are read-only. A component should never modify the props it receives. It should always return the same output for the same inputs.

Data flows one way in React: from parent components down to child components via props.

Let's see how to pass a prop. We can define an App component that renders our Welcome component and gives it a name prop, just like an HTML attribute:

function App() {
  return (
    <div>
      <Welcome name="Alice" />
    </div>
  );
}

The Welcome component receives this name prop and can use it to render a personalized greeting. This is how the component becomes reusable.

Composition and Reusability

The real power of React comes from composing components. You can build small, focused components and then assemble them to create more complex UIs. This principle encourages reusability. Instead of writing the same block of code multiple times, you create a component once and use it wherever you need it.

For example, we can use our Welcome component multiple times with different props:

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

// This would render:
// <h1>Hello, Alice</h1>
// <h1>Hello, Bob</h1>
// <h1>Hello, Charlie</h1>

By breaking our application into small, manageable components, we make our code easier to understand, test, and maintain. This modularity is a cornerstone of building modern web applications with React.

Ready to test your knowledge on components and props?

Quiz Questions 1/5

What is the primary role of a component in a React application?

Quiz Questions 2/5

What is the primary mechanism for passing data from a parent component to a child component?

Great work. Understanding components and how to pass data with props are the first major steps to mastering React. Next, we'll explore how components can manage their own data using state.

React Fundamentals