├── MatheusBatisti_UseContext ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ └── NavBar.jsx │ ├── context │ │ └── ThemeContext.jsx │ ├── index.css │ ├── main.jsx │ └── routes │ │ ├── Contact.jsx │ │ └── Home.jsx └── vite.config.js ├── UseAuth_UseContext_Example ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── AuthProvider.jsx │ │ ├── LoginPage.jsx │ │ └── PrivateRoute.jsx │ ├── data │ │ └── user.js │ ├── main.jsx │ └── pages │ │ ├── HomePage.jsx │ │ ├── Page1.jsx │ │ ├── Page2.jsx │ │ └── Page3.jsx └── vite.config.js ├── UseContextFirstProjectGuys ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Context │ │ └── ThemeContext.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── Button │ │ │ └── Button.jsx │ │ └── MiniDrawer │ │ │ └── MiniDrawer.jsx │ ├── data │ │ └── data.js │ ├── index.css │ ├── main.jsx │ └── routes │ │ ├── AllMail │ │ └── AllMail.jsx │ │ ├── Drafts │ │ └── Drafts.jsx │ │ ├── Home │ │ └── Home.jsx │ │ ├── Inbox │ │ └── Inbox.jsx │ │ ├── SendEmail │ │ └── SendEmail.jsx │ │ ├── Spam │ │ └── Spam.jsx │ │ ├── Starred │ │ └── Starred.jsx │ │ └── Trash │ │ └── Trash.jsx ├── tx │ └── documentacion.txt └── vite.config.js ├── UseContext_+_CustomHook ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Components │ │ ├── FirstComponent.jsx │ │ └── SecondComponent.jsx │ ├── Context │ │ ├── ChangeNameContext.jsx │ │ └── ContextProvider.jsx │ ├── Hooks │ │ └── UseChangeNameHook.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js ├── useContext_Front-end_Beginners ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Components │ │ ├── ChildrenOne.jsx │ │ └── ChildrenTwo.jsx │ ├── assets │ │ └── react.svg │ ├── context │ │ ├── AppContext.jsx │ │ └── AppProvider.jsx │ ├── hook │ │ └── useAppContext.jsx │ ├── index.css │ └── main.jsx └── vite.config.js ├── useEffectGitHubExercise ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json ├── tx │ └── logic.txt └── vite.config.ts ├── useEffectRepositorioGitHub ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── useId ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── Components │ │ └── FirstExample.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js ├── useReducerNewExample ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── FirstExample.jsx │ │ └── SecondExample.jsx │ ├── index.css │ └── main.jsx └── vite.config.js └── useReducer_Sujeito-Progamador ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public └── vite.svg ├── src ├── App.css ├── App.tsx ├── assets │ └── react.svg ├── index.css ├── main.tsx └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /MatheusBatisti_UseContext/.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 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "matheusbatisti-usecontext", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.27.0" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.13.0", 19 | "@types/react": "^18.3.11", 20 | "@types/react-dom": "^18.3.1", 21 | "@vitejs/plugin-react": "^4.3.3", 22 | "eslint": "^9.13.0", 23 | "eslint-plugin-react": "^7.37.1", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.13", 26 | "globals": "^15.11.0", 27 | "vite": "^5.4.9" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | 6 | } 7 | 8 | 9 | .app { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | gap: 3rem; 15 | } 16 | 17 | 18 | .dark-theme, 19 | .dark-theme a { 20 | background-color: #333; 21 | color: #fff; 22 | } -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from 'react-router-dom' 2 | import { ThemeContext } from './context/ThemeContext' 3 | import { useContext } from 'react'; 4 | import './App.css' 5 | 6 | 7 | function App() { 8 | 9 | const { theme } = useContext(ThemeContext) 10 | 11 | return ( 12 | <> 13 |
14 | 15 |
16 | 17 | ) 18 | } 19 | 20 | export default App 21 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/components/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Link} from 'react-router-dom' 3 | 4 | const NavBar = () => { 5 | return ( 6 |
7 | 13 |
14 | ) 15 | } 16 | 17 | export default NavBar 18 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/context/ThemeContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from "react"; 2 | 3 | export const ThemeContext = createContext(); 4 | 5 | export const ThemeProvider = ({children}) => { 6 | 7 | const [theme, setTheme] = useState('light') 8 | 9 | const toogleTheme = () => { 10 | setTheme(theme === 'light' ? 'dark' : 'light') 11 | } 12 | 13 | return ( 14 | {children} 15 | ) 16 | } -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/7alexandree7/Hooks-Advanced-ReactJs/4c5c1840404bdf766f13ecd90589e1b1cedd340e/MatheusBatisti_UseContext/src/index.css -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | import Home from './routes/Home.jsx' 6 | import Contact from './routes/Contact.jsx' 7 | 8 | import {createBrowserRouter, RouterProvider} from 'react-router-dom' 9 | import { ThemeProvider } from './context/ThemeContext.jsx' 10 | const router = createBrowserRouter([ 11 | { 12 | path: '/', 13 | element: , 14 | children: [ 15 | {path: '/', element: }, 16 | {path: '/contact', element: } 17 | ], 18 | }, 19 | ]); 20 | 21 | createRoot(document.getElementById('root')).render( 22 | 23 | 24 | 25 | 26 | , 27 | ) 28 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/routes/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NavBar from '../components/NavBar' 3 | import { ThemeContext } from '../context/ThemeContext' 4 | import { useContext } from 'react'; 5 | 6 | const Contact = () => { 7 | 8 | const {theme, toogleTheme} = useContext(ThemeContext) 9 | return ( 10 |
11 |

Contact

12 |

{`A classe é ${theme}`}

13 | 14 | 15 |
16 | ) 17 | } 18 | 19 | export default Contact 20 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/src/routes/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import NavBar from '../components/NavBar' 3 | import { ThemeContext } from '../context/ThemeContext' 4 | import { useContext } from 'react'; 5 | 6 | const Home = () => { 7 | 8 | const {theme, toogleTheme} = useContext(ThemeContext) 9 | 10 | return ( 11 |
12 |

Pagina Inicial Da Aplicação

13 |

{`O tema atual é ${theme}`}

14 | 15 | 16 |
17 | ) 18 | } 19 | 20 | export default Home 21 | -------------------------------------------------------------------------------- /MatheusBatisti_UseContext/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/.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 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "useauth-usecontext-example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1", 15 | "react-router-dom": "^6.27.0" 16 | }, 17 | "devDependencies": { 18 | "@eslint/js": "^9.13.0", 19 | "@types/react": "^18.3.12", 20 | "@types/react-dom": "^18.3.1", 21 | "@vitejs/plugin-react": "^4.3.3", 22 | "eslint": "^9.13.0", 23 | "eslint-plugin-react": "^7.37.2", 24 | "eslint-plugin-react-hooks": "^5.0.0", 25 | "eslint-plugin-react-refresh": "^0.4.14", 26 | "globals": "^15.11.0", 27 | "vite": "^5.4.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | 9 | .content_LoginPage { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #daeef7; 15 | flex-direction: column; 16 | gap: 3rem; 17 | } 18 | 19 | 20 | .form-box { 21 | background-color: #3088a4; 22 | padding: 30px; 23 | width: 600px; 24 | display: flex; 25 | flex-direction: column; 26 | align-items: center; 27 | justify-content: center; 28 | gap: 0.5rem; 29 | border-radius: 12px; 30 | color: #181818; 31 | font-weight: 600; 32 | } 33 | 34 | 35 | .box_input { 36 | margin: 15px; 37 | } 38 | 39 | 40 | button { 41 | width: 200px; 42 | border: none; 43 | outline: none; 44 | padding: 6px ; 45 | border-radius: 6px; 46 | font-weight: bold; 47 | letter-spacing: 2px; 48 | cursor: pointer; 49 | } 50 | 51 | input { 52 | width: 200px; 53 | border: none; 54 | outline: none; 55 | padding: 4px ; 56 | border-radius: 6px; 57 | margin-top: 5px; 58 | } -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Route, Routes, Outlet } from 'react-router-dom'; 3 | import { AuthProvider } from './components/AuthProvider'; 4 | import PrivateRoute from './components/PrivateRoute'; 5 | import LoginPage from './components/LoginPage'; 6 | import HomePage from './pages/HomePage'; 7 | import Page1 from './pages/Page1'; 8 | import Page2 from './pages/Page2'; 9 | import Page3 from './pages/Page3'; 10 | 11 | function App() { 12 | 13 | 14 | return ( 15 | 16 | 17 | 18 | 19 | } /> 20 | {/* Rotas protegidas */} 21 | }/> 22 | }/> 23 | }/> 24 | }/> 25 | {/* Rotas protegidas */} 26 | 27 | 28 | 29 | ); 30 | } 31 | 32 | export default App 33 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/components/AuthProvider.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useState, createContext, useContext } from 'react' 3 | 4 | const AuthContext = createContext() 5 | 6 | export function AuthProvider({ children }) { 7 | 8 | const [isAuthenticated, setIsAuthenticated] = useState(false); 9 | 10 | const login = () => { 11 | console.log('Logging in...'); 12 | setIsAuthenticated(true); 13 | console.log('User is authenticated:', true); 14 | }; 15 | 16 | const logout = () => { 17 | console.log('Logging out...'); 18 | setIsAuthenticated(false); 19 | console.log('User is authenticated:', false); 20 | }; 21 | 22 | return ( 23 | 28 | {children} 29 | 30 | ) 31 | } 32 | 33 | 34 | export function useAuth() { 35 | return useContext(AuthContext) 36 | } 37 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/components/LoginPage.jsx: -------------------------------------------------------------------------------- 1 | // src/components/LoginPage.js 2 | import React from 'react'; 3 | import { useAuth } from './AuthProvider'; 4 | import { useNavigate } from 'react-router-dom' 5 | import { useState } from 'react'; 6 | import '../App.css' 7 | import { user as users } from '../data/user'; 8 | 9 | function LoginPage() { 10 | 11 | const [email, setEmail] = useState(''); 12 | const [password, setPassword] = useState(''); 13 | const [error, setError] = useState(''); 14 | 15 | const auth = useAuth(); 16 | const navigate = useNavigate(); 17 | 18 | const handleLogin = () => { 19 | const foundUser = users.find(user => user.email === email && user.password === password); 20 | 21 | if (foundUser) { 22 | auth.login(); 23 | navigate('/'); 24 | } 25 | 26 | else { 27 | setError('Email ou senha não encontrados') 28 | } 29 | }; 30 | 31 | return ( 32 | <> 33 | 34 |
35 |

Login

36 |
event.preventDefault()}> 37 |
38 |
39 |

Email:

40 | setEmail(e.target.value)} 46 | /> 47 |
48 |
49 |

Senha:

50 | setPassword(e.target.value)} 56 | /> 57 |
58 |
59 |
60 | 61 |
62 |
63 | {error &&

{error}

} 64 |
65 | 66 | 67 | ); 68 | } 69 | 70 | export default LoginPage; 71 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/components/PrivateRoute.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navigate } from 'react-router-dom'; 3 | import { useAuth } from './AuthProvider'; 4 | 5 | 6 | function PrivateRoute ({children}) { 7 | const auth = useAuth() 8 | 9 | return auth.isAuthenticated ? children : 10 | } 11 | 12 | 13 | export default PrivateRoute -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/data/user.js: -------------------------------------------------------------------------------- 1 | export const user = [ 2 | { 3 | email: 'alexandre020602@gmail.com', 4 | password: 'xande123' 5 | }, 6 | 7 | { 8 | email: 'thaunbr28@gmail.com', 9 | password: 'thauan123' 10 | }, 11 | 12 | { 13 | email: 'guga13@gmail.com', 14 | password: 'malhado13' 15 | }, 16 | ] -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/pages/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useNavigate } from 'react-router-dom'; 3 | 4 | function HomePage() { 5 | 6 | const navigate = useNavigate() 7 | 8 | const goToPage1 = () => navigate('/page1'); 9 | const goToPage2 = () => navigate('/page2'); 10 | const goToPage3 = () => navigate('/page3'); 11 | 12 | 13 | return ( 14 |
15 |

Pagina HomePage

16 | 17 | 18 | 19 | 20 |
21 | ) 22 | } 23 | 24 | export default HomePage; -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/pages/Page1.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Page1() { 4 | return

Page 1

; 5 | } 6 | 7 | export default Page1; -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/pages/Page2.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Page2() { 4 | return

Page 2

; 5 | } 6 | 7 | export default Page2; -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/src/pages/Page3.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Page3() { 4 | return

Page 3

; 5 | } 6 | 7 | export default Page3; -------------------------------------------------------------------------------- /UseAuth_UseContext_Example/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/.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 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecontextfirstprojectguys", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@emotion/react": "^11.13.3", 14 | "@emotion/styled": "^11.13.0", 15 | "@mui/icons-material": "^6.1.5", 16 | "@mui/material": "^6.1.5", 17 | "react": "^18.3.1", 18 | "react-dom": "^18.3.1", 19 | "react-router-dom": "^6.27.0" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.13.0", 23 | "@types/react": "^18.3.11", 24 | "@types/react-dom": "^18.3.1", 25 | "@vitejs/plugin-react": "^4.3.3", 26 | "eslint": "^9.13.0", 27 | "eslint-plugin-react": "^7.37.1", 28 | "eslint-plugin-react-hooks": "^5.0.0", 29 | "eslint-plugin-react-refresh": "^0.4.13", 30 | "globals": "^15.11.0", 31 | "vite": "^5.4.9" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | overflow: hidden; 6 | font-weight: 600; 7 | font-family: Arial, Helvetica, sans-serif; 8 | } 9 | 10 | 11 | h1 { 12 | font-size: 42px; 13 | } 14 | 15 | .contentPage { 16 | height:100vh; 17 | width: 100vw; 18 | display: flex; 19 | flex-direction: column; 20 | gap: 1.2rem; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | 26 | 27 | /* Tema escuro */ 28 | .contentPage.dark-theme { 29 | background-color: #222; /* Cor de fundo escura */ 30 | color: #fff; /* Cor do texto para o tema escuro */ 31 | } 32 | 33 | 34 | .btnGlobal { 35 | width: 280px; 36 | border: none; 37 | outline: none; 38 | border-radius: 12px; 39 | background-color: rgba(87, 173, 227, 0.771); 40 | cursor: pointer; 41 | letter-spacing: 2px; 42 | padding: 18px 12px; 43 | font-size: 16px; 44 | font-weight: 600; 45 | } 46 | 47 | 48 | 49 | a { 50 | text-decoration: none; 51 | } -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import MiniDrawer from './components/MiniDrawer/MiniDrawer' 3 | import { Box, Typography } from '@mui/material' 4 | import { Outlet } from "react-router-dom"; 5 | 6 | 7 | function App() { 8 | 9 | return ( 10 |
11 | 12 | 13 | 14 |
15 | 16 | ) 17 | } 18 | 19 | export default App 20 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/Context/ThemeContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from "react"; 2 | 3 | export const ThemeContext = createContext() 4 | export const ThemeProvider = ({children}) => { 5 | 6 | const [theme, setTheme] = useState('light'); 7 | 8 | const toogleMode = () => { 9 | setTheme(theme == 'light' ? 'dark' : 'light') 10 | } 11 | 12 | 13 | return ( 14 | {children} 15 | ) 16 | 17 | } -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ThemeContext } from '../../Context/ThemeContext' 3 | import { useContext } from 'react' 4 | 5 | const Button = () => { 6 | 7 | const {toogleMode} = useContext(ThemeContext) 8 | 9 | return ( 10 |
11 | 12 |
13 | ) 14 | } 15 | 16 | export default Button 17 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/components/MiniDrawer/MiniDrawer.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { styled, useTheme } from '@mui/material/styles'; 3 | import Box from '@mui/material/Box'; 4 | import MuiDrawer from '@mui/material/Drawer'; 5 | import MuiAppBar from '@mui/material/AppBar'; 6 | import Toolbar from '@mui/material/Toolbar'; 7 | import List from '@mui/material/List'; 8 | import CssBaseline from '@mui/material/CssBaseline'; 9 | import Typography from '@mui/material/Typography'; 10 | import Divider from '@mui/material/Divider'; 11 | import IconButton from '@mui/material/IconButton'; 12 | import MenuIcon from '@mui/icons-material/Menu'; 13 | import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; 14 | import ChevronRightIcon from '@mui/icons-material/ChevronRight'; 15 | import ListItem from '@mui/material/ListItem'; 16 | import ListItemButton from '@mui/material/ListItemButton'; 17 | import ListItemIcon from '@mui/material/ListItemIcon'; 18 | import ListItemText from '@mui/material/ListItemText'; 19 | import InboxIcon from '@mui/icons-material/MoveToInbox'; 20 | import MailIcon from '@mui/icons-material/Mail'; 21 | import { Link } from "react-router-dom"; 22 | import { valueDrawerFirst, valueDrawerSecond } from '../../data/data'; 23 | import Button from '../Button/Button'; 24 | 25 | const drawerWidth = 240; 26 | 27 | const openedMixin = (theme) => ({ 28 | width: drawerWidth, 29 | transition: theme.transitions.create('width', { 30 | easing: theme.transitions.easing.sharp, 31 | duration: theme.transitions.duration.enteringScreen, 32 | }), 33 | overflowX: 'hidden', 34 | }); 35 | 36 | const closedMixin = (theme) => ({ 37 | transition: theme.transitions.create('width', { 38 | easing: theme.transitions.easing.sharp, 39 | duration: theme.transitions.duration.leavingScreen, 40 | }), 41 | overflowX: 'hidden', 42 | width: `calc(${theme.spacing(7)} + 1px)`, 43 | [theme.breakpoints.up('sm')]: { 44 | width: `calc(${theme.spacing(8)} + 1px)`, 45 | }, 46 | }); 47 | 48 | const DrawerHeader = styled('div')(({ theme }) => ({ 49 | display: 'flex', 50 | alignItems: 'center', 51 | justifyContent: 'flex-end', 52 | padding: theme.spacing(0, 1), 53 | // necessary for content to be below app bar 54 | ...theme.mixins.toolbar, 55 | })); 56 | 57 | const AppBar = styled(MuiAppBar, { 58 | shouldForwardProp: (prop) => prop !== 'open', 59 | })(({ theme }) => ({ 60 | zIndex: theme.zIndex.drawer + 1, 61 | transition: theme.transitions.create(['width', 'margin'], { 62 | easing: theme.transitions.easing.sharp, 63 | duration: theme.transitions.duration.leavingScreen, 64 | }), 65 | variants: [ 66 | { 67 | props: ({ open }) => open, 68 | style: { 69 | marginLeft: drawerWidth, 70 | width: `calc(100% - ${drawerWidth}px)`, 71 | transition: theme.transitions.create(['width', 'margin'], { 72 | easing: theme.transitions.easing.sharp, 73 | duration: theme.transitions.duration.enteringScreen, 74 | }), 75 | }, 76 | }, 77 | ], 78 | })); 79 | 80 | const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( 81 | ({ theme }) => ({ 82 | width: drawerWidth, 83 | flexShrink: 0, 84 | whiteSpace: 'nowrap', 85 | boxSizing: 'border-box', 86 | variants: [ 87 | { 88 | props: ({ open }) => open, 89 | style: { 90 | ...openedMixin(theme), 91 | '& .MuiDrawer-paper': openedMixin(theme), 92 | }, 93 | }, 94 | { 95 | props: ({ open }) => !open, 96 | style: { 97 | ...closedMixin(theme), 98 | '& .MuiDrawer-paper': closedMixin(theme), 99 | }, 100 | }, 101 | ], 102 | }), 103 | ); 104 | 105 | export default function MiniDrawer() { 106 | const theme = useTheme(); 107 | const [open, setOpen] = React.useState(false); 108 | 109 | const handleDrawerOpen = () => { 110 | setOpen(true); 111 | }; 112 | 113 | const handleDrawerClose = () => { 114 | setOpen(false); 115 | }; 116 | 117 | return ( 118 | <> 119 | 120 | 121 | 122 | 134 | 135 | 136 | 137 | Mini variant drawer 138 | 139 | 140 | 141 | 145 | 146 | 147 | 148 | {theme.direction === 'rtl' ? : } 149 | 150 | 151 | 152 | 153 | {valueDrawerFirst.map((text, index) => ( 154 | 155 | 156 | 171 | 186 | {index % 2 === 0 ? : } 187 | 188 | 199 | 200 | 201 | 202 | ))} 203 | 204 | 205 | 206 | {valueDrawerSecond.map((text, index) => ( 207 | 208 | 209 | 224 | 239 | {index % 2 === 0 ? : } 240 | 241 | 252 | 253 | 254 | 255 | ))} 256 | 257 | 258 | 259 | ); 260 | } -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/data/data.js: -------------------------------------------------------------------------------- 1 | export const valueDrawerFirst = [ 2 | 3 | { 4 | nome: 'Home', 5 | routerPath: '/home' 6 | }, 7 | 8 | { 9 | nome: 'Inbox', 10 | routerPath: '/inbox' 11 | }, 12 | { 13 | nome: 'Starred', 14 | routerPath: '/starred' 15 | }, 16 | { 17 | nome: 'Send Email', 18 | routerPath: '/sendemail' 19 | }, 20 | { 21 | nome: 'Drafts', 22 | routerPath: '/drafts' 23 | }, 24 | ] 25 | 26 | 27 | 28 | export const valueDrawerSecond = [ 29 | 30 | { 31 | nome: 'All Mail', 32 | routerPath: '/allmail' 33 | }, 34 | { 35 | nome: 'Trash', 36 | routerPath: '/trash' 37 | }, 38 | { 39 | nome: 'Spam', 40 | routerPath: '/spam' 41 | }, 42 | 43 | ] 44 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/7alexandree7/Hooks-Advanced-ReactJs/4c5c1840404bdf766f13ecd90589e1b1cedd340e/UseContextFirstProjectGuys/src/index.css -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import { createBrowserRouter, RouterProvider, } from "react-router-dom"; 4 | import './index.css' 5 | import App from './App.jsx' 6 | import AllMail from './routes/AllMail/AllMail.jsx'; 7 | import Drafts from './routes/Drafts/Drafts.jsx'; 8 | import Inbox from './routes/Inbox/Inbox.jsx'; 9 | import SendEmail from './routes/SendEmail/SendEmail.jsx'; 10 | import Spam from './routes/Spam/Spam.jsx'; 11 | import Starred from './routes/Starred/Starred.jsx'; 12 | import Trash from './routes/Trash/Trash.jsx'; 13 | import Home from './routes/Home/Home.jsx'; 14 | import { ThemeProvider } from './Context/ThemeContext.jsx'; 15 | 16 | const router = createBrowserRouter([ 17 | { 18 | path: '/', 19 | element: , 20 | children: [ 21 | { path: '/home', element: }, 22 | { path: '/allmail', element: }, 23 | { path: '/drafts', element: }, 24 | { path: '/inbox', element: }, 25 | { path: '/sendemail', element: }, 26 | { path: '/spam', element: }, 27 | { path: '/starred', element: }, 28 | { path: '/trash', element: }, 29 | ] 30 | } 31 | ]) 32 | 33 | createRoot(document.getElementById('root')).render( 34 | 35 | 36 | 37 | 38 | 39 | , 40 | ) 41 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/AllMail/AllMail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | 4 | import { useContext } from 'react' 5 | import { ThemeContext } from '../../Context/ThemeContext' 6 | 7 | const AllMail = () => { 8 | const {theme} = useContext(ThemeContext) 9 | return ( 10 |
11 |

Pagina AllMail

12 |
14 | ) 15 | } 16 | 17 | export default AllMail 18 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/Drafts/Drafts.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | import { useContext } from 'react' 4 | import { ThemeContext } from '../../Context/ThemeContext' 5 | 6 | const Drafts = () => { 7 | 8 | const {theme} = useContext(ThemeContext) 9 | 10 | return ( 11 |
12 |

Pagina do Drafts

13 |
15 | ) 16 | } 17 | 18 | export default Drafts 19 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | 4 | import { useContext } from 'react' 5 | import { ThemeContext } from '../../Context/ThemeContext' 6 | 7 | const Home = () => { 8 | 9 | const {theme} = useContext(ThemeContext) 10 | 11 | return ( 12 | 13 |
14 |

Pagina Home

15 |
17 | ) 18 | } 19 | 20 | export default Home 21 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/Inbox/Inbox.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | 4 | import { useContext } from 'react' 5 | import { ThemeContext } from '../../Context/ThemeContext' 6 | 7 | const Inbox = () => { 8 | 9 | const {theme} = useContext(ThemeContext) 10 | 11 | return ( 12 |
13 |

Pagina Inbox

14 |
16 | ) 17 | } 18 | 19 | export default Inbox 20 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/SendEmail/SendEmail.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | import { useContext } from 'react' 4 | import { ThemeContext } from '../../Context/ThemeContext' 5 | 6 | const SendEmail = () => { 7 | 8 | const {theme} = useContext(ThemeContext) 9 | 10 | return ( 11 |
12 |

Pagina Send Email

13 |
15 | ) 16 | } 17 | 18 | export default SendEmail 19 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/Spam/Spam.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | import { useContext } from 'react' 4 | import { ThemeContext } from '../../Context/ThemeContext' 5 | 6 | const Spam = () => { 7 | const {theme} = useContext(ThemeContext) 8 | return ( 9 |
10 |

Pagina Spam

11 |
13 | ) 14 | } 15 | 16 | export default Spam 17 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/Starred/Starred.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | import { useContext } from 'react' 4 | import { ThemeContext } from '../../Context/ThemeContext' 5 | 6 | const Starred = () => { 7 | const {theme} = useContext(ThemeContext) 8 | return ( 9 |
10 |

Pagina Starred

11 |
13 | ) 14 | } 15 | 16 | export default Starred 17 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/src/routes/Trash/Trash.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Button from '../../components/Button/Button' 3 | import { useContext } from 'react' 4 | import { ThemeContext } from '../../Context/ThemeContext' 5 | 6 | const Trash = () => { 7 | const {theme} = useContext(ThemeContext) 8 | return ( 9 |
10 |

Pagina Trash

11 |
13 | ) 14 | } 15 | 16 | export default Trash 17 | -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/tx/documentacion.txt: -------------------------------------------------------------------------------- 1 | 1 - Rodar npm vite@latest 2 | 2- baixar as dependencias do NPM (gerenciador de pacotes do node.js) 3 | 3 - Baixar as Lib pelo npm que serão usadas no app 4 | .React-Router-dom 5 | .Material-UI 6 | 7 | * (1) brakepoint do git, para commitar as informações 8 | 9 | 4 - Montar uma boa arquitetura 10 | . Pagina de Componentes 11 | . Pagina para Rotas 12 | 13 | 5 - Configuração base para receber as rotas e definições de estilo 14 | 15 | * (2) brakepoint do git, para commitar as informações 16 | 17 | 6 - Inicio do Roteamento em React com react router dom 18 | . Criar minhas rotas, Definiar um arquivo para cada Rota 19 | . Importar do React Router Dom o createBrowserRouter e RouterProvider 20 | . Configuar meu Main.jsx com as seguintes demandas 21 | . Criar uma variavel com as rotas definidas 22 | .passando o O Path, 23 | .Element 24 | .Children 25 | .Concluir o caminho de cada rota dentro da variavel com o path e element corretamente 26 | .Remoção do e adicionado dentro o router={router}, com isso nossa paginação não fica estativa 27 | no componente App 28 | . Adicionando no App o comoponente para a navegação dasa paginas via url ou caminho 29 | 30 | 31 | * (3) brakepoint do git, para commitar as informações 32 | 33 | 34 | 7 Adicionar um Componente Link do React Router Dom na aplicação no meu drawer, para cara Link desse, 35 | me redirecionar para a rota desejada 36 | 37 | * (4) brakepoint do git, para commitar as informações 38 | 39 | 8 Eu criei um arquivo chamado data.js, contendo 2 constantes, com o valor de nome e routerPath, para renderizar 40 | de forma dinamica is items e junto com eles, inserindo automaticamente as rotas de cada item 41 | 42 | 9 precisei organizar o css para cada pagina centralizar corretamente 43 | 44 | 45 | * (5) brakepoint do git, para commitar as informações 46 | 47 | 10 - Criei o botão para mudar o background para cada componente 48 | 49 | 11 - Criar uma classe com o tema light e dark 50 | 51 | 12 - Criar um contexto para mudar o background -------------------------------------------------------------------------------- /UseContextFirstProjectGuys/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/.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 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecontext-customhook", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "eslint": "^9.13.0", 22 | "eslint-plugin-react": "^7.37.2", 23 | "eslint-plugin-react-hooks": "^5.0.0", 24 | "eslint-plugin-react-refresh": "^0.4.14", 25 | "globals": "^15.11.0", 26 | "vite": "^5.4.10" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import FirstComponent from './Components/FirstComponent' 3 | import SecondComponent from './Components/SecondComponent' 4 | import ContextProvider from './Context/ContextProvider' 5 | 6 | function App() { 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default App 19 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/Components/FirstComponent.jsx: -------------------------------------------------------------------------------- 1 | import UseChangeNameHook from "../Hooks/UseChangeNameHook" 2 | 3 | 4 | export default function FirstComponent () { 5 | 6 | const {name} = UseChangeNameHook() 7 | 8 | return ( 9 |
10 |

Meu Nome é {name}

11 |
12 | ) 13 | } -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/Components/SecondComponent.jsx: -------------------------------------------------------------------------------- 1 | import UseChangeNameHook from "../Hooks/UseChangeNameHook" 2 | 3 | export default function SecondComponent() { 4 | 5 | const {setName} = UseChangeNameHook() 6 | 7 | return ( 8 |
9 | 10 |
11 | ) 12 | } -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/Context/ChangeNameContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | 4 | export const ChangeNameContext = createContext(null) -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/Context/ContextProvider.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { ChangeNameContext } from "./ChangeNameContext"; 3 | 4 | export default function ContextProvider ({children}) { 5 | 6 | const [name, setName] = useState('UK Developer') 7 | 8 | 9 | return ( 10 | 11 | {children} 12 | 13 | ) 14 | } -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/Hooks/UseChangeNameHook.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { ChangeNameContext } from "../Context/ChangeNameContext" 3 | 4 | export default function UseChangeNameHook () { 5 | 6 | const context = useContext(ChangeNameContext) 7 | 8 | if (context === undefined) { 9 | throw new Error('Não esta drentro do escopo do context') 10 | } 11 | 12 | return context 13 | } -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /UseContext_+_CustomHook/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/.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 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usecontext-front-end-beginners", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "uk": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@emotion/react": "^11.13.3", 14 | "@emotion/styled": "^11.13.0", 15 | "@mui/material": "^6.1.6", 16 | "react": "^18.3.1", 17 | "react-dom": "^18.3.1" 18 | }, 19 | "devDependencies": { 20 | "@eslint/js": "^9.13.0", 21 | "@types/react": "^18.3.12", 22 | "@types/react-dom": "^18.3.1", 23 | "@vitejs/plugin-react": "^4.3.3", 24 | "eslint": "^9.13.0", 25 | "eslint-plugin-react": "^7.37.2", 26 | "eslint-plugin-react-hooks": "^5.0.0", 27 | "eslint-plugin-react-refresh": "^0.4.14", 28 | "globals": "^15.11.0", 29 | "vite": "^5.4.10" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | import { Box, Button, Typography } from '@mui/material' 3 | import './App.css' 4 | import AppProvider from './context/AppProvider' 5 | import ChildrenOne from './Components/ChildrenOne' 6 | import ChildrenTwo from './Components/ChildrenTwo' 7 | 8 | 9 | function App() { 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | ) 17 | } 18 | 19 | export default App 20 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/Components/ChildrenOne.jsx: -------------------------------------------------------------------------------- 1 | import useAppContext from "../hook/useAppContext" 2 | 3 | export default function ChildrenOne() { 4 | const { name, number } = useAppContext() 5 | return ( 6 |
7 | {name} e numero: {number} 8 |
9 | ) 10 | } -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/Components/ChildrenTwo.jsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@mui/material"; 2 | import useAppContext from "../hook/useAppContext"; 3 | 4 | export default function ChildrenTwo () { 5 | 6 | const {setName} = useAppContext() 7 | 8 | return ( 9 | 10 | ) 11 | } -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/context/AppContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const AppContext = createContext(null); -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/context/AppProvider.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import { AppContext } from './AppContext' 3 | 4 | export default function AppProvider({ children }) { 5 | const [name, setName] = useState('Front Beginners') 6 | 7 | const number = 10 8 | 9 | 10 | return ( 11 | 12 | {children} 13 | 14 | ) 15 | } -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/hook/useAppContext.jsx: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import { AppContext } from "../context/AppContext"; 3 | 4 | export default function useAppContext () { 5 | 6 | const context = useContext(AppContext) 7 | 8 | if (context === undefined) { 9 | throw new Error('Não esta definido dentro do Contexto') 10 | } 11 | 12 | return context; 13 | } -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | 39 | @media (prefers-color-scheme: light) { 40 | :root { 41 | color: #213547; 42 | background-color: #ffffff; 43 | } 44 | a:hover { 45 | color: #747bff; 46 | } 47 | button { 48 | background-color: #f9f9f9; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /useContext_Front-end_Beginners/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/.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 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "useeffectgithubexercise", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "eslint": "^9.13.0", 22 | "eslint-plugin-react-hooks": "^5.0.0", 23 | "eslint-plugin-react-refresh": "^0.4.14", 24 | "globals": "^15.11.0", 25 | "typescript": "~5.6.2", 26 | "typescript-eslint": "^8.11.0", 27 | "vite": "^5.4.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import './App.css' 3 | 4 | interface Irepository { 5 | name: string; 6 | id: number; 7 | } 8 | 9 | function App() { 10 | 11 | const [repository, setRepository] = useState([]) 12 | const [search, setSearch] = useState('') 13 | 14 | useEffect(() => { 15 | fetch('https://api.github.com/users/7alexandree7/repos') 16 | .then(repo => repo.json()) 17 | .then(data => setRepository(data)) 18 | }, []) 19 | 20 | const filteredRepository = search.length > 0 ? 21 | repository.filter(repo => repo.name.includes(search)) : 22 | []; 23 | 24 | return ( 25 | <> 26 | setSearch(e.target.value)} /> 32 | 33 | 34 | {search.length > 0 ? ( 35 |
    36 | {filteredRepository.map((item) => { 37 | return ( 38 |
  • {item.name}
    • 39 | ) 40 | })} 41 |
42 | ) : ( 43 |
    44 | {repository.map((item) => { 45 | return ( 46 |
  • {item.name}
    • 47 | ) 48 | })} 49 |
50 | )} 51 | 52 | 53 | ) 54 | } 55 | 56 | 57 | export default App 58 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/tx/logic.txt: -------------------------------------------------------------------------------- 1 | 1 parte 2 | 3 | ter um input 4 | abaixo desse input ter um estado para exibir seus repositorios 5 | 6 | ter uma interface para meu state aonde vai o repositorio não filtrado 7 | 8 | 9 | esses repositorios vão vir de uma api do github, vc deve buscar ela atravez do fetch 10 | transformar em json, e setar o valor no seu estado, tudo issod entro de um useEffect 11 | 12 | 13 | 14 | 2 parte 15 | 16 | adicionar uma nova lista, agora essa lista tem q conter os repositorios filtrados 17 | conforme o usuario digitar, exibir apenas os filtrados 18 | 19 | criar um estado para armazenar oq for digitado pelo usuario 20 | adicionar um evento de onChange para capturar a digitação no input 21 | -------------------------------------------------------------------------------- /useEffectGitHubExercise/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/.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 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "useeffectrepositoriogithub", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "eslint": "^9.13.0", 22 | "eslint-plugin-react-hooks": "^5.0.0", 23 | "eslint-plugin-react-refresh": "^0.4.14", 24 | "globals": "^15.11.0", 25 | "typescript": "~5.6.2", 26 | "typescript-eslint": "^8.11.0", 27 | "vite": "^5.4.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import './App.css' 3 | 4 | interface Repos { 5 | name: string; 6 | description: string; 7 | } 8 | 9 | function App() { 10 | const [repos, setRepos] = useState([]); 11 | const [search, setSearch] = useState('') 12 | 13 | useEffect(() => { 14 | fetch('https://api.github.com/users/7alexandree7/repos') 15 | .then(response => response.json()) 16 | .then(data => setRepos(data)) 17 | 18 | }, []) 19 | 20 | const filteredRepos = search.length > 0 ? 21 | repos.filter(repo => repo.name.includes(search)) : 22 | []; 23 | 24 | return ( 25 | <> 26 |
27 | setSearch(e.target.value)} 32 | value={search} 33 | 34 | /> 35 | 36 | {search.length > 0 ? ( 37 |
    38 | {filteredRepos.map((repo) => { 39 | return ( 40 |
  • {repo.name}
    • 41 | ) 42 | })} 43 |
44 | ) : ( 45 |
    46 | {repos.map((repo) => { 47 | return ( 48 |
  • {repo.name}
    • 49 | ) 50 | })} 51 |
52 | )} 53 |
54 | 55 | ) 56 | } 57 | 58 | export default App 59 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /useEffectRepositorioGitHub/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useId/.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 | -------------------------------------------------------------------------------- /useId/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /useId/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /useId/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useId/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "useid", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "eslint": "^9.13.0", 22 | "eslint-plugin-react": "^7.37.2", 23 | "eslint-plugin-react-hooks": "^5.0.0", 24 | "eslint-plugin-react-refresh": "^0.4.14", 25 | "globals": "^15.11.0", 26 | "vite": "^5.4.10" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /useId/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useId/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /useId/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import reactLogo from './assets/react.svg' 3 | import viteLogo from '/vite.svg' 4 | import './App.css' 5 | 6 | function App() { 7 | const [count, setCount] = useState(0) 8 | 9 | return ( 10 | <> 11 | 12 | ) 13 | } 14 | 15 | export default App 16 | -------------------------------------------------------------------------------- /useId/src/Components/FirstExample.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useId } from 'react' 3 | 4 | function passwordField () { 5 | const passwordHintId = useId() 6 | } 7 | 8 | export default function FirstExample() { 9 | return ( 10 |
11 | 12 |

13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /useId/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useId/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /useId/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /useId/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useReducerNewExample/.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 | -------------------------------------------------------------------------------- /useReducerNewExample/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /useReducerNewExample/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /useReducerNewExample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useReducerNewExample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usereducernewexample", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "eslint": "^9.13.0", 22 | "eslint-plugin-react": "^7.37.2", 23 | "eslint-plugin-react-hooks": "^5.0.0", 24 | "eslint-plugin-react-refresh": "^0.4.14", 25 | "globals": "^15.11.0", 26 | "vite": "^5.4.10" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /useReducerNewExample/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useReducerNewExample/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /useReducerNewExample/src/App.jsx: -------------------------------------------------------------------------------- 1 | import './App.css' 2 | import SecondExample from './components/SecondExample' 3 | 4 | function App() { 5 | 6 | return ( 7 | <> 8 | 9 | 10 | ) 11 | } 12 | 13 | export default App 14 | -------------------------------------------------------------------------------- /useReducerNewExample/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useReducerNewExample/src/components/FirstExample.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useReducer } from 'react' 3 | 4 | 5 | const initial = { age: 22 }; 6 | 7 | function reducer(state, action) { 8 | 9 | if (action.type === 'incremented_age') { 10 | return { 11 | age: state.age + 1 12 | } 13 | } 14 | throw new Error('Unknown action'); 15 | 16 | } 17 | 18 | 19 | export default function FirstExample() { 20 | 21 | const [state, dispatch] = useReducer(reducer, initial) 22 | 23 | return ( 24 |
25 |
26 |

My Age {initial.age}

27 | 28 |
29 | 30 |

{`Hello! You Are ${state.age}`}

31 |
32 |
33 |
34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /useReducerNewExample/src/components/SecondExample.jsx: -------------------------------------------------------------------------------- 1 | import { useReducer } from 'react'; 2 | 3 | function reducer(state, action) { 4 | switch (action.type) { 5 | case 'incremented_age': 6 | return { 7 | name: state.name, 8 | age: state.age + 1 9 | }; 10 | 11 | case 'changed_name': 12 | return { 13 | name: action.nextName, 14 | age: state.age 15 | }; 16 | 17 | } 18 | throw Error('Unknown action: ' + action.type); 19 | } 20 | 21 | const initialState = { name: 'Taylor', age: 42 }; 22 | 23 | export default function Form() { 24 | const [state, dispatch] = useReducer(reducer, initialState); 25 | 26 | function handleButtonClick() { 27 | dispatch({ type: 'incremented_age' }); 28 | } 29 | 30 | function handleInputChange(e) { 31 | dispatch({ 32 | type: 'changed_name', 33 | nextName: e.target.value 34 | }); 35 | } 36 | 37 | return ( 38 | <> 39 | 43 | 46 |

Hello, {state.name}. You are {state.age}.

47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /useReducerNewExample/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /useReducerNewExample/src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /useReducerNewExample/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/.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 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "usereducer-sujeito-progamador", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.13.0", 18 | "@types/react": "^18.3.12", 19 | "@types/react-dom": "^18.3.1", 20 | "@vitejs/plugin-react": "^4.3.3", 21 | "eslint": "^9.13.0", 22 | "eslint-plugin-react-hooks": "^5.0.0", 23 | "eslint-plugin-react-refresh": "^0.4.14", 24 | "globals": "^15.11.0", 25 | "typescript": "~5.6.2", 26 | "typescript-eslint": "^8.11.0", 27 | "vite": "^5.4.10" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/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 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useReducer } from 'react' 2 | 3 | import './App.css' 4 | 5 | type State = { 6 | count: number 7 | } 8 | 9 | type Action = | { type: 'increment' } | { type: 'decrement' } | { type: 'reset' } 10 | 11 | 12 | const initializeState = { count: 0 } 13 | 14 | 15 | function reducer(state: State, action: Action) { 16 | 17 | switch (action.type) { 18 | 19 | case 'increment': 20 | return { count: state.count + 1 } 21 | 22 | case 'decrement': 23 | if (state.count <= 0) { 24 | return {count: state.count} 25 | } 26 | return { count: state.count - 1 } 27 | 28 | case 'reset': 29 | return { count: 0 } 30 | } 31 | } 32 | 33 | 34 | function App() { 35 | 36 | const [state, dispatch] = useReducer(reducer, initializeState) 37 | 38 | return ( 39 | <> 40 |
41 |

Contador

42 |
43 | 44 | {state.count} 45 | 46 |
47 | 48 |
49 | 50 | ) 51 | } 52 | 53 | export default App 54 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 4 | "target": "ES2020", 5 | "useDefineForClassFields": true, 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "module": "ESNext", 8 | "skipLibCheck": true, 9 | 10 | /* Bundler mode */ 11 | "moduleResolution": "Bundler", 12 | "allowImportingTsExtensions": true, 13 | "isolatedModules": true, 14 | "moduleDetection": "force", 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | 18 | /* Linting */ 19 | "strict": true, 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | "noFallthroughCasesInSwitch": true, 23 | "noUncheckedSideEffectImports": true 24 | }, 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "Bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "noUncheckedSideEffectImports": true 22 | }, 23 | "include": ["vite.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /useReducer_Sujeito-Progamador/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vite.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------