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 /src/slides.svelte | |
| 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
Diffstat (limited to 'src/slides.svelte')
| -rw-r--r-- | src/slides.svelte | 79 |
1 files changed, 44 insertions, 35 deletions
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> |