[#93] Create React Hooks Deck

decks/react-events-state/index.js

@@ -3,8 +3,7 @@ import dataFlow from './02-react-state-and-data-flow.mdx'
 import classBased from './03-class-based-components.mdx';
 import stateExercise from './stateful-component-exercise.mdx'
 import lifeCycle from './04-react-life-cycle.mdx';
-import hooks from './06-hooks.mdx'
-import hooksAdvanced from './07-hooks-advanced.mdx'
+
 import dataFetch from './05-data-fetch.mdx'
 import dataFetchE from './99-data-fetch-exercises.mdx';
 
@@ -17,7 +16,5 @@ export default [
   ...stateExercise,
   ...lifeCycle,
   ...dataFetch,
-  ...hooks,
-  ...dataFetchE,
-  ...hooksAdvanced
+  ...dataFetchE
 ]

decks/react-hooks/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+
+.idea

decks/react-hooks/00-intro.mdx

@@ -0,0 +1,32 @@
+
+import { FullScreenCode, Invert } from "mdx-deck/layouts";
+import { CodeSurfer } from "mdx-deck-code-surfer"
+import nightOwl from "prism-react-renderer/themes/nightOwl"
+
+export default Invert 
+
+# React Hooks
+
+---
+
+## Hooks
+
+- A brand-new feature in React
+- Allows you to create stateful components without classes
+- Replaces setState and lifecycle methods
+
+---
+
+## What are Hooks?
+
+- Functions you import from React
+- Usable in any kind of component
+- Can be used multiple times per component
+
+---
+
+## Why use Hooks?
+
+- Avoids issues with JavaScript classes
+- Tends to require less code
+- Helps avoid replication

decks/react-events-state/06-hooks.mdx → decks/react-hooks/01-use-state.mdx

@@ -11,31 +11,7 @@ const BRANCH_NAME = 'master'; // tood: change before merge
 
 export default Invert
 
-# Hooks
-
----
-
-## Hooks
-
-- A brand-new feature in React
-- Allows you to create stateful components without classes
-- Replaces setState and lifecycle methods
-
----
-
-## What are Hooks?
-
-- Functions you import from React
-- Usable in any kind of component
-- Can be used multiple times per component
-
----
-
-## Why use Hooks?
-
-- Avoids issues with JavaScript classes
-- Tends to require less code
-- Helps avoid replication
+# useState
 
 ---
 

decks/react-hooks/02-use-reducer.mdx

@@ -0,0 +1,18 @@
+import { FullScreenCode, Split, SplitRight, Invert } from "mdx-deck/layouts";
+import { Head, Appear, Image, withDeck } from 'mdx-deck'
+import { CodeSurfer } from "mdx-deck-code-surfer"
+import nightOwl from "prism-react-renderer/themes/nightOwl"
+
+import ReplIt from "../../components/replit";
+import CodeSandbox from "../../components/codesandbox";
+import ImageSplit from "../../components/ImageSplit";
+import Box from "../../components/Box";
+const BRANCH_NAME = 'master'; // tood: change before merge
+
+export default Invert
+
+# useReducer
+
+---
+
+* TODO 

decks/react-events-state/07-hooks-advanced.mdx → decks/react-hooks/03-use-effect.mdx

@@ -11,7 +11,9 @@ const BRANCH_NAME = 'master'; // tood: change before merge
 
 export default Invert
 
-# Hooks - Advanced
+# useEffect 
+
+---
 
 ## `useEffect` Hook
 - Can replace componentWillUpdate + componentDidMount

decks/react-hooks/index.js

@@ -0,0 +1,7 @@
+import intro from './00-intro.mdx';
+import useState from './01-use-state.mdx';
+import useReducer from './02-use-reducer.mdx';
+import useEffect from './03-use-effect.mdx';
+
+export { default as theme } from '../../theme'
+export default [ ...intro, ...useState, ...useReducer, ...useEffect]

decks/react-hooks/package.json

@@ -0,0 +1,28 @@
+{
+  "private": true,
+  "name": "react-hooks-deck",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "mdx-deck index.js",
+    "build": "yarn run now-build",
+    "build:presentation": "mdx-deck build index.js --no-html ",
+    "build:images": "cp -r images dist/",
+    "build:assets": "cp -r snippets dist/",
+    "now-build": "yarn run build:presentation && yarn run build:images && yarn run build:assets",
+    "deploy": "now"
+  },
+  "devDependencies": {
+    "ajv": "6.8.1",
+    "mdx-deck": "1.8.2",
+    "mdx-deck-code-surfer": "0.5.5",
+    "prism-react-renderer": "^0.1.6",
+    "raw-loader": "1.0.0"
+  },
+  "dependencies": {
+    "@researchgate/react-intersection-observer": "^0.7.4",
+    "intersection-observer": "^0.5.1",
+    "mdx-code": "^1.1.3",
+    "mdx-deck-live-code": "^1.0.1",
+    "react-syntax-highlighter": "^10.1.3"
+  }
+}

decks/react-hooks/readme.mdx

@@ -0,0 +1,11 @@
+# React Hooks
+
+Training Deck for React Hooks 
+
+To run deck from root of repo:
+
+`yarn workspace react-hooks-deck start`
+
+If in react-hooks folder, 
+
+`yarn start`