diff options
Diffstat (limited to 'src/slides.svelte')
| -rw-r--r-- | src/slides.svelte | 353 |
1 files changed, 346 insertions, 7 deletions
diff --git a/src/slides.svelte b/src/slides.svelte index fe5582b..3be07cd 100644 --- a/src/slides.svelte +++ b/src/slides.svelte @@ -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' }, @@ -171,6 +172,9 @@ </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"> <Code lang="js"> {` @@ -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> |