Building Component Trees with Functional Components

Introduction

In our last lesson, you learned the rules of JSX and used them to build a user profile card directly inside the App.jsx file. This was a great first step, but in real-world applications, we don't put all our UI code in a single file. It would quickly become unmanageable.

Today, we'll address that by learning how to create functional components and compose them into a component tree. The goal is to break down our UI into small, reusable, and independent pieces. This practice of "composition" is central to React development and will feel familiar to you from your experience with Laravel, where you might include Blade partials for elements like a header or footer.

By the end of this lesson, you will be able to take a UI block like your profile card, turn it into its own component, and then assemble it with other components to build a complete page structure.

Your UI as a Component Tree

Before we write any code, let's establish a mental model. React applications are structured as a "component tree." At the top, you have a root component (usually <App />), which branches out into child components, which can have their own children, and so on.

Thinking of your app this way helps you understand how data will eventually flow and how the UI is organized. To get a clearer picture of this concept, let's watch a brief introduction.

What is a Functional Component?

A React functional component is, at its core, a JavaScript function that returns JSX. It's that simple. There are two main rules to follow:

1. Naming Convention: Component names must always start with a capital letter (e.g., ProfileCard, not profileCard). This is how React distinguishes your custom components from regular HTML tags.
2. Exporting: You must export your component from its file so you can import it and use it elsewhere.

Here's the basic structure:

// Inside a file named MyComponent.jsx
import React from 'react'; // This import is often optional in modern setups, but it's good practice.

function MyComponent() {
  // Logic can go here
  return <h1>Hello from MyComponent!</h1>;
}

export default MyComponent;

This textual resource provides a concise overview of the syntax.

Building and Composing Your First Components

Now, let's get hands-on. We are going to refactor the single App component from the last lesson into a proper component tree with a Header, ProfileCard, and Footer.

The following video from Dave Gray is an excellent walkthrough of this entire process. We'll follow it step-by-step. I encourage you to code along.

Step 1: Create a Header Component

First, we'll create a simple header.

1. In your src folder, create a new file named Header.jsx.
2. Inside Header.jsx, create a functional component that returns a header with a title.
3. In App.jsx, import your new Header component and render it.

Watch how Dave Gray does this for his Header component in the video from 01:48 to 04:53. Then, apply the same process to your own project.

Your Header.jsx could look like this:

// src/Header.jsx
function Header() {
  return (
    <header>
      <h1>User Profiles</h1>
    </header>
  );
}

export default Header;

And your App.jsx should be updated to import and use it.

Step 2: Create a ProfileCard Component

Next, let's move the profile card logic out of App.jsx and into its own component.

1. Create a new file named ProfileCard.jsx in your src folder.
2. Move the user object and the profile card JSX from your App.jsx into the ProfileCard component.
3. Import and render the ProfileCard component in App.jsx.

The video segment from 04:53 to 06:53 shows a similar process where existing logic is moved into a new Content component. Use that as a guide.

Your ProfileCard.jsx should now contain the core logic:

// src/ProfileCard.jsx
function ProfileCard() {
  const user = {
    name: 'Hedy Lamarr',
    imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
    imageSize: 90,
  };

  return (
    <div className="profile-card">
      <h1>{user.name}'s Profile</h1>
      <img
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
          borderRadius: '50%'
        }}
      />
      <p>Inventor and Actress</p>
    </div>
  );
}

export default ProfileCard;

Step 3: Create a Footer Component

Finally, let's create a footer to complete our page structure.

1. Create a new file named Footer.jsx in your src folder.
2. Add a simple functional component that returns a copyright notice. Feel free to use JavaScript to generate the current year dynamically!
3. Import and render it in App.jsx.

The video segment from 06:53 to 08:35 demonstrates creating a Footer component.

Your Footer.jsx might look like this:

// src/Footer.jsx
function Footer() {
  return (
    <footer>
      <p>Copyright © {new Date().getFullYear()}</p>
    </footer>
  );
}

export default Footer;

Final App.jsx Composition

After completing these steps, your App.jsx should be very clean. It now serves as a container that composes your other components. It should look something like this:

// src/App.jsx
import Header from './Header';
import ProfileCard from './ProfileCard';
import Footer from './Footer';

function App() {
  return (
    <>
      <Header />
      <main>
        <ProfileCard />
        {/* You could add more ProfileCards here! */}
      </main>
      <Footer />
    </>
  );
}

export default App;

Step 4: Visualize Your Component Tree

A powerful tool for visualizing this structure is the React Developer Tools browser extension. If you haven't installed it, now is a great time.

Watch the final segment of the video from 08:35 to 10:34, where Dave Gray shows how to use the 'Components' tab in your browser's dev tools to see the component tree you've just built. Check your own application and see if you can find your <App>, <Header>, <ProfileCard>, and <Footer> components.

Conclusion

Fantastic work! You have successfully refactored a single block of UI into a structured, multi-component application. This is a foundational skill in React.

Key Takeaways:

• Functional Components are JavaScript functions that start with a capital letter and return JSX.
• We create a component tree by importing child components into parent components.
• Composition allows us to build complex UIs from simple, reusable pieces, making our code cleaner and more maintainable.
• The App.jsx component often acts as the root, orchestrating which other components are displayed.

Preview of Next Lesson:
Our components are now nicely organized, but they are self-contained and can't communicate. The ProfileCard has its own hard-coded user data. What if we wanted App.jsx to provide the data, so we could render many different user profiles with the same ProfileCard component?

In the next lesson, "Pass data from parent to child components using props," we will learn exactly how to do that.