Component Composition

This document explores how React component composition enables building complex UIs from smaller, reusable function components. It covers abstraction, reusability, hierarchy, props, children, and higher-order components, with practical examples for clarity.

Component Composition in React

Component composition is the process of combining multiple smaller components to create more complex functionality and larger UI structures. This approach allows developers to build applications using small, focused building blocks.

Principles of Function Component Composition

• Abstraction: Create reusable components that encapsulate specific UI features, breaking down large interfaces into manageable pieces.
• Reusability: Avoid code duplication by reusing components across different parts of the application.
• Hierarchy: Arrange components in parent-child relationships, supporting modular and organized design.
• Props and Children: Pass data and even entire components as props or children, enabling flexible composition.
• Higher-Order Components (HOCs): Write functions that accept components as input or return enhanced components, adding features like state management or logic without modifying the original implementation.

Example: Composing a Blog Post UI

Below is a practical example demonstrating these principles. Each component encapsulates a specific feature of a blog post, such as title, author, type, and description.

Title Component

1import React from 'react'
2
3function Title({ text }) {
4  return <h1>{text}</h1>
5}
6
7export default Title

Author Component

1import React from 'react'
2
3function Author({ name }) {
4  return <h2>By: {name}</h2>
5}
6
7export default Author

Type Component

1import React from 'react'
2
3function Type({ genre }) {
4  return <div>Type: {genre}</div>
5}
6
7export default Type

Description Component

1import React from 'react'
2
3function Description({ text }) {
4  return <p>{text}</p>
5}
6
7export default Description

Higher-Order Component: NovelBlog

This component composes the above components to create a complete blog post UI.

 1import React from 'react'
 2import Title from './Title'
 3import Author from './Author'
 4import Type from './Type'
 5import Description from './Description'
 6
 7function NovelBlog({ title, author, genre, description }) {
 8  return (
 9    <div className="novel-blog">
10      <Title text={title} />
11      <Author name={author} />
12      <Type genre={genre} />
13      <Description text={description} />
14    </div>
15  )
16}
17
18export default NovelBlog

Main Application Component

The main app imports and uses the composed NovelBlog component.

 1import React from 'react'
 2import NovelBlog from './NovelBlog'
 3
 4function App() {
 5  return (
 6    <NovelBlog
 7      title="The Great Gatsby"
 8      author="F. Scott Fitzgerald"
 9      genre="Classic Fiction"
10      description="A novel set in the Roaring Twenties, exploring themes of wealth, love, and the American Dream."
11    />
12  )
13}
14
15export default App

Conclusion

Component composition in React enables developers to build complex UIs by combining small, focused components. By following principles like abstraction, reusability, hierarchy, and using higher-order components, applications become more modular, maintainable, and scalable.

FAQ