Created containers for columns of main application

Author: erikguntner

package.json

@@ -4,7 +4,7 @@
   "description": "Boilerplate for React apps",
   "main": "src/main.js",
   "scripts": {
-    "start": "webpack --mode development --watch --hot",
+    "start": "webpack --mode development --watch",
     "build": "webpack --mode production",
     "electron": "electron ."
   },

src/components/App.js

@@ -1,11 +1,16 @@
 import React, { Component } from 'react';
 import Rnd from 'react-rnd';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
+import LeftContainer from '../containers/LeftContainer';
+import MainContainer from '../containers/MainContainer';
+import RightContainer from '../containers/RightContainer';
+
+// import Paper from '@material-ui/core/Paper';
+// import Grid from '@material-ui/core/Grid';
 import '../style.css';
 
 
 class App extends Component {
+
   render() {
     const style = {
       display: 'flex',
@@ -14,19 +19,10 @@ class App extends Component {
       border: 'solid 2px green',
     };
     return (
-      <div>
-        <Grid container spacing={0}>
-          <Grid item xs={3}>
-            <Paper>xs=3</Paper>
-          </Grid>
-          <Grid item xs={6}>
-            <Paper>asdfas=6</Paper>
-          </Grid>
-          <Grid item xs={3}>
-            <Paper>f=3</Paper>
-          </Grid>
-        </Grid>
-        <h1>My react grapple</h1>
+      <div className="app-container">
+        <LeftContainer />
+        <MainContainer />
+        <RightContainer />
       </div>
     );
   }

src/containers/LeftContainer.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class LeftContainer extends Component {
+  render() {
+    return (
+      <div className="column">
+        Left Container
+      </div>
+    )
+  }
+}

src/containers/MainContainer.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class MainContainer extends Component {
+  render() {
+    return (
+      <div className="main">
+        Main Column
+      </div>
+    )
+  }
+}

src/containers/RightContainer.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class RightContainer extends Component {
+  render() {
+    return (
+      <div className="column">
+        Right container
+      </div>
+    )
+  }
+}

src/main.js

@@ -14,7 +14,6 @@ function createWindow() {
    });
 
    // and load the index.html of the app.
-   console.log(__dirname);
    mainWindow.loadURL(`file://${__dirname}/../dist/index.html`);
 
 

src/reducers/componentReducer.js

@@ -1,4 +1,4 @@
-import * as types from '../constants/actionTypes';
+import * as types from '../actionTypes/actionTypes';
 
 export default (state = [], action) => {
   let componets;

src/store.js

@@ -1,5 +1,6 @@
 import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension';
+import reducers from './reducers/index.js';
 
 const store = createStore(
    reducers,

src/style.css

@@ -1,3 +1,20 @@
-h1 {
-   color: blue;
+body {
+   margin: 0;
+   padding: 0;
+}
+
+.app-container {
+   display: flex;
+   width: 100%;
+   height: 100vh;
+}
+
+.column {
+   background-color: blue;
+   width: 20%;
+}
+
+.main {
+   background-color: green;
+   flex: 1;
 }