React counter - TabCorp - 22/02/2018 (#125)

Pragmateam · Feb 23, 2018 · 1745dd4 · 1745dd4
1 parent 1dfc4c2
commit 1745dd4
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 0 deletions.
diff --git a/counter-react/README.md b/counter-react/README.md
@@ -0,0 +1,13 @@
+* **Format:** Mob Programming
+* **Kata:** Working with React without webpack/babel
+* **Where:** [TabCorp](https://www.tabcorp.com.au/)
+* **When:** 22/02/2018
+
+## Kata: React counter without webpack/babel
+
+### Description:
+Use React in a simple way as we used do in old times with jQuery, just linking the CDN file into our index.html.
+We also did a simple redux implementation to lift the app's state to a centralized store.
+
+### Tech Specifications:
+- Uses React
diff --git a/counter-react/index.html b/counter-react/index.html
@@ -0,0 +1,84 @@
+<html>
+
+<body>
+  <div id="root"></div>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script type="text/javascript">
+    const e = React.createElement;
+
+    const rootReducer = (state, action) => {
+      switch (action.type) {
+        case 'UP':
+          return {
+            counter: state.counter + 1
+          }
+        case 'DOWN':
+          return {
+            counter: state.counter - 1
+          }
+        default:
+          return state;
+      }
+    };
+
+
+    class Store {
+      constructor(initialState, reducer) {
+        this.state = initialState;
+        this.reducer = reducer;
+        this.listeners = [];
+      }
+
+      dispatch(action) {
+        this.state = this.reducer(this.state, action);
+        this.listeners.forEach(listener => listener());
+      }
+
+      subscribe(listener) {
+        this.listeners.push(listener);
+      }
+
+      getState() {
+        return this.state;
+      }
+    }
+
+    const store = new Store({ counter: 1 }, rootReducer);
+
+    const connect = (mapStateToProps) => {
+      return Component => {
+        return class extends React.Component {
+          constructor(props) {
+            super(props);
+
+            this.state = store.getState();
+
+            store.subscribe(() => {
+              this.setState(store.getState());
+            });
+          }
+
+          render() {
+            return e(Component, mapStateToProps(store.getState()));
+          }
+        };
+      };
+    };
+
+    const mapStateToProps = (state) => {
+      return { number: state.counter };
+    };
+
+    const Counter = connect(mapStateToProps)(props => {
+      const up = e('button', { onClick: () => store.dispatch({ type: 'UP' }) }, 'UP');
+      const down = e('button', { onClick: () => store.dispatch({ type: 'DOWN' }) }, 'DOWN');
+
+      return e('div', {}, up, props.number, down);
+    });
+
+    ReactDOM.render(e(Counter), document.getElementById('root'));
+  </script>
+</body>
+
+</html>