diff options
Diffstat (limited to 'src/slides.svelte')
| -rw-r--r-- | src/slides.svelte | 276 |
1 files changed, 276 insertions, 0 deletions
diff --git a/src/slides.svelte b/src/slides.svelte new file mode 100644 index 0000000..64166a8 --- /dev/null +++ b/src/slides.svelte @@ -0,0 +1,276 @@ +<script lang="ts"> + import { + Presentation, + Slide, + FitText, + Step, + Notes, + Media, + Code + } from '@components' + import { signal } from '@motion' + + const circle = signal( + { x: 0, y: 200, r: 80, fill: '#00ffff' }, + { duration: 2000 } + ) + + async function animate() { + await circle.to({ x: 400, fill: '#ffff00' }, { delay: 600 }) + await circle.to({ x: 0, fill: '#00ffff' }, { delay: 300 }) + } + + function resetAnimation() { + circle.reset() + } +</script> + +<Presentation> + <Slide animate> + <p class="font-bold text-8xl text-pink-700">React Builtin Hooks</p> + </Slide> + + <!-- <Slide on:in={animate} on:out={resetAnimation} animate> + <p class="font-bold text-6xl">React Builtin Hooks</p> + + <div> + <ul> + <li>useState()</li> + </ul> + </div> + </Slide> --> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-pink-700">React Builtin Hooks</p> + <ul class="mx-auto w-[200px] list-disc"> + <Step> + <li>useState()</li> + </Step> + <Step> + <li>useEffect()</li> + </Step> + <Step> + <li>useContext()</li> + </Step> + <Step> + <li>useReducer()</li> + </Step> + <Step> + <li>useRef()</li> + </Step> + <Step> + <li>useMemo()</li> + </Step> + <Step> + <li>useCallback()</li> + </Step> + </ul> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-pink-700">What is a State?</p> + <Notes> + <ul> + <li> + State is something which holds the info or details about a Component's State at a TIME + </li> + <li> + It can change over time. + </li> + <li> + Whenever the state changes the COMPONENT attached to it re-renders + </li> + </ul> + </Notes> + </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> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">Side Effects</p> + <Media + class="h-[600px] w-full" + src="https://giphy.com/embed/39sYm1hvWRPN3NxHdI" + type="iframe" + > + </Media> + <Notes> + <ul> + <li> + Something which is outside the scope of REACT + <ul> + <li> + Calling AJAX requests + </li> + <li> + Calling Web API stuffs (document.get...) + </li> + <li> + localStorage etc... + </li> + <li> + setTimeout, setInterval + </li> + </ul> + </li> + <li> + Everything which is not part of React Library + </li> + <li> + Fun Fact - What happens if you call setTimeout without any arguments + <ul> + <li> + Executes outside the execution queue + </li> + </ul> + </li> + </ul> + </Notes> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="1-3|3"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }) + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3-4"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }) ← No Arguments means this will be called each time + this component re-renders + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3-4"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }, []) ← An empty array as an argument will run the + effect once the component is mounted + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3-4"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }, [prop1]) ← We can pass value + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto"> + <Code lang="js" lines="3-4"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }, [prop1, state1]) ← Actually we can pass multiple-values + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3-4"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }, [prop1, state1]) ← This is called dependency list + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="3-4"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect" + }, [prop1, state1]) ← Effect will run whenever any + of the values on dependency list changes + `} + </Code> + </div> + </Slide> + <Slide on:in={animate} animate> + <p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p> + <div class="mx-auto w-[800px]"> + <Code lang="js" lines="4-6"> + {` + useEffect(() => { + document.title = "Hey There, I'm from useEffect"; + + return () => { + // Clean Up function 🧹 + } + }, [prop1, state1]); + `} + </Code> + </div> + <Notes> + <ul> + <li> + You can do removeListeners, unsubscribes, reset layouts etc + </li> + <li> + This will be called by default when component unmouts. + </li> + </ul> + </Notes> + </Slide> +</Presentation> |