From ebb535b7406837fbb1b1bc07b09aa4e8991f4005 Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Mon, 5 Feb 2024 04:41:32 +0530
Subject: Adds Notes and Code Examples
* Move Notes to separate file
* Adds Code Examples
---
src/slides.svelte | 79 +++++++++++++++++++++++++++++++------------------------
1 file changed, 44 insertions(+), 35 deletions(-)
(limited to 'src/slides.svelte')
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 @@
useState()
-
-
- -
- useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT
-
- -
- useState ENCAPSULATES only a single value
-
- -
- For mulatiple values you may need to call multiple useState's
-
- -
- useState arguments
-
- -
- Initialization of a state variable
-
- -
- Passing function as initial value - to calculate an initial value
-
-
-
- -
- Managing multiple states
-
- -
- Multi-variable's
-
- -
- Object as value
-
-
-
-
-
+
+
+ {`
+ import React, {useState} from 'react';
+
+ const [value, setValue] = useState(null);
+ `}
+
+
+
+
+
+ useState()
+
+
+ {`
+ import React, {useState} from 'react';
+
+ const [value, setValue] = useState({
+ id: 12,
+ name: "YouName"
+ })
+ `}
+
+
+
+
+
+ useState()
+
+
+ {`
+ import React, {useState} from 'react';
+
+ function calculateValue() {
+ return Math.sqrt(64);
+ }
+
+ const [value, setValue] = useState(calculateValue());
+ `}
+
+
+
Side Effects
--
cgit v1.2.3