De Colombia, que pena con usted pero que explicacion tan del putas, ahora si entendi, no soy desarrollador y tengo una hernia en la cabeza y me cuesta trabajo comprender, usted es claro, diafano y transparente. gracias.
0:00 Inicio del video 1:28 Configuraciones iniciales 3:15 Rutas básicas (Router, Switch, Route) 9:27 Error 404 11:16 Componentes de página 13:29 Menu de navegación, Link y NavLink 21:36 Sintaxis corta para rutas 22:48 Rutas con parámetros 26:41 Parametros tipo query 40:35 Autenticación - Creando páginas a utilizar 44:02 Autenticación - Componente Private Route 52:45 Autenticación - AuthProvider, useAuth 1:02:12 Autenticación - Botones iniciar y cerrar sesión 1:05:30 Autenticación - Redirigir a la página anterior 1:11:50 Autenticación - Rutas públicas 1:14:17 Autenticación - Persistencia con local storage 1:19:36 Autenticación - Ocultando elementos del menú 1:22:27 Routers Anidados - Router para categorías 1:33:50 Routers Anidados - Ruta privada en un router hijo 1:33:43 Routers Anidados - useRouteMatch 1:37:48 Routers Anidados - Un Router, dentro otro router, dentro otro router 1:45:42 Fin del video ¿Donde consultar sobre la librería?
Increíble explicación. Eres de los profesores que mejor explica. Enhorabuena. PETICIÓN: Me encantaría que hicieras un vídeo de REDUX al completo. ¡Sería el colofón final!
Excelente video Luis, super completo, te felicito. Sería brutal una parte 2 con roles de usuario y algo así como un array de rutas para autogenerar las mismas según role.
@@fabiocastellanos1335 He trabajado en apps en las que el backend te retorna el rol y según el rol del usuario el front monta las rutas, no sé decirte si sea la mejor manera pero seguramente no es la única.
Hola Luis como estas.... La verdad que el contenido que haces me sirve un montón y seguramente lo consulte bastante.... Muchísimas Gracias por compartir
REALMENTE INCREIBLE, de verdad es sorprendente el conocimiento y manejo que tienes sobre el tema en cuestión, me atrevo a decir que no hay en la comunidad hispana un video que explique a este nivel como funciona esta Librería, de verdad muchísimas gracias.
Te pasaste con este video, superdidáctico, claro y pracmático para llevar el código a la realidad, te felicito por el video, eres muy bueno en react se nota que lo dominas al milimetro, ojala puedas monetizar bien con youtube ya que he tenido que lidiar muchas veces con la publicidad de youtube hasta finalizar el video.
Este es el primer video tuyo que vi, y ahora, despues de ver todos los otros del curso, lo estoy repasando por 2da vez. Simplemente genial!! Este y todos. Voy a ir haciendo unos proyectos para practicar y luego me meteré con la serie de fullstack para ampliar conocimientos! Segui generando este contenido que es excelente!
Muy buen video Luis, esta todo muy bien explicado desde lo mas básico hasta lo mas avanzado como la autenticación , el video esta bien seccionado sin mencionar que tiene los temas claros y bien ejemplificados. espero este video llegue a mas gente. saludos ✌
Hola, gracias por el contenido. Sabes que estoy haciendo la primera parte, donde dice Rutas básicas y me tira un error "× Error: [h1] is not a component. All component children of must be a or ".. como podría solucionarlo ?
soy nuevo con React router dom, no he podido avanzar casi al inicio, me arroja un error [h1] is not a Route component. Alguien me puede ayudar por favor
Hola Luis, con las herramientas de inspeccion de react no podrían trucar el login? es decir poner un objeto usuario en el Context? Como evito esto en produccion?
Según leí en la documentación oficial el atributo del Router "component" no es exactamente igual que añadirlo más abajo, porque me parece que servía para cargar el componente de nuevo destruyéndolo y volviendo a crear cada vez que se renderiza y si lo añadimos como hijo solo actualiza él componte sin destruirlo. "Entre comillas todo porque no estoy seguro del todo" Gracias. De todos modos espero que saquen la V6 de la librería que lleva ya mucho tiempo en preview =(
Comentario: No he visto este video, pero hace poco salió una nueva versión de React_Router-Dom en donde estos mecanismos de enrutamiento han sido reemplazados o modificados.
༼ つ ◕_◕ ༽つ UFFFF que vídeo tan genial !!!! Gracias por explicarnos todo tan claro. (☞ﾟヮﾟ)☞ Una 2da parte haciendo login con un backend seria buenisimo!!!
Hola Luis, gracias por los vídeos, son realmente de calidad A1, punto! Una consulta: al hacer Ctrl+Space no me funciona el auto import en el VSCode, alguna sugerencia al respecto pf?
Cambios en route , la version receiente da error solucion import { Navigate } from "react-router-dom"; export default function PrivateRoute({ Component }) { const user = { id: 1 }; return user ? Component : ; } //app
Muy buen video, tengo un problema en produccion cuando presiono f5 estando en una pagina me manda a 404 pero la ruta si es valida, y no es el 404 que diseñé sino propio del servidor, como podria solucionarlo?
Hola! En el servidor hay que hacer una pequeña configuración para redirigir todas las peticiones al punto de entrada de tu SPA hecha en React y así tu APP Frontend podrá analizar que ruta es la que necesita mostrar. Es un problema muy común, pero se soluciona de forma distinta dependiendo de que servicio utilizas para servir tu aplicación web frontend y normalmente es una solución bastante corta y sencilla de implementar
Hola mi brother, primero que nada, excelente video, fue de mucha ayuda, muchísimas gracias. Pero tengo una duda, he visto que mientras hacías las pruebas ibas cambiando los estados directamente en ReactDevTools, yo se que al usar una API real puedo añadirle verificación en el mismo backend así los datos estarían protegidos, pero, del lado del frontend, este tipo de verificación es segura?, es decir, no hay la posibilidad de que alguien pueda ir modificando los estados para ir atravesando componentes? Ojala puedas hacer un ejemplo con un login real en una api tal vez con JWT, o simplemente con una api fake, seria de gran ayuda. Muchas gracias nuevamente.
No pasa nada, en producción las dev tools están deshabilitadas que aún si no fuera así mientras el back esté asegurado no servirá de mucho vulnerar el front
De Colombia, que pena con usted pero que explicacion tan del putas, ahora si entendi, no soy desarrollador y tengo una hernia en la cabeza y me cuesta trabajo comprender, usted es claro, diafano y transparente. gracias.
Eres estúpidamente bueno! Recomendado, Denle una cerveza a este hombre! HAY ALGO QUE NO HAGA BIEN?
Dios te bendiga y te de vida siempre.
0:00 Inicio del video
1:28 Configuraciones iniciales
3:15 Rutas básicas (Router, Switch, Route)
9:27 Error 404
11:16 Componentes de página
13:29 Menu de navegación, Link y NavLink
21:36 Sintaxis corta para rutas
22:48 Rutas con parámetros
26:41 Parametros tipo query
40:35 Autenticación - Creando páginas a utilizar
44:02 Autenticación - Componente Private Route
52:45 Autenticación - AuthProvider, useAuth
1:02:12 Autenticación - Botones iniciar y cerrar sesión
1:05:30 Autenticación - Redirigir a la página anterior
1:11:50 Autenticación - Rutas públicas
1:14:17 Autenticación - Persistencia con local storage
1:19:36 Autenticación - Ocultando elementos del menú
1:22:27 Routers Anidados - Router para categorías
1:33:50 Routers Anidados - Ruta privada en un router hijo
1:33:43 Routers Anidados - useRouteMatch
1:37:48 Routers Anidados - Un Router, dentro otro router, dentro otro router
1:45:42 Fin del video ¿Donde consultar sobre la librería?
Increíble explicación. Eres de los profesores que mejor explica. Enhorabuena. PETICIÓN: Me encantaría que hicieras un vídeo de REDUX al completo. ¡Sería el colofón final!
Sin dudas si agregas redux al detalle no habra un curso de React en Español mejor que el tuyo. Es sinceramente, insuperable tu calidad..!
Voy 10 minutTenés un don especial para explicar. No dejes de subir videos. Saludos!
eres increible amigo , ahora que REACT es el rey de la web tu explicacion es sublime :)
muchas pero muchas gracias
es el mejor videos tutoriales que eh visto hasta el momento
seguire viendo los que siguen
Terrible explicación, no quedaron dudas. 100 % recomendable. mil gracias!
No puedo creer que este fue el ultimo video de la serie! Tus videos son geniales, ya los vi todos. Me sumo al pedido de Redux
Lo que aprendí en este video es increible. Oro puro.
me estaba rompiendo la cabeza viendo como organizaba el tema del log in hasta que llegue a este video, mil gracias!!
Excelente video Luis, super completo, te felicito. Sería brutal una parte 2 con roles de usuario y algo así como un array de rutas para autogenerar las mismas según role.
Estoy de acuerdo con esta idea... (ˉ﹃ˉ)
Eso no tocaría con un backend? O se puede toda la gestión de roles desde el frontend?
@@fabiocastellanos1335 He trabajado en apps en las que el backend te retorna el rol y según el rol del usuario el front monta las rutas, no sé decirte si sea la mejor manera pero seguramente no es la única.
@@bracamontedar Tienes algun ejemplo en github?
Hola Luis como estas.... La verdad que el contenido que haces me sirve un montón y seguramente lo consulte bastante.... Muchísimas Gracias por compartir
Hola Santiago bien muchas gracias me alegra que haya servido este video 🙂
REALMENTE INCREIBLE, de verdad es sorprendente el conocimiento y manejo que tienes sobre el tema en cuestión, me atrevo a decir que no hay en la comunidad hispana un video que explique a este nivel como funciona esta Librería, de verdad muchísimas gracias.
Créelo, eres lo mejor en español explicando y mira que llevo muchos años en esto. Felicidades y gracias.
Wow gracias por tus palabras
Te pasaste con este video, superdidáctico, claro y pracmático para llevar el código a la realidad, te felicito por el video, eres muy bueno en react se nota que lo dominas al milimetro, ojala puedas monetizar bien con youtube ya que he tenido que lidiar muchas veces con la publicidad de youtube hasta finalizar el video.
Amigo... Recien descubrí tu canal por cosas de la vida... Te felicito. Explicas muy bien. Excelente!!!
Muchas gracias por tus palabras :)
Mereces un nobel, gracias
Que genialidad de video, muchas gracias por compartir sus conocimientos!
Gracias mil, excelente explicaciones y ejemplos sencillos, en espera de nuevos contenidos y features
al fin comprendi bien la navegacion ...gracias
Sinceramente es el mejor video de autenticación que e visto.
No se porque me entretengo viendo este tipo de vídeos, me encanta ver como hacen los procedimientos los diferentes desarrolladores :D
Este es el primer video tuyo que vi, y ahora, despues de ver todos los otros del curso, lo estoy repasando por 2da vez. Simplemente genial!! Este y todos. Voy a ir haciendo unos proyectos para practicar y luego me meteré con la serie de fullstack para ampliar conocimientos! Segui generando este contenido que es excelente!
Gracias amigo me alegra que haya sido util he estado alguno dias sin subir contenido pero pronto retomare 🙂
amé el video! pd: SEARCH se pronuncia SERCH
es increible que esto sea gratis y en español, muchas gracias bro!
Ya echaba de menos tus videos.
Muchas gracias por volver y además con un video largo y muy detallado. Así da gusto.
La mejor explicación para usar React Router Dom 👏🏼👏🏼. Gracias por mil Luis 🙏🏼.
La mejor explicación de la vida
Luis, muchas gracias por el video, queda muy claro todo!! Alguna intención de hacer esto mismo, pero con la versión 6 de react-router-dom?
Este video vale Oro amigo, muchas gracias
Hola luis amo tu forma de enseñar, me gustaria que sacaras un curso para aprender graphQL
Muy buen video Luis, esta todo muy bien explicado desde lo mas básico hasta lo mas avanzado como la autenticación , el video esta bien seccionado sin mencionar que tiene los temas claros y bien ejemplificados. espero este video llegue a mas gente.
saludos ✌
Que bueno lo que estás explicando Luis. Lo guardo para más tarde. Gracias!
Excelente aporte, me aclarastes muchas dudas sobre el Router, Rute, Link, NavLink, Switch. Gracias amigo...!!!
Crack!!! Me lo habian explicado de una manera muy confusa y en menos de 2 horas entendi todos los usos y conceptos. Gracias maestro!!!
Estaría bueno esto pero para router v6
Genial el video, de lo mejor, muy concreto....felicitaciones!
Buenísimo, me sacaste de un estanque donde no podía pasar de ello. Gracias!
por favor podrías actualizarlo con la v6 , son buenísimas tus explicaciones
Genial la explicación y ejemplos que realmente son aplicables.
Te agradezco este material educativo valioso.
🔥🔥🔥🔥🔥🔥
Increíble video! Muchas gracias!
Gracias por volver y encima con un tema re interesante
Nadie se compara con el profesor
Como puede que un canal tan bueno tenga tan pocos subs, buen video pana, me costaba un montón este tema y contigo aprendí de una, muchas gracias.
GraciasDanilo creo que me Falta aprender mas sobre marketing en UA-cam ☺ asi con el tiempo ira creciendo mas
amigo tu forma de enseñar es muy buena felicitaciones
Increible, te ganaste un suscriptor, eres un crack
Excelente explicación, aprendí muchas cosas más en un solo video, muchas gracias, sigue adelante!!! Me suscribo a tu canal por este vídeo.
hola, muy buen curso, me gustaria que publicaras uno de node js
El video número uno en explicar react router
Gracias luis estas correciones son para las nuevas versiones de router
Excelente explicación, un nuevo suscriptor!!! Gracias por compartir tu conocimiento y tiempo :)
👏👏👏
Con tu vídeo eh logrado comprender React Router, te agradezco tu tiempo y esfuerzo!
Muy agradable y didactica explicacion . Felicitaciones !! 👌
Muchas gracias bro, me ayudaste mucho!
luis muy bueno gracias por tanto
01:08:46 ya no aparece el from ahora aparece location en ves de from, como solucionarlo ?
Excelente video bro gracias.
Volviste bro!! Saludos!!
De vuelta jeje
Gracias por el contenido! :)
Sos increíble, mil gracias por existir!
Gracias amigo Juan por tomarte el tiempo de dejar tu comentario :) Saludos y exitos
dios q buen video, estaria muy bien uno igual pero con redux
Muy bueno, gracias!
Que buen tutorial, me ayudo mucho, gracias amigaso!!!
Excelente vídeo, muy buena explicación!
Luis tus videos son muy buenos, podrias hacer uno sobre las diferentes formas de aplicar estilos a nuestros componentes. Gracias por tu gran aporte...
Ese es uno de los próximos :)
Seria genial con react query la autenticación :3
Excelente video, muchas gracias por compartir tus conocimientos
Tremenda explicacion! gracias!
Muy buena explicación, muuchas gracias!! y me suscribo de paso :D
Me alegra 🙂 saludos
como siempre tus explicaciones son excelentes, gracias.
GRACIAS, EXCELENTISIMO
para la V6 ya no se usa Switch
muchass graciassasasass!!! 10 de 10
Simplemente gracias!
Gracias a ti! Por dejar tu comentario :)
a la espera.. que bueno que volvistes
sirch? 😂😂 se pronuncia "serch" !! muy buen video y explicacion either way! gracias
Hola, gracias por el contenido. Sabes que estoy haciendo la primera parte, donde dice Rutas básicas y me tira un error "×
Error: [h1] is not a component. All component children of must be a or ".. como podría solucionarlo ?
soy nuevo con React router dom, no he podido avanzar casi al inicio, me arroja un error [h1] is not a Route component.
Alguien me puede ayudar por favor
Uff super teso, me ayudaste demasiado, gracias
Gracias a ti por comentar :)
Que delicia de contenido, genial como explicas
Graciaaaas!... +10 como siempre.
LuisCabrera, que extension de vscode usas para los react snippets ?
Excelente tutorial :´D
Justo lo que estaba buscando, te la rifaste. Saludos
Excelente!!
Gracias por volver!!!
excelente video, una pregunta en que version de react y que version del router-dom estas usando en la aplicacion de tu video?
Hola React 17 y react router dom 4
Hola!!
Actualizarás el video con la versión 6 de react router dom?
Sii! Pero me tardare algunos meses en volver a subir contenido :(
Hola Luis, con las herramientas de inspeccion de react no podrían trucar el login? es decir poner un objeto usuario en el Context? Como evito esto en produccion?
No hay problema, ya que en el back se hace una validación adicional
Hay que proteger de ataques xss y csrf puedes consultar al respecto
Según leí en la documentación oficial el atributo del Router "component" no es exactamente igual que añadirlo más abajo, porque me parece que servía para cargar el componente de nuevo destruyéndolo y volviendo a crear cada vez que se renderiza y si lo añadimos como hijo solo actualiza él componte sin destruirlo. "Entre comillas todo porque no estoy seguro del todo" Gracias.
De todos modos espero que saquen la V6 de la librería que lleva ya mucho tiempo en preview =(
A la espera, cool
ya no funciona switch ni redirect ???
Comentario: No he visto este video, pero hace poco salió una nueva versión de React_Router-Dom en donde estos mecanismos de enrutamiento han sido reemplazados o modificados.
༼ つ ◕_◕ ༽つ UFFFF que vídeo tan genial !!!! Gracias por explicarnos todo tan claro.
(☞ﾟヮﾟ)☞ Una 2da parte haciendo login con un backend seria buenisimo!!!
Hola Luis, gracias por los vídeos, son realmente de calidad A1, punto!
Una consulta: al hacer Ctrl+Space no me funciona el auto import en el VSCode, alguna sugerencia al respecto pf?
Intenta teniendo los archivos abiertos en otra pestaña, suele ayudar a encontrarlos
@@LuisCabrera Ok gracias lo intentaré
Cambios en route , la version receiente da error
solucion
import { Navigate } from "react-router-dom";
export default function PrivateRoute({ Component }) {
const user = { id: 1 };
return user ? Component : ;
}
//app
Muy buen video, tengo un problema en produccion cuando presiono f5 estando en una pagina me manda a 404 pero la ruta si es valida, y no es el 404 que diseñé sino propio del servidor, como podria solucionarlo?
Hola! En el servidor hay que hacer una pequeña configuración para redirigir todas las peticiones al punto de entrada de tu SPA hecha en React y así tu APP Frontend podrá analizar que ruta es la que necesita mostrar.
Es un problema muy común, pero se soluciona de forma distinta dependiendo de que servicio utilizas para servir tu aplicación web frontend y normalmente es una solución bastante corta y sencilla de implementar
¿Cuando seguirás subiendo vídeos en el canal?
Hola mi brother, primero que nada, excelente video, fue de mucha ayuda, muchísimas gracias.
Pero tengo una duda, he visto que mientras hacías las pruebas ibas cambiando los estados directamente en ReactDevTools, yo se que al usar una API real puedo añadirle verificación en el mismo backend así los datos estarían protegidos, pero, del lado del frontend, este tipo de verificación es segura?, es decir, no hay la posibilidad de que alguien pueda ir modificando los estados para ir atravesando componentes?
Ojala puedas hacer un ejemplo con un login real en una api tal vez con JWT, o simplemente con una api fake, seria de gran ayuda. Muchas gracias nuevamente.
No pasa nada, en producción las dev tools están deshabilitadas que aún si no fuera así mientras el back esté asegurado no servirá de mucho vulnerar el front
@@LuisCabrera espero que así se bro, a ver si haces un tutorial para un login profesional