Way to Create React Application using Multiple Components

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

1. Create react application

First, we have to create react application and for that, we used create-react-app

2. Css

src/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. Create separate components

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

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

Create folder name as “pages” to manage the structure of application and we will add all the components inside the folder.

src/pages/Header.js

import React from ‘react’
export default function Header() {
  return (
    <div className=”header”>
    <h1>Demo Application</h1>
    <p>Demo application created in React App</p>
  </div>
  )
}

src/pages/Navbar.js

import React from ‘react’
export default function Navbar() {
  return (
    <div className=”navbar”>
    <a href=”#”>Home</a>
    <a href=”#”>About</a>
    <a href=”#” className=”right”>Contact</a>
  </div>
  )
}

src/pages/Sidebar.js

import React from ‘react’
export default function Sidebar() {
  return (
    <div className=”side”>
        <h2>Arcu bibendum</h2>
        <h5>Sit amet mattis vulputate</h5>
        <div className=”fakeimg” style={{ height: 200 }}>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 className=”fakeimg” style={{ height: 60 }}>Image</div><br />
        <div className=”fakeimg” style={{ height: 60 }}>Image</div><br />
        <div className=”fakeimg” style={{ height: 60 }}>Image</div>
      </div>
  )
}

src/pages/Content.js

import React from ‘react’
export default function Content() {
  return (
    <div className=”main”>
    <h2>Lorem ipsum dolor</h2>
    <h5>quam pellentesque, Dec 10, 2018</h5>
    <div className=”fakeimg” style={{ height: 200 }}>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 className=”fakeimg” style={{ height: 200 }}>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>
  )
}

src/pages/Footer.js

import React from ‘react’
export default function Footer() {
  return (
    <div className=”footer”>
        <h2>Footer</h2>
      </div>
  )
}

4. Add multiple components in single component

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

src/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 className=“row”>
        <Content />
        <Sidebar />
      </div>
      <Footer />
    </div>
  );
}
export default App;