├── .gitignore ├── indirect-pokemon ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── store.tsx │ ├── assets │ │ └── react.svg │ └── App.tsx ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── package.json └── public │ └── vite.svg ├── native-context ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── App.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── native-pokemon ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── App.tsx │ ├── store.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── direct-pokemon-jotai ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── store.tsx │ ├── App.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── package.json └── public │ └── vite.svg ├── direct-pokemon-redux ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── App.tsx │ ├── store.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── package.json └── public │ └── vite.svg ├── direct-pokemon-valtio ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── store.tsx │ ├── App.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── package.json └── public │ └── vite.svg ├── direct-pokemon-starter ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── store.tsx │ ├── main.tsx │ ├── App.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── direct-pokemon-zustand ├── src │ ├── App.css │ ├── vite-env.d.ts │ ├── index.css │ ├── main.tsx │ ├── store.tsx │ ├── App.tsx │ └── assets │ │ └── react.svg ├── postcss.config.cjs ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.node.json ├── .gitignore ├── index.html ├── tsconfig.json ├── package.json └── public │ └── vite.svg ├── native-use ├── public │ ├── data.json │ └── vite.svg ├── vite.config.js ├── src │ ├── App.jsx │ ├── main.jsx │ ├── App.css │ ├── index.css │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html └── package.json ├── native-useEffect ├── public │ ├── names.json │ ├── jack.json │ ├── jane.json │ ├── jill.json │ └── vite.svg ├── vite.config.js ├── src │ ├── main.jsx │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── package.json └── yarn.lock ├── native-useReducer ├── workbook.ts ├── vite.config.js ├── src │ ├── main.jsx │ ├── App.css │ ├── index.css │ ├── App.jsx │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── package.json └── public │ └── vite.svg ├── native-useRef ├── vite.config.js ├── src │ ├── main.jsx │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── package.json └── public │ └── vite.svg ├── native-useState ├── vite.config.js ├── getState-workbook.ts ├── src │ ├── main.jsx │ ├── App.css │ ├── App.jsx │ ├── index.css │ └── assets │ │ └── react.svg ├── .gitignore ├── index.html ├── package.json └── public │ └── vite.svg └── native-useMemoAndCallback ├── vite.config.js ├── src ├── main.jsx ├── App.css ├── App.jsx ├── index.css └── assets │ └── react.svg ├── .gitignore ├── index.html ├── package.json └── public └── vite.svg /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /indirect-pokemon/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-context/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-pokemon/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-use/public/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Jack" 3 | } -------------------------------------------------------------------------------- /native-useEffect/public/names.json: -------------------------------------------------------------------------------- 1 | ["jill", "jack", "jane"] -------------------------------------------------------------------------------- /indirect-pokemon/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /native-context/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /native-pokemon/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /native-useEffect/public/jack.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": 2, 3 | "name": "Jack Doe" 4 | } -------------------------------------------------------------------------------- /native-useEffect/public/jane.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": 3, 3 | "name": "Jane Doe" 4 | } -------------------------------------------------------------------------------- /native-useEffect/public/jill.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": 1, 3 | "name": "Jill Doe" 4 | } -------------------------------------------------------------------------------- /indirect-pokemon/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /native-context/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /native-pokemon/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /indirect-pokemon/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /native-context/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /native-pokemon/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /direct-pokemon-redux/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /direct-pokemon-starter/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /native-useReducer/workbook.ts: -------------------------------------------------------------------------------- 1 | const numbers = [10, 20, 30]; 2 | 3 | let total = 0; 4 | for (const n of numbers) { 5 | total += n; 6 | } 7 | total; 8 | 9 | numbers.reduce((cv, n) => cv + n, 0); 10 | -------------------------------------------------------------------------------- /native-use/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-useRef/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /indirect-pokemon/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-context/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-pokemon/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-useEffect/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-useReducer/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-useState/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /direct-pokemon-redux/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /direct-pokemon-starter/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /native-context/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /native-pokemon/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /indirect-pokemon/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /native-useEffect/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render(); 7 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /direct-pokemon-redux/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /direct-pokemon-starter/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /native-context/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /native-pokemon/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /indirect-pokemon/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /native-useState/getState-workbook.ts: -------------------------------------------------------------------------------- 1 | function getState() { 2 | let value = 42; 3 | return [value]; 4 | } 5 | 6 | let [myValue] = getState(); 7 | myValue; 8 | myValue = 22; 9 | myValue; 10 | 11 | let [myValueAgain] = getState(); 12 | myValueAgain; 13 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /direct-pokemon-redux/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /direct-pokemon-starter/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /native-use/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { use } from "react"; 2 | 3 | const res = fetch("/data.json").then((res) => res.json()); 4 | 5 | function App() { 6 | const data = use(res); 7 | return
{JSON.stringify(data)}
; 8 | } 9 | 10 | export default App; 11 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/store.tsx: -------------------------------------------------------------------------------- 1 | export interface Pokemon { 2 | id: number; 3 | name: string; 4 | type: string[]; 5 | hp: number; 6 | attack: number; 7 | defense: number; 8 | special_attack: number; 9 | special_defense: number; 10 | speed: number; 11 | } 12 | -------------------------------------------------------------------------------- /native-use/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-useRef/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-useReducer/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-useState/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-context/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-pokemon/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /indirect-pokemon/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /native-use/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-useRef/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /indirect-pokemon/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-context/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-pokemon/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-useEffect/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-useReducer/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-useState/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /direct-pokemon-redux/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /direct-pokemon-starter/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /native-use/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-useRef/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-useState/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-context/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-pokemon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-useEffect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-useReducer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /direct-pokemon-redux/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /indirect-pokemon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /direct-pokemon-starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /native-useRef/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-useref", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "vite": "^3.2.0" 20 | } 21 | } -------------------------------------------------------------------------------- /native-use/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-use", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "experimental", 13 | "react-dom": "experimental" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "vite": "^3.2.0" 20 | } 21 | } -------------------------------------------------------------------------------- /native-useState/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-usestate", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "vite": "^3.2.0" 20 | } 21 | } -------------------------------------------------------------------------------- /native-useEffect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-useeffect", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "vite": "^3.2.0" 20 | } 21 | } -------------------------------------------------------------------------------- /native-useReducer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-usereducer", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "vite": "^3.2.0" 20 | } 21 | } -------------------------------------------------------------------------------- /native-useMemoAndCallback/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-usememoandcallback", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "vite": "^3.2.0" 20 | } 21 | } -------------------------------------------------------------------------------- /native-context/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "autoprefixer": "^10.4.13", 20 | "postcss": "^8.4.18", 21 | "tailwindcss": "^3.2.1", 22 | "typescript": "^4.6.4", 23 | "vite": "^3.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /native-context/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /native-pokemon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "autoprefixer": "^10.4.13", 20 | "postcss": "^8.4.18", 21 | "tailwindcss": "^3.2.1", 22 | "typescript": "^4.6.4", 23 | "vite": "^3.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /native-pokemon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /indirect-pokemon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /direct-pokemon-redux/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /direct-pokemon-starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.22", 17 | "@types/react-dom": "^18.0.7", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "autoprefixer": "^10.4.13", 20 | "postcss": "^8.4.18", 21 | "tailwindcss": "^3.2.1", 22 | "typescript": "^4.6.4", 23 | "vite": "^3.2.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /direct-pokemon-starter/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "valtio": "^1.7.5" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.22", 18 | "@types/react-dom": "^18.0.7", 19 | "@vitejs/plugin-react": "^2.2.0", 20 | "autoprefixer": "^10.4.13", 21 | "postcss": "^8.4.18", 22 | "tailwindcss": "^3.2.1", 23 | "typescript": "^4.6.4", 24 | "vite": "^3.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "zustand": "^4.1.3" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.22", 18 | "@types/react-dom": "^18.0.7", 19 | "@vitejs/plugin-react": "^2.2.0", 20 | "autoprefixer": "^10.4.13", 21 | "postcss": "^8.4.18", 22 | "tailwindcss": "^3.2.1", 23 | "typescript": "^4.6.4", 24 | "vite": "^3.2.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /indirect-pokemon/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tanstack/react-location": "^3.7.4", 13 | "@tanstack/react-query": "^4.13.4", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.22", 19 | "@types/react-dom": "^18.0.7", 20 | "@vitejs/plugin-react": "^2.2.0", 21 | "autoprefixer": "^10.4.13", 22 | "postcss": "^8.4.18", 23 | "tailwindcss": "^3.2.1", 24 | "typescript": "^4.6.4", 25 | "vite": "^3.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /direct-pokemon-redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@reduxjs/toolkit": "^1.8.6", 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-redux": "^8.0.4", 16 | "redux": "^4.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.0.22", 20 | "@types/react-dom": "^18.0.7", 21 | "@vitejs/plugin-react": "^2.2.0", 22 | "autoprefixer": "^10.4.13", 23 | "postcss": "^8.4.18", 24 | "tailwindcss": "^3.2.1", 25 | "typescript": "^4.6.4", 26 | "vite": "^3.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /native-use/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /native-useEffect/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /native-useReducer/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /native-useRef/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /native-useState/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native-context", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@tanstack/query-core": "^4.13.4", 13 | "jotai": "^1.9.0", 14 | "jotai-tanstack-query": "^0.4.0", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.0.22", 20 | "@types/react-dom": "^18.0.7", 21 | "@vitejs/plugin-react": "^2.2.0", 22 | "autoprefixer": "^10.4.13", 23 | "postcss": "^8.4.18", 24 | "tailwindcss": "^3.2.1", 25 | "typescript": "^4.6.4", 26 | "vite": "^3.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | } 13 | .logo:hover { 14 | filter: drop-shadow(0 0 2em #646cffaa); 15 | } 16 | .logo.react:hover { 17 | filter: drop-shadow(0 0 2em #61dafbaa); 18 | } 19 | 20 | @keyframes logo-spin { 21 | from { 22 | transform: rotate(0deg); 23 | } 24 | to { 25 | transform: rotate(360deg); 26 | } 27 | } 28 | 29 | @media (prefers-reduced-motion: no-preference) { 30 | a:nth-of-type(2) .logo { 31 | animation: logo-spin infinite 20s linear; 32 | } 33 | } 34 | 35 | .card { 36 | padding: 2em; 37 | } 38 | 39 | .read-the-docs { 40 | color: #888; 41 | } 42 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { proxy } from "valtio"; 2 | import { derive } from "valtio/utils"; 3 | 4 | export interface Pokemon { 5 | id: number; 6 | name: string; 7 | type: string[]; 8 | hp: number; 9 | attack: number; 10 | defense: number; 11 | special_attack: number; 12 | special_defense: number; 13 | speed: number; 14 | } 15 | 16 | export const search = proxy({ 17 | query: "", 18 | }); 19 | 20 | const allPokemon = proxy({ 21 | pokemon: [] as Pokemon[], 22 | }); 23 | 24 | export const pokemon = derive({ 25 | list: (get) => { 26 | const query = get(search).query.toLowerCase(); 27 | return get(allPokemon) 28 | .pokemon.filter((p) => p.name.toLowerCase().includes(query)) 29 | .slice(0, 10) 30 | .sort((a, b) => a.name.localeCompare(b.name)); 31 | }, 32 | }); 33 | 34 | fetch("/pokemon.json") 35 | .then((res) => res.json()) 36 | .then((pokemon) => { 37 | allPokemon.pokemon = pokemon; 38 | }); 39 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { atom } from "jotai"; 2 | import { atomsWithQuery } from "jotai-tanstack-query"; 3 | 4 | export interface Pokemon { 5 | id: number; 6 | name: string; 7 | type: string[]; 8 | hp: number; 9 | attack: number; 10 | defense: number; 11 | special_attack: number; 12 | special_defense: number; 13 | speed: number; 14 | } 15 | 16 | export const searchAtom = atom(""); 17 | 18 | const [allPokemon] = atomsWithQuery(() => ({ 19 | queryKey: ["pokemon"], 20 | queryFn: () => fetch("/pokemon.json").then((res) => res.json()), 21 | })); 22 | 23 | export const pokemonAtom = atom((get) => { 24 | const search = get(searchAtom).toLowerCase(); 25 | const all = get(allPokemon); 26 | return all.filter((p) => p.name.toLowerCase().includes(search)); 27 | }); 28 | 29 | export const sortedPokemonAtom = atom((get) => { 30 | const pokemon = get(pokemonAtom); 31 | return pokemon.slice(0, 10).sort((a, b) => a.name.localeCompare(b.name)); 32 | }); 33 | -------------------------------------------------------------------------------- /native-useRef/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect, useState } from "react"; 2 | 3 | function App() { 4 | const inputRef = useRef(null); 5 | 6 | useEffect(() => { 7 | inputRef.current.focus(); 8 | }, []); 9 | 10 | const idRef = useRef(1); 11 | const [names, setNames] = useState([ 12 | { id: idRef.current++, name: "John" }, 13 | { id: idRef.current++, name: "Jane" }, 14 | ]); 15 | 16 | const onAddName = () => { 17 | setNames([ 18 | ...names, 19 | { 20 | id: idRef.current++, 21 | name: inputRef.current.value, 22 | }, 23 | ]); 24 | inputRef.current.value = ""; 25 | }; 26 | 27 | return ( 28 |
29 |
30 | {names.map((name) => ( 31 |
32 | {name.id} - {name.name} 33 |
34 | ))} 35 |
36 | 37 | 38 |
39 | ); 40 | } 41 | 42 | export default App; 43 | -------------------------------------------------------------------------------- /native-useState/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function NameList() { 4 | const [list, setList] = useState(["Jack", "Jill", "John"]); 5 | const [name, setName] = useState(() => "Jack"); 6 | 7 | const onAddName = () => { 8 | setList([...list, name]); 9 | setName(""); 10 | }; 11 | 12 | return ( 13 |
14 |
    15 | {list.map((name) => ( 16 |
  • {name}
    • 17 | ))} 18 |
19 | setName(e.target.value)} 23 | /> 24 | 25 |
26 | ); 27 | } 28 | 29 | function Counter() { 30 | const [count, setCount] = useState(10); 31 | 32 | function addOne() { 33 | setCount(count + 1); 34 | } 35 | 36 | return ( 37 |
38 | 39 |
40 | ); 41 | } 42 | 43 | function App() { 44 | return ( 45 |
46 | 47 | 48 |
49 | ); 50 | } 51 | 52 | export default App; 53 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/store.tsx: -------------------------------------------------------------------------------- 1 | import create from "zustand"; 2 | 3 | export interface Pokemon { 4 | id: number; 5 | name: string; 6 | type: string[]; 7 | hp: number; 8 | attack: number; 9 | defense: number; 10 | special_attack: number; 11 | special_defense: number; 12 | speed: number; 13 | } 14 | 15 | const searchAndSortPokemon = (pokemon: Pokemon[], search: string) => 16 | pokemon 17 | .filter((p) => p.name.toLowerCase().includes(search.toLowerCase())) 18 | .slice(0, 10) 19 | .sort((a, b) => a.name.localeCompare(b.name)); 20 | 21 | export const usePokemon = create<{ 22 | pokemon: Pokemon[]; 23 | allPokemon: Pokemon[]; 24 | setAllPokemon: (pokemon: Pokemon[]) => void; 25 | search: string; 26 | setSearch: (search: string) => void; 27 | }>((set, get) => ({ 28 | pokemon: [], 29 | allPokemon: [], 30 | setAllPokemon: (pokemon) => 31 | set({ 32 | allPokemon: pokemon, 33 | pokemon: searchAndSortPokemon(pokemon, get().search), 34 | }), 35 | search: "", 36 | setSearch: (search) => 37 | set({ search, pokemon: searchAndSortPokemon(get().allPokemon, search) }), 38 | })); 39 | 40 | fetch("/pokemon.json") 41 | .then((response) => response.json()) 42 | .then((pokemon) => { 43 | usePokemon.getState().setAllPokemon(pokemon); 44 | }); 45 | -------------------------------------------------------------------------------- /native-useEffect/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | const Stopwatch = () => { 4 | const [time, setTime] = useState(0); 5 | 6 | useEffect(() => { 7 | const interval = setInterval(() => { 8 | setTime((t) => { 9 | console.log(t); 10 | return t + 1; 11 | }); 12 | }, 1000); 13 | return () => clearInterval(interval); 14 | }, []); 15 | 16 | return
Time: {time}
; 17 | }; 18 | 19 | function App() { 20 | const [names, setNames] = useState([]); 21 | 22 | useEffect(() => { 23 | fetch("/names.json") 24 | .then((response) => response.json()) 25 | .then((data) => setNames(data)); 26 | }, []); 27 | 28 | const [seletedNameDetails, setSelectedNameDetails] = useState(null); 29 | 30 | const onSelectedNameChange = (name) => { 31 | fetch(`/${name}.json`) 32 | .then((response) => response.json()) 33 | .then((data) => setSelectedNameDetails(data)); 34 | }; 35 | 36 | return ( 37 |
38 | 39 |
40 | {names.map((name) => ( 41 | 42 | ))} 43 |
44 |
{JSON.stringify(seletedNameDetails)}
45 |
46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useMemo, useCallback } from "react"; 2 | 3 | function SortedList({ list, sortFunc }) { 4 | console.log("SortedList render"); 5 | 6 | const sortedList = useMemo(() => { 7 | console.log("Running sort"); 8 | return [...list].sort(sortFunc); 9 | }, [list, sortFunc]); 10 | 11 | return
{sortedList.join(", ")}
; 12 | } 13 | 14 | function App() { 15 | const [numbers] = useState([10, 20, 30]); 16 | 17 | const total = useMemo( 18 | () => numbers.reduce((acc, number) => acc + number, 0), 19 | [numbers] 20 | ); 21 | 22 | const [names] = useState(["John", "Paul", "George", "Ringo"]); 23 | 24 | const [count1, setCount1] = useState(0); 25 | const [count2, setCount2] = useState(0); 26 | 27 | const countTotal = count1 + count2; 28 | 29 | const sortFunc = useCallback((a, b) => a.localeCompare(b) * -1, []); 30 | 31 | return ( 32 | <> 33 |
Total: {total}
34 |
Names: {names.join(", ")}
35 | 36 | 37 | 38 |
Total: {countTotal}
39 | 40 | ); 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /native-context/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, createContext, useContext } from "react"; 2 | 3 | interface Pokemon { 4 | id: number; 5 | name: string; 6 | type: string[]; 7 | hp: number; 8 | attack: number; 9 | defense: number; 10 | special_attack: number; 11 | special_defense: number; 12 | speed: number; 13 | } 14 | 15 | function usePokemonSource(): { 16 | pokemon: Pokemon[]; 17 | } { 18 | const [pokemon, setPokemon] = useState([]); 19 | 20 | useEffect(() => { 21 | fetch("/pokemon.json") 22 | .then((response) => response.json()) 23 | .then((data) => setPokemon(data)); 24 | }, []); 25 | 26 | return { pokemon }; 27 | } 28 | 29 | const PokemonContext = createContext>( 30 | {} as unknown as ReturnType 31 | ); 32 | 33 | function usePokemon() { 34 | return useContext(PokemonContext); 35 | } 36 | 37 | const PokemonList = () => { 38 | const { pokemon } = usePokemon(); 39 | return ( 40 |
41 | {pokemon.map((p) => ( 42 |
{p.name}
43 | ))} 44 |
45 | ); 46 | }; 47 | 48 | function App() { 49 | return ( 50 | 51 | 52 | 53 | ); 54 | } 55 | 56 | export default App; 57 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/App.tsx: -------------------------------------------------------------------------------- 1 | function SearchBox() { 2 | return ( 3 | {}} 8 | /> 9 | ); 10 | } 11 | 12 | const PokemonList = () => { 13 | return ( 14 |
    15 | {[].map((p) => ( 16 |
  • 20 |
    21 | 26 |

    {p.name}

    27 |
    28 |
    • 29 | ))} 30 |
31 | ); 32 | }; 33 | 34 | function App() { 35 | return ( 36 |
37 | 38 | 39 |
40 | ); 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /native-use/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-context/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-pokemon/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useRef/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useState/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-redux/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /indirect-pokemon/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useEffect/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useReducer/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-starter/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-use/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /native-useRef/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /native-useEffect/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /native-useReducer/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /native-useState/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif; 3 | font-size: 16px; 4 | line-height: 24px; 5 | font-weight: 400; 6 | 7 | color-scheme: light dark; 8 | color: rgba(255, 255, 255, 0.87); 9 | background-color: #242424; 10 | 11 | font-synthesis: none; 12 | text-rendering: optimizeLegibility; 13 | -webkit-font-smoothing: antialiased; 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-text-size-adjust: 100%; 16 | } 17 | 18 | a { 19 | font-weight: 500; 20 | color: #646cff; 21 | text-decoration: inherit; 22 | } 23 | a:hover { 24 | color: #535bf2; 25 | } 26 | 27 | body { 28 | margin: 0; 29 | display: flex; 30 | place-items: center; 31 | min-width: 320px; 32 | min-height: 100vh; 33 | } 34 | 35 | h1 { 36 | font-size: 3.2em; 37 | line-height: 1.1; 38 | } 39 | 40 | button { 41 | border-radius: 8px; 42 | border: 1px solid transparent; 43 | padding: 0.6em 1.2em; 44 | font-size: 1em; 45 | font-weight: 500; 46 | font-family: inherit; 47 | background-color: #1a1a1a; 48 | cursor: pointer; 49 | transition: border-color 0.25s; 50 | } 51 | button:hover { 52 | border-color: #646cff; 53 | } 54 | button:focus, 55 | button:focus-visible { 56 | outline: 4px auto -webkit-focus-ring-color; 57 | } 58 | 59 | @media (prefers-color-scheme: light) { 60 | :root { 61 | color: #213547; 62 | background-color: #ffffff; 63 | } 64 | a:hover { 65 | color: #747bff; 66 | } 67 | button { 68 | background-color: #f9f9f9; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /native-pokemon/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { PokemonProvider, usePokemon } from "./store"; 2 | 3 | function SearchBox() { 4 | const { search, setSearch } = usePokemon(); 5 | return ( 6 | setSearch(e.target.value)} 11 | /> 12 | ); 13 | } 14 | 15 | const PokemonList = () => { 16 | const { pokemon } = usePokemon(); 17 | return ( 18 |
    19 | {pokemon.map((p) => ( 20 |
  • 24 |
    25 | 30 |

    {p.name}

    31 |
    32 |
    • 33 | ))} 34 |
35 | ); 36 | }; 37 | 38 | function App() { 39 | return ( 40 | 41 |
42 | 43 | 44 |
45 | 46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useSnapshot } from "valtio"; 2 | 3 | import { search, pokemon } from "./store"; 4 | 5 | function SearchBox() { 6 | const snap = useSnapshot(search); 7 | return ( 8 | { 13 | search.query = evt.target.value; 14 | }} 15 | /> 16 | ); 17 | } 18 | 19 | const PokemonList = () => { 20 | const snap = useSnapshot(pokemon); 21 | return ( 22 |
    23 | {snap.list.map((p) => ( 24 |
  • 28 |
    29 | 34 |

    {p.name}

    35 |
    36 |
    • 37 | ))} 38 |
39 | ); 40 | }; 41 | 42 | function App() { 43 | return ( 44 |
45 | 46 | 47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useAtom, useAtomValue } from "jotai"; 2 | 3 | import { searchAtom, sortedPokemonAtom } from "./store"; 4 | 5 | function SearchBox() { 6 | const [search, setSearch] = useAtom(searchAtom); 7 | return ( 8 | setSearch(evt.target.value)} 13 | /> 14 | ); 15 | } 16 | 17 | const PokemonList = () => { 18 | const pokemon = useAtomValue(sortedPokemonAtom); 19 | return ( 20 |
    21 | {pokemon.map((p) => ( 22 |
  • 26 |
    27 | 32 |

    {p.name}

    33 |
    34 |
    • 35 | ))} 36 |
37 | ); 38 | }; 39 | 40 | function App() { 41 | return ( 42 |
43 | 44 | 45 |
46 | ); 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { usePokemon } from "./store"; 2 | 3 | function SearchBox() { 4 | const search = usePokemon((state) => state.search); 5 | const setSearch = usePokemon((state) => state.setSearch); 6 | return ( 7 | setSearch(event.target.value)} 12 | /> 13 | ); 14 | } 15 | 16 | const PokemonList = () => { 17 | const pokemon = usePokemon((state) => state.pokemon); 18 | return ( 19 |
    20 | {pokemon.map((p) => ( 21 |
  • 25 |
    26 | 31 |

    {p.name}

    32 |
    33 |
    • 34 | ))} 35 |
36 | ); 37 | }; 38 | 39 | function App() { 40 | return ( 41 |
42 | 43 | 44 |
45 | ); 46 | } 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useSelector, useDispatch, Provider } from "react-redux"; 2 | 3 | import { store, selectSearch, setSearch, selectPokemon } from "./store"; 4 | 5 | function SearchBox() { 6 | const search = useSelector(selectSearch); 7 | const dispatch = useDispatch(); 8 | 9 | return ( 10 | { 15 | dispatch(setSearch(event.target.value)); 16 | }} 17 | /> 18 | ); 19 | } 20 | 21 | const PokemonList = () => { 22 | const pokemon = useSelector(selectPokemon); 23 | 24 | return ( 25 |
    26 | {pokemon.map((p) => ( 27 |
  • 31 |
    32 | 37 |

    {p.name}

    38 |
    39 |
    • 40 | ))} 41 |
42 | ); 43 | }; 44 | 45 | function App() { 46 | return ( 47 | 48 |
49 | 50 | 51 |
52 | 53 | ); 54 | } 55 | 56 | export default App; 57 | -------------------------------------------------------------------------------- /native-useReducer/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useReducer } from "react"; 2 | 3 | function UserForm() { 4 | const [state, dispatch] = useReducer( 5 | (state, action) => ({ 6 | ...state, 7 | ...action, 8 | }), 9 | { 10 | first: "", 11 | last: "", 12 | } 13 | ); 14 | return ( 15 |
16 | dispatch({ first: e.target.value })} 20 | /> 21 | dispatch({ last: e.target.value })} 25 | /> 26 |
First: {state.first}
27 |
Last: {state.last}
28 |
29 | ); 30 | } 31 | 32 | function NameList() { 33 | const [state, dispatch] = useReducer( 34 | (state, action) => { 35 | switch (action.type) { 36 | case "SET_NAME": 37 | return { ...state, name: action.payload }; 38 | case "ADD_NAME": 39 | return { 40 | ...state, 41 | names: [...state.names, state.name], 42 | name: "", 43 | }; 44 | } 45 | }, 46 | { 47 | names: [], 48 | name: "", 49 | } 50 | ); 51 | 52 | return ( 53 |
54 |
55 | {state.names.map((name, index) => ( 56 |
{name}
57 | ))} 58 |
59 | 63 | dispatch({ type: "SET_NAME", payload: e.target.value }) 64 | } 65 | /> 66 | 67 |
68 | ); 69 | } 70 | 71 | function App() { 72 | return ( 73 |
74 | 75 | 76 |
77 | ); 78 | } 79 | 80 | export default App; 81 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; 2 | import { 3 | createSlice, 4 | configureStore, 5 | type PayloadAction, 6 | createSelector, 7 | } from "@reduxjs/toolkit"; 8 | 9 | export interface Pokemon { 10 | id: number; 11 | name: string; 12 | type: string[]; 13 | hp: number; 14 | attack: number; 15 | defense: number; 16 | special_attack: number; 17 | special_defense: number; 18 | speed: number; 19 | } 20 | 21 | const pokemonApi = createApi({ 22 | reducerPath: "pokemonApi", 23 | baseQuery: fetchBaseQuery({ baseUrl: "/" }), 24 | endpoints: (builder) => ({ 25 | getPokemon: builder.query({ 26 | query: () => "pokemon.json", 27 | }), 28 | }), 29 | }); 30 | 31 | export const usePokemonQuery = pokemonApi.endpoints.getPokemon.useQuery; 32 | 33 | const searchSlice = createSlice({ 34 | name: "search", 35 | initialState: { 36 | search: "", 37 | }, 38 | reducers: { 39 | setSearch: (state, action: PayloadAction) => { 40 | state.search = action.payload; 41 | }, 42 | }, 43 | }); 44 | 45 | export const { setSearch } = searchSlice.actions; 46 | 47 | export const store = configureStore({ 48 | reducer: { 49 | search: searchSlice.reducer, 50 | pokemonApi: pokemonApi.reducer, 51 | }, 52 | }); 53 | 54 | export type RootState = ReturnType; 55 | 56 | export const selectSearch = (state: RootState) => state.search.search; 57 | 58 | store.dispatch(pokemonApi.endpoints.getPokemon.initiate(undefined)); 59 | 60 | export const selectPokemon = createSelector( 61 | (state: RootState) => 62 | pokemonApi.endpoints.getPokemon.select(undefined)(state)?.data, 63 | (state: RootState) => state.search.search, 64 | (pokemon, search) => 65 | (pokemon || []) 66 | .filter((pokemon) => 67 | pokemon.name.toLowerCase().includes(search.toLowerCase()) 68 | ) 69 | .slice(0, 10) 70 | .sort((a, b) => a.name.localeCompare(b.name)) 71 | ); 72 | -------------------------------------------------------------------------------- /indirect-pokemon/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { useQuery } from "@tanstack/react-query"; 2 | import { 3 | useReducer, 4 | useEffect, 5 | createContext, 6 | useContext, 7 | useCallback, 8 | useMemo, 9 | } from "react"; 10 | 11 | interface Pokemon { 12 | id: number; 13 | name: string; 14 | type: string[]; 15 | hp: number; 16 | attack: number; 17 | defense: number; 18 | special_attack: number; 19 | special_defense: number; 20 | speed: number; 21 | } 22 | 23 | function usePokemonSource(): { 24 | pokemon: Pokemon[]; 25 | search: string; 26 | setSearch: (search: string) => void; 27 | } { 28 | const { data: pokemon } = useQuery( 29 | ["pokemon"], 30 | () => fetch("/pokemon.json").then((res) => res.json()), 31 | { 32 | initialData: [], 33 | } 34 | ); 35 | type PokemonState = { 36 | search: string; 37 | }; 38 | type PokemonAction = { type: "setSearch"; payload: string }; 39 | const [{ search }, dispatch] = useReducer( 40 | (state: PokemonState, action: PokemonAction) => { 41 | switch (action.type) { 42 | case "setSearch": 43 | return { ...state, search: action.payload }; 44 | } 45 | }, 46 | { 47 | search: "", 48 | } 49 | ); 50 | 51 | const setSearch = useCallback((search: string) => { 52 | dispatch({ 53 | type: "setSearch", 54 | payload: search, 55 | }); 56 | }, []); 57 | 58 | const filteredPokemon = useMemo( 59 | () => 60 | pokemon 61 | .filter((p) => p.name.toLowerCase().includes(search.toLowerCase())) 62 | .slice(0, 20), 63 | [pokemon, search] 64 | ); 65 | 66 | const sortedPokemon = useMemo( 67 | () => [...filteredPokemon].sort((a, b) => a.name.localeCompare(b.name)), 68 | [filteredPokemon] 69 | ); 70 | 71 | return { pokemon: sortedPokemon, search, setSearch }; 72 | } 73 | 74 | const PokemonContext = createContext>( 75 | {} as unknown as ReturnType 76 | ); 77 | 78 | export function usePokemon() { 79 | return useContext(PokemonContext); 80 | } 81 | 82 | export function PokemonProvider({ children }: { children: React.ReactNode }) { 83 | return ( 84 | 85 | {children} 86 | 87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /native-pokemon/src/store.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | useReducer, 3 | useEffect, 4 | createContext, 5 | useContext, 6 | useCallback, 7 | useMemo, 8 | } from "react"; 9 | 10 | interface Pokemon { 11 | id: number; 12 | name: string; 13 | type: string[]; 14 | hp: number; 15 | attack: number; 16 | defense: number; 17 | special_attack: number; 18 | special_defense: number; 19 | speed: number; 20 | } 21 | 22 | function usePokemonSource(): { 23 | pokemon: Pokemon[]; 24 | search: string; 25 | setSearch: (search: string) => void; 26 | } { 27 | // const [pokemon, setPokemon] = useState([]); 28 | // const [search, setSearch] = useState(""); 29 | type PokemonState = { 30 | pokemon: Pokemon[]; 31 | search: string; 32 | }; 33 | type PokemonAction = 34 | | { type: "setPokemon"; payload: Pokemon[] } 35 | | { type: "setSearch"; payload: string }; 36 | const [{ pokemon, search }, dispatch] = useReducer( 37 | (state: PokemonState, action: PokemonAction) => { 38 | switch (action.type) { 39 | case "setPokemon": 40 | return { ...state, pokemon: action.payload }; 41 | case "setSearch": 42 | return { ...state, search: action.payload }; 43 | } 44 | }, 45 | { 46 | pokemon: [], 47 | search: "", 48 | } 49 | ); 50 | 51 | useEffect(() => { 52 | fetch("/pokemon.json") 53 | .then((response) => response.json()) 54 | .then((data) => 55 | dispatch({ 56 | type: "setPokemon", 57 | payload: data, 58 | }) 59 | ); 60 | }, []); 61 | 62 | const setSearch = useCallback((search: string) => { 63 | dispatch({ 64 | type: "setSearch", 65 | payload: search, 66 | }); 67 | }, []); 68 | 69 | const filteredPokemon = useMemo( 70 | () => 71 | pokemon 72 | .filter((p) => p.name.toLowerCase().includes(search.toLowerCase())) 73 | .slice(0, 20), 74 | [pokemon, search] 75 | ); 76 | 77 | const sortedPokemon = useMemo( 78 | () => [...filteredPokemon].sort((a, b) => a.name.localeCompare(b.name)), 79 | [filteredPokemon] 80 | ); 81 | 82 | return { pokemon: sortedPokemon, search, setSearch }; 83 | } 84 | 85 | const PokemonContext = createContext>( 86 | {} as unknown as ReturnType 87 | ); 88 | 89 | export function usePokemon() { 90 | return useContext(PokemonContext); 91 | } 92 | 93 | export function PokemonProvider({ children }: { children: React.ReactNode }) { 94 | return ( 95 | 96 | {children} 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /native-use/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /indirect-pokemon/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-context/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-pokemon/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useEffect/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useRef/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useState/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-jotai/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-redux/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-valtio/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useReducer/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-starter/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /direct-pokemon-zustand/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /native-useMemoAndCallback/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /indirect-pokemon/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 2 | import { 3 | Link, 4 | Outlet, 5 | ReactLocation, 6 | Router, 7 | useMatch, 8 | } from "@tanstack/react-location"; 9 | 10 | import { PokemonProvider, usePokemon } from "./store"; 11 | 12 | const queryClient = new QueryClient(); 13 | const location = new ReactLocation(); 14 | 15 | function SearchBox() { 16 | const { search, setSearch } = usePokemon(); 17 | return ( 18 | setSearch(e.target.value)} 23 | /> 24 | ); 25 | } 26 | 27 | const PokemonList = () => { 28 | const { pokemon } = usePokemon(); 29 | return ( 30 |
    31 | {pokemon.map((p) => ( 32 | 33 |
  • 34 |
    35 | 40 |

    41 | {p.name} 42 |

    43 |
    44 |
    • 45 | 46 | ))} 47 |
48 | ); 49 | }; 50 | 51 | function PokemonDetail() { 52 | const { 53 | params: { id }, 54 | } = useMatch(); 55 | const { pokemon } = usePokemon(); 56 | 57 | const pokemonData = pokemon.find((p) => p.id === +id); 58 | 59 | if (!pokemonData) { 60 | return
No pokemon found
; 61 | } 62 | 63 | return ( 64 |
65 | 66 |

< Home

67 | 68 |
69 | 74 |
75 |

{pokemonData.name}

76 |
77 |

Stats

78 |
    79 | {[ 80 | "hp", 81 | "attack", 82 | "defense", 83 | "special_attack", 84 | "special_defense", 85 | "speed", 86 | ].map((stat) => ( 87 |
  • 88 | {stat} 89 | {pokemonData[stat as keyof typeof pokemonData]} 90 |
    • 91 | ))} 92 |
93 |
94 |
95 |
96 |
97 | ); 98 | } 99 | 100 | const routes = [ 101 | { 102 | path: "/", 103 | element: ( 104 | <> 105 | 106 | 107 | 108 | ), 109 | }, 110 | { 111 | path: "/pokemon/:id", 112 | element: , 113 | }, 114 | ]; 115 | 116 | function App() { 117 | return ( 118 | 119 | 120 | 121 |
122 | 123 |
124 | 125 | 126 | 127 | ); 128 | } 129 | 130 | export default App; 131 | -------------------------------------------------------------------------------- /native-useEffect/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@ampproject/remapping@^2.1.0": 6 | "integrity" "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==" 7 | "resolved" "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz" 8 | "version" "2.2.0" 9 | dependencies: 10 | "@jridgewell/gen-mapping" "^0.1.0" 11 | "@jridgewell/trace-mapping" "^0.3.9" 12 | 13 | "@babel/code-frame@^7.18.6": 14 | "integrity" "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==" 15 | "resolved" "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz" 16 | "version" "7.18.6" 17 | dependencies: 18 | "@babel/highlight" "^7.18.6" 19 | 20 | "@babel/compat-data@^7.20.0": 21 | "integrity" "sha512-Gt9jszFJYq7qzXVK4slhc6NzJXnOVmRECWcVjF/T23rNXD9NtWQ0W3qxdg+p9wWIB+VQw3GYV/U2Ha9bRTfs4w==" 22 | "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.20.0.tgz" 23 | "version" "7.20.0" 24 | 25 | "@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.19.6": 26 | "integrity" "sha512-D2Ue4KHpc6Ys2+AxpIx1BZ8+UegLLLE2p3KJEuJRKmokHOtl49jQ5ny1773KsGLZs8MQvBidAF6yWUJxRqtKtg==" 27 | "resolved" "https://registry.npmjs.org/@babel/core/-/core-7.19.6.tgz" 28 | "version" "7.19.6" 29 | dependencies: 30 | "@ampproject/remapping" "^2.1.0" 31 | "@babel/code-frame" "^7.18.6" 32 | "@babel/generator" "^7.19.6" 33 | "@babel/helper-compilation-targets" "^7.19.3" 34 | "@babel/helper-module-transforms" "^7.19.6" 35 | "@babel/helpers" "^7.19.4" 36 | "@babel/parser" "^7.19.6" 37 | "@babel/template" "^7.18.10" 38 | "@babel/traverse" "^7.19.6" 39 | "@babel/types" "^7.19.4" 40 | "convert-source-map" "^1.7.0" 41 | "debug" "^4.1.0" 42 | "gensync" "^1.0.0-beta.2" 43 | "json5" "^2.2.1" 44 | "semver" "^6.3.0" 45 | 46 | "@babel/generator@^7.19.6", "@babel/generator@^7.20.0": 47 | "integrity" "sha512-GUPcXxWibClgmYJuIwC2Bc2Lg+8b9VjaJ+HlNdACEVt+Wlr1eoU1OPZjZRm7Hzl0gaTsUZNQfeihvZJhG7oc3w==" 48 | "resolved" "https://registry.npmjs.org/@babel/generator/-/generator-7.20.0.tgz" 49 | "version" "7.20.0" 50 | dependencies: 51 | "@babel/types" "^7.20.0" 52 | "@jridgewell/gen-mapping" "^0.3.2" 53 | "jsesc" "^2.5.1" 54 | 55 | "@babel/helper-annotate-as-pure@^7.18.6": 56 | "integrity" "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==" 57 | "resolved" "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz" 58 | "version" "7.18.6" 59 | dependencies: 60 | "@babel/types" "^7.18.6" 61 | 62 | "@babel/helper-compilation-targets@^7.19.3": 63 | "integrity" "sha512-0jp//vDGp9e8hZzBc6N/KwA5ZK3Wsm/pfm4CrY7vzegkVxc65SgSn6wYOnwHe9Js9HRQ1YTCKLGPzDtaS3RoLQ==" 64 | "resolved" "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.20.0.tgz" 65 | "version" "7.20.0" 66 | dependencies: 67 | "@babel/compat-data" "^7.20.0" 68 | "@babel/helper-validator-option" "^7.18.6" 69 | "browserslist" "^4.21.3" 70 | "semver" "^6.3.0" 71 | 72 | "@babel/helper-environment-visitor@^7.18.9": 73 | "integrity" "sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==" 74 | "resolved" "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz" 75 | "version" "7.18.9" 76 | 77 | "@babel/helper-function-name@^7.19.0": 78 | "integrity" "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==" 79 | "resolved" "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz" 80 | "version" "7.19.0" 81 | dependencies: 82 | "@babel/template" "^7.18.10" 83 | "@babel/types" "^7.19.0" 84 | 85 | "@babel/helper-hoist-variables@^7.18.6": 86 | "integrity" "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==" 87 | "resolved" "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz" 88 | "version" "7.18.6" 89 | dependencies: 90 | "@babel/types" "^7.18.6" 91 | 92 | "@babel/helper-module-imports@^7.18.6": 93 | "integrity" "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==" 94 | "resolved" "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz" 95 | "version" "7.18.6" 96 | dependencies: 97 | "@babel/types" "^7.18.6" 98 | 99 | "@babel/helper-module-transforms@^7.19.6": 100 | "integrity" "sha512-fCmcfQo/KYr/VXXDIyd3CBGZ6AFhPFy1TfSEJ+PilGVlQT6jcbqtHAM4C1EciRqMza7/TpOUZliuSH+U6HAhJw==" 101 | "resolved" "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.6.tgz" 102 | "version" "7.19.6" 103 | dependencies: 104 | "@babel/helper-environment-visitor" "^7.18.9" 105 | "@babel/helper-module-imports" "^7.18.6" 106 | "@babel/helper-simple-access" "^7.19.4" 107 | "@babel/helper-split-export-declaration" "^7.18.6" 108 | "@babel/helper-validator-identifier" "^7.19.1" 109 | "@babel/template" "^7.18.10" 110 | "@babel/traverse" "^7.19.6" 111 | "@babel/types" "^7.19.4" 112 | 113 | "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.19.0": 114 | "integrity" "sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==" 115 | "resolved" "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz" 116 | "version" "7.19.0" 117 | 118 | "@babel/helper-simple-access@^7.19.4": 119 | "integrity" "sha512-f9Xq6WqBFqaDfbCzn2w85hwklswz5qsKlh7f08w4Y9yhJHpnNC0QemtSkK5YyOY8kPGvyiwdzZksGUhnGdaUIg==" 120 | "resolved" "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.19.4.tgz" 121 | "version" "7.19.4" 122 | dependencies: 123 | "@babel/types" "^7.19.4" 124 | 125 | "@babel/helper-split-export-declaration@^7.18.6": 126 | "integrity" "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==" 127 | "resolved" "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz" 128 | "version" "7.18.6" 129 | dependencies: 130 | "@babel/types" "^7.18.6" 131 | 132 | "@babel/helper-string-parser@^7.19.4": 133 | "integrity" "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==" 134 | "resolved" "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz" 135 | "version" "7.19.4" 136 | 137 | "@babel/helper-validator-identifier@^7.18.6", "@babel/helper-validator-identifier@^7.19.1": 138 | "integrity" "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==" 139 | "resolved" "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz" 140 | "version" "7.19.1" 141 | 142 | "@babel/helper-validator-option@^7.18.6": 143 | "integrity" "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==" 144 | "resolved" "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz" 145 | "version" "7.18.6" 146 | 147 | "@babel/helpers@^7.19.4": 148 | "integrity" "sha512-aGMjYraN0zosCEthoGLdqot1oRsmxVTQRHadsUPz5QM44Zej2PYRz7XiDE7GqnkZnNtLbOuxqoZw42vkU7+XEQ==" 149 | "resolved" "https://registry.npmjs.org/@babel/helpers/-/helpers-7.20.0.tgz" 150 | "version" "7.20.0" 151 | dependencies: 152 | "@babel/template" "^7.18.10" 153 | "@babel/traverse" "^7.20.0" 154 | "@babel/types" "^7.20.0" 155 | 156 | "@babel/highlight@^7.18.6": 157 | "integrity" "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==" 158 | "resolved" "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz" 159 | "version" "7.18.6" 160 | dependencies: 161 | "@babel/helper-validator-identifier" "^7.18.6" 162 | "chalk" "^2.0.0" 163 | "js-tokens" "^4.0.0" 164 | 165 | "@babel/parser@^7.18.10", "@babel/parser@^7.19.6", "@babel/parser@^7.20.0": 166 | "integrity" "sha512-G9VgAhEaICnz8iiJeGJQyVl6J2nTjbW0xeisva0PK6XcKsga7BIaqm4ZF8Rg1Wbaqmy6znspNqhPaPkyukujzg==" 167 | "resolved" "https://registry.npmjs.org/@babel/parser/-/parser-7.20.0.tgz" 168 | "version" "7.20.0" 169 | 170 | "@babel/plugin-syntax-jsx@^7.18.6": 171 | "integrity" "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==" 172 | "resolved" "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz" 173 | "version" "7.18.6" 174 | dependencies: 175 | "@babel/helper-plugin-utils" "^7.18.6" 176 | 177 | "@babel/plugin-transform-react-jsx-development@^7.18.6": 178 | "integrity" "sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==" 179 | "resolved" "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz" 180 | "version" "7.18.6" 181 | dependencies: 182 | "@babel/plugin-transform-react-jsx" "^7.18.6" 183 | 184 | "@babel/plugin-transform-react-jsx-self@^7.18.6": 185 | "integrity" "sha512-A0LQGx4+4Jv7u/tWzoJF7alZwnBDQd6cGLh9P+Ttk4dpiL+J5p7NSNv/9tlEFFJDq3kjxOavWmbm6t0Gk+A3Ig==" 186 | "resolved" "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.18.6.tgz" 187 | "version" "7.18.6" 188 | dependencies: 189 | "@babel/helper-plugin-utils" "^7.18.6" 190 | 191 | "@babel/plugin-transform-react-jsx-source@^7.19.6": 192 | "integrity" "sha512-RpAi004QyMNisst/pvSanoRdJ4q+jMCWyk9zdw/CyLB9j8RXEahodR6l2GyttDRyEVWZtbN+TpLiHJ3t34LbsQ==" 193 | "resolved" "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.19.6.tgz" 194 | "version" "7.19.6" 195 | dependencies: 196 | "@babel/helper-plugin-utils" "^7.19.0" 197 | 198 | "@babel/plugin-transform-react-jsx@^7.18.6", "@babel/plugin-transform-react-jsx@^7.19.0": 199 | "integrity" "sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==" 200 | "resolved" "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.19.0.tgz" 201 | "version" "7.19.0" 202 | dependencies: 203 | "@babel/helper-annotate-as-pure" "^7.18.6" 204 | "@babel/helper-module-imports" "^7.18.6" 205 | "@babel/helper-plugin-utils" "^7.19.0" 206 | "@babel/plugin-syntax-jsx" "^7.18.6" 207 | "@babel/types" "^7.19.0" 208 | 209 | "@babel/template@^7.18.10": 210 | "integrity" "sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==" 211 | "resolved" "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz" 212 | "version" "7.18.10" 213 | dependencies: 214 | "@babel/code-frame" "^7.18.6" 215 | "@babel/parser" "^7.18.10" 216 | "@babel/types" "^7.18.10" 217 | 218 | "@babel/traverse@^7.19.6", "@babel/traverse@^7.20.0": 219 | "integrity" "sha512-5+cAXQNARgjRUK0JWu2UBwja4JLSO/rBMPJzpsKb+oBF5xlUuCfljQepS4XypBQoiigL0VQjTZy6WiONtUdScQ==" 220 | "resolved" "https://registry.npmjs.org/@babel/traverse/-/traverse-7.20.0.tgz" 221 | "version" "7.20.0" 222 | dependencies: 223 | "@babel/code-frame" "^7.18.6" 224 | "@babel/generator" "^7.20.0" 225 | "@babel/helper-environment-visitor" "^7.18.9" 226 | "@babel/helper-function-name" "^7.19.0" 227 | "@babel/helper-hoist-variables" "^7.18.6" 228 | "@babel/helper-split-export-declaration" "^7.18.6" 229 | "@babel/parser" "^7.20.0" 230 | "@babel/types" "^7.20.0" 231 | "debug" "^4.1.0" 232 | "globals" "^11.1.0" 233 | 234 | "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.20.0": 235 | "integrity" "sha512-Jlgt3H0TajCW164wkTOTzHkZb075tMQMULzrLUoUeKmO7eFL96GgDxf7/Axhc5CAuKE3KFyVW1p6ysKsi2oXAg==" 236 | "resolved" "https://registry.npmjs.org/@babel/types/-/types-7.20.0.tgz" 237 | "version" "7.20.0" 238 | dependencies: 239 | "@babel/helper-string-parser" "^7.19.4" 240 | "@babel/helper-validator-identifier" "^7.19.1" 241 | "to-fast-properties" "^2.0.0" 242 | 243 | "@jridgewell/gen-mapping@^0.1.0": 244 | "integrity" "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==" 245 | "resolved" "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz" 246 | "version" "0.1.1" 247 | dependencies: 248 | "@jridgewell/set-array" "^1.0.0" 249 | "@jridgewell/sourcemap-codec" "^1.4.10" 250 | 251 | "@jridgewell/gen-mapping@^0.3.2": 252 | "integrity" "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==" 253 | "resolved" "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz" 254 | "version" "0.3.2" 255 | dependencies: 256 | "@jridgewell/set-array" "^1.0.1" 257 | "@jridgewell/sourcemap-codec" "^1.4.10" 258 | "@jridgewell/trace-mapping" "^0.3.9" 259 | 260 | "@jridgewell/resolve-uri@3.1.0": 261 | "integrity" "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==" 262 | "resolved" "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz" 263 | "version" "3.1.0" 264 | 265 | "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1": 266 | "integrity" "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==" 267 | "resolved" "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz" 268 | "version" "1.1.2" 269 | 270 | "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@1.4.14": 271 | "integrity" "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" 272 | "resolved" "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz" 273 | "version" "1.4.14" 274 | 275 | "@jridgewell/trace-mapping@^0.3.9": 276 | "integrity" "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==" 277 | "resolved" "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz" 278 | "version" "0.3.17" 279 | dependencies: 280 | "@jridgewell/resolve-uri" "3.1.0" 281 | "@jridgewell/sourcemap-codec" "1.4.14" 282 | 283 | "@types/prop-types@*": 284 | "integrity" "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" 285 | "resolved" "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz" 286 | "version" "15.7.5" 287 | 288 | "@types/react-dom@^18.0.7": 289 | "integrity" "sha512-C3GYO0HLaOkk9dDAz3Dl4sbe4AKUGTCfFIZsz3n/82dPNN8Du533HzKatDxeUYWu24wJgMP1xICqkWk1YOLOIw==" 290 | "resolved" "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.8.tgz" 291 | "version" "18.0.8" 292 | dependencies: 293 | "@types/react" "*" 294 | 295 | "@types/react@*", "@types/react@^18.0.22": 296 | "integrity" "sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==" 297 | "resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.24.tgz" 298 | "version" "18.0.24" 299 | dependencies: 300 | "@types/prop-types" "*" 301 | "@types/scheduler" "*" 302 | "csstype" "^3.0.2" 303 | 304 | "@types/scheduler@*": 305 | "integrity" "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" 306 | "resolved" "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz" 307 | "version" "0.16.2" 308 | 309 | "@vitejs/plugin-react@^2.2.0": 310 | "integrity" "sha512-FFpefhvExd1toVRlokZgxgy2JtnBOdp4ZDsq7ldCWaqGSGn9UhWMAVm/1lxPL14JfNS5yGz+s9yFrQY6shoStA==" 311 | "resolved" "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.2.0.tgz" 312 | "version" "2.2.0" 313 | dependencies: 314 | "@babel/core" "^7.19.6" 315 | "@babel/plugin-transform-react-jsx" "^7.19.0" 316 | "@babel/plugin-transform-react-jsx-development" "^7.18.6" 317 | "@babel/plugin-transform-react-jsx-self" "^7.18.6" 318 | "@babel/plugin-transform-react-jsx-source" "^7.19.6" 319 | "magic-string" "^0.26.7" 320 | "react-refresh" "^0.14.0" 321 | 322 | "ansi-styles@^3.2.1": 323 | "integrity" "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==" 324 | "resolved" "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz" 325 | "version" "3.2.1" 326 | dependencies: 327 | "color-convert" "^1.9.0" 328 | 329 | "browserslist@^4.21.3", "browserslist@>= 4.21.0": 330 | "integrity" "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==" 331 | "resolved" "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz" 332 | "version" "4.21.4" 333 | dependencies: 334 | "caniuse-lite" "^1.0.30001400" 335 | "electron-to-chromium" "^1.4.251" 336 | "node-releases" "^2.0.6" 337 | "update-browserslist-db" "^1.0.9" 338 | 339 | "caniuse-lite@^1.0.30001400": 340 | "integrity" "sha512-n7cosrHLl8AWt0wwZw/PJZgUg3lV0gk9LMI7ikGJwhyhgsd2Nb65vKvmSexCqq/J7rbH3mFG6yZZiPR5dLPW5A==" 341 | "resolved" "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001426.tgz" 342 | "version" "1.0.30001426" 343 | 344 | "chalk@^2.0.0": 345 | "integrity" "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==" 346 | "resolved" "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz" 347 | "version" "2.4.2" 348 | dependencies: 349 | "ansi-styles" "^3.2.1" 350 | "escape-string-regexp" "^1.0.5" 351 | "supports-color" "^5.3.0" 352 | 353 | "color-convert@^1.9.0": 354 | "integrity" "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==" 355 | "resolved" "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz" 356 | "version" "1.9.3" 357 | dependencies: 358 | "color-name" "1.1.3" 359 | 360 | "color-name@1.1.3": 361 | "integrity" "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" 362 | "resolved" "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz" 363 | "version" "1.1.3" 364 | 365 | "convert-source-map@^1.7.0": 366 | "integrity" "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" 367 | "resolved" "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz" 368 | "version" "1.9.0" 369 | 370 | "csstype@^3.0.2": 371 | "integrity" "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" 372 | "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz" 373 | "version" "3.1.1" 374 | 375 | "debug@^4.1.0": 376 | "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==" 377 | "resolved" "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz" 378 | "version" "4.3.4" 379 | dependencies: 380 | "ms" "2.1.2" 381 | 382 | "electron-to-chromium@^1.4.251": 383 | "integrity" "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==" 384 | "resolved" "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz" 385 | "version" "1.4.284" 386 | 387 | "esbuild-darwin-arm64@0.15.12": 388 | "integrity" "sha512-z4zPX02tQ41kcXMyN3c/GfZpIjKoI/BzHrdKUwhC/Ki5BAhWv59A9M8H+iqaRbwpzYrYidTybBwiZAIWCLJAkw==" 389 | "resolved" "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.12.tgz" 390 | "version" "0.15.12" 391 | 392 | "esbuild@^0.15.9": 393 | "integrity" "sha512-PcT+/wyDqJQsRVhaE9uX/Oq4XLrFh0ce/bs2TJh4CSaw9xuvI+xFrH2nAYOADbhQjUgAhNWC5LKoUsakm4dxng==" 394 | "resolved" "https://registry.npmjs.org/esbuild/-/esbuild-0.15.12.tgz" 395 | "version" "0.15.12" 396 | optionalDependencies: 397 | "@esbuild/android-arm" "0.15.12" 398 | "@esbuild/linux-loong64" "0.15.12" 399 | "esbuild-android-64" "0.15.12" 400 | "esbuild-android-arm64" "0.15.12" 401 | "esbuild-darwin-64" "0.15.12" 402 | "esbuild-darwin-arm64" "0.15.12" 403 | "esbuild-freebsd-64" "0.15.12" 404 | "esbuild-freebsd-arm64" "0.15.12" 405 | "esbuild-linux-32" "0.15.12" 406 | "esbuild-linux-64" "0.15.12" 407 | "esbuild-linux-arm" "0.15.12" 408 | "esbuild-linux-arm64" "0.15.12" 409 | "esbuild-linux-mips64le" "0.15.12" 410 | "esbuild-linux-ppc64le" "0.15.12" 411 | "esbuild-linux-riscv64" "0.15.12" 412 | "esbuild-linux-s390x" "0.15.12" 413 | "esbuild-netbsd-64" "0.15.12" 414 | "esbuild-openbsd-64" "0.15.12" 415 | "esbuild-sunos-64" "0.15.12" 416 | "esbuild-windows-32" "0.15.12" 417 | "esbuild-windows-64" "0.15.12" 418 | "esbuild-windows-arm64" "0.15.12" 419 | 420 | "escalade@^3.1.1": 421 | "integrity" "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==" 422 | "resolved" "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz" 423 | "version" "3.1.1" 424 | 425 | "escape-string-regexp@^1.0.5": 426 | "integrity" "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" 427 | "resolved" "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz" 428 | "version" "1.0.5" 429 | 430 | "fsevents@~2.3.2": 431 | "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==" 432 | "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" 433 | "version" "2.3.2" 434 | 435 | "function-bind@^1.1.1": 436 | "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" 437 | "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" 438 | "version" "1.1.1" 439 | 440 | "gensync@^1.0.0-beta.2": 441 | "integrity" "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==" 442 | "resolved" "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz" 443 | "version" "1.0.0-beta.2" 444 | 445 | "globals@^11.1.0": 446 | "integrity" "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==" 447 | "resolved" "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz" 448 | "version" "11.12.0" 449 | 450 | "has-flag@^3.0.0": 451 | "integrity" "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" 452 | "resolved" "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz" 453 | "version" "3.0.0" 454 | 455 | "has@^1.0.3": 456 | "integrity" "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==" 457 | "resolved" "https://registry.npmjs.org/has/-/has-1.0.3.tgz" 458 | "version" "1.0.3" 459 | dependencies: 460 | "function-bind" "^1.1.1" 461 | 462 | "is-core-module@^2.9.0": 463 | "integrity" "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==" 464 | "resolved" "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz" 465 | "version" "2.11.0" 466 | dependencies: 467 | "has" "^1.0.3" 468 | 469 | "js-tokens@^3.0.0 || ^4.0.0", "js-tokens@^4.0.0": 470 | "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" 471 | "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz" 472 | "version" "4.0.0" 473 | 474 | "jsesc@^2.5.1": 475 | "integrity" "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" 476 | "resolved" "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz" 477 | "version" "2.5.2" 478 | 479 | "json5@^2.2.1": 480 | "integrity" "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==" 481 | "resolved" "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz" 482 | "version" "2.2.1" 483 | 484 | "loose-envify@^1.1.0": 485 | "integrity" "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==" 486 | "resolved" "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz" 487 | "version" "1.4.0" 488 | dependencies: 489 | "js-tokens" "^3.0.0 || ^4.0.0" 490 | 491 | "magic-string@^0.26.7": 492 | "integrity" "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==" 493 | "resolved" "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz" 494 | "version" "0.26.7" 495 | dependencies: 496 | "sourcemap-codec" "^1.4.8" 497 | 498 | "ms@2.1.2": 499 | "integrity" "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" 500 | "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" 501 | "version" "2.1.2" 502 | 503 | "nanoid@^3.3.4": 504 | "integrity" "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" 505 | "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz" 506 | "version" "3.3.4" 507 | 508 | "node-releases@^2.0.6": 509 | "integrity" "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==" 510 | "resolved" "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz" 511 | "version" "2.0.6" 512 | 513 | "path-parse@^1.0.7": 514 | "integrity" "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" 515 | "resolved" "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz" 516 | "version" "1.0.7" 517 | 518 | "picocolors@^1.0.0": 519 | "integrity" "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" 520 | "resolved" "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz" 521 | "version" "1.0.0" 522 | 523 | "postcss@^8.4.18": 524 | "integrity" "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==" 525 | "resolved" "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz" 526 | "version" "8.4.18" 527 | dependencies: 528 | "nanoid" "^3.3.4" 529 | "picocolors" "^1.0.0" 530 | "source-map-js" "^1.0.2" 531 | 532 | "react-dom@^18.2.0": 533 | "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==" 534 | "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" 535 | "version" "18.2.0" 536 | dependencies: 537 | "loose-envify" "^1.1.0" 538 | "scheduler" "^0.23.0" 539 | 540 | "react-refresh@^0.14.0": 541 | "integrity" "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==" 542 | "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz" 543 | "version" "0.14.0" 544 | 545 | "react@^18.2.0": 546 | "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==" 547 | "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz" 548 | "version" "18.2.0" 549 | dependencies: 550 | "loose-envify" "^1.1.0" 551 | 552 | "resolve@^1.22.1": 553 | "integrity" "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==" 554 | "resolved" "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz" 555 | "version" "1.22.1" 556 | dependencies: 557 | "is-core-module" "^2.9.0" 558 | "path-parse" "^1.0.7" 559 | "supports-preserve-symlinks-flag" "^1.0.0" 560 | 561 | "rollup@^2.79.1": 562 | "integrity" "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==" 563 | "resolved" "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz" 564 | "version" "2.79.1" 565 | optionalDependencies: 566 | "fsevents" "~2.3.2" 567 | 568 | "scheduler@^0.23.0": 569 | "integrity" "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==" 570 | "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz" 571 | "version" "0.23.0" 572 | dependencies: 573 | "loose-envify" "^1.1.0" 574 | 575 | "semver@^6.3.0": 576 | "integrity" "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" 577 | "resolved" "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz" 578 | "version" "6.3.0" 579 | 580 | "source-map-js@^1.0.2": 581 | "integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" 582 | "resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" 583 | "version" "1.0.2" 584 | 585 | "sourcemap-codec@^1.4.8": 586 | "integrity" "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" 587 | "resolved" "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz" 588 | "version" "1.4.8" 589 | 590 | "supports-color@^5.3.0": 591 | "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==" 592 | "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz" 593 | "version" "5.5.0" 594 | dependencies: 595 | "has-flag" "^3.0.0" 596 | 597 | "supports-preserve-symlinks-flag@^1.0.0": 598 | "integrity" "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==" 599 | "resolved" "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz" 600 | "version" "1.0.0" 601 | 602 | "to-fast-properties@^2.0.0": 603 | "integrity" "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" 604 | "resolved" "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz" 605 | "version" "2.0.0" 606 | 607 | "update-browserslist-db@^1.0.9": 608 | "integrity" "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==" 609 | "resolved" "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz" 610 | "version" "1.0.10" 611 | dependencies: 612 | "escalade" "^3.1.1" 613 | "picocolors" "^1.0.0" 614 | 615 | "vite@^3.0.0", "vite@^3.2.0": 616 | "integrity" "sha512-ADtMkfHuWq4tskJsri2n2FZkORO8ZyhI+zIz7zTrDAgDEtct1jdxOg3YsZBfHhKjmMoWLOSCr+64qrEDGo/DbQ==" 617 | "resolved" "https://registry.npmjs.org/vite/-/vite-3.2.1.tgz" 618 | "version" "3.2.1" 619 | dependencies: 620 | "esbuild" "^0.15.9" 621 | "postcss" "^8.4.18" 622 | "resolve" "^1.22.1" 623 | "rollup" "^2.79.1" 624 | optionalDependencies: 625 | "fsevents" "~2.3.2" 626 | --------------------------------------------------------------------------------