├── src
    ├── index.css
    ├── HooksApp.jsx
    ├── hooks
    │   ├── index.js
    │   ├── useForm.js
    │   ├── useCounter.js
    │   └── useFetch.js
    ├── 03-examples
    │   ├── index.js
    │   ├── LoadingQuote.jsx
    │   ├── Quote.jsx
    │   └── MultipleCustomHooks.jsx
    ├── 06-memos
    │   ├── Small.jsx
    │   ├── ShowIncrement.jsx
    │   ├── CallbackHook.jsx
    │   ├── Memorize.jsx
    │   └── MemoHook.jsx
    ├── 07-tarea-memo
    │   ├── Hijo.jsx
    │   └── Padre.jsx
    ├── 01-useState
    │   ├── CounterWithCustomHook.jsx
    │   └── CounterApp.jsx
    ├── 02-useEffect
    │   ├── Message.jsx
    │   ├── FormWithCustomHook.jsx
    │   └── SimpleForm.jsx
    ├── 04-useRef
    │   └── FocusScreen.jsx
    ├── 05-useLayoutEffect
    │   └── Layout.jsx
    └── main.jsx
├── vite.config.js
├── .gitignore
├── package.json
├── index.html
└── yarn.lock


/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |     padding: 20px;
3 | }
4 | 
5 | button {
6 |     margin-right: 10px;
7 | }


--------------------------------------------------------------------------------
/src/HooksApp.jsx:
--------------------------------------------------------------------------------
1 | 
2 | export const HooksApp = () => {
3 |   return (
4 |     <h1>HooksApp</h1>
5 |   )
6 | }
7 | 


--------------------------------------------------------------------------------
/src/hooks/index.js:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export * from './useCounter';
4 | export * from './useFetch';
5 | export * from './useForm';


--------------------------------------------------------------------------------
/src/03-examples/index.js:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export * from './LoadingQuote';
4 | export * from './MultipleCustomHooks';
5 | export * from './Quote';


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()]
7 | })
8 | 


--------------------------------------------------------------------------------
/src/03-examples/LoadingQuote.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | export const LoadingQuote = () => {
 4 |   return (
 5 |     <div className="alert alert-info text-center">
 6 |         Loading...
 7 |     </div>
 8 |   )
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/06-memos/Small.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | // import { memo } from 'react';
 3 | 
 4 | export const Small = React.memo(({ value }) => {
 5 | 
 6 |     console.log(' Me volví a dibujar :( ');
 7 | 
 8 |     return (
 9 |         <small>{ value }</small>
10 |     )
11 | })
12 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/07-tarea-memo/Hijo.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export const Hijo = React.memo(({ numero, incrementar }) => {
 4 | 
 5 |     console.log('  Me volví a generar :(  ');
 6 | 
 7 |     return (
 8 |         <button
 9 |             className="btn btn-primary mr-3"
10 |             onClick={ () => incrementar( numero ) }
11 |         >
12 |             { numero }
13 |         </button>
14 |     )
15 | })
16 | 


--------------------------------------------------------------------------------
/src/06-memos/ShowIncrement.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | 
 4 | export const ShowIncrement = React.memo( ({ increment }) => {
 5 | 
 6 |     console.log(' Me volví a generar :( ');
 7 | 
 8 |     return (
 9 |         <button
10 |             className="btn btn-primary"
11 |             onClick={() => {
12 |                 increment( 5 );
13 |             }}
14 |         >
15 |             Incrementar
16 |         </button>
17 |     )
18 | })
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hook-app",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "react": "19.0.0",
12 |     "react-dom": "19.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@types/react": "^18.0.0",
16 |     "@types/react-dom": "^18.0.0",
17 |     "@vitejs/plugin-react": "^1.3.0",
18 |     "vite": "^2.9.5"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 | 
 7 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 8 | 
 9 |     <title>HookApp</title>
10 |   </head>
11 |   <body>
12 |     <div id="root"></div>
13 |     <script type="module" src="/src/main.jsx"></script>
14 |   </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/src/hooks/useForm.js:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export const useForm = ( initialForm = {} ) => {
 4 |   
 5 |     const [ formState, setFormState ] = useState( initialForm );
 6 | 
 7 |     const onInputChange = ({ target }) => {
 8 |         const { name, value } = target;
 9 |         setFormState({
10 |             ...formState,
11 |             [ name ]: value
12 |         });
13 |     }
14 | 
15 |     const onResetForm = () => {
16 |         setFormState( initialForm );
17 |     }
18 | 
19 |     return {
20 |         ...formState,
21 |         formState,
22 |         onInputChange,
23 |         onResetForm,
24 |     }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/01-useState/CounterWithCustomHook.jsx:
--------------------------------------------------------------------------------
 1 | import { useCounter } from '../hooks/useCounter';
 2 | 
 3 | export const CounterWithCustomHook = () => {
 4 |     
 5 |     const { counter, increment, decrement, reset } = useCounter();
 6 | 
 7 | 
 8 |     return (
 9 |         <>
10 |             <h1>Counter with Hook: { counter }</h1>
11 |             <hr />
12 | 
13 |             <button onClick={ () => increment(2) } className="btn btn-primary">+1</button>
14 |             <button onClick={ reset } className="btn btn-primary">Reset</button>
15 |             <button onClick={ () => decrement(2) } className="btn btn-primary">-1</button>
16 |         
17 |         </>
18 |     )
19 | }
20 | 


--------------------------------------------------------------------------------
/src/hooks/useCounter.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react"
 2 | 
 3 | 
 4 | export const useCounter = ( initialValue = 10 ) => {
 5 | 
 6 |     const [ counter, setCounter ] = useState( initialValue )
 7 | 
 8 |     const increment = ( value = 1 ) => {
 9 |         setCounter( counter + value );
10 |     }
11 | 
12 |     const decrement = ( value = 1 ) => {
13 |         // if ( counter === 0 ) return;
14 | 
15 |         setCounter( counter - value );
16 |     }
17 | 
18 |     const reset = () => {
19 |         setCounter( initialValue );
20 |     }
21 | 
22 |     return {
23 |         counter,
24 |         increment,
25 |         decrement,
26 |         reset,
27 |     }
28 | 
29 | }
30 | 
31 | 


--------------------------------------------------------------------------------
/src/02-useEffect/Message.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react"
 2 | 
 3 | export const Message = () => {
 4 |     
 5 |     const [coords, setCoords] = useState({ x: 0, y: 0});
 6 | 
 7 |     useEffect(() => {
 8 |         
 9 |         const onMouseMove = ({ x, y }) => {
10 |             // const coords = { x, y };
11 |             setCoords({ x, y })
12 |         }
13 | 
14 |         window.addEventListener( 'mousemove', onMouseMove );
15 |         
16 |       return () => {
17 |         window.removeEventListener( 'mousemove', onMouseMove );
18 |       }
19 |     }, []);
20 |     
21 | 
22 | 
23 |   return (
24 |     <>
25 |         <h3>Usuario ya existe</h3>
26 |         { JSON.stringify( coords ) }
27 |     </>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/01-useState/CounterApp.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | 
 3 | export const CounterApp = () => {
 4 | 
 5 |     const [ state, setCounter] = useState({
 6 |         counter1: 10,
 7 |         counter2: 20,
 8 |         counter3: 30,
 9 |     });
10 | 
11 |     const { counter1, counter2, counter3 } = state;
12 | 
13 |   return (
14 |     <>
15 |         <h1>Counter1: { counter1 }</h1>
16 |         <h1>Counter2: { counter2 }</h1>
17 |         <h1>Counter3: { counter3 }</h1>
18 | 
19 |         <hr />
20 | 
21 |         <button 
22 |             className="btn" 
23 |             onClick={ 
24 |                 () => setCounter({
25 |                     ...state,
26 |                     counter1: counter1 + 1,
27 |                 })
28 |             }>+1</button>
29 |     
30 |     </>
31 |   )
32 | }
33 | 


--------------------------------------------------------------------------------
/src/04-useRef/FocusScreen.jsx:
--------------------------------------------------------------------------------
 1 | import { useRef } from 'react';
 2 | 
 3 | export const FocusScreen = () => {
 4 | 
 5 |     const inputRef = useRef();
 6 | 
 7 |     const onClick = () => {
 8 |         // document.querySelector('input').select();
 9 |         // console.log(inputRef);
10 |         inputRef.current.select();
11 |     }
12 | 
13 | 
14 |   return (
15 |     <>
16 |         <h1>Focus Screen</h1>
17 |         <hr />
18 | 
19 |         <input 
20 |             ref={ inputRef }
21 |             type="text" 
22 |             placeholder="Ingrese su nombre"
23 |             className="form-control"
24 |         />
25 | 
26 |         <button 
27 |             className="btn btn-primary mt-2"
28 |             onClick={ onClick }
29 |         >
30 |             Set focus
31 |         </button>
32 | 
33 |     </>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/03-examples/Quote.jsx:
--------------------------------------------------------------------------------
 1 | import { useLayoutEffect, useRef, useState } from 'react';
 2 | 
 3 | 
 4 | export const Quote = ({ author, quote }) => {
 5 | 
 6 |   const pRef = useRef();
 7 |   const [boxSize, setBoxSize] = useState({ width: 0, height: 0 })
 8 | 
 9 |   useLayoutEffect(() => {
10 |     
11 |     const { height, width } =  pRef.current.getBoundingClientRect();
12 |     setBoxSize({ height, width });
13 |     
14 |   }, [quote])
15 |   
16 | 
17 | 
18 |   return (
19 |     <>
20 |       <blockquote 
21 |         className="blockquote text-end"
22 |         style={{ display: 'flex' }}
23 |       >
24 |           <p ref={ pRef } className="mb-1">{ quote }</p>
25 |           <footer className="blockquote-footer"> { author } </footer>
26 |       </blockquote>
27 | 
28 |       <code>{ JSON.stringify(boxSize) }</code>
29 |     </>
30 |   )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/06-memos/CallbackHook.jsx:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect, useState } from 'react';
 2 | import { ShowIncrement } from './ShowIncrement';
 3 | 
 4 | 
 5 | export const CallbackHook = () => {
 6 | 
 7 |     const [counter, setCounter] = useState( 10 );
 8 | 
 9 |     const incrementFather = useCallback(
10 |       (value) => {
11 |         setCounter( (c) => c + value );
12 |       },
13 |       [],
14 |     );
15 | 
16 |     useEffect(() => {
17 |       // incrementFather();
18 |     }, [incrementFather])
19 |     
20 |     
21 |     // const incrementFather = () => {
22 |     //     setCounter( counter + 1);
23 |     // }
24 | 
25 | 
26 |     return (
27 |         <>
28 |             <h1>useCallback Hook: { counter } </h1>
29 |             <hr />
30 | 
31 |             <ShowIncrement increment={ incrementFather } />
32 |         </>
33 |     )
34 | }
35 | 


--------------------------------------------------------------------------------
/src/06-memos/Memorize.jsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { useCounter } from '../hooks'
 3 | import { Small } from './Small';
 4 | 
 5 | export const Memorize = () => {
 6 | 
 7 |     const { counter, increment } = useCounter( 10 );
 8 |     const [ show, setShow ] = useState(true)
 9 | 
10 |     return (
11 |         <>
12 |             <h1>Counter: <Small value={ counter } />  </h1>
13 |             <hr />
14 | 
15 |             <button
16 |                 className="btn btn-primary"
17 |                 onClick={ () => increment() }
18 |             >
19 |                 +1
20 |             </button>
21 | 
22 |             <button
23 |                 className="btn btn-outline-primary"
24 |                 onClick={ () => setShow( !show )  }
25 |             >
26 |                 Show/Hide { JSON.stringify(show) } 
27 |             </button>
28 |         
29 |         </>
30 |     )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/hooks/useFetch.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | 
 3 | 
 4 | export const useFetch = ( url ) => {
 5 | 
 6 |     const [state, setState] = useState({
 7 |         data: null,
 8 |         isLoading: true,
 9 |         hasError: null,
10 |     })
11 | 
12 | 
13 |     const getFetch = async () => {
14 | 
15 |         setState({
16 |             ...state,
17 |             isLoading: true,
18 |         });
19 | 
20 |         const resp = await fetch(url);
21 |         const data = await resp.json();
22 | 
23 |         setState({
24 |             data,
25 |             isLoading: false,
26 |             hasError: null,
27 |         });
28 |     }
29 | 
30 | 
31 |     useEffect(() => {
32 |         getFetch();
33 |     }, [url])
34 |     
35 | 
36 | 
37 |     return {
38 |         data:      state.data,
39 |         isLoading: state.isLoading,
40 |         hasError:  state.hasError,
41 |     };
42 | }
43 | 


--------------------------------------------------------------------------------
/src/07-tarea-memo/Padre.jsx:
--------------------------------------------------------------------------------
 1 | import { Hijo } from './Hijo'
 2 | import { useCallback, useState } from 'react';
 3 | 
 4 | export const Padre = () => {
 5 | 
 6 |     const numeros = [2,4,6,8,10];
 7 |     const [valor, setValor] = useState(0);
 8 | 
 9 |     const incrementar = useCallback(
10 |         ( num ) => {
11 |             setValor( (oldValue) => oldValue + num )
12 |         },
13 |       [],
14 |     );
15 |        
16 | 
17 | 
18 |     return (
19 |         <div>
20 |             <h1>Padre</h1>
21 |             <p> Total: { valor } </p>
22 | 
23 |             <hr />
24 | 
25 |             {
26 |                 numeros.map( n => (
27 |                     <Hijo 
28 |                         key={ n }
29 |                         numero={ n }
30 |                         incrementar={ incrementar }
31 |                     />
32 |                 ))
33 |             }
34 |             {/* <Hijo /> */}
35 |         </div>
36 |     )
37 | }
38 | 


--------------------------------------------------------------------------------
/src/05-useLayoutEffect/Layout.jsx:
--------------------------------------------------------------------------------
 1 | import { useCounter, useFetch } from '../hooks';
 2 | import { LoadingQuote, Quote } from '../03-examples';
 3 | 
 4 | 
 5 | export const Layout = () => {
 6 | 
 7 |     const { counter, increment } = useCounter(1);
 8 |     const { data, isLoading, hasError } = useFetch(`https://www.breakingbadapi.com/api/quotes/${ counter }`);
 9 |     const { author, quote } = !!data && data[0];
10 |     
11 |     return (
12 |         <>
13 |             <h1>BreakingBad Quotes</h1>
14 |             <hr />
15 | 
16 |             {
17 |                 isLoading
18 |                  ? <LoadingQuote />
19 |                  : <Quote author={ author } quote={ quote } />
20 |             }
21 |                       
22 |             <button 
23 |                 className="btn btn-primary"
24 |                 disabled={ isLoading }
25 |                 onClick={ () => increment() }>
26 |                 Next quote
27 |             </button>
28 | 
29 |         </>
30 |     )
31 | }
32 | 


--------------------------------------------------------------------------------
/src/03-examples/MultipleCustomHooks.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import { useCounter, useFetch } from '../hooks';
 4 | import { LoadingQuote, Quote } from './';
 5 | 
 6 | 
 7 | export const MultipleCustomHooks = () => {
 8 | 
 9 |     const { counter, increment } = useCounter(1);
10 |     const { data, isLoading, hasError } = useFetch(`https://www.breakingbadapi.com/api/quotes/${ counter }`);
11 |     const { author, quote } = !!data && data[0];
12 |     
13 |     return (
14 |         <>
15 |             <h1>BreakingBad Quotes</h1>
16 |             <hr />
17 | 
18 |             {
19 |                 isLoading
20 |                  ? <LoadingQuote />
21 |                  : <Quote author={ author } quote={ quote } />
22 |             }
23 |                       
24 |             <button 
25 |                 className="btn btn-primary"
26 |                 disabled={ isLoading }
27 |                 onClick={ () => increment() }>
28 |                 Next quote
29 |             </button>
30 | 
31 |         </>
32 |     )
33 | }
34 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | 
 4 | 
 5 | // import { HooksApp } from './HooksApp';
 6 | // import { CounterApp } from './01-useState/CounterApp';
 7 | // import { CounterWithCustomHook } from './01-useState/CounterWithCustomHook';
 8 | // import { SimpleForm } from './02-useEffect/SimpleForm';
 9 | // import { FormWithCustomHook } from './02-useEffect/FormWithCustomHook';
10 | // import { MultipleCustomHooks } from './03-examples/MultipleCustomHooks';
11 | // import { FocusScreen } from './04-useRef/FocusScreen';
12 | // import { Layout } from './05-useLayoutEffect/Layout';
13 | // import { Memorize } from './06-memos/Memorize';
14 | // import { MemoHook } from './06-memos/MemoHook';
15 | // import { CallbackHook } from './06-memos/CallbackHook';
16 | import { Padre } from './07-tarea-memo/Padre';
17 | 
18 | 
19 | import './index.css'
20 | 
21 | ReactDOM.createRoot(document.getElementById('root')).render(
22 |   // <React.StrictMode>
23 |     <Padre />
24 |   // </React.StrictMode>
25 | )
26 | 


--------------------------------------------------------------------------------
/src/06-memos/MemoHook.jsx:
--------------------------------------------------------------------------------
 1 | import { useMemo, useState } from 'react';
 2 | import { useCounter } from '../hooks';
 3 | 
 4 | 
 5 | const heavyStuff = ( iterationNumber = 100 ) => {
 6 |     for( let i = 0; i < iterationNumber; i++ ) {
 7 |         console.log('Ahí vamos...');
 8 |     }
 9 | 
10 |     return `${ iterationNumber } iteraciones realizadas`;
11 | }
12 | 
13 | 
14 | 
15 | export const MemoHook = () => {
16 | 
17 |     const { counter, increment } = useCounter( 4000 );
18 |     const [ show, setShow ] = useState(true);
19 | 
20 |     const memorizedValue = useMemo( () => heavyStuff(counter), [counter])
21 | 
22 |     return (
23 |         <>
24 |             <h1>Counter: <small>{ counter }</small>  </h1>
25 |             <hr />
26 | 
27 |             <h4>{ memorizedValue }</h4>
28 | 
29 | 
30 |             <button
31 |                 className="btn btn-primary"
32 |                 onClick={ () => increment() }
33 |             >
34 |                 +1
35 |             </button>
36 | 
37 |             <button
38 |                 className="btn btn-outline-primary"
39 |                 onClick={ () => setShow( !show )  }
40 |             >
41 |                 Show/Hide { JSON.stringify(show) } 
42 |             </button>
43 |         
44 |         </>
45 |     )
46 | }
47 | 


--------------------------------------------------------------------------------
/src/02-useEffect/FormWithCustomHook.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | import { useForm } from '../hooks/useForm';
 3 | 
 4 | 
 5 | export const FormWithCustomHook = () => {
 6 | 
 7 |     const { formState, onInputChange, onResetForm, username, email, password } = useForm({
 8 |         username: '',
 9 |         email: '',
10 |         password: ''
11 |     });
12 | 
13 |     // const { username, email, password } = formState;
14 |   
15 | 
16 |     return (
17 |         <>
18 |             <h1>Formulario con custom Hook</h1> 
19 |             <hr />
20 | 
21 |             <input 
22 |                 type="text" 
23 |                 className="form-control"
24 |                 placeholder="Username"
25 |                 name="username"
26 |                 value={ username }
27 |                 onChange={ onInputChange }
28 |             />
29 | 
30 |             <input 
31 |                 type="email" 
32 |                 className="form-control mt-2"
33 |                 placeholder="fernando@google.com"
34 |                 name="email"
35 |                 value={ email }
36 |                 onChange={ onInputChange }
37 |             />
38 | 
39 |             <input 
40 |                 type="password" 
41 |                 className="form-control mt-2"
42 |                 placeholder="Contraseña"
43 |                 name="password"
44 |                 value={ password }
45 |                 onChange={ onInputChange }
46 |             />
47 | 
48 | 
49 |             <button onClick={ onResetForm } className="btn btn-primary mt-2">Borrar</button>
50 | 
51 |         </>
52 |     )
53 | }
54 | 


--------------------------------------------------------------------------------
/src/02-useEffect/SimpleForm.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import { Message } from './Message';
 3 | 
 4 | 
 5 | export const SimpleForm = () => {
 6 | 
 7 |     const [formState, setFormState] = useState({
 8 |         username: 'strider',
 9 |         email: 'fernando@google.com'
10 |     });
11 | 
12 |     const { username, email } = formState;
13 | 
14 |     const onInputChange = ({ target }) => {
15 |         const { name, value } = target;
16 |         setFormState({
17 |             ...formState,
18 |             [ name ]: value
19 |         });
20 |     }
21 | 
22 | 
23 |     useEffect( () => {
24 |         // console.log('useEffect called!');
25 |     }, []);
26 |     
27 |     useEffect( () => {
28 |         // console.log('formState changed!');
29 |     }, [formState]);
30 | 
31 |     useEffect( () => {
32 |         // console.log('email changed!');
33 |     }, [ email ]);
34 | 
35 |     
36 | 
37 |     return (
38 |         <>
39 |             <h1>Formulario Simple</h1> 
40 |             <hr />
41 | 
42 |             <input 
43 |                 type="text" 
44 |                 className="form-control"
45 |                 placeholder="Username"
46 |                 name="username"
47 |                 value={ username }
48 |                 onChange={ onInputChange }
49 |             />
50 | 
51 |             <input 
52 |                 type="email" 
53 |                 className="form-control mt-2"
54 |                 placeholder="fernando@google.com"
55 |                 name="email"
56 |                 value={ email }
57 |                 onChange={ onInputChange }
58 |             />
59 | 
60 | 
61 |             {
62 |                 (username === 'strider2' ) && <Message />
63 |             }
64 | 
65 |         </>
66 |     )
67 | }
68 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@ampproject/remapping@^2.1.0":
  6 |   version "2.2.0"
  7 |   resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz"
  8 |   integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
  9 |   dependencies:
 10 |     "@jridgewell/gen-mapping" "^0.1.0"
 11 |     "@jridgewell/trace-mapping" "^0.3.9"
 12 | 
 13 | "@babel/code-frame@^7.16.7":
 14 |   version "7.16.7"
 15 |   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz"
 16 |   integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
 17 |   dependencies:
 18 |     "@babel/highlight" "^7.16.7"
 19 | 
 20 | "@babel/compat-data@^7.17.7":
 21 |   version "7.17.7"
 22 |   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.7.tgz"
 23 |   integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
 24 | 
 25 | "@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.17.9":
 26 |   version "7.17.9"
 27 |   resolved "https://registry.npmjs.org/@babel/core/-/core-7.17.9.tgz"
 28 |   integrity sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==
 29 |   dependencies:
 30 |     "@ampproject/remapping" "^2.1.0"
 31 |     "@babel/code-frame" "^7.16.7"
 32 |     "@babel/generator" "^7.17.9"
 33 |     "@babel/helper-compilation-targets" "^7.17.7"
 34 |     "@babel/helper-module-transforms" "^7.17.7"
 35 |     "@babel/helpers" "^7.17.9"
 36 |     "@babel/parser" "^7.17.9"
 37 |     "@babel/template" "^7.16.7"
 38 |     "@babel/traverse" "^7.17.9"
 39 |     "@babel/types" "^7.17.0"
 40 |     convert-source-map "^1.7.0"
 41 |     debug "^4.1.0"
 42 |     gensync "^1.0.0-beta.2"
 43 |     json5 "^2.2.1"
 44 |     semver "^6.3.0"
 45 | 
 46 | "@babel/generator@^7.17.9":
 47 |   version "7.17.9"
 48 |   resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.17.9.tgz"
 49 |   integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
 50 |   dependencies:
 51 |     "@babel/types" "^7.17.0"
 52 |     jsesc "^2.5.1"
 53 |     source-map "^0.5.0"
 54 | 
 55 | "@babel/helper-annotate-as-pure@^7.16.7":
 56 |   version "7.16.7"
 57 |   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz"
 58 |   integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
 59 |   dependencies:
 60 |     "@babel/types" "^7.16.7"
 61 | 
 62 | "@babel/helper-compilation-targets@^7.17.7":
 63 |   version "7.17.7"
 64 |   resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz"
 65 |   integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
 66 |   dependencies:
 67 |     "@babel/compat-data" "^7.17.7"
 68 |     "@babel/helper-validator-option" "^7.16.7"
 69 |     browserslist "^4.17.5"
 70 |     semver "^6.3.0"
 71 | 
 72 | "@babel/helper-environment-visitor@^7.16.7":
 73 |   version "7.16.7"
 74 |   resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz"
 75 |   integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
 76 |   dependencies:
 77 |     "@babel/types" "^7.16.7"
 78 | 
 79 | "@babel/helper-function-name@^7.17.9":
 80 |   version "7.17.9"
 81 |   resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz"
 82 |   integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
 83 |   dependencies:
 84 |     "@babel/template" "^7.16.7"
 85 |     "@babel/types" "^7.17.0"
 86 | 
 87 | "@babel/helper-hoist-variables@^7.16.7":
 88 |   version "7.16.7"
 89 |   resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz"
 90 |   integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
 91 |   dependencies:
 92 |     "@babel/types" "^7.16.7"
 93 | 
 94 | "@babel/helper-module-imports@^7.16.7":
 95 |   version "7.16.7"
 96 |   resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz"
 97 |   integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
 98 |   dependencies:
 99 |     "@babel/types" "^7.16.7"
100 | 
101 | "@babel/helper-module-transforms@^7.17.7":
102 |   version "7.17.7"
103 |   resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz"
104 |   integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
105 |   dependencies:
106 |     "@babel/helper-environment-visitor" "^7.16.7"
107 |     "@babel/helper-module-imports" "^7.16.7"
108 |     "@babel/helper-simple-access" "^7.17.7"
109 |     "@babel/helper-split-export-declaration" "^7.16.7"
110 |     "@babel/helper-validator-identifier" "^7.16.7"
111 |     "@babel/template" "^7.16.7"
112 |     "@babel/traverse" "^7.17.3"
113 |     "@babel/types" "^7.17.0"
114 | 
115 | "@babel/helper-plugin-utils@^7.16.7":
116 |   version "7.16.7"
117 |   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
118 |   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
119 | 
120 | "@babel/helper-simple-access@^7.17.7":
121 |   version "7.17.7"
122 |   resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz"
123 |   integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
124 |   dependencies:
125 |     "@babel/types" "^7.17.0"
126 | 
127 | "@babel/helper-split-export-declaration@^7.16.7":
128 |   version "7.16.7"
129 |   resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz"
130 |   integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
131 |   dependencies:
132 |     "@babel/types" "^7.16.7"
133 | 
134 | "@babel/helper-validator-identifier@^7.16.7":
135 |   version "7.16.7"
136 |   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
137 |   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
138 | 
139 | "@babel/helper-validator-option@^7.16.7":
140 |   version "7.16.7"
141 |   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz"
142 |   integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
143 | 
144 | "@babel/helpers@^7.17.9":
145 |   version "7.17.9"
146 |   resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.9.tgz"
147 |   integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==
148 |   dependencies:
149 |     "@babel/template" "^7.16.7"
150 |     "@babel/traverse" "^7.17.9"
151 |     "@babel/types" "^7.17.0"
152 | 
153 | "@babel/highlight@^7.16.7":
154 |   version "7.17.9"
155 |   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz"
156 |   integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
157 |   dependencies:
158 |     "@babel/helper-validator-identifier" "^7.16.7"
159 |     chalk "^2.0.0"
160 |     js-tokens "^4.0.0"
161 | 
162 | "@babel/parser@^7.16.7", "@babel/parser@^7.17.9":
163 |   version "7.17.9"
164 |   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.9.tgz"
165 |   integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
166 | 
167 | "@babel/plugin-syntax-jsx@^7.16.7":
168 |   version "7.16.7"
169 |   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz"
170 |   integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
171 |   dependencies:
172 |     "@babel/helper-plugin-utils" "^7.16.7"
173 | 
174 | "@babel/plugin-transform-react-jsx-development@^7.16.7":
175 |   version "7.16.7"
176 |   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz"
177 |   integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
178 |   dependencies:
179 |     "@babel/plugin-transform-react-jsx" "^7.16.7"
180 | 
181 | "@babel/plugin-transform-react-jsx-self@^7.16.7":
182 |   version "7.16.7"
183 |   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz"
184 |   integrity sha512-oe5VuWs7J9ilH3BCCApGoYjHoSO48vkjX2CbA5bFVhIuO2HKxA3vyF7rleA4o6/4rTDbk6r8hBW7Ul8E+UZrpA==
185 |   dependencies:
186 |     "@babel/helper-plugin-utils" "^7.16.7"
187 | 
188 | "@babel/plugin-transform-react-jsx-source@^7.16.7":
189 |   version "7.16.7"
190 |   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.16.7.tgz"
191 |   integrity sha512-rONFiQz9vgbsnaMtQlZCjIRwhJvlrPET8TabIUK2hzlXw9B9s2Ieaxte1SCOOXMbWRHodbKixNf3BLcWVOQ8Bw==
192 |   dependencies:
193 |     "@babel/helper-plugin-utils" "^7.16.7"
194 | 
195 | "@babel/plugin-transform-react-jsx@^7.16.7", "@babel/plugin-transform-react-jsx@^7.17.3":
196 |   version "7.17.3"
197 |   resolved "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz"
198 |   integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
199 |   dependencies:
200 |     "@babel/helper-annotate-as-pure" "^7.16.7"
201 |     "@babel/helper-module-imports" "^7.16.7"
202 |     "@babel/helper-plugin-utils" "^7.16.7"
203 |     "@babel/plugin-syntax-jsx" "^7.16.7"
204 |     "@babel/types" "^7.17.0"
205 | 
206 | "@babel/template@^7.16.7":
207 |   version "7.16.7"
208 |   resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz"
209 |   integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
210 |   dependencies:
211 |     "@babel/code-frame" "^7.16.7"
212 |     "@babel/parser" "^7.16.7"
213 |     "@babel/types" "^7.16.7"
214 | 
215 | "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9":
216 |   version "7.17.9"
217 |   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.9.tgz"
218 |   integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
219 |   dependencies:
220 |     "@babel/code-frame" "^7.16.7"
221 |     "@babel/generator" "^7.17.9"
222 |     "@babel/helper-environment-visitor" "^7.16.7"
223 |     "@babel/helper-function-name" "^7.17.9"
224 |     "@babel/helper-hoist-variables" "^7.16.7"
225 |     "@babel/helper-split-export-declaration" "^7.16.7"
226 |     "@babel/parser" "^7.17.9"
227 |     "@babel/types" "^7.17.0"
228 |     debug "^4.1.0"
229 |     globals "^11.1.0"
230 | 
231 | "@babel/types@^7.16.7", "@babel/types@^7.17.0":
232 |   version "7.17.0"
233 |   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz"
234 |   integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
235 |   dependencies:
236 |     "@babel/helper-validator-identifier" "^7.16.7"
237 |     to-fast-properties "^2.0.0"
238 | 
239 | "@jridgewell/gen-mapping@^0.1.0":
240 |   version "0.1.1"
241 |   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz"
242 |   integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
243 |   dependencies:
244 |     "@jridgewell/set-array" "^1.0.0"
245 |     "@jridgewell/sourcemap-codec" "^1.4.10"
246 | 
247 | "@jridgewell/resolve-uri@^3.0.3":
248 |   version "3.0.6"
249 |   resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.6.tgz"
250 |   integrity sha512-R7xHtBSNm+9SyvpJkdQl+qrM3Hm2fea3Ef197M3mUug+v+yR+Rhfbs7PBtcBUVnIWJ4JcAdjvij+c8hXS9p5aw==
251 | 
252 | "@jridgewell/set-array@^1.0.0":
253 |   version "1.1.0"
254 |   resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.0.tgz"
255 |   integrity sha512-SfJxIxNVYLTsKwzB3MoOQ1yxf4w/E6MdkvTgrgAt1bfxjSrLUoHMKrDOykwN14q65waezZIdqDneUIPh4/sKxg==
256 | 
257 | "@jridgewell/sourcemap-codec@^1.4.10":
258 |   version "1.4.11"
259 |   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz"
260 |   integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
261 | 
262 | "@jridgewell/trace-mapping@^0.3.9":
263 |   version "0.3.9"
264 |   resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz"
265 |   integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
266 |   dependencies:
267 |     "@jridgewell/resolve-uri" "^3.0.3"
268 |     "@jridgewell/sourcemap-codec" "^1.4.10"
269 | 
270 | "@rollup/pluginutils@^4.2.0":
271 |   version "4.2.1"
272 |   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"
273 |   integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
274 |   dependencies:
275 |     estree-walker "^2.0.1"
276 |     picomatch "^2.2.2"
277 | 
278 | "@types/prop-types@*":
279 |   version "15.7.5"
280 |   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
281 |   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
282 | 
283 | "@types/react-dom@^18.0.0":
284 |   version "18.0.3"
285 |   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.3.tgz"
286 |   integrity sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==
287 |   dependencies:
288 |     "@types/react" "*"
289 | 
290 | "@types/react@*", "@types/react@^18.0.0":
291 |   version "18.0.8"
292 |   resolved "https://registry.npmjs.org/@types/react/-/react-18.0.8.tgz"
293 |   integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw==
294 |   dependencies:
295 |     "@types/prop-types" "*"
296 |     "@types/scheduler" "*"
297 |     csstype "^3.0.2"
298 | 
299 | "@types/scheduler@*":
300 |   version "0.16.2"
301 |   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
302 |   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
303 | 
304 | "@vitejs/plugin-react@^1.3.0":
305 |   version "1.3.1"
306 |   resolved "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.3.1.tgz"
307 |   integrity sha512-qQS8Y2fZCjo5YmDUplEXl3yn+aueiwxB7BaoQ4nWYJYR+Ai8NXPVLlkLobVMs5+DeyFyg9Lrz6zCzdX1opcvyw==
308 |   dependencies:
309 |     "@babel/core" "^7.17.9"
310 |     "@babel/plugin-transform-react-jsx" "^7.17.3"
311 |     "@babel/plugin-transform-react-jsx-development" "^7.16.7"
312 |     "@babel/plugin-transform-react-jsx-self" "^7.16.7"
313 |     "@babel/plugin-transform-react-jsx-source" "^7.16.7"
314 |     "@rollup/pluginutils" "^4.2.0"
315 |     react-refresh "^0.12.0"
316 |     resolve "^1.22.0"
317 | 
318 | ansi-styles@^3.2.1:
319 |   version "3.2.1"
320 |   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
321 |   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
322 |   dependencies:
323 |     color-convert "^1.9.0"
324 | 
325 | browserslist@^4.17.5:
326 |   version "4.20.3"
327 |   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz"
328 |   integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==
329 |   dependencies:
330 |     caniuse-lite "^1.0.30001332"
331 |     electron-to-chromium "^1.4.118"
332 |     escalade "^3.1.1"
333 |     node-releases "^2.0.3"
334 |     picocolors "^1.0.0"
335 | 
336 | caniuse-lite@^1.0.30001332:
337 |   version "1.0.30001334"
338 |   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001334.tgz"
339 |   integrity sha512-kbaCEBRRVSoeNs74sCuq92MJyGrMtjWVfhltoHUCW4t4pXFvGjUBrfo47weBRViHkiV3eBYyIsfl956NtHGazw==
340 | 
341 | chalk@^2.0.0:
342 |   version "2.4.2"
343 |   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
344 |   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
345 |   dependencies:
346 |     ansi-styles "^3.2.1"
347 |     escape-string-regexp "^1.0.5"
348 |     supports-color "^5.3.0"
349 | 
350 | color-convert@^1.9.0:
351 |   version "1.9.3"
352 |   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
353 |   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
354 |   dependencies:
355 |     color-name "1.1.3"
356 | 
357 | color-name@1.1.3:
358 |   version "1.1.3"
359 |   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
360 |   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
361 | 
362 | convert-source-map@^1.7.0:
363 |   version "1.8.0"
364 |   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
365 |   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
366 |   dependencies:
367 |     safe-buffer "~5.1.1"
368 | 
369 | csstype@^3.0.2:
370 |   version "3.0.11"
371 |   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz"
372 |   integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
373 | 
374 | debug@^4.1.0:
375 |   version "4.3.4"
376 |   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
377 |   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
378 |   dependencies:
379 |     ms "2.1.2"
380 | 
381 | electron-to-chromium@^1.4.118:
382 |   version "1.4.127"
383 |   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.127.tgz"
384 |   integrity sha512-nhD6S8nKI0O2MueC6blNOEZio+/PWppE/pevnf3LOlQA/fKPCrDp2Ao4wx4LFwmIkJpVdFdn2763YWLy9ENIZg==
385 | 
386 | esbuild-darwin-arm64@0.14.38:
387 |   version "0.14.38"
388 |   resolved "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.38.tgz"
389 |   integrity sha512-eqF+OejMI3mC5Dlo9Kdq/Ilbki9sQBw3QlHW3wjLmsLh+quNfHmGMp3Ly1eWm981iGBMdbtSS9+LRvR2T8B3eQ==
390 | 
391 | esbuild@^0.14.27:
392 |   version "0.14.38"
393 |   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.14.38.tgz"
394 |   integrity sha512-12fzJ0fsm7gVZX1YQ1InkOE5f9Tl7cgf6JPYXRJtPIoE0zkWAbHdPHVPPaLi9tYAcEBqheGzqLn/3RdTOyBfcA==
395 |   optionalDependencies:
396 |     esbuild-android-64 "0.14.38"
397 |     esbuild-android-arm64 "0.14.38"
398 |     esbuild-darwin-64 "0.14.38"
399 |     esbuild-darwin-arm64 "0.14.38"
400 |     esbuild-freebsd-64 "0.14.38"
401 |     esbuild-freebsd-arm64 "0.14.38"
402 |     esbuild-linux-32 "0.14.38"
403 |     esbuild-linux-64 "0.14.38"
404 |     esbuild-linux-arm "0.14.38"
405 |     esbuild-linux-arm64 "0.14.38"
406 |     esbuild-linux-mips64le "0.14.38"
407 |     esbuild-linux-ppc64le "0.14.38"
408 |     esbuild-linux-riscv64 "0.14.38"
409 |     esbuild-linux-s390x "0.14.38"
410 |     esbuild-netbsd-64 "0.14.38"
411 |     esbuild-openbsd-64 "0.14.38"
412 |     esbuild-sunos-64 "0.14.38"
413 |     esbuild-windows-32 "0.14.38"
414 |     esbuild-windows-64 "0.14.38"
415 |     esbuild-windows-arm64 "0.14.38"
416 | 
417 | escalade@^3.1.1:
418 |   version "3.1.1"
419 |   resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
420 |   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
421 | 
422 | escape-string-regexp@^1.0.5:
423 |   version "1.0.5"
424 |   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
425 |   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
426 | 
427 | estree-walker@^2.0.1:
428 |   version "2.0.2"
429 |   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
430 |   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
431 | 
432 | fsevents@~2.3.2:
433 |   version "2.3.2"
434 |   resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
435 |   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
436 | 
437 | function-bind@^1.1.1:
438 |   version "1.1.1"
439 |   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
440 |   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
441 | 
442 | gensync@^1.0.0-beta.2:
443 |   version "1.0.0-beta.2"
444 |   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
445 |   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
446 | 
447 | globals@^11.1.0:
448 |   version "11.12.0"
449 |   resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
450 |   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
451 | 
452 | has-flag@^3.0.0:
453 |   version "3.0.0"
454 |   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
455 |   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
456 | 
457 | has@^1.0.3:
458 |   version "1.0.3"
459 |   resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
460 |   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
461 |   dependencies:
462 |     function-bind "^1.1.1"
463 | 
464 | is-core-module@^2.8.1:
465 |   version "2.9.0"
466 |   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz"
467 |   integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
468 |   dependencies:
469 |     has "^1.0.3"
470 | 
471 | js-tokens@^4.0.0:
472 |   version "4.0.0"
473 |   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
474 |   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
475 | 
476 | jsesc@^2.5.1:
477 |   version "2.5.2"
478 |   resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"
479 |   integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
480 | 
481 | json5@^2.2.1:
482 |   version "2.2.1"
483 |   resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
484 |   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
485 | 
486 | ms@2.1.2:
487 |   version "2.1.2"
488 |   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
489 |   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
490 | 
491 | nanoid@^3.3.1:
492 |   version "3.3.3"
493 |   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz"
494 |   integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
495 | 
496 | node-releases@^2.0.3:
497 |   version "2.0.4"
498 |   resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz"
499 |   integrity sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==
500 | 
501 | path-parse@^1.0.7:
502 |   version "1.0.7"
503 |   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
504 |   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
505 | 
506 | picocolors@^1.0.0:
507 |   version "1.0.0"
508 |   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
509 |   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
510 | 
511 | picomatch@^2.2.2:
512 |   version "2.3.1"
513 |   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
514 |   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
515 | 
516 | postcss@^8.4.12:
517 |   version "8.4.12"
518 |   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz"
519 |   integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
520 |   dependencies:
521 |     nanoid "^3.3.1"
522 |     picocolors "^1.0.0"
523 |     source-map-js "^1.0.2"
524 | 
525 | react-dom@19.0.0:
526 |   version "19.0.0"
527 |   resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz"
528 |   integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
529 |   dependencies:
530 |     scheduler "^0.25.0"
531 | 
532 | react-refresh@^0.12.0:
533 |   version "0.12.0"
534 |   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.12.0.tgz"
535 |   integrity sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A==
536 | 
537 | react@^19.0.0, react@19.0.0:
538 |   version "19.0.0"
539 |   resolved "https://registry.npmjs.org/react/-/react-19.0.0.tgz"
540 |   integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
541 | 
542 | resolve@^1.22.0:
543 |   version "1.22.0"
544 |   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz"
545 |   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
546 |   dependencies:
547 |     is-core-module "^2.8.1"
548 |     path-parse "^1.0.7"
549 |     supports-preserve-symlinks-flag "^1.0.0"
550 | 
551 | rollup@^2.59.0:
552 |   version "2.70.2"
553 |   resolved "https://registry.npmjs.org/rollup/-/rollup-2.70.2.tgz"
554 |   integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
555 |   optionalDependencies:
556 |     fsevents "~2.3.2"
557 | 
558 | safe-buffer@~5.1.1:
559 |   version "5.1.2"
560 |   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz"
561 |   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
562 | 
563 | scheduler@^0.25.0:
564 |   version "0.25.0"
565 |   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz"
566 |   integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
567 | 
568 | semver@^6.3.0:
569 |   version "6.3.0"
570 |   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
571 |   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
572 | 
573 | source-map-js@^1.0.2:
574 |   version "1.0.2"
575 |   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
576 |   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
577 | 
578 | source-map@^0.5.0:
579 |   version "0.5.7"
580 |   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
581 |   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
582 | 
583 | supports-color@^5.3.0:
584 |   version "5.5.0"
585 |   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
586 |   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
587 |   dependencies:
588 |     has-flag "^3.0.0"
589 | 
590 | supports-preserve-symlinks-flag@^1.0.0:
591 |   version "1.0.0"
592 |   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
593 |   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
594 | 
595 | to-fast-properties@^2.0.0:
596 |   version "2.0.0"
597 |   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
598 |   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
599 | 
600 | vite@^2.9.5:
601 |   version "2.9.6"
602 |   resolved "https://registry.npmjs.org/vite/-/vite-2.9.6.tgz"
603 |   integrity sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw==
604 |   dependencies:
605 |     esbuild "^0.14.27"
606 |     postcss "^8.4.12"
607 |     resolve "^1.22.0"
608 |     rollup "^2.59.0"
609 |   optionalDependencies:
610 |     fsevents "~2.3.2"
611 | 


--------------------------------------------------------------------------------