juan te chorearon la taza
Introducción y requisitos
¿Qué necesitas para aprender React.js?
Maquetación con React.js
¿Qué es un componente?
Componentes de TODO Machine
¿Cómo se comunican los componentes? Props y atributos
Estilos CSS en React
Interacción con React.js
Eventos en React: onClick, onChange
¿Qué es el estado?
Contando TODOs
Buscando TODOs
Completando y eliminando TODOs
Librería de Iconos Personalizados
Iconos en React: librerías y SVG
Iconos con colores dinámicos
Herramientas avanzadas: escalabilidad, organización y persistencia
Local Storage con React.js
Custom Hooks
Organización de archivos y carpetas
Feature-First Directories en React
Tips para naming y abstracción de componentes React
¿Qué son los efectos en React?
Estados de carga y error
Actualizando estados desde useEffect
Reto: loading skeletons
¿Qué es React Context?
useContext
¿Qué son los React Portals?
Reto: estados para abrir y cerrar un modal
Maquetando formularios en React
Crear TODOs: React Context dentro de React Portals
Deploy
Despliegue de TODO Machine en GitHub Pages
Presentación de proyectos para tu portafolio
Próximos pasos: React #UnderTheHood
Diferencias entre versiones de React.js
¿Cuándo realmente necesitas React.js?
Bonus: creando proyectos en React desde cero
React con Create React App
React con Next.js
React con Vite
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 13
Preguntas 4
juan te chorearon la taza
Probando la app me conseguí un bug.
Si abres el modal y le das añadir, se agregará un TODO sin texto. Pero tengo la solución.
Existen muchas formas de validación para indicarle al usuario lo que falta. En nuestro caso, por ser un formulario sencillo, basta con agregarle la propiedad required
al <textarea />
de TodoForm
. quedando así:
<textarea
placeholder="Cortar cebolla para el almuerzo"
value={newTodoValue}
onChange={onChange}
required
/>
Con eso, el evento submit
del formulario no se ejecutará si el textarea
está vacío.
Para evitar que en la descripcion se guarden con espacios vacios al inicio y al final podemos utilizar la funcion trim() ademas se puede hacer una validacion para que la descripcion del todo no este vacia
desabilite el boton de anadir y agregue unos estilos si no es una descripcion de todo valida
la única duda que tengo es… ¿qué pasó con la taza? jajajaja
Algo que es ⚠️PELIGROSO⚠️ y que sucede con nuestro Todo-List es que crashea si insertamos dos tareas con exactamente el mismo texto. Esto sucede porque en nuestro listado no usamos Números Id únicos. Nuestro “id” es la key del texto. Pero cuando agregamos algo igual, nuestro código no esta preparado para luchar contra eso.
Por eso Agregué una validación con la misma filosofía del buscador, para que a la hora de ingresar un TODO, valida si este ya existe. Funciona así:
Al agregar exactamente el mismo texto. Se dispara un alerta (lo sé, es el alerta default, más adelante lo agregaré estilos xd) y esto evita que se pueda agregar esa tarea. Muestra el aviso, bloquea el botón de agregar, y limpia el input. Aún tiene unos fallos, pero ya cumple con su función.
Lo hice de la siguiente manera:
Cree un nuevo estado en el TodoContextg, el cual funciona igual que nuestro searchValue. También cree un método validatting, que recibe el text del input de agregar, lo valida con nuestro array existente y si encuentra un resultado similar, dispara un cambio de status, la alerta y agrega un nuevo value al input. y abajo del archivo retorno las funciones.
Después, en el formulario, paso mediante el todo context la función validatting y validstatus para poder usarlas de la siguiente manera:
En el onChange llamo a validatting, y le digo al textarea que cuando se active su funcion onFocus, mande a llamar también a validatting.
Y por último, en appUI:
Estoy llamando también a validatting. Esto para que se active desde el momento de la rederización. Me pasaba que si lo activaba desde que se empezaba a escribir, llevaba un delay de un caracter, y no validaba de forma precisa, por eso lo implementé de esa manera.
Es algo confuso, si gustan ver todo el código acá les dejo mi repo: https://github.com/Alvarenga144/TodoList-Reactjs18 🫡
Lo hice sin usar el Usecontex, pero la termine
me corto un poquito el ritmo que a mitad del proceso, realizara un orden, yo desde un principio tenia otro orden, y clases como el contex y el usecontext no lo hice porque era muy abrumador tantos cambios. y ahora estoy sufriendo porque no se como ejecutar el addTodo cuando se le da al boton crear, agregue una pregunta mostrando como lo tengo por si se apiadan y me quieren ayudar, gracias
opte por usar React Hook Form para ahorrar un poco de tiempo
Tengo que admitir que el proyecto lo hice de una manera un poco distinta, pero siguiendo el curso a su ritmo, en mi caso no utilice un modal para agregar las tareas porque me fue un poco confuso pero de todas maneras pongo el código para quienes quieran agregar de manera directa las tareas
lo que yo vi … 😄
Observando esta manera de pasar nuevos estados al useState(), habia una forma en la que se realizaba la operacion dentro de una funcion -> (previous_value) => { return [...previous_value, valor_a_agregar]}. Hay alguna implicacion, o mejor practica para actualizar este estado de variables?
Jejeje “Juan toca cortar”. jejeje
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.