Slides Content Updated
* Adds useContext * Adds useReducer
This commit is contained in:
BIN
Assets/useReducer.png
Normal file
BIN
Assets/useReducer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
2831
package-lock.json
generated
Normal file
2831
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -10,6 +10,7 @@
|
||||
} from '@components'
|
||||
import { signal } from '@motion'
|
||||
import StateNotes from "./notes/state.notes.svelte"
|
||||
import useReducerImg from "@assets/useReducer.png";
|
||||
|
||||
const circle = signal(
|
||||
{ x: 0, y: 200, r: 80, fill: '#00ffff' },
|
||||
@@ -169,6 +170,9 @@
|
||||
</ul>
|
||||
</Notes>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
@@ -182,7 +186,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
@@ -195,7 +199,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
@@ -208,7 +212,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
@@ -220,7 +224,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
@@ -232,7 +236,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
@@ -244,7 +248,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
@@ -257,7 +261,7 @@
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="4-6">
|
||||
{`
|
||||
@@ -282,4 +286,339 @@
|
||||
</ul>
|
||||
</Notes>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-4">
|
||||
{`
|
||||
import { createContext, useContext, useState } from 'react';
|
||||
|
||||
const AppContext = createContext(null);
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="5-18">
|
||||
{`
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
|
||||
export const AppContext = createContext(null);
|
||||
|
||||
export default function MyApp() {
|
||||
const [someState, setSomeState] = useState('hello');
|
||||
return (
|
||||
<>
|
||||
<AppContext.Provider value={someState}>
|
||||
<MyComponent />
|
||||
</AppContext.Provider>
|
||||
<Button onClick={() => {
|
||||
setTheme(someState === 'hello' ? 'World' : 'Blah');
|
||||
}}>
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="6">
|
||||
{`
|
||||
import React, { useContext, useState } from 'react';
|
||||
|
||||
import {AppContext} from "./MyApp";
|
||||
|
||||
export default function MyComponent() {
|
||||
const appContext = useContext(AppContext)
|
||||
return (
|
||||
<div>{appContext}</div>
|
||||
)
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="8">
|
||||
{`
|
||||
import React, { useContext, useState } from 'react';
|
||||
|
||||
import {AppContext} from "./MyApp";
|
||||
|
||||
export default function MyComponent() {
|
||||
const appContext = useContext(AppContext)
|
||||
return (
|
||||
<div>{appContext}</div>
|
||||
)
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<Media
|
||||
class="h-[501px] w-[891px]"
|
||||
src={useReducerImg}
|
||||
type="iframe"
|
||||
/>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="1">
|
||||
{`
|
||||
import {useReducer} from "react";
|
||||
|
||||
function myReducer(state, action) {
|
||||
if(action.type === "on") {
|
||||
return {
|
||||
data: "Switch on"
|
||||
}
|
||||
} else if(action.type === "of") {
|
||||
return {
|
||||
data: "Switch Off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MyComponent(props) {
|
||||
const [state, dispatch] = useReducer(myReducer, {});
|
||||
|
||||
function onSwitchToggle(status) {
|
||||
dispatch({
|
||||
type: status
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<button onClick={onSwitchToggle("on")}>ON</button>
|
||||
<button onClick={onSwitchToggle("off")}>Off</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="15-31">
|
||||
{`
|
||||
import {useReducer} from "react";
|
||||
|
||||
function myReducer(state, action) {
|
||||
if(action.type === "on") {
|
||||
return {
|
||||
data: "Switch on"
|
||||
}
|
||||
} else if(action.type === "of") {
|
||||
return {
|
||||
data: "Switch Off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MyComponent(props) {
|
||||
const [state, dispatch] = useReducer(myReducer, {});
|
||||
|
||||
function onSwitchToggle(status) {
|
||||
dispatch({
|
||||
type: status
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<button onClick={onSwitchToggle("on")}>ON</button>
|
||||
<button onClick={onSwitchToggle("off")}>Off</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="3-13">
|
||||
{`
|
||||
import {useReducer} from "react";
|
||||
|
||||
function myReducer(state, action) {
|
||||
if(action.type === "on") {
|
||||
return {
|
||||
data: "Switch on"
|
||||
}
|
||||
} else if(action.type === "of") {
|
||||
return {
|
||||
data: "Switch Off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MyComponent(props) {
|
||||
const [state, dispatch] = useReducer(myReducer, {});
|
||||
|
||||
function onSwitchToggle(status) {
|
||||
dispatch({
|
||||
type: status
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<button onClick={onSwitchToggle("on")}>ON</button>
|
||||
<button onClick={onSwitchToggle("off")}>Off</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" >
|
||||
{`
|
||||
import {useReducer} from "react";
|
||||
|
||||
function myReducer(state, action) {
|
||||
if(action.type === "on") {
|
||||
return {
|
||||
data: "Switch on"
|
||||
}
|
||||
} else if(action.type === "of") {
|
||||
return {
|
||||
data: "Switch Off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MyComponent(props) {
|
||||
const [state, dispatch] = useReducer(myReducer, {});
|
||||
|
||||
function onSwitchToggle(status) {
|
||||
dispatch({
|
||||
type: status
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<button onClick={onSwitchToggle("on")}>ON</button>
|
||||
<button onClick={onSwitchToggle("off")}>Off</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="4-14">
|
||||
{`
|
||||
import {useReducer} from "react";
|
||||
|
||||
function myReducer(state, action) {
|
||||
if(action.type === "on") {
|
||||
return {
|
||||
...state,
|
||||
data: "Switch on",
|
||||
}
|
||||
} else if(action.type === "of") {
|
||||
return {
|
||||
...state,
|
||||
data: "Switch Off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MyComponent(props) {
|
||||
const [state, dispatch] = useReducer(myReducer, {});
|
||||
|
||||
function onSwitchToggle(status) {
|
||||
dispatch({
|
||||
type: status
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<button onClick={onSwitchToggle("on")}>ON</button>
|
||||
<button onClick={onSwitchToggle("off")}>Off</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
<Slide on:in={animate} animate>
|
||||
<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
|
||||
<div class="mx-auto">
|
||||
<Code lang="js" lines="6|11">
|
||||
{`
|
||||
import {useReducer} from "react";
|
||||
|
||||
function myReducer(state, action) {
|
||||
if(action.type === "on") {
|
||||
return {
|
||||
...state,
|
||||
data: "Switch on",
|
||||
}
|
||||
} else if(action.type === "of") {
|
||||
return {
|
||||
...state,
|
||||
data: "Switch Off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MyComponent(props) {
|
||||
const [state, dispatch] = useReducer(myReducer, {});
|
||||
|
||||
function onSwitchToggle(status) {
|
||||
dispatch({
|
||||
type: status
|
||||
})
|
||||
}
|
||||
|
||||
return(
|
||||
<div>
|
||||
<button onClick={onSwitchToggle("on")}>ON</button>
|
||||
<button onClick={onSwitchToggle("off")}>Off</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
`}
|
||||
</Code>
|
||||
</div>
|
||||
</Slide>
|
||||
</Presentation>
|
||||
|
||||
@@ -15,6 +15,7 @@ export default defineConfig({
|
||||
'@lib': path.resolve(__dirname, './src/lib'),
|
||||
'@stores': path.resolve(__dirname, './src/lib/stores'),
|
||||
'@styles': path.resolve(__dirname, './src/lib/styles'),
|
||||
"@assets": path.resolve(__dirname, "./Assets")
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user