diff options
| author | Indrajith K L | 2024-02-05 04:41:32 +0530 |
|---|---|---|
| committer | Indrajith K L | 2024-02-05 04:41:32 +0530 |
| commit | ebb535b7406837fbb1b1bc07b09aa4e8991f4005 (patch) | |
| tree | a0978e8a86bec0a4904119792df8e32ed0c0ab54 | |
| parent | a60fcc0e5074d4765a71df1cfc90a0a6375716cd (diff) | |
| download | react-hooks-training-ebb535b7406837fbb1b1bc07b09aa4e8991f4005.tar.gz react-hooks-training-ebb535b7406837fbb1b1bc07b09aa4e8991f4005.tar.bz2 react-hooks-training-ebb535b7406837fbb1b1bc07b09aa4e8991f4005.zip | |
Adds Notes and Code Examples
* Move Notes to separate file
* Adds Code Examples
| -rw-r--r-- | src/notes/state.notes.svelte | 38 | ||||
| -rw-r--r-- | src/slides.svelte | 79 |
2 files changed, 82 insertions, 35 deletions
diff --git a/src/notes/state.notes.svelte b/src/notes/state.notes.svelte new file mode 100644 index 0000000..bde0f65 --- /dev/null +++ b/src/notes/state.notes.svelte @@ -0,0 +1,38 @@ +<script lang="ts"> + import { Notes } from '@components' +</script> +<Notes> + <ul> + <li> + useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT + </li> + <li> + useState ENCAPSULATES only a single value + </li> + <li> + For mulatiple values you may need to call multiple useState's + </li> + <li> + useState arguments + <ul> + <li> + Initialization of a state variable + </li> + <li> + Passing function as initial value - to calculate an initial value + </li> + </ul> + </li> + <li> + Managing multiple states + <ul> + <li> + Multi-variable's + </li> + <li> + Object as value + </li> + </ul> + </li> + </ul> +</Notes>
\ No newline at end of file diff --git a/src/slides.svelte b/src/slides.svelte index 64166a8..c4a3d70 100644 --- a/src/slides.svelte +++ b/src/slides.svelte @@ -9,6 +9,7 @@ Code } from '@components' import { signal } from '@motion' + import StateNotes from "./notes/state.notes.svelte" const circle = signal( { x: 0, y: 200, r: 80, fill: '#00ffff' }, @@ -83,41 +84,49 @@ </Slide> <Slide on:in={animate} animate> <p class="font-bold text-6xl mb-4 text-pink-700">useState()</p> - <Notes> - <ul> - <li> - useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT - </li> - <li> - useState ENCAPSULATES only a single value - </li> - <li> - For mulatiple values you may need to call multiple useState's - </li> - <li> - useState arguments - <ul> - <li> - Initialization of a state variable - </li> - <li> - Passing function as initial value - to calculate an initial value - </li> - </ul> - </li> - <li> - Managing multiple states - <ul> - <li> - Multi-variable's - </li> - <li> - Object as value - </li> - </ul> - </li> - </ul> - </Notes> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3"> + {` + import React, {useState} from 'react'; + + const [value, setValue] = useState(null); + `} + </Code> + </div> + <StateNotes></StateNotes> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-pink-700">useState()</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3-6"> + {` + import React, {useState} from 'react'; + + const [value, setValue] = useState({ + id: 12, + name: "YouName" + }) + `} + </Code> + </div> + <StateNotes></StateNotes> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-pink-700">useState()</p> + <div class="mx-auto"> + <Code lang="js" lines="7|3-5|3-7"> + {` + import React, {useState} from 'react'; + + function calculateValue() { + return Math.sqrt(64); + } + + const [value, setValue] = useState(calculateValue()); + `} + </Code> + </div> + <StateNotes></StateNotes> </Slide> <Slide on:in={animate} animate> <p class="font-bold text-6xl mb-4 text-yellow-500">Side Effects</p> |