React practice

by Pranab Dey

HTML

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<div id="app"></div>

CSS

.main {
  margin: 10px;
}

/* heading styles */

.main .header-section {
  background: lightgrey;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}

.main .header-section .logo {
  flex: 0.2;
  padding: 10px;
  border: 1px solid black;
}

.main .header-section .nav-section {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

.main .header-section .nav-section a {
  border: 1px solid;
  padding: 10px;
  flex: 1;
  text-align: center;
  text-decoration: none;
}

/* main Content styles */

.main .homeContent-section {
  padding: 10px 0;
}

/* Footer styles */

.main .footer-section {
  background: #333;
  padding: 10px;
}

.main .footer-section h3 {
  color: white;
  text-align: center;
}

React

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

var TodoApp = ()=>{
	return(
  	<div className="main">
      <Header/>
      <!-- <Routing/> -->
      <Footer/>
    </div>
  )
}

var NoMatch = ()=>{
return(
  <div>
    <h3>This is the component always render when no routes paths are not matching with link.</h3>
  </div>
)
}

var Routing = ()=>{
return(
  <Router>
    <Route path='/' exact component={HomeContent} />
    <Route path='/about' component={AboutContent} />
    <Route path='/contact' component={ContactContent} />
    <Route component={NoMatch} />
  </Router> 
)
}

var Header = ()=>{
return(
  <header class="header-section">
    <Logo/>
    <NavBar/>
  </header>
)
}

var Logo = ()=>{
return(
	<div className="logo">
    <h3>Logo</h3>
  </div>
)
}

var NavBar = ()=>{
return(
  <nav className="nav-section">
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>
)
}

var HomeContent = ()=>{
return(
  <div class="homeContent-section">
    <h1>This is the Home Page</h1>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quae, ullam iste veritatis atque tenetur ipsum, porro praesentium quos, omnis velit. Consectetur officiis laboriosam quos obcaecati aliquid dolorum possimus minima.
    </h3>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quae, ullam iste veritatis atque tenetur ipsum, porro praesentium quos, omnis velit. Consectetur officiis laboriosam quos obcaecati aliquid dolorum possimus minima.</h3>
  </div>
)
}

var AboutContent = ()=>{
return(
  <div class="homeContent-section">
    <h1>This is the About Page</h1>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quae, ullam iste veritatis atque tenetur ipsum, porro praesentium quos, omnis velit. Consectetur officiis laboriosam quos obcaecati aliquid dolorum possimus minima.
    </h3>
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing...