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

Slides Content Updated

Browse Source 
* Adds useContext
* Adds useReducer
This commit is contained in:
Indrajith K L
2024-02-08 00:28:23 +05:30
parent 6912ed7a95
commit f0bf80835e
4 changed files with 3178 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Assets/useReducer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

2831
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

339
src/slides.svelte
View File

@@ -10,6 +10,7 @@
} from '@components' } from '@components'
import { signal } from '@motion' import { signal } from '@motion'
import StateNotes from "./notes/state.notes.svelte" import StateNotes from "./notes/state.notes.svelte"
import useReducerImg from "@assets/useReducer.png";
const circle = signal( const circle = signal(
{ x: 0, y: 200, r: 80, fill: '#00ffff' }, { x: 0, y: 200, r: 80, fill: '#00ffff' },
@@ -169,6 +170,9 @@
</ul> </ul>
</Notes> </Notes>
</Slide> </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> <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"> <div class="mx-auto">
@@ -282,4 +286,339 @@
</ul> </ul>
</Notes> </Notes>
</Slide> </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> </Presentation>

1
vite.config.ts
View File

@@ -15,6 +15,7 @@ export default defineConfig({
'@lib': path.resolve(__dirname, './src/lib'), '@lib': path.resolve(__dirname, './src/lib'),
'@stores': path.resolve(__dirname, './src/lib/stores'), '@stores': path.resolve(__dirname, './src/lib/stores'),
'@styles': path.resolve(__dirname, './src/lib/styles'), '@styles': path.resolve(__dirname, './src/lib/styles'),
"@assets": path.resolve(__dirname, "./Assets")
}, },
}, },
}) })