React Slides

* Adds useState
* State
* useEffect
* Side Effects

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>