React Slides
* Adds useState * State * useEffect * Side Effects
This commit is contained in:
276
src/slides.svelte
Normal file
276
src/slides.svelte
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user