ReactJS Component Composition

In React, it becomes difficult to manage the complex UI components and maintain the code. With the help of Component Compositions, we can solve this problem by combining the components into a single component.

Now let's understand this with the help of example

JavaScript

import React from "react";

const Header = () => <header><h1>Welcome to My Website</h1></header>;
const Content = () => <main><p>This is the main content section.</p></main>;
const Footer = () => <footer><p>© 2024 My Website</p></footer>;

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

export default App;

Output