Tutorial: Using Components Inside of Components

In this tutorial, you’ll learn how to build reusable React components by nesting components within each other. This is a foundational step in mastering React's component-based architecture, enabling cleaner and more maintainable code.

---

What You Will Learn

1. How to nest components inside other components.
2. Why componentization improves reusability and maintainability.
3. Key ES6 features for working with React components.

---

Steps to Create Nested Components

1. Start with an Existing Component

Using the Portfolio component created earlier, review its JSX structure. Look for repeated or logically grouped elements that can become separate components.

Example:

<div className="portfolio-item">
  <img src="example.jpg" alt="Portfolio" />
  <div className="overlay">Overlay Text</div>
</div>

2. Create a New Component

Move repeated JSX into its own React component. For example, create a PortfolioItem component:

import React from 'react';

class PortfolioItem extends React.Component {
  render() {
    return (
      <div className="portfolio-item">
        <img src="example.jpg" alt="Portfolio" />
        <div className="overlay">Overlay Text</div>
      </div>
    );
  }
}

export default PortfolioItem;

3. Import and Use the New Component

Replace the repeated JSX in Portfolio with the new PortfolioItem component:

import React from 'react';
import PortfolioItem from './PortfolioItem';

class Portfolio extends React.Component {
  render() {
    return (
      <div className="portfolio">
        <PortfolioItem />
        <PortfolioItem />
        <PortfolioItem />
      </div>
    );
  }
}

export default Portfolio;

4. Test the Application

Run your React application to see the changes:

npm start

Check the browser to confirm that the Portfolio component renders multiple PortfolioItem components.

---

Common Issues and Fixes

1. Extending React.Component

Ensure all custom components extend React.Component to inherit React's functionality:

class PortfolioItem extends React.Component {
  render() {
    return <div>Content</div>;
  }
}

2. Uppercase Component Names

React distinguishes between DOM elements and components by their capitalization. Always use uppercase for custom components (e.g., <PortfolioItem />).

3. Valid JSX

All elements in JSX must be properly closed:

• Self-closing tags: <img />, <hr />
• Replace class with className to avoid conflicts with reserved keywords.

---

Benefits of Nested Components

• Reusability: Simplify updates by isolating functionality into smaller, reusable components.
• Readability: Break down complex UI structures for easier debugging and maintenance.
• Scalability: Add or remove components without affecting the parent structure.

---

Summary

You’ve successfully created and used nested components in React! This approach promotes cleaner, reusable, and scalable code.

In the next lesson, you’ll learn how to dynamically pass properties to components, making them even more versatile.

For more tutorials, visit: https://02geek.com/category/react/reusable