Mi pequeño rediseño
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
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
16 Días
7 Hrs
34 Min
23 Seg
Estilos CSS en React
5/34Recursos
Aportes 254
Preguntas 22
Ordenar por:
Mi aporte
Al final quedo así
Aqui mis avances!
Puse un hero en desktop y limite el tamaño del ToDo a un mobile.!
Avances:
Yo me base en el diseño de Juan, solo cambia unas cositas! Hasta el momento muy buen curso 💯
Mi diseño 🤣🤣🤣🤣🤣🧑🚀
Me alegro que actualizaran esta clase en particular, anteriormente me habia ido a ver el curso en youtube porque me parecia confuso y algo aburrido aplicar las clases de la primera forma, creo que acertaron al darle prioridad a la interactividad que a los estilos ya que algunos queremos aprender mas sobre el dinamismo , herramientas de desarrollo y programacion, teniendo en cuenta que ya tienen cursos para css y estilos. gracias. ahora me siento mas comodo.
🍃 Yo hice algo sobrio, oscuro y que me gustaría ver a mi en una app. Agregue íconos desde Fontawesome y Animaciones desde animate.style. Y por primera vez me atreví a usarlos como paquetes de NPM y no como CDNs.
Mi aporte
Mi rediseño. Le quise agregar las listas para organizar las tareas.
GitHub: https://github.com/Gaoux/to-do-list
Página: https://gaoux-to-do-list.netlify.app
Comparto mi avance hasta ahora
Por el momento así va el mío, no es mucho, pero es trabajo honesto :v!
GitHub
Me quedo asi no lo hice enteramente copie parte del css de una pagina
Todavía me falta mejorar el responsive design, pero así quedaria en versiones desktop.
Ahí vamos!!! - Faltan algunas cosas por mejorar.
😬 El orden es lo más bonito de la vida.png
Este es mi avance (anque ya cambié un par de cositas):
Les comparto el diseño que hice 😃
Así voy… no es muy bonito, pero estoy orgullosa.
Comparto mi avance, voy en la clase 5, probablemente cambie el botón por uno flotante como el profe. al final comparto como quedo la versión final xD.
Yo quise usar el concepto de neomorfismo 😊
imposible destacar entre tantos genios
Mi versión de la aplicación
Asi me va quedando el diseño, quise darle un efecto retro analogo, por eso los shadow duros, la idea es que parezca una tablilla que cuanado terminas una tarea le agregas un pin al hueco a la izquierda.
Asi me quedo a m (el diseño no es mi punto fuerte xd)
He ido experimentando y añadiendo las funcionalidades antes de cada clase como reto, cuando no consigo realizar una parte, veo el video y trato de recrearlo.
Respondiendo a la consulta del profe en el minuto 14:40, yo prefiero crear la constante estilos dentro de cada componente para no tener tantos archivos en Components. Se me hace mas fácil a pesar del cambio de nomenclatura de CSS.
hay una aplicacion de TODO que tiene un bug, es decir que hay oportunidades de mejora: cuando no has escrito nada en el campo de texto de crear TODOs y le das click al button de crear tarea se crea la tarea asi no halla texto
Hasta avance con el rediseño mío:
Fue un reto!
Al terminar el curso subiré el repo a GitHub!
Gracias Platzi
Aquí mis avances:
Hola, así van quedando mis estilos…
Hola, mi primera vez usando figma y usando react, y cuadrar esos estilos es una galleta pero se cumplió con la tarea, quisiera verlo pulido pero pues la idea es avanzar, lo pongo para aquellos que quizás tampoco son tan avanzados y animarlos a que continuemos aprendiendo:
Asi va mi Todo y ya pensando en la versión modificada
Esto llevo por ahora, está feo pero lo mejoraré al final del curso. Al menos ya aprendí como manipular estilos y aplicarles flexbox.
Comparto mi diseño
Asi va quedando 😃
no habia mucha creatividad jajajja
deploy: repo: https://huilensolis.github.io/react-todo-app/
Hola, Comunidad 💚
Acá le comparto mi proyecto de TODO 👇👇
https://juancodev.github.io/react-todo-machine/
👀 Tiene un Skeleton para la lista de TODO
Me parece mucho mas cómodo trabajar con archivos css por separado, uno por cada componente (de momento)
En mi opinión, me gusta más agregar estilos con archivos .css, ya que así tengo más organizado todo mi entorno; aunque agregar estilos mediante objetos, también es una manera fiable dependiendo de lo grande que sea tu proyecto o si tu proyecto necesita mucho código css… Creo que todo dependerá a qué le quieres agregar estilos o incluso utilizar las formas que vimos en la clase. Me corrigen si estoy equivocado jejeje mood aprendizaje: activado por siempre 😃
aqui el proceso de mitad de clase… trate de dejarlo algo parecido al figma pero con unos pequeños cambios que a mi parecer me parecia mejor, gracias leo criticas
Utiliza una expresión condicional abreviada (Evaluación de cortocircuito).
A la hora de aplicar el concepto de clases dinámicas, el profe dice que utiliza el operador ternario para validar si la propiedad completed es verdadera y asignar el valor de la clase. Me puse a investigar (intriga) y por lo que pude entender es que en la regla se aplica una característica conocida como expresión condicional abreviada (evaluación de corto circuito).
GOD FIRST
Si son como yo y prefieren copy paste de los estilos para centrarse en react y después sí se centrar en los estilos pues vayan al github y gitclone xd
por ahora va asi
Así esta quedando mi diseño, esta sencillo pero me enorgullece haberlo podido completar por mi cuenta
Y ademas es responsive!
Mi rediseño, espero les guste 😄
Modificando el proyecto del curso y combinandolo con TailwindCss
Hola! aquí va mi aporte. Me guié del diseño que mostró JD.
Va tomando forma de a poco, una vez que esté las funcionalidades subiré completo con el código en el repositorio
Hice así el estilo no soy muy bueno con el CSS, me gustaría tener feedback respecto al diseño para pulir un poco mas el diseño.
De esta manera realice mi diseño:
Mi diseño
mi peque;o dise;o aun sin iconos
mi humilde diseño el cual conecte con el api de google calendar...
Aquí el mio algo minimalista basandome en el lenguje de diseño de una app que me gusta mucho :) se llama superlist
El mio quedó asi
Les presento mi proyecto con este diseño implementado, espero les ayude a inspirarse :)
🟢 Mi rediseño :)
Después de pelear mil horas con CSS (aun me siento muy novata) y las imágenes para los botones las descargué de Figma y me quedaron con un fondo que no se ve bien. Pero ahí voy, aprendiendo!
He tomado ya 3 veces este curso. Sé que muchas veces cuesta aprender todo a la primer y saber como funciona cada cosa. Pero les aseguro que con la constancia, la practica y sobre todo nunca desfallecer, se van puliendo cada vez más las habilidades. Cada que tomo este curso, siempre inicio un nuevo proyecto, nuevost estilos, etc. Se los recomiento.
Así voy en esta tercera oportunidad.
![]()
Mi aporte:
me tomó una semana y me quedo medio raro pero alfin puedo continuar con la clase
Mi diseño rapido…
No es mucho pero es trabajo honesto :’)
¿A alguien más le pasa que CSS es más difícil que JavaScript?
Neomorfismo
Mi humilde aporte :)
Excelente la explicación del profe, super al detalle en cada cosa.
Me impresiona los diseños que hacen. Me pueden decir que cursos de Platzi tomaron para llegar a saber como hacer eso?
Mi pequeño diseño apoyandome de los demas diseños de mis compañeros en los comentarios.![]()
La mia esta inspirada en un videoGame para hacerla más entretenida.
Aún me falta la parte izquierda de la app que sera la de creación de una nueva quest
Pequeño dato, los estilos en camelCase no son cosa de React sino de Javascript que usualmente se pueden usar atraves de la propiedad `element.style` para modificar dinamicamente los estilos de un elemento.
Me gusta la forma clasica de usar el css, en lugar de la de jsx, siento que tengo que escribir mucho dentro del codigo
Esta es mi maquetación inicial, ya la mejorare con el tiempo :)
Claramente no soy tan pila y creativa como ustedes. primera vez que uso figma, react y cuadro css..udd que tarea sacar esto tan básico, pero se hizo la tarea: 
Me fui por algo mas minimalista 
Hola dejo mi demo, se llama TO DO's TASK, tiene adicción, edición, eliminación, agrupa y filtra, maneja dos temas y responsive:
**GitHub**: <https://github.com/BillyAGR/to-dos-task>
**Demo**: <https://billyagr.github.io/to-dos-task/>
Mi primera versión del Todo list
Me copie de alguno de mis compañeros, aunque le puse mi toque, me gusto hacer un diseño sencillo pero confortable para el usuario![]()
## Diferencias entre **React.Fragment y empty tag**
Usando la sintaxis de empty tag (`<>`) no necesitamos importar React ni escribir siempre la palabra reservada `React.Fragment`. Básicamente, la sintaxis de empty tag es una syntactic sugar (azúcar sintáctico).
Pero si hay una diferencia muy grande entre ambas sintaxis y es que **solo** podemos usar el atributo `key` con `React.Fragment`, no así con la sintaxis de empty tag.
Corazón si queres un curso de accesibilidad con React. 💚
Comillas invertidas: Atl + 96
Hola querida comunidad 💜
Yo decidí optar por diseñar mi app con TailwindCSS, mi framework de CSS favorito :3
Así quedó mi diseño
:3
Así va mi proyecto 😊
Tomé de inspiración un diseño en los aportes, abajo dejo el repositorio, por si alguien lo quiere clonar, modificar o si alguien me quiere hacer un aporte lo recibiré con gusto.
Este hombre cada vez me cae mejor. El metodo de aprendizaje me he podido adaptar a pesar que en las otras clases me parecia algo explosivo ya le ha calmado o estoy en sintonia. A veces sale con unas muy graciosas jaja "Lasaña". Gracias Juan y al equipo de Platzi !!
## MI VERSIÓN
algunas mejoras:
* Filtrado segun estado
* Busqueda por titulo
* Cambio de estado al darle clic al circulo de la izquierda
Después de ver las maravillas que han posteado :) ... Hasta ahora así vamos...
Mi humilde diseño
Mi proyecto hasta ahorita va asi.
Por el momento va así, este curso esta siendo muy bueno y aun falta!
Rompí todo mi código tratando de copiar algo en github, me arrepiento de no haber hecho commit. A volver a empezar, cuantos ctrl+Z se pueden hacer jaja
✅ Estilos listos, simples y basado en la app TickTick (la recomiendo👀)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?