This one is a basic example of the react application using multiple components. Header Component, Navbar Component, Sidebar Component, Footer Component and Content Pages also a notfound page
ReactJS - Router
React Router is used to define multiple routes in the application.
Routing is a process in which a user is directed to different pages based on their action or request.
React Router Installation
react-router-dom: It is used for web applications design.
https://www.npmjs.com/package/react-router-dom
$ npm install --save react-router-dom
C:\reactdev\myreactdev>npm install --save react-router-dom
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router, Switch} from 'react-router-dom'
import App from './App';
import About from './About'
import Contact from './Contact'
import Notfound from './notfound'
import Header from './pages/Header';
import Navbar from './pages/Navbar';
import Sidebar from './pages/Sidebar';
import Footer from './pages/Footer';
const routing = (
<Router>
<div>
<Header />
<Navbar />
<div className="row">
<Switch>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Notfound} />
</Switch>
<Sidebar />
</div>
<Footer />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
scr/App.js
//scr/App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="main">
<h2>Home</h2>
<h5>quam pellentesque</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</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>
);
}
export default App;
src/About.js
//src/About.js
import React from 'react'
class About extends React.Component {
render() {
return (
<div className="main">
<h2>About Us</h2>
<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 About
src/Contact.js
//src/Contact.js
import React from 'react'
class Contact extends React.Component {
render() {
return (
<div className="main">
<h2>Contact Us</h2>
<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 Contact
src/notfound.js
//src/notfound.js import React from 'react' const Notfound = () => <div className="main"><h1>Not found</h1></div> export default Notfoundsrc/Header.js
//src/Header.js
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<div className="header">
<h1>ReactJS Basic Website using multiple components and pages react router</h1>
<p>React Router is used to define multiple routes in the application. Routing is a process in which a user is directed to different pages based on their action or request.</p>
</div>
);
}
}
export default Header
src/Nabbar.js
//src/Nabbar.js
import React, { Component } from 'react';
import { NavLink} from 'react-router-dom'
class Navbar extends Component {
render() {
return (
<div className="navbar">
<NavLink to="/" exact activeStyle={ {color:'red'} }>Home</NavLink>
<NavLink to="/about" exact activeStyle={ {color:'green'} }>About</NavLink>
<NavLink to="/contact" exact activeStyle={ {color:'magenta'} }>Contact</NavLink>
</div>
);
}
}
export default Navbar
scr/Sidebar.js
//scr/Sidebar.js
import React, { Component } from 'react';
class Sidebar extends Component {
render() {
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>
);
}
}
export default Sidebar
src/footer.js
//src/footer.js
import React, { Component } from 'react';
class Footer extends Component {
render() {
return (
<div className="footer">
<h2>Footer</h2>
</div>
);
}
}
export default Footer
src/App.css
//src/App.css
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.header {
padding: 80px;
text-align: center;
background: #113452;
color: white;
}
.header h1 {
font-size: 40px;
}
.navbar {
overflow: hidden;
background-color: #000;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.navbar a.right {
float: right;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
