Тёмный

React Router Dom V6 - Tutorial Práctico desde Cero 

Fazt Code
Подписаться 253 тыс.
Просмотров 71 тыс.
50% 1

En este ejemplo práctico vamos a aprender a utiilizar la biblioteca de react para crear un rutas o URLs en nuestras aplicaciones frontend, llamada React Router. Estaremos usando react-router-dom en su version 6, y entender como integrarla en una aplicación de React.
Indice del Contenido
00:00 Introdución del Tutorial
01:21 ¿Qué es React Router?
04:07 BrowserRouter, Routes, Route
18:24 Not Found
21:34 NavLink
33:04 Link
36:13 Params
43:29 Navigate
46:49 useNavigate
50:39 SubComponente
55:42 SubRoutes
Código del Ejemplo Práctico:
github.com/FaztWeb/react-rout...
* React Router DOM v6, reactrouter.com/
Videos Recomendados:
Curso de Nodejs ➜ • Nodejs Curso Desde Cer...
Thunder Client ➜ • Thunder Client - Postm...
Variables de Entorno ➜ • Variables de Entorno e...
Curso de Git ➜ • Git y Github | Curso P...
Rest client VSCode ➜ • Rest Client | Extensio...
Mongodb Atlas ➜ • MongoDB Atlas, NoSQL e...
👨‍💻 ¿Qué servicios utilizo?
Kite ➞ bit.ly/3dPzXHe
Tabnine ➞ bit.ly/3wrmtKi
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef261d77de5
Expo ➞ bit.ly/2WpYKtx
NordVPN ➞ bit.ly/2Te7p0J
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
Hostinger ➞ www.hostg.xyz/SH4YB
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
#react #frontend

Наука

Опубликовано:

 

30 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 200   
@JuanCarlos-ox3dc
@JuanCarlos-ox3dc 2 года назад
Como siempre Fazt dictando cátedra con sus clases magistrales. Se te entendió todo. It´s was amazing!
@mauriciobetancur8841
@mauriciobetancur8841 2 года назад
Hace días tenia problemas con esto ya que estaba siguiendo un tutorial tuyo de react antiguo, pero siempre sales con un video cuando más se necesita jajaja. Saludos fazt :)
@FaztCode
@FaztCode 2 года назад
Saludos Mauricio
@rocioy2136
@rocioy2136 2 года назад
Tal cual , me pasaba lo mismo, Fazt es lo más ❤
@jorge.sepulveda.turpie
@jorge.sepulveda.turpie 2 месяца назад
Justo lo que necesitaba para poder entender react-router-dom, muchas gracias por las enseñanzas......
@eduardogomezmorales
@eduardogomezmorales 2 года назад
justo toda la semana llevaba batallando con esto gracias! otro video muy util como siempre
@alexiszanotti949
@alexiszanotti949 2 года назад
La verdad, es que encuentro poco contenido explicado de manera tan clara como el tuyo! Mil gracias!
@josedanielrodriguez3348
@josedanielrodriguez3348 Год назад
el contenido que creas salva vidas y vale oro, de verdad muchas gracias! ahora voy al video de rutas protegidas
@rogerurbano8965
@rogerurbano8965 2 года назад
Excelente!!! Muy buena explicación use la versión 5 hace un par de años y ahora me veo con la sorpresa de que han actualizado, pero con tu método de enseñanza se me hizo muy fácil. Gracias.
@leonisocamponieves8941
@leonisocamponieves8941 Год назад
Muy buen contenido, Fazt. ¡Muchas gracias!
@DarkerDark1
@DarkerDark1 Год назад
por fin alguien que enseña desde cero a usar esta cosa otros ya tienen codigo escrito y no se entiende
@jaeger12psx
@jaeger12psx 2 года назад
Impecable como siempre Fazt. Magnifico video.
@joelpumasunam90
@joelpumasunam90 2 года назад
Muchas Gracias Fazt, siempre aprendo cosas nuevas con tu contenido!!!
@abderrahimanejjar91
@abderrahimanejjar91 2 года назад
Esta version es mucho mejor que la anterior, gracias por el tutorial 👏🏻👏🏻
@JuanCamba81
@JuanCamba81 Год назад
Buenisimo como siempre. Muy exacto, directo al grano y todo muy resumido.
@sdfsfsfd437
@sdfsfsfd437 2 года назад
Muy buen vídeo. Estaba estudiando la versión 5 pero quería pasar a la versión 6 y tenía problemas con los cambios. Gracias a tu video y explicaciones he podido hacer el cambio. Muchas gracias.
@DACayus
@DACayus Год назад
Amé lo claro que explicó el modulo React Router, hice el ejercicio paso a paso y me sirvió muchisimo para el curso de React que estoy aprendiendo, Mil Gracias !!!
@egan36
@egan36 2 года назад
Gracias fazt lo estaba esperando! Abrazo!
@agustinlevental7488
@agustinlevental7488 2 года назад
Hermano este video ale oro .Te felicito y aliento a que hagas mas videos como estos! felicitaciones!!!
@donovanvillanueva5281
@donovanvillanueva5281 6 месяцев назад
Aqui en 2023, bueno casi 2024 aprendiendo, buen contenido !
@rogerionascimento1989
@rogerionascimento1989 2 года назад
Este é o guia completo sobre o assunto, deveria ser anexado a documentação oficial, parabéns 👏👏👏
@geniusdesign7306
@geniusdesign7306 2 года назад
Muchas gracias por tu aporte hermano, justo venia teniendo dolores de cabeza con la nueva versión. Gracias mil!
@joelrojas6970
@joelrojas6970 2 года назад
Magistral esta clase, muy bien explicado todo
@andresTorrecilla14
@andresTorrecilla14 Год назад
Gracias brother de verdad me has salvado la vida estaba buscando un curso de reac router dom, excelente curso
@pablovilmarbenedixcanete6527
@pablovilmarbenedixcanete6527 2 года назад
Excelentisimo Fazt, muchisimas gracias por estos tutoriales :)
@juliopaez9989
@juliopaez9989 Год назад
Fazt excelente, estaba perdido, no sabia como volver después de cargar un formulario, tu explicación me salvo. Muchas Gracias
@lindltaylor4093
@lindltaylor4093 2 года назад
Cómo siempre fazt muy actualizado gracias fazt 👍
@herminsulparra1787
@herminsulparra1787 Год назад
Acabo de aprender Router v6 gracias a ti. Muchas gracias 🥳🥳
@kevinguzman1929
@kevinguzman1929 2 года назад
Muchas gracias por el contenido Fazt! Bendiciones!!!
@brayanpuentesruiz4160
@brayanpuentesruiz4160 2 года назад
JUSTO LO QUE NECESITABA! Que grande eres bro
@andresdeveloper9809
@andresdeveloper9809 2 года назад
Entendible muchas gracias, buena y rápida introducción
@cecibenitez3917
@cecibenitez3917 2 года назад
Ey!! te quedo genial el vídeo! gracias a este rápido tutorial ya hice upgrade a la version 6 :D
@miguelangelriconavarro7165
@miguelangelriconavarro7165 2 года назад
Muy buen video Fazt, saludos
@luisblanco2768
@luisblanco2768 2 года назад
Excelente video como siempre... Exitos y mil gracias.
@josuepimentel2488
@josuepimentel2488 11 месяцев назад
solo un calificativo para ti.. Crack!! Gracias por compartir tu conocimiento bro!
@kevinalexandervirgilioroja6843
@kevinalexandervirgilioroja6843 2 года назад
Gracias bro, yo tenia el error del route hijo, no me mostraba la información, no sabia que había que ponerle path="vista/*" , esto * era lo que me faltaba jajajaja.
@francopaolorossi
@francopaolorossi 2 года назад
siempre @Fazt larga el tutorial preciso en el momento que uno lo necesita
@juanduque6393
@juanduque6393 2 года назад
Hiciste un video excelente, te debo la vida
@leandrogutierrez773
@leandrogutierrez773 2 года назад
fazt muchas graciasssss!!!!!!!!!!!!!!!!! --- por si a alguno no le funciona el link o no le aparece ... aprox en el min 35:00 simplemente envuelvan el texto en una etiqueta y listo..., hohola
@LCaraballo
@LCaraballo 5 месяцев назад
Eres genial hermano! pude reforzar muy bien. Muchisimas gracias!!
@mariolopezbarceinas1752
@mariolopezbarceinas1752 2 года назад
Tremenda clase amigo, muchas gracias por compartir :D
@maximo_vj
@maximo_vj 9 месяцев назад
Gracias bro, pense qué ya me había vuelto loco... Yo recordaba React Router diferente xD
@jessi9522
@jessi9522 2 года назад
Muy buena clase, muchas gracias. Exitos con tú canal
@bazc_prod
@bazc_prod 2 года назад
Gracias Fazt... eres un pro!
@ehumerezu
@ehumerezu 2 года назад
Sos un crack. Enseñas muy bien, éxitos!
@ericengelmann9655
@ericengelmann9655 2 года назад
Fatz has mejorado mucho en tu explicacion. saludos desde argentina
@enriquegreen7369
@enriquegreen7369 2 года назад
Altos videos amigo, espectacular
@roddy_21_25
@roddy_21_25 8 месяцев назад
El mejor curso sin dudas
@martincarp4671
@martincarp4671 2 года назад
justo necesitaba esto de la V6!
@bluemountains8824
@bluemountains8824 2 года назад
Una maravilla la explicacion. Muchas Gracias !!
@German-zq7gc
@German-zq7gc 2 года назад
GENIOOOOOOO JUSTO LO QUE NECESITABA PAPAAAA
@outletshelssy
@outletshelssy 2 года назад
Muchas gracias por este excelente video.
@johnfriend2010
@johnfriend2010 2 года назад
muchisimas gracias excelente video y magnifica explicacion se te agradece mucho
@Eroquel07
@Eroquel07 2 года назад
Excelente tutorial, muchas gracias.
@lacacode
@lacacode Год назад
Que buen contenido maestro!!!
@darioblasco1618
@darioblasco1618 2 года назад
Simplemente genial este vídeo 🤙🏽
@DaveBorr
@DaveBorr 2 года назад
Muy bien explicado, gracias.
@eliasvillalba4608
@eliasvillalba4608 2 года назад
Mil gracias!
@davidespinoza1469
@davidespinoza1469 2 года назад
Excelente. Gracias!
@jonasroman2304
@jonasroman2304 2 года назад
Grande crack resolviste todas mis dudas 🤩
@fedepereyra5885
@fedepereyra5885 2 года назад
Excelente explicación ! Gracias
@user-ed3vq4xh7t
@user-ed3vq4xh7t 10 месяцев назад
Muy bien explicado !
@paultorres8676
@paultorres8676 2 года назад
Excelente video, explicas muy bien
@jsubvee
@jsubvee 2 года назад
Gracias lo necesitaba
@pablorosales9959
@pablorosales9959 2 года назад
Excelente explicación !
@ccmarin14
@ccmarin14 Год назад
Fazt, muchisimas gracias
@Randomize-md3bt
@Randomize-md3bt 2 года назад
GRANDE FAZT GRACIAS POR MUCHO Y PERDON POR TAN POCO
@garren666
@garren666 2 года назад
excelente video amigo
@moralex74
@moralex74 2 года назад
Super, Gracias
@juanochando7146
@juanochando7146 2 года назад
gracias bro, ya entendi React Router Dom
@Rafaelv570
@Rafaelv570 2 года назад
tienes un don impresionante, felicidades por tu talento para programar y enseñar
@FaztCode
@FaztCode 2 года назад
Gracias Rafa
@joelbarreraarotoma1632
@joelbarreraarotoma1632 Год назад
Mereces un nobel
@cristiancena5757
@cristiancena5757 Год назад
Gracias Fazt
@AliLopez
@AliLopez 2 года назад
Gracias Fazt!
@FaztCode
@FaztCode 2 года назад
a ti por comentar :)
@jpvladsa235
@jpvladsa235 2 года назад
video de 10 gracias
@richardramirez5746
@richardramirez5746 Год назад
Creo en Fazt todopoderoso que me fortalece
@andersonmoralesparra4128
@andersonmoralesparra4128 Год назад
Muchas gracias
@CG-ly8wj
@CG-ly8wj 2 года назад
Es la cuarta vez que miro este video completo, a ver si esta vez me queda en la cabezota jaja
@FaztCode
@FaztCode 2 года назад
Siempre puedes hacer tus dudas y si algo no entiendes hasta se puede grabar un video del tema. Te recomiendo dejarlo en un nuevo comentario si es el caso, porque no me llegan notificaciones de respuestas solo de nuevos comentarios. Saludos :D
@heribertojuarez6046
@heribertojuarez6046 2 года назад
Muy bueno crack
@danielramirezhuayanay6470
@danielramirezhuayanay6470 2 года назад
Eres el mejor
@brunomontd
@brunomontd 2 года назад
Muchas Garcías!
@diegovallejos422
@diegovallejos422 Год назад
Gracias!
@joaquingaldeano5982
@joaquingaldeano5982 2 года назад
Te amo loco
@mikeskold89mm
@mikeskold89mm 2 года назад
me gustan tus cursos, son bien explicados y dedicados. Deberias tener cursos en udemy, que incluyan proyectos y ser mas extensos, yo te los compraria sin dudarlo. muchas gracias
@FaztCode
@FaztCode 2 года назад
Lo tendré muy en cuanto Miguel. Estoy creando algunos ejemplos avanzados y prácticos. Muy pronto los anunciaré :)
@FacundoCastellano
@FacundoCastellano Год назад
Crack!
@hernangarcia77
@hernangarcia77 2 года назад
Buen video, muchas gracias!! Algo curioso que descubri por casualidad, estaba probando el activeClassName="active" de la version anterior y si funciona, ahora, lo curioso es que si dejamos la clase active en el css y no ponemos nada en el componente (esto es, ni classname={({isActive})} => (isActive ? "active" : "") ni tampoco activeClassName="active") funciona igual 😉
@geraldsanchez7772
@geraldsanchez7772 Год назад
al momento de ver el video notaba que los otros link tambien cambiaban de color y entonces decidi quitarlo el className y en verdad funciona, al final fazt no dejo claro porque pasaba eso , tu lo supiste?
@Holri
@Holri 2 года назад
Master 🤯
@justavzz7163
@justavzz7163 2 года назад
me gusto mucho, me hubiese encantado que enseñaras rutas privadas que es algo que si se pide mucho, espero leas este comentario y lo tomes en cuenta . gracias
@FaztCode
@FaztCode 2 года назад
Por supuesto, es muy necesario, voy a elaborar un video del tema pronto
@diegoalexisaguirre451
@diegoalexisaguirre451 2 года назад
Gracias
@jeisongarzon6066
@jeisongarzon6066 2 года назад
plsss haz una segunda parte !! Gracias
@migueldavidchoque2589
@migueldavidchoque2589 2 года назад
a love you fazt :p
@zilondequadrosmaciel1006
@zilondequadrosmaciel1006 2 года назад
Gracias.
@scharss942
@scharss942 Год назад
Maestro!
@robertobenedit
@robertobenedit 2 года назад
Mi dios que bellleza de explicacion.
@FaztCode
@FaztCode 2 года назад
Un gusto que te sirva Roberto :)
@leonardoantoniomaundokabon786
Merci beaucoup
@cesarmuzio1154
@cesarmuzio1154 2 года назад
Geeeeniooooo !
@Slayzer
@Slayzer 2 года назад
Que extension utilizas para que autocomplete el codigo (ese que sale en plomo claro)
@darmexx1
@darmexx1 2 года назад
Muy buen video. Como sería para una ruta independiente ? Por ejemplo el login, ya que los login siempre son independientes (no aparecen el Navbar) se puede ?
@pruebazxccxz5997
@pruebazxccxz5997 2 года назад
Muy buena explicacion muchas gracias. Una duda, al usar no me redirige hasta arriba de la nueva vista, sino se posiciona segun donde me encontraba en la vista anterior. Es decir si me encontraba leyendo a la mitad de la vista, le doy al enlace, al llegar a la nueva vista me posiciona en medio, y no hasta arriba como al usar . Se puede solucionar esto?
@edgardo604
@edgardo604 2 года назад
besttttt
@vlad6075
@vlad6075 2 года назад
Por qué al equipo de react le encanta complicar el front-end? :v lo veo más sencillo en vue. Buenísimo el tutorial Fazt!
@syberiaok
@syberiaok Год назад
Excelente! soy nuevísima en esto y estoy tratando de crear mi blog con react. ¿Es posible crear las url de los post con react router? Gracias desde ya!
Далее
CONSUME AN API WITH REACT.JS (EASY MODE)
38:00
Просмотров 29 тыс.
When You Get Ran Over By A Car...
00:15
Просмотров 3,2 млн
Never waste PASTA SAUCE @itsQCP
00:19
Просмотров 6 млн
React Router - Complete Tutorial
23:53
Просмотров 85 тыс.
React useContext Ejemplo Practico
49:25
Просмотров 60 тыс.
🔥Aprende React Router 6 en 30 minutos
37:48
Просмотров 22 тыс.
Nestjs y React en un Monorepo usando TurboRepo
23:08
Просмотров 15 тыс.
Por qué el Patrimonio Se Dispara Después de los 100K
14:11
Lid hologram 3d
0:32
Просмотров 10 млн