├── .gitignore ├── lesson11 ├── src │ ├── vite-env.d.ts │ ├── model │ │ ├── ListItem.ts │ │ └── FullList.ts │ ├── main.ts │ ├── templates │ │ └── ListTemplate.ts │ └── css │ │ └── style.css ├── package.json ├── .gitignore ├── tsconfig.json └── index.html ├── lesson12 ├── src │ ├── vite-env.d.ts │ ├── components │ │ ├── Heading.tsx │ │ ├── Section.tsx │ │ ├── List.tsx │ │ └── Counter.tsx │ ├── main.tsx │ ├── index.css │ ├── App.tsx │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── lesson13 ├── src │ ├── vite-env.d.ts │ ├── main.tsx │ ├── index.css │ ├── App.tsx │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── lesson14 ├── src │ ├── vite-env.d.ts │ ├── App.tsx │ ├── main.tsx │ ├── index.css │ ├── Counter.tsx │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── lesson15 ├── src │ ├── vite-env.d.ts │ ├── main.tsx │ ├── App.tsx │ ├── Counter.tsx │ ├── index.css │ ├── context │ │ └── CounterContext.tsx │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── lesson16 ├── src │ ├── vite-env.d.ts │ ├── images │ │ ├── item0001.jpg │ │ ├── item0002.jpg │ │ └── item0003.jpg │ ├── App.tsx │ ├── main.tsx │ ├── context │ │ ├── ProductsProvider.tsx │ │ └── CartProvider.tsx │ ├── index.css │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── data │ └── products.json ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── lesson17 ├── src │ ├── vite-env.d.ts │ ├── images │ │ ├── item0001.jpg │ │ ├── item0002.jpg │ │ └── item0003.jpg │ ├── hooks │ │ ├── useCart.tsx │ │ └── useProducts.tsx │ ├── main.tsx │ ├── components │ │ ├── Nav.tsx │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── ProductList.tsx │ │ ├── Cart.tsx │ │ ├── Product.tsx │ │ └── CartLineItem.tsx │ ├── App.tsx │ ├── context │ │ ├── ProductsProvider.tsx │ │ └── CartProvider.tsx │ ├── index.css │ └── assets │ │ └── react.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── data │ └── products.json ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── lesson01 ├── build │ ├── js │ │ └── main.js │ └── index.html ├── src │ └── main.ts └── tsconfig.json ├── lesson02 ├── build │ ├── js │ │ └── main.js │ └── index.html ├── src │ └── main.ts └── tsconfig.json ├── lesson06 ├── build │ ├── index.html │ └── js │ │ └── main.js └── src │ └── main.ts ├── lesson07 ├── build │ ├── index.html │ └── js │ │ └── main.js └── src │ └── main.ts ├── lesson08 ├── build │ ├── index.html │ └── js │ │ └── main.js └── src │ └── main.ts ├── lesson09 ├── build │ ├── index.html │ └── js │ │ └── main.js └── src │ └── main.ts ├── lesson03 ├── build │ ├── index.html │ └── js │ │ └── main.js ├── src │ └── main.ts └── tsconfig.json ├── lesson04 ├── build │ ├── index.html │ └── js │ │ └── main.js ├── src │ └── main.ts └── tsconfig.json ├── lesson05 ├── build │ ├── js │ │ ├── main.js │ │ └── copyright.js │ └── index.html ├── src │ ├── copyright.ts │ └── main.ts └── tsconfig.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | -------------------------------------------------------------------------------- /lesson11/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson12/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson13/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson14/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson15/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson16/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson17/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /lesson16/src/images/item0001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/principlesoftware-dev/tutor-typescript/HEAD/lesson16/src/images/item0001.jpg -------------------------------------------------------------------------------- /lesson16/src/images/item0002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/principlesoftware-dev/tutor-typescript/HEAD/lesson16/src/images/item0002.jpg -------------------------------------------------------------------------------- /lesson16/src/images/item0003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/principlesoftware-dev/tutor-typescript/HEAD/lesson16/src/images/item0003.jpg -------------------------------------------------------------------------------- /lesson17/src/images/item0001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/principlesoftware-dev/tutor-typescript/HEAD/lesson17/src/images/item0001.jpg -------------------------------------------------------------------------------- /lesson17/src/images/item0002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/principlesoftware-dev/tutor-typescript/HEAD/lesson17/src/images/item0002.jpg -------------------------------------------------------------------------------- /lesson17/src/images/item0003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/principlesoftware-dev/tutor-typescript/HEAD/lesson17/src/images/item0003.jpg -------------------------------------------------------------------------------- /lesson16/src/App.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | function App() { 4 | 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /lesson01/build/js/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | let username = 'Dave'; 3 | console.log(username); 4 | let a = 12; 5 | let b = '6'; 6 | let c = 2; 7 | console.log(a / b); 8 | console.log(c * b); 9 | -------------------------------------------------------------------------------- /lesson01/src/main.ts: -------------------------------------------------------------------------------- 1 | let username = 'Dave' 2 | console.log(username) 3 | 4 | let a: number = 12 5 | let b: string = '6' 6 | let c: number = 2 7 | 8 | console.log(a / b) 9 | 10 | console.log(c * b) -------------------------------------------------------------------------------- /lesson12/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 | -------------------------------------------------------------------------------- /lesson13/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 | -------------------------------------------------------------------------------- /lesson14/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 | -------------------------------------------------------------------------------- /lesson15/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 | -------------------------------------------------------------------------------- /lesson16/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 | -------------------------------------------------------------------------------- /lesson17/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 | -------------------------------------------------------------------------------- /lesson12/src/components/Heading.tsx: -------------------------------------------------------------------------------- 1 | import { ReactElement } from "react" 2 | 3 | type HeadingProps = { title: string } 4 | 5 | const Heading = ({ title }: HeadingProps): ReactElement => { 6 | return

{title}

7 | } 8 | export default Heading -------------------------------------------------------------------------------- /lesson12/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 | -------------------------------------------------------------------------------- /lesson13/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 | -------------------------------------------------------------------------------- /lesson14/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Counter from "./Counter" 2 | 3 | function App() { 4 | 5 | return ( 6 | <> 7 | {(num: number) => <>Current Count: {num}} 8 | 9 | ) 10 | } 11 | 12 | export default App 13 | -------------------------------------------------------------------------------- /lesson14/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 | -------------------------------------------------------------------------------- /lesson15/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 | -------------------------------------------------------------------------------- /lesson16/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 | -------------------------------------------------------------------------------- /lesson17/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 | -------------------------------------------------------------------------------- /lesson17/src/hooks/useCart.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import CartContext from "../context/CartProvider" 3 | import { UseCartContextType } from "../context/CartProvider" 4 | 5 | const useCart = (): UseCartContextType => { 6 | return useContext(CartContext) 7 | } 8 | 9 | export default useCart -------------------------------------------------------------------------------- /lesson12/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 | -------------------------------------------------------------------------------- /lesson13/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 | -------------------------------------------------------------------------------- /lesson14/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 | -------------------------------------------------------------------------------- /lesson15/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 | -------------------------------------------------------------------------------- /lesson16/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 | -------------------------------------------------------------------------------- /lesson02/build/js/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | let myName = 'Dave'; 3 | let meaningOfLife; 4 | let isLoading; 5 | let album; 6 | myName = 'John'; 7 | meaningOfLife = 42; 8 | isLoading = true; 9 | album = 5150; 10 | const sum = (a, b) => { 11 | return a + b; 12 | }; 13 | let postId; 14 | let isActive; 15 | let re = /\w+/g; 16 | -------------------------------------------------------------------------------- /lesson17/src/hooks/useProducts.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import ProductsContext from "../context/ProductsProvider" 3 | import { UseProductsContextType } from "../context/ProductsProvider" 4 | 5 | const useProducts = (): UseProductsContextType => { 6 | return useContext(ProductsContext) 7 | } 8 | 9 | export default useProducts -------------------------------------------------------------------------------- /lesson11/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson11", 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 | "devDependencies": { 12 | "typescript": "^4.6.4", 13 | "vite": "^3.2.3" 14 | } 15 | } -------------------------------------------------------------------------------- /lesson15/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Counter from "./Counter" 2 | import { CounterProvider } from "./context/CounterContext" 3 | 4 | function App() { 5 | 6 | return ( 7 | <> 8 | 9 | {(num: number) => <>Current Count: {num}} 10 | 11 | 12 | ) 13 | } 14 | 15 | export default App 16 | -------------------------------------------------------------------------------- /lesson11/.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 | -------------------------------------------------------------------------------- /lesson12/.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 | -------------------------------------------------------------------------------- /lesson13/.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 | -------------------------------------------------------------------------------- /lesson14/.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 | -------------------------------------------------------------------------------- /lesson15/.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 | -------------------------------------------------------------------------------- /lesson16/.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 | -------------------------------------------------------------------------------- /lesson17/.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 | -------------------------------------------------------------------------------- /lesson02/src/main.ts: -------------------------------------------------------------------------------- 1 | let myName: string = 'Dave' 2 | let meaningOfLife: number; 3 | let isLoading: boolean; 4 | let album: any; 5 | 6 | myName = 'John' 7 | meaningOfLife = 42 8 | isLoading = true 9 | album = 5150 10 | 11 | const sum = (a: number, b: string) => { 12 | return a + b 13 | } 14 | 15 | let postId: string | number 16 | let isActive: number | boolean 17 | 18 | let re: RegExp = /\w+/g -------------------------------------------------------------------------------- /lesson12/src/components/Section.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react" 2 | 3 | type SectionProps = { 4 | title?: string, 5 | children: ReactNode 6 | } 7 | 8 | export const Section = ({ children, title = "My Subheading" }: SectionProps) => { 9 | return ( 10 |
11 |

{title}

12 |

{children}

13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /lesson12/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0.25rem; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #333; 9 | color: whitesmoke; 10 | display: grid; 11 | place-content: center; 12 | font-size: 150%; 13 | } 14 | 15 | button { 16 | font-size: 2rem; 17 | } 18 | 19 | .bold { 20 | font-weight: bold; 21 | } 22 | 23 | .gold { 24 | color: gold; 25 | } -------------------------------------------------------------------------------- /lesson13/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0.25rem; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #333; 9 | color: whitesmoke; 10 | display: grid; 11 | place-content: center; 12 | font-size: 150%; 13 | } 14 | 15 | button { 16 | font-size: 2rem; 17 | } 18 | 19 | .bold { 20 | font-weight: bold; 21 | } 22 | 23 | .gold { 24 | color: gold; 25 | } -------------------------------------------------------------------------------- /lesson12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lesson13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lesson14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lesson15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lesson16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lesson17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lesson16/data/products.json: -------------------------------------------------------------------------------- 1 | { 2 | "products": [ 3 | { 4 | "sku": "item0001", 5 | "name": "Widget", 6 | "price": 9.99 7 | }, 8 | { 9 | "sku": "item0002", 10 | "name": "Premium Widget", 11 | "price": 19.99 12 | }, 13 | { 14 | "sku": "item0003", 15 | "name": "Deluxe Widget", 16 | "price": 29.99 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /lesson17/data/products.json: -------------------------------------------------------------------------------- 1 | { 2 | "products": [ 3 | { 4 | "sku": "item0001", 5 | "name": "Widget", 6 | "price": 9.99 7 | }, 8 | { 9 | "sku": "item0002", 10 | "name": "Premium Widget", 11 | "price": 19.99 12 | }, 13 | { 14 | "sku": "item0003", 15 | "name": "Deluxe Widget", 16 | "price": 29.99 17 | } 18 | ] 19 | } -------------------------------------------------------------------------------- /lesson12/src/components/List.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react' 2 | 3 | interface ListProps { 4 | items: T[], 5 | render: (item: T) => ReactNode 6 | } 7 | 8 | const List = ({ items, render }: ListProps) => { 9 | return ( 10 |
    11 | {items.map((item, i) => ( 12 |
  • 13 | {render(item)} 14 |
    • 15 | ))} 16 |
17 | ) 18 | } 19 | export default List -------------------------------------------------------------------------------- /lesson06/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Example 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson07/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Example 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson08/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Example 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson09/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Example 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson01/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson02/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson03/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson04/build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lesson11/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ESNext", "DOM"], 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "resolveJsonModule": true, 10 | "isolatedModules": true, 11 | "esModuleInterop": true, 12 | "noEmit": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "noImplicitReturns": true, 16 | "skipLibCheck": true 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /lesson17/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 | import { CartProvider } from './context/CartProvider' 7 | import { ProductsProvider } from './context/ProductsProvider' 8 | 9 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 10 | 11 | 12 | 13 | 14 | 15 | 16 | , 17 | ) 18 | -------------------------------------------------------------------------------- /lesson12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson12", 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.24", 17 | "@types/react-dom": "^18.0.8", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "typescript": "^4.6.4", 20 | "vite": "^3.2.3" 21 | } 22 | } -------------------------------------------------------------------------------- /lesson12/src/components/Counter.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react' 2 | 3 | type CounterProps = { 4 | setCount: React.Dispatch>, 5 | children: ReactNode, 6 | } 7 | 8 | const Counter = ({ setCount, children }: CounterProps) => { 9 | 10 | return ( 11 | <> 12 |

{children}

13 | 14 | 15 | 16 | ) 17 | } 18 | export default Counter -------------------------------------------------------------------------------- /lesson13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson13", 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.24", 17 | "@types/react-dom": "^18.0.8", 18 | "@vitejs/plugin-react": "^2.2.0", 19 | "typescript": "^4.6.4", 20 | "vite": "^3.2.3" 21 | } 22 | } -------------------------------------------------------------------------------- /lesson14/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson14", 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.26", 17 | "@types/react-dom": "^18.0.9", 18 | "@vitejs/plugin-react": "^3.0.0", 19 | "typescript": "^4.9.3", 20 | "vite": "^4.0.0" 21 | } 22 | } -------------------------------------------------------------------------------- /lesson15/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson14", 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.26", 17 | "@types/react-dom": "^18.0.9", 18 | "@vitejs/plugin-react": "^3.0.0", 19 | "typescript": "^4.9.3", 20 | "vite": "^4.0.0" 21 | } 22 | } -------------------------------------------------------------------------------- /lesson16/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson16", 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.26", 17 | "@types/react-dom": "^18.0.9", 18 | "@vitejs/plugin-react": "^3.0.0", 19 | "typescript": "^4.9.3", 20 | "vite": "^4.0.0" 21 | } 22 | } -------------------------------------------------------------------------------- /lesson17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lesson17", 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.26", 17 | "@types/react-dom": "^18.0.9", 18 | "@vitejs/plugin-react": "^3.0.0", 19 | "typescript": "^4.9.3", 20 | "vite": "^4.0.0" 21 | } 22 | } -------------------------------------------------------------------------------- /lesson17/src/components/Nav.tsx: -------------------------------------------------------------------------------- 1 | type PropsType = { 2 | viewCart: boolean, 3 | setViewCart: React.Dispatch>, 4 | } 5 | 6 | const Nav = ({ viewCart, setViewCart }: PropsType) => { 7 | 8 | const button = viewCart 9 | ? 10 | : 11 | 12 | const content = ( 13 | 16 | ) 17 | 18 | return content 19 | } 20 | export default Nav -------------------------------------------------------------------------------- /lesson17/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Header from "./components/Header" 2 | import Footer from "./components/Footer" 3 | import Cart from "./components/Cart" 4 | import ProductList from "./components/ProductList" 5 | import { useState } from "react" 6 | 7 | function App() { 8 | const [viewCart, setViewCart] = useState(false) 9 | 10 | const pageContent = viewCart ? : 11 | 12 | const content = ( 13 | <> 14 |
15 | {pageContent} 16 |