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.

Checkout more articles on ReactJS

• How to create a GIF from images in React
• POST request using axios with React Hooks
• How to use componentWillUnmount() in React Hooks
• useState with object in React Hooks
• Detect click outside a react component using React Hooks

Demo Application

Layout - Clue Mediator

Package Version

react

^18.1.0

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.

npx create-react-app react-functional-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.

Header.js

const Header = () => {
  return (
    <div class="header">
      <h1>Demo Application</h1>
      <p>Demo application created in React App</p>
    </div>
  )
}

export default Header;

Navbar.js

const Navbar = () => {
  return (
    <div class="navbar">
      <a href="/#">Home</a>
      <a href="/#">About</a>
      <a href="/#" class="right">Contact</a>
    </div>
  )
}

export default Navbar;

Sidebar.js

const Sidebar = () => {
  return (
    <div class="side">
      <h2>Arcu bibendum</h2>
      <h5>Sit amet mattis vulputate</h5>
      <div 200="" class="fakeimg" style={{ height: }}>Image</div>
      <p>Non blandit massa enim nec dui nunc mattis enim. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla..</p>
      <h3>Massa enim</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <div 60="" class="fakeimg" style={{ height: }}>Image</div><br>
      <div 60="" class="fakeimg" style={{ height: }}>Image</div><br>
      <div 60="" class="fakeimg" style={{ height: }}>Image</div>
    </div>
  )
}

export default Sidebar;

Content.js

const Content = () => {
  return (
    <div class="main">
      <h2>Lorem ipsum dolor</h2>
      <h5>quam pellentesque, Dec 10, 2018</h5>
      <div 200="" class="fakeimg" style={{ height: }}>Image</div>
      <p>Nisi vitae suscipit..</p>
      <p>Semper quis lectus nulla at. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nunc faucibus a pellentesque sit. Risus quis varius quam quisque id diam vel quam elementum. Ornare aenean euismod elementum nisi quis eleifend quam.</p>
      <br>
      <h2>Placerat vestibulum</h2>
      <h5>elementum integer enim neque, Sep 21, 2018</h5>
      <div 200="" class="fakeimg" style={{ height: }}>Image</div>
      <p>Bibendum est ultricies..</p>
      <p>Semper quis lectus nulla at. Nullam ac tortor vitae purus faucibus ornare suspendisse. Nunc faucibus a pellentesque sit. Risus quis varius quam quisque id diam vel quam elementum.</p>
    </div>
  )
}

export default Content;

Footer.js

const Footer = () => {
  return (
    <div class="footer">
      <h2>Footer</h2>
    </div>
  )
}

export default Footer;

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

App.css

* {
  box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #269faf;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 40px;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: white;
  padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

3. Add multiple components in single component

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

App.js

import React from 'react';
import './App.css';

import Header from './pages/Header';
import Navbar from './pages/Navbar';
import Content from './pages/Content';
import Sidebar from './pages/Sidebar';
import Footer from './pages/Footer';

function App() {
  return (
    <div>
      <header>
      <navbar>
      <div class="row">
        <content>
        <sidebar>
      </sidebar></content></div>
      <footer>
    </footer></navbar></header></div>
  );
}

export default App;

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