Need more details about structure setup about react-webpack-babel HOT 6 CLOSED

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Header from "./header";
import Footer from "./footer";

class Main extends Component {
  render() {
    return (
      <div className="Main">
        <Header />
        {this.props.children}
        <Footer />
      </div>
    );
  }
}

class Routes extends Component {
  render() {
    return (
        <Main>
          <Route exact path="/" component={Home} />
          <Route path="/another-sub-page" component={JustAnotherPage} />
          <Route path="/about-page" component={About} />
        </Main>
    );
  }
}

export default Routes;

import React, { Component } from "react";

import "normalize.css";

import "styles/base/_main.sass"; // Global styles
import "styles/base/_common.sass"; // Global styles
import styles from "./app.sass"; // Css-module styles

class App extends Component {
  render() {
    return (
      <div className="App">
        Nothing in here...
      </div>
    );
  }
}

export default App;

// ./index.jsx
// Hot Module Replacement API
if (module.hot) {
  module.hot.accept("./app", () => {
    const NextApp = require("./app").default;
    ReactDOM.render(
      <AppContainer>
        <Router history={history}>
          <NextApp />
        </Router>
      </AppContainer>,
      document.getElementById("app")
    );
  });
}

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./routes', () => {
    renderApp(require('./routes').default);
  })
}

// someReducer.js
return { ...newState, ...oldState };

// someReducer.js
import _ from "lodash";
return _.merge(newState, oldState);