Design comparison
Solution retrospective
Estoy más orgulloso de haber creado un componente reutilizable en React y haber aplicado un enfoque de diseño mobile-first. La próxima vez, me enfocaría en usar componentes más inteligentes con estado y optimizaría el manejo del renderizado para mejorar el rendimiento.
What challenges did you encounter, and how did you overcome them?Uno de los desafíos más grandes que enfrenté fue asegurarme de que las imágenes y estilos se renderizaran correctamente, especialmente al trabajar con rutas relativas. Para superar esto, investigué sobre la estructura de carpetas en proyectos de React y ajusté las rutas de las imágenes, lo que me ayudó a comprender mejor cómo manejar los activos en el proyecto.
Otro desafío fue el diseño responsive, ya que quería asegurarme de que el componente se viera bien tanto en dispositivos móviles como en pantallas más grandes. Para ello, utilicé un enfoque mobile-first y realicé pruebas en diferentes resoluciones, lo que me permitió ajustar los estilos y asegurarme de que la experiencia del usuario fuera consistente en todos los dispositivos.
Finalmente, también me enfrenté a la gestión de props en el componente Card. Para solucionarlo, revisé la documentación de React sobre la gestión de props y practiqué la creación de componentes más estructurados y modulares, lo que facilitó el paso de datos y la reutilización del componente en diferentes contextos.
What specific areas of your project would you like help with?Me gustaría recibir ayuda específicamente para mejorar la estructura de mis componentes en React. Algunos aspectos en los que me gustaría enfocarme son: Descomposición de Componentes: Quisiera aprender a descomponer mis componentes en subcomponentes más pequeños y reutilizables. Uso de Hooks Personalizados: Estoy interesado en explorar la creación y el uso de hooks personalizados. Patrones de Composición: Me gustaría entender mejor cómo implementar patrones de composición de componentes.
Community feedback
- @lvmneoPosted about 1 month ago
The first thing to pay attention to is the centering of the application. In this project, the QR code is not centered, as in the original example.
It is necessary to center the QR image itself inside the main block.
Also, the line breaks look incorrect compared to the original QR code layout.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord