src/view/containers/TopNavBarContainer.js
import React, { Component } from 'react';
class TopNavBarContainer extends Component{
render() {
return (
<div>
<h2>Top navigation bar</h2>
</div>
);
}
}
export default TopNavBarContainer
src/view/containers/FooterContainer.js
import React, { Component } from 'react';
class FooterContainer extends Component{
render() {
return (
<footer>
<h3>Footer</h3>
</footer>
);
}
}
export default FooterContainer
src/view/containers/SideBarContainer.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
class SideBarContainer extends Component {
render() {
return (
<div>
<h3>Sidebar</h3>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</div>
);
}
}
export default SideBarContainer;
src/view/containers/HomeContainer.js
import React, { Component } from 'react';
class HomeContainer extends Component{
render() {
return (
<div>
<h2>Home view</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est ligula, tincidunt non volutpat at, ornare at arcu.</p>
</div>
);
}
}
export default HomeContainer
src/view/containers/MainLayoutContainer.js
import React, { Component } from 'react';
import {Switch, Route } from 'react-router-dom';
import SideBarContainer from './SideBarContainer'
import HomeContainer from './HomeContainer'
import AboutContainer from './AboutContainer'
class MainLayoutContainer extends Component{
render() {
return (
<div>
<SideBarContainer />
<div>
<Switch>
<Route exact path= "/" component={HomeContainer} />
<Route exact path= "/about" component={AboutContainer} />
</Switch>
</div>
</div>
);
}
}
export default MainLayoutContainer
src/App.js
import React, { Component } from 'react';
import TopNavBarContainer from './views/containers/TopNavBarContainer'
import MainLayoutContainer from './views/containers/MainLayoutContainer'
import FooterContainer from './views/containers/FooterContainer'
class App extends Component {
render() {
return (
<div className="app-container">
<TopNavBarContainer />
<MainLayoutContainer />
<FooterContainer />
</div>
);
}
}
export default App;