setup redux files and installed material ui

Author: erikguntner

package.json

@@ -4,16 +4,21 @@
   "description": "Boilerplate for React apps",
   "main": "src/main.js",
   "scripts": {
-    "start": "webpack-dev-server --mode development --open --hot",
+    "start": "webpack --mode development --watch --hot",
     "build": "webpack --mode production",
     "electron": "electron ."
   },
   "author": "Brad Traversy",
   "license": "MIT",
   "dependencies": {
+    "@material-ui/core": "^1.4.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-rnd": "^8.0.2"
+    "react-redux": "^5.0.7",
+    "react-rnd": "^8.0.2",
+    "redux": "^4.0.0",
+    "redux-devtools-extension": "^2.13.5",
+    "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
@@ -28,4 +33,4 @@
     "webpack-cli": "^2.0.13",
     "webpack-dev-server": "^3.1.1"
   }
-}
+}

src/actionTypes/actionTypes.js

@@ -0,0 +1 @@
+// exportconst ADD_COMPONENT = 'ADD_COMPONENT';

src/actions/components.js

@@ -0,0 +1 @@
+import * as types from '../constants/actionTypes.js';

src/components/App.js

@@ -1,5 +1,7 @@
 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 '../style.css';
 
 
@@ -13,7 +15,18 @@ class App extends Component {
     };
     return (
       <div>
-        <h1>My react app</h1>
+        <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>
     );
   }

src/index.html

@@ -5,6 +5,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
   <title>My React App</title>
 </head>
 

src/index.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
+import { Provider } from 'react-redux';
+import store from './store';
 import './style.css';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+ReactDOM.render(
+   <Provider store={store}>
+      <App />
+   </Provider>, 
+document.getElementById('app'));

src/reducers/componentReducer.js

@@ -0,0 +1,10 @@
+import * as types from '../constants/actionTypes';
+
+export default (state = [], action) => {
+  let componets;
+
+	switch(action.type) {
+		default: 
+			return state;
+  }
+};

src/reducers/index.js

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+
+import componentReducer from './componentReducer.js';
+
+const reducers = combineReducers({
+  components: componentReducer
+})
+
+export default reducers;

src/store.js

@@ -0,0 +1,8 @@
+import { createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+
+const store = createStore(
+   reducers,
+)
+
+export default store;