make it better

src/containers/App/index.js

@@ -0,0 +1,25 @@
+import React, {Component} from 'react';
+import Header from '../../components/Header'
+import {Route, Switch} from 'react-router-dom'
+
+import './style.css';
+
+import Home from '../Home';
+import NotFound from '../NotFound';
+
+export default class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Header />
+
+        <div className="container mt-4">
+          <Switch>
+            <Route exact path="/" component={Home}/>
+            <Route component={NotFound}/>
+          </Switch>
+        </div>
+      </div>
+    );
+  }
+}

src/containers/Home/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {bindActionCreators} from 'redux';
+import ProductList from '../../components/ProductList';
+import Compare from '../../components/Compare';
+import * as productActions from '../../actions';
+import {connect} from 'react-redux';
+
+class Home extends React.Component {
+  componentWillMount() {
+    this.props.actions.getProducts();
+  }
+
+  render() {
+
+    const {products, actions} = this.props;
+    const compareProducts = products.filter(product => product.compare);
+
+    return (
+      <div className="Home mt-5">
+        <ProductList products={products} compare={actions.compare}/>
+        <Compare products={compareProducts}/>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    products: state.product.products
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(productActions, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Home);

src/containers/NotFound/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default class NotFound extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>404</h1>
+        <h3>Page not found</h3>
+      </div>
+    );
+  }
+}