React application using multiple functional components

In this example, we will show you how to create an application with multiple functional components using React Hooks. We have already explained a similar example using class components but here we will use only functional components.

Demo Application

Layout - Clue Mediator
Layout – Clue Mediator

Package Version


File Structure

  • react-functional-app
    • node_modules
    • public
      • index.html
    • src
      • pages
        • Content.js
        • Footer.js
        • Header.js
        • Navbar.js
        • Sidebar.js
      • App.css
      • App.js
      • index.css
      • index.js
    • package-lock.json
    • package.json

Steps to create a react application using functional components

  1. Create a react application
  2. Create separate components
  3. Add multiple components in single component
  4. Output

1. Create a react application

Create a react application using create-react-app npm package. Run the following command to create a react app.

2. Create separate components

We will split our layout into five different components listed below.

  • Header Component
  • Navbar Component
  • Sidebar Component
  • Content Component
  • Footer Component

Refer to the file structure mentioned earlier to create components.


To apply style for application, we will add below style in App.css file.


3. Add multiple components in single component

Import all components in App.js file and add it in below format.


4. Output

That’s all you need to write. Run the application and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *