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

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
  • README.md

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