feat(setup): initital commit with working test

apexad · apexad · commit b3319282edf0 · 2020-02-27T21:04:00.000-07:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,12 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#node/weback dirs
+dist
+node_modules
+
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+# apexad's personal react redux webpack setup
+  - I set this up so I don't have to do i every time I want to start a poject
+  - Uses React, Redux, Webpack, Axios and has a fake server using `json-server`
+  - That is all
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "apexad-react-redux-webpack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --open --mode development",
+    "build": "webpack --mode production",
+    "start:server": "json-server --watch test.json",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.8.6",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.8.6",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "json-server": "^0.16.1",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-redux": "^7.2.0",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
+  }
+}
diff --git a/src/actions/test.js b/src/actions/test.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const testAction = () => dispatch => {
+  dispatch({
+   type: 'TEST_ACTION',
+   payload: 'test-action-result'
+  })
+ }
+
+ export const testFetch = () => dispatch => {
+  axios.get('http://localhost:3000/tests')
+  .then((response) => {
+    dispatch({
+      type: 'TEST_FETCH',
+      payload: response.data,
+    });
+  })
+  .catch(error => {
+    dispatch({
+      type: 'TEST_ERROR'
+    });
+  })
+ }
+ 
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import { connect } from 'react-redux';
+import { testFetch } from '../actions/test';
+
+class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      value: ""
+    };
+  }
+
+  componentDidMount() {
+    this.props.testFetch();
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Test</h1>
+        {this.props.test.error && <p>Did you run npm start:server?</p>}
+        <ul>
+        {
+          this.props.test.test.map(item => {
+            return <li key={item.name}>{item.name} - {item.data}</li>
+          })
+        }
+        </ul>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => ({
+  test: state.testReducer,
+ })
+
+ const mapDispatchToProps = dispatch => ({
+  testFetch: () => dispatch(testFetch())
+ })
+
+ export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Test Demo</title>
+</head>
+<body>
+<div id="container"></div>
+</body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,17 @@
+/*
+ src/index.js
+*/
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux'
+import configureStore from './store';
+import './index.css';
+import App from './components/App';
+
+ReactDOM.render(
+  <Provider store={configureStore()}>
+    <App />
+  </Provider>,
+ document.getElementById('container')
+);
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import testReducer from './test';
+
+export default combineReducers({
+ testReducer,
+});
diff --git a/src/reducers/test.js b/src/reducers/test.js
@@ -0,0 +1,19 @@
+const inititalState = {
+  test: [],
+  error: false,
+};
+
+export default (state = inititalState, action) => {
+  switch (action.type) {
+    case 'TEST_FETCH':
+      return { ...state,
+        test: action.payload
+      };
+    case 'TEST_ERROR':
+      return { ...state,
+        error: true,
+      };
+    default:
+      return state;
+  }
+}
diff --git a/src/store.js b/src/store.js
@@ -0,0 +1,14 @@
+/*
+ * src/store.js
+ * No initialState
+*/
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from './reducers/';
+
+export default function configureStore() {
+ return createStore(
+  rootReducer,
+   applyMiddleware(thunk)
+ );
+}
diff --git a/test.json b/test.json
@@ -0,0 +1,32 @@
+{
+  "tests": [
+    {
+      "name": "test1",
+      "data": "data1"
+    },
+    {
+      "name": "test2",
+      "data": "data2"
+    },
+    {
+      "name": "test3",
+      "data": "data3"
+    },
+    {
+      "name": "test4",
+      "data": "data4"
+    },
+    {
+      "name": "test5",
+      "data": "data5"
+    },
+    {
+      "name": "test6",
+      "data": "data6"
+    },
+    {
+      "name": "test7",
+      "data": "data7"
+    }
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,29 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: "html-loader"
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: "./src/index.html",
+      filename: "./index.html"
+    })
+  ]
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "presets": ["@babel/preset-env", "@babel/preset-react"],
 +  "plugins": ["@babel/plugin-proposal-class-properties"]
 +}