diff --git a/decks/react-events-state/index.js b/decks/react-events-state/index.js index 9b0044a..0a520b5 100644 --- a/decks/react-events-state/index.js +++ b/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 ] diff --git a/decks/react-hooks/.gitignore b/decks/react-hooks/.gitignore new file mode 100644 index 0000000..e0e804b --- /dev/null +++ b/decks/react-hooks/.gitignore @@ -0,0 +1,4 @@ +node_modules +dist + +.idea diff --git a/decks/react-hooks/00-intro.mdx b/decks/react-hooks/00-intro.mdx new file mode 100644 index 0000000..dbe844b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/decks/react-events-state/06-hooks.mdx b/decks/react-hooks/01-use-state.mdx similarity index 81% rename from decks/react-events-state/06-hooks.mdx rename to decks/react-hooks/01-use-state.mdx index 4137eed..21708e2 100644 --- a/decks/react-events-state/06-hooks.mdx +++ b/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 --- diff --git a/decks/react-hooks/02-use-reducer.mdx b/decks/react-hooks/02-use-reducer.mdx new file mode 100644 index 0000000..4557585 --- /dev/null +++ b/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 diff --git a/decks/react-events-state/07-hooks-advanced.mdx b/decks/react-hooks/03-use-effect.mdx similarity index 99% rename from decks/react-events-state/07-hooks-advanced.mdx rename to decks/react-hooks/03-use-effect.mdx index 3a748f4..9d5d25e 100644 --- a/decks/react-events-state/07-hooks-advanced.mdx +++ b/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 diff --git a/decks/react-hooks/images/.gitkeep b/decks/react-hooks/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/decks/react-hooks/index.js b/decks/react-hooks/index.js new file mode 100644 index 0000000..8230625 --- /dev/null +++ b/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] \ No newline at end of file diff --git a/decks/react-hooks/package.json b/decks/react-hooks/package.json new file mode 100644 index 0000000..6079264 --- /dev/null +++ b/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" + } +} diff --git a/decks/react-hooks/readme.mdx b/decks/react-hooks/readme.mdx new file mode 100644 index 0000000..8c05e12 --- /dev/null +++ b/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` \ No newline at end of file diff --git a/decks/react-hooks/snippets/.gitkeep b/decks/react-hooks/snippets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/decks/react-events-state/snippets/hooks-vs-classes-1.snippet b/decks/react-hooks/snippets/hooks-vs-classes-1.snippet similarity index 100% rename from decks/react-events-state/snippets/hooks-vs-classes-1.snippet rename to decks/react-hooks/snippets/hooks-vs-classes-1.snippet diff --git a/decks/react-events-state/snippets/hooks-vs-classes-2.snippet b/decks/react-hooks/snippets/hooks-vs-classes-2.snippet similarity index 100% rename from decks/react-events-state/snippets/hooks-vs-classes-2.snippet rename to decks/react-hooks/snippets/hooks-vs-classes-2.snippet