.

.babelrc

+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}
\ No newline at end of file

.gitignore

+node_modules
+dist
+.eslintrc.js
+
+
+
+
+
+

README.md

+# basic-react-redux-webpack4-boilerplate
+Basic React-Webpack4 boilerplate with file structure for React-Redux application (last update 13.03.2019).
+
+### Usage
+
+```
+git clone https://github.com/Lavitr/basic-react-redux-webpack4-boilerplate.git
+cd basic-react-redux-webpack4-boilerplate 
+npm install
+npm start
+open http://localhost:8080  (should start automatically )
+```
+
+### Available Commands
+
+```
+
+npm start - start the dev server
+npm run dev - create a developer build in `dist` folder
+npm run build - create a production ready build in `dist` folder
+npm test - run all tests
+
+```

package.json

+{
+  "name": "reduxasync",
+  "version": "1.0.0",
+  "description": "simple App Redux Async App",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --mode development --open",
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production"
+  },
+  "author": "Ron Lavit",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.0.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "redux-logger": "^3.0.6",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.35.3",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "3.7.2"
+  },
+  "dependencies": {
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.4",
+    "redux-thunk": "^2.3.0"
+  }
+}

src/actions/index.js

+//This file contatins 'ACTION-CREATOR' functions 
+//In Redux, 'ACTION-CREATOR'  return an  ACTION(plain JavaScript object)
+
+//example of simple 'ACTION-CREATOR'
+
+export const sayHello = () => ({
+    type: "HELLO_REACT"
+})
+
+export const globalIncrement = () =>({
+        type: "GLOBAL_INCREMENT"
+})
+export const globalDecrement = () =>({
+        type: "GLOBAL_DECREMENT"
+})
+
+export const addItem = (product)=>({
+     type: "ADD_ITEM", 
+     product
+})
+
+export const removeitem = (product)=>({
+    type: "REMOVE_ITEM", 
+    product
+})
\ No newline at end of file

src/components/App.js

+import React from 'react'
+import Button from '../containers/Button'
+
+let App = () => (
+  <div >
+    <Button />
+  </div>
+
+)
+
+export default App;
+

src/containers/Button.js

+import React from 'react'
+import { connect } from 'react-redux'
+import { sayHello } from '../actions'
+import { globalIncrement, globalDecrement } from '../actions/index'
+import { addItem, removeitem } from '../actions/index';
+import productData from '../data';
+import data from '../data'
+
+
+let Button = ({ 
+  globalDecrement ,
+  globalIncrement ,
+  count=0, 
+  whatsUp, 
+  stateObject, 
+  saySomething,
+  addItem,
+  removeItem,
+  cart
+ }) => {
+
+
+  return(
+    <div >
+    <button onClick={saySomething}>PRESS TO DISPATCH FIRST ACTION</button>
+    <h2>{whatsUp}</h2>
+    <button onClick={() => console.log('Redux State:',stateObject)} >Press to inspect STATE in console panel</button>
+
+    <h2>Global Counter: {count}</h2>
+    <button onClick={globalIncrement}>Increment</button>
+    <button onClick={globalDecrement}>Decrement</button>
+
+    <h1>Shop</h1>
+    {productData.variants.map(item =>(
+    <div>
+      <div>
+        { item.description }
+      </div>
+      <div>
+        Inventory: { item.inventory }
+      </div>
+      <button onClick={ addItem }>ADD TO CART</button>
+      <button onClick={ removeItem }>Remove Item</button>
+
+    </div>
+    ))}
+
+    <h1>Cart</h1>
+    {cart.map(item =>(
+      <div>
+        {item}
+      </div>
+    ))}
+  </div>
+  )
+ }
+
+  
+
+
+
+
+
+const mapStateToProps = (state) => ({
+  whatsUp: state.say,
+  count: state.count,
+  stateObject: state,
+  cart: state.cart,
+  productData: state.productData,
+
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  saySomething: () => { dispatch(sayHello())},
+  globalIncrement: () => { dispatch(globalIncrement())},
+  globalDecrement: () => { dispatch(globalDecrement())},
+  addItem: product => {dispatch(addItem(product))},
+  removeitem: product => {dispatch(removeitem(product))},
+
+})
+
+Button = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Button)
+
+export default Button;

src/css/styles.css

+* {
+    box-sizing: border-box;
+}
+body{
+    background-color: beige;
+}

src/data.js

+const productData =     {
+  name: 'smartPhone',
+  description: 'MOTOROLA MOBILE PHONE ',
+   variants: [
+     {
+       name: 'smartPhone',
+       image: 'chivas.jpg',
+       description: 'MOTOROLA MOBILE PHONE ',
+       sku: '113355',
+       type: '1',
+       price: 4.99,
+       inventory: 10
+     },
+     {
+       name: 'NOKIA',
+       image: 'images.jpeg',
+       description: 'SAMSUNG MOBILE PHONE',
+       sku: '224466',
+       type: '2',
+       price: 12.99,
+       inventory: 15
+     },
+     {
+       name: 'LG',
+       image: 'LG.jpg',
+       description: 'IPHONE MOBILE PHONE',
+       sku: '779900',
+       type: '3',
+       price: 34.99,
+       inventory: 30
+     },
+     {
+       name: 'SUMSUNG',
+       image: 'samsung.jpg',
+       description: 'HOLAS MOBILE PHONE',
+       sku: '123123',
+       type: '4',
+       price: 21.99,
+       inventory: 17
+     },
+     {
+       name: 'Digit',
+       image: 'chivas.jpg',
+       description: 'MOTOROLA MOBILE PHONE',
+       sku: '123456',
+       type: '5',
+       price: 60.99,
+       inventory: 30
+     },
+     {
+       name: 'LG',
+       image: 'LG.jpg',
+       description: 'IPHONE MOBILE PHONE',
+       sku: '779900',
+       type: '6',
+       price: 34.99,
+       inventory: 13
+     },
+   ]
+ };
+
+export default productData;

src/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>React HTML template</title>
+</head>
+
+<body>
+    <div id="root"></div>
+
+</body>
+
+</html>

src/index.js

+import React from 'react'
+import { render } from 'react-dom'
+import { createStore} from 'redux'
+import { Provider } from 'react-redux'
+import reducer from './reducers'
+import './css/styles.css'
+import App from "./components/App"
+
+const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)
+

src/reducers/index.js

+
+const initialState = {
+  count: 0,
+  cart: [],
+  total: 0
+}
+
+
+
+const reducer = (state = initialState, action) => {
+
+    switch (action.type) {
+      case 'HELLO_REACT':
+        return { ...state, say : 'Hello World Redux'  };
+
+      case 'GLOBAL_INCREMENT':
+        console.log(state.count)
+        return { ...state, count : state.count + 1  };
+
+      case 'GLOBAL_DECREMENT':
+        console.log(state.count)
+        return { ...state, count : state.count - 1  };
+
+      case 'ADD_ITEM':
+        state.cart.push("item added");
+        return { ...state};
+        
+      case 'REMOVE_ITEM':
+        state.cart.pop();
+        return { ...state};
+
+      default:
+        return state;
+    }
+    
+  };
+  
+  export default reducer;
+  
\ No newline at end of file

webpack.config.js

+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "./src/index.html",  
+        })
+    ],
+    devtool: 'inline-source-map',
+    module: {
+        rules: [
+            { test: /\.css$/, use:['style-loader', 'css-loader']},
+            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
+            {
+                test: /\.html$/,
+                use: [
+                  {
+                    loader: "html-loader",
+                    options: { minimize: true }
+                  }
+                ]
+              }
+        ]
+    }
+};
+
+
+
+
+
+