indrajith/react-hooks-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adds Notes and Code Examples

Browse Source 
* Move Notes to separate file
* Adds Code Examples
This commit is contained in:
Indrajith K L
2024-02-05 04:41:32 +05:30
parent a60fcc0e50
commit ebb535b740
2 changed files with 82 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/notes/state.notes.svelte Normal file
View File

@@ -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>

79
src/slides.svelte
View File

@@ -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>