Al agregar una clase de tailwind de estilos para verificar su funcionamiento desde un componente como App.jsx se debe agregar Name a la palabra reservada de html para class, creadon asi className debido a que la palabra class en si ya es reservada para javascript y genera conflictos
En Vscode hay muchas extensiones que ya traen snippets de react, pero en doom emacs al parecer hay que empezar a crear nuestros propios snippets, un recordario de como se hace
Es la fuente de la verdad (source of truth) de tu app
Un listado de clientes, un carrito de compras lleno o vacio, un usuario autenticado, es lo que determina cual es el estado o state de tu app
Para definir el state en react, se importa useState y la funcion al momento de utilizarse nos retorna 2 valores: state y la funcion que modifica el state
Administrar State
useState es recomendado para pequeños proyectos en React
el State no debe modificarse directamente; para eso se utiliza la funcion que lo modifica
Para proyectos grandes se recomiendo administrar el state con un state global como Context, Zustand, Recoil o Redux
Ejemplo Basico del state
functionApp(){// Defino el stateconst[cantidad,setCantidad]=useState(10000);console.log(cantidad);// para modificar el state se usa la funcion setCantidadreturn(<divclassName="my-20 max-w-lg mx-auto bg-white shadow p-10"><Header/><inputtype="range"className="w-full h-6 bg-gray-200 accent-lime-500 hover:accent-lime-600"/></div>)}
Eventos
Todas las aplicaciones requieren eventos: cuando un usuario escribe en un campo, realiza un submit del formulario, click en un elemento
En react los eventos inician con la palabra “on” seguido del nombre del evento en mayuscula: onClick, onSubmit, onChange
Los eventos son agregados via atributo en el codigo html
Por convencion a la funcion encargada de manejar el evento inicia con la palabra handle seguido del nombre del evento, en este caso seria handleChange
Es un hook que se ejecuta una vez que el componente este listo, y toma un array de dependencias
En dicho arreglo se le puede pasar un state de manera que este a la escucha de los cambios que ejecutan en el state, en caso de que el state se actualice, este useState se ejecuta nuevamente
Es recomendable siempre crear varios useEffect en vez de crear un solo useEffect muy grande que requiere muchos parametros en el arreglo. Lo ideal serian maximo 2 parametros en el arreglo
// Cada vez que cantidad cambie, este useEffect se va a ejecutar. Se ejecuta al menos una vezuseEffect(()=>{constresultadoTotalPagar=calcularTotalPagar(cantidad,meses);setTotal(resultadoTotalPagar);},[cantidad,meses]);