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;

results matching ""

    No results matching ""