Code review: Vistas Dinámicas para el SignIn
Contenido del curso
Solución de la prueba
Próximos pasos
Code review: Vistas Dinámicas para el SignIn
Code review: Vistas Dinámicas para el SignIn
Contenido del curso
Carlos Esteban León Pinilla
Jean Bustamante
Carlos Esteban León Pinilla
Ricardo Collado
Harold Zurita Simon
Cristian Acalo
Max Andy Diaz Neyra
Ansony Méndez
Ariel Emiliano Acevedo Posos
Carlos Esteban León Pinilla
Diego Rubio
Elam Vera
Ulqernesh Karvenae
Por comodidad y escalabilidad es mejor separar y crear un servicio (pequeña librería) que interactúe con el LocalStorage. Algo asi:
Me pregunto si así como hay pull requests en github del curso, nosotros debemos hacer nuestros propios pull requests con cada parte del código que vayamos resolviendo, según los issues que se presentaban. No estoy seguro, no he usado mucho github en esa forma. No sé si simplemente continuar y hacerlo todo, o hay alguna forma de nosotros enviar los pull request o clonarlo y enviarlos nosotros para tener el código segmentado según el issue que hayamos resuelto D:
Creo que no es el propósito del curso, sino se hubiese hecho un Fork del proyecto en vez de clonarlo para poder enviar los Pull Request. Lo que yo estoy haciendo es agregarle las cosas que me hacen falta segûn cada clase al proyecto que ya tenia en mi cuenta de Github.
Creo que el proposito es la practica, pero si tenias tu propia version del curso anterior, de esta app, pues, podrias subirlo ahi, supongo. Yo tenia mi propai version, donde inclusive utilice typecript. Pero, como este curso es corto, pues decidi hacer las cosas como en el video, no tengo planeado ahcer ningun PR, solo modificar el codigo que ellos mismos proveen.
También se puede renderizar de la siguiente manera:
{ condición ? render1 : render2 }
.
Si se cumple la condición se ejecuta el render1 y sino el render2.
.
Por ejemplo:
return ( <Layout> <h1 className="font-medium text-xl text-center mb-6 w-80">Welcome!</h2> {view === "create-user-info" ? ( <div>Crear usuario</div> ) : ( <div className="flex flex-col w-80"> <p> <span className="font-ligth text-sm">Email: </span> <span>{parsedAccount?.email}</span> </p> <p> <span className="font-light text-sm">Password: </span> <span>{parsedAccount?.password}</span> </p> <Link to="/"> <button className="bg-black disabled:bg-black/40 text-white w-full rounded-lg py-3 mt-4 mb-2" disabled={!hasUserAnAccount} > Log In </button> </Link> <div className="text-center"> <a className="font-light text-xs underline underline-offset-4" href="/" > Forgot my password </a> </div> <button onClick={() => setView("create-user-info")} className="border border-black disabled:text-black/40 disabled:border-black/40 rounded-lg mt-6 py-3" disabled={hasUserAnAccount} > Sign Up </button> </div> )} </Layout> );
🦄✨ Para el primer issue, decidí desarrollar todos los features de las 2 vistas que se mencionan y de MyAccount.
El orden en que lo hice fue:
Para la implementación de todos estos features implementé un componente de Alertas que muestran el estado de la operación, si se realizó con éxito, si existe algún incumplimiento en alguna de las validaciones mencionadas.
Estas son algunas de las maneras en que se visualizan las vistas:
Para ver el código pueden revisar mi repo:3 CrisAcalo/CriStore (github.com)
Gran trabajo
No entiendo por qué usar el state para renderizar el sign up. ¿Por qué no redireccionar al usuario a la page de SignUp y ya? ¿Cual es el beneficio de hacerlo así?
Yo diría que ni una es mejor que la otra, son simplemente 2 formas diferentes de hacerlo. Te podría decir que si lo haces mediante una redirección, tendrías que validar que el usuario no pueda acceder a SignUp si ya tiene una cuenta. Mientras que en la clase solo lo validan con un simple estado dentro de la misma página.
Complementado lo que dice el compañero, hacer este tipo de cambios entre paginas dentro de una misma vista es aprovechar la ventaja de la reactivadad de React como tal. Ya que puedes jugar con diferentes vistas dentro de una misma pagina y reaccionar a lo que el usuario hacer para intercalar entre todas estas. Que al final sino estoy mal, es lo que react hace por debajo. Como el sitio web no se recarga, lo que hace es intercambiar las paginas dependiendo la ruta y es como si todas estuvieran en la misma pagina solo que una se muestra y las otras no. 😎
¡Hola a todos! 👋
Quiero compartirles que la API original del curso está rota, lo que puede dificultar completar los ejercicios. Para ayudarles, he creado una versión funcional del proyecto base con una nueva API y código actualizado. 🚀
Pueden clonar este repositorio para seguir el curso sin problemas:
👉 <>
Además, si les resulta útil, no olviden darle una estrella ⭐ al repositorio y seguirme en GitHub. ¡Espero que les sea de ayuda y puedan completar el curso con éxito! 💚
¡Happy coding! 💻
He logrado casi el 80% de la prueba por mi cuenta, el problema con el que me he estancado es hacer Log In a primeras. No he podido lograr la condición de redireccion a Home luego de verificar la cuenta.
Puedes hacer uso de
Lo que te permite es que en un boton al dar click lo redirecciona a la vista principal ejemplo const navigate = useNavigate();
en el caso de navigate('/pones/la/url/que/quieras/redireccionar/')
import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); <button onClick={() => navigate("/")}></button>