Skip to main content

Creating and Nesting Your First Components (Part 1) #11

📖 Introduction​

Following our deep dive into the Anatomy of a Component, this article takes the next logical step: Creating and Nesting Your First Components. This is where the magic of React truly begins, as we start to build complex UIs from simple, reusable pieces.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • The basic structure of a React functional component.
  • How to create a new React project with Vite.
  • Basic JavaScript and HTML.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Foundational Theory: The concept of component composition and why it's a cornerstone of React development.
  • ✅ Core Implementation: How to create multiple components and nest them within each other.
  • ✅ Practical Application: Building a simple "User Card" UI by composing several smaller components.
  • ✅ Advanced Techniques: Understanding the parent-child relationship between components.
  • ✅ Best Practices & Anti-Patterns: How to organize your components for a clean and scalable project structure.

🧠 Section 1: The Core Concepts of Component Composition​

In React, we don't build monolithic UIs. Instead, we build small, independent, and reusable components and then compose them together to create complex user interfaces. This is the principle of composition.

Think of it like building with LEGO bricks. You have small, simple bricks (your components), and you combine them to build anything you can imagine (your UI).

Key Principles:

  • Modularity: Each component is a self-contained module with its own logic and UI.
  • Reusability: Once you build a component, you can reuse it anywhere in your application.
  • Maintainability: Smaller, well-defined components are easier to understand, test, and maintain.

💻 Section 2: Deep Dive - Creating and Nesting Components​

Let's start by creating a few simple components and then nesting them.

2.1 - Creating Individual Components​

First, let's create three separate components in our src directory. For now, we can put them in the same file for simplicity, but we'll address best practices for file structure later.

// App.jsx

import React from 'react';

const Avatar = () => {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
      width={100}
      height={100}
    />
  );
};

const UserInfo = () => {
  return (
    <div>
      <h2>Katherine Johnson</h2>
      <p>Aeronautical Engineer</p>
    </div>
  );
};

const UserCard = () => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      {/* We will nest other components here */}
    </div>
  );
};

export default UserCard;

Step-by-Step Code Breakdown:

  1. Avatar component: A simple component that renders an <img> tag.
  2. UserInfo component: A component that renders a user's name and title.
  3. UserCard component: A container component that will hold our other components. It has some basic inline styling to give it a border.

2.2 - Nesting the Components​

Now, let's nest the Avatar and UserInfo components inside the UserCard component.

// App.jsx (updated)

import React from 'react';

const Avatar = () => {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
      width={100}
      height={100}
    />
  );
};

const UserInfo = () => {
  return (
    <div>
      <h2>Katherine Johnson</h2>
      <p>Aeronautical Engineer</p>
    </div>
  );
};

const UserCard = () => {
  return (
    <div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
      <Avatar />
      <UserInfo />
    </div>
  );
};

export default UserCard;

Walkthrough:

  • Inside the UserCard component's return statement, we are now rendering <Avatar /> and <UserInfo />.
  • This is component nesting in action. UserCard is the parent component, and Avatar and UserInfo are its child components.
  • When UserCard is rendered, React will also render its children, resulting in a complete user card UI.

🛠️ Section 3: Project-Based Example: Building a Simple App Layout​

Let's apply this to a more common scenario: building a simple application layout.

The Goal: Create a simple app layout with a Header, a Main content area, and a Footer.

The Plan:

  1. Create a Header component.
  2. Create a MainContent component.
  3. Create a Footer component.
  4. Create a root App component that nests the other three.
// App.jsx

import React from 'react';

const Header = () => {
  return (
    <header style={{ padding: '1rem', backgroundColor: '#f0f0f0' }}>
      <h1>My Awesome App</h1>
    </header>
  );
};

const MainContent = () => {
  return (
    <main style={{ padding: '1rem' }}>
      <p>Welcome to the main content area!</p>
    </main>
  );
};

const Footer = () => {
  return (
    <footer style={{ padding: '1rem', backgroundColor: '#f0f0f0', textAlign: 'center' }}>
      <p>&copy; 2025 My Awesome App</p>
    </footer>
  );
};

const App = () => {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
};

export default App;

By breaking our UI into these small, logical pieces, our App component becomes very clean and easy to read. We can immediately understand the structure of our page just by looking at the App component's return statement.

✨ Section 5: Best Practices and Anti-Patterns​

Best Practices:

  • Component Organization: For larger projects, it's best to organize your components into a components folder. Each component should have its own file (e.g., Header.jsx, Footer.jsx). We will cover importing and exporting in more detail later.
  • Think in Components: When you look at a UI design, start thinking about how you can break it down into smaller, reusable components.

Anti-Patterns (What to Avoid):

  • Monolithic Components: Avoid creating huge components that do too many things. If a component is getting too large, it's a sign that it should be broken down into smaller components.
  • Defining Components Inside Other Components: As mentioned in the previous article, never define a component inside another component. This leads to performance issues and bugs.

💡 Conclusion & Key Takeaways​

You've now learned the fundamental skill of component composition. By creating and nesting components, you can build complex UIs from simple, manageable pieces.

Let's summarize the key takeaways:

  • Composition is Key: React applications are built by composing components.
  • Parent-Child Relationship: When you nest a component, you create a parent-child relationship.
  • Readability and Maintainability: Breaking down your UI into components makes your code easier to read, understand, and maintain.

Challenge Yourself: Create a Button component that renders a <button> element. Then, use this Button component inside the UserCard component from Section 2.

➡️ Next Steps​

We've seen how to nest components, but what if the child components need data from the parent? In the next article, "Creating and Nesting Your First Components (Part 2)", we will explore how to pass data from parent to child components using props.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Nesting: Placing one component inside another.
  • Composition: The process of building complex UIs by combining smaller components.
  • Parent Component: A component that renders another component.
  • Child Component: A component that is rendered by another component.

Further Reading​