Crear Login con react Simple utilizando useState y props 2023
Вставка
- Опубліковано 19 вер 2024
- En resumen, este tutorial te enseñará cómo crear un sistema de inicio de sesión simple y efectivo utilizando React y los conceptos de useState y props. ¡Espero que lo disfrutes y que te resulte útil para tus futuros proyectos!
#ReactJS #InicioDeSesion #useState #Props #ProgramacionWeb #DesarrolloWeb #Javascript #Frontend #TutorialDeReact #DesarrolloDeSoftware #WebDevelopment
gracias panita me has salvado la vida, que capo, un golazo tu tutorial!!!!!
Me alegra que te haya servido :D
Hoy 15 de mayo de 2024 te doy las gracias por mi y por todos los que has ayudado con tu video.
Agradezco de corazón que el contenido les sirva, pronto estaré de nuevo subiendo videos simples y claros de la experiencia que he adquirido.
de que ficha eres??
Excelente video. Gracias por explicar.
Ame lo sencillo de todo el video, GRACIAS !!!!
Oye, muchas gracias!
Bin ba! Que buen video. Jajaja. Encerio muy bien explicado. Gracias.
Muchas Gracias Yaren!
Está buenisimoooo, muchas gracias, realmente no hay muchos videos que usen JSX. Gracias :')
Muchas gracias!
Mano un cursito de react es lo que te falta, buenisima explicacion, al grano y todo, mostras para que es tal cosa pero sin tanto rodeo, lastima que solo estos 3 videos tenes
acabo de terminar una tarea gracias a ti gracias bro por el aporte!
@@davdev1987 que bueno! Me alegra que te haya servido
graciasss
Buenas noches. Me puedes decir cómo puedo pegar mi componente que realice con este video , a mi proyecto que tengo en visual studio ?? Por favor .
Bien claro. Lo único que quedó un poco en el aire fue como solucionaste el tema de que no te andaba el useState, hubiera estado bueno que muestres como se reinicia el server para que tome los cambios, o lo que hayas hecho para que ande. Fuera de eso, muchas gracias, me sirvió 😊
Hola muchas gracias! Lo que hice fue cerrar la pestaña del navegador, y también cerrar el visual, luego abrí todo de vuelta y con npm run dev inicie de nuevo el servidor, espero te sirva, solo cerré todo y abrí de nuevo jaja
@@CodigoaloCriollo buenísimo. De paso le queda la info para otra persona en el futuro. Gracias
Muy bueno el video, muy clara la explicacion! muchas gracias!!! un comentario contructivo, pone el mic en mono, porque se ve q es stereo y cada vez q te moves el audio se va para un lado o para el otro y como que es molesto marea. abrazo grande!!!
Muchas gracias! Para la proxima lo grabo en mono :D
Bro que bueno que explicaste cada cosa! seguí subiendo videos asi!
Muchas gracias!
te amo
lo amamos
y yo a ustedes! ♥♥
Videazo, me sirvió un montón, muchisimas gracias!!
Genial. Un detalle, podrias mostrar tus extensiones para los que no sepan.
Si por supuesto
Hola, entonces dónde están los plugin que se usaron para ver la parte lateral del navegador, la vista del celular. Quiero saber para utilizarla también.
amigo muy buen video, tengo una tarea, cuando le de al iniciar sesion necesito que aparte del bienvenido a tu cv tambien aparezca un cv, como puedo agregar mas cosas aparte del bienvenido
La explicación es muy clara, gracias! , ahora en espera del siguiente video :D, duda: para añadir la funcionalidad de registrarse, se hace en otro componente o ahí mismo? Saludos!
Si quieres puedes separar la logica de tus componentes, podrias crear un context para tener todos tus estados de fotma globarl y usarlos en donde lo necesites, y asi no tener que estar pasando props a lo loco...
No está nada mal para introducirse en este mundillo
y si quisiera agregar tipos de usuarios logeados como deberia hacer? ejemplo quiero que mis estados posibles sean no logeado, logeado como usuario tipo A, haciendo que ese usuario pueda ver las cosas 1 2 3, y otro tipo de logeo como usuario tipo B, haciendo que este usuario vea otras cosas distintas al A, basicamente que existan 2 tipos de usuarios logeados
Puesdes hacer agregando una propiedad extra al objeto de usuario, ya tienes nombre y contraseña, ahora puedes agregarle un Usuario a o usuario b, que si el usuario logueado en su interior tiene una propiedad A o B se loguee en una pagina diferente...
Hola!!! tengo algunas consultas puntuales, no se si tenes alguna otra red donde te pueda escribir por md es por un proyecto que quiero hacer, usando react con vite, con js swc, y además tengo que hacerle back
En tiktok como @devfrontreact
Excelente Video, estoy empezando con React, La estructura que usaste es la recomendada para implementar un login real que se conecte a una api y utilice token JWT?
Lo ideal seria usar un token, en login reales lo vas a utilizar mucho para poder dar acceso a diferentes secciones de pagina o contenido... Muchas gracias por tu comentario :D😃
Muy buen video! como puedo hacer para ver los props, hooks, componentes en la parte de inspeccionar como vos? no encuentro la herramienta. Gracias!
Hola buenas! Para ver los estados que tienes se una una extencion de chrome que se llama "react developer tools"
@@CodigoaloCriollo Genial gracias, ahi pude descargar la extension. Ahora como hago para ver los Hooks y los States? porque me tira otra informacion diferente a la que te dice a vos. Me tira el "Timed out while inspecting element 56" no me muestra nada mas ... ayudaa jaja
me queda el bienvenido primero y no me aparece el form, no se que hice mal jaja desde que saque esto me pasa.
Hola Fran, si quitaste el componente de formulario no te va a aparecer jaja, no sabría como ayudarte porque no puedo ver como Tenes el código, de ultima puedes volver de nuevo y retroceder el video las veces que quieras, abrazos y buen código
Hola, muy claraa la explicación gracias, suscritor nuevo...
La consulta es como se hace para validar el usuario y le de acceso,ya que si pones abc y 123 entra igual
Hola, buenas! Para realizar una validacion con el usuario se necesita tener un base de datos con los usuarior registrados en el programa, mas adelante lo vamos ha hacer!!
@@CodigoaloCriollo avisá cuando porque lo ando necesitando jajaja gracias x el video! super bien explicado
Amigo el login que realizas es solo llamadas de componentes cierto osea que no cambia la ruta en la URL como debería ser solo llamas a componentes haciendo condicionales
Así es, es solo practica para estados, condiciones etc... Para realizar con URL privadas y que solo tengan acceso al momento de loguearse es otra cosa un toque más avanzado... Pronto estaré subiendo más videos, es que ahora la chamba esta fulera
Cómo puedo ver los hooks en la parte de las herramientas de desarrollador?
Pregunta, no se si lo explicaste y no entendí, si tengo un sitio web cln varias secciones, suponiendo /inicio
Como hago para que si pongo por ejemplo localhost:3000/inicio si no hice previamente login no se pueda acceder
Hola, si se puede hacer, que si no estas logeado no te deje acceder, podrias usar usenavigate y un condicional, diciendo que si no tienes los estados cargados (usuario y password) solo te redirija al localhost:300, pero si tiene usuario y password que te dirija alocalhost:3000/inicio, o home, o perfil, dependiendo lo que quieras mostrar
Como hago para que el botón "cerrar sesión" me dirija hacia el log in?
Hola, en el 20:30min hacemos el LogOut para cerrar sesion
Y porque regresa al login cuando actualiza la pagina ?
porque no son datos persistentes, se podria guardar en localstorage
Gracias! Como se llama el tema de Visual Code que estas usando en el video?
Hola, se llama SynthWave '84 y la font es 'Cascadia Code PL'
@@CodigoaloCriollo Muchas gracias
@@Tomas.s-j4c De nada chamigo
Como se llama la extension del navegador que te permite visualizar en forma de celular y ver activamente los eventos? al abrir el inspeccionar no me aparece la opcion componentes
cuando abres las herramientas de desarrollador, en la parte superior salen un boton con forma de una lap y un celular y ahi te pone la pantala como de celular. ademas te salen diferentes opciones de pantallas y dispositivos una vez que habilites esa opcion
buenas una pregunta :c con eso de vite se puede trabajar igual con redux?
Hola Jona, sisi, se puede trabajar tranquilamente con redux o lo que tu quieras!
Buenas que navegador usas para ver el telefono.
Uso google chrome, y para ver el teléfono es una extensión se llama "Simulador móvil: herramienta de prueba receptiva"
disculpa la pregunta esto tambien funciona para correrlo con expo?
hola, si, creeria que no causaria ningun problmea, en todo caso seria modificar un par de parametros, pero nada complicado 😊😊
Código con Juan ?
tienes eso en algun github
Hola si :D github.com/AlexisNMunoz