Transcripciones
1. Introducción al curso: Oye, ahí. Bienvenido
a este curso de mastering outing con react, y seré tu instructor
a través del Estoy súper emocionado de
guiarte a través este maravilloso viaje
de router react, que es la buena solución para manejar la navegación en aplicaciones
modernas de reacción. Ahora, el enrutamiento es una parte
fundamental hoy en día de cualquier aplicación web
sin permitir que los usuarios naveguen a
diferentes páginas web. Al igual que es poco probable
que pueda construir aplicaciones de
grado de producción en el mundo real. Y ahí es donde
entra en imagen el ruteo. Y por eso también
deberías aprender hoy sobre el
ruteo. Ahora, sin un sistema de
enrutamiento sólido, incluso las mejores aplicaciones de diseño pueden sentirse desorganizadas y
difíciles de usar Y eso es exactamente
lo que vamos
a dominar en este curso en
particular. Entonces hablando de este curso, vamos a cubrir
una introducción. Vamos a hacer una
introducción para reaccionar enrutando lo que es y cómo funciona
react router. Aprenderemos y
entenderemos cómo podemos configurar rutas en nuestra aplicación
React. También aprenderemos cómo
puede agregar navegación, cómo puede crear rutas
anidadas, y también aprenderemos
cómo puede crear una página 404 que es una página no encontrada especie de
mensaje para el usuario Entonces eso es lo que
vamos a hacer. Y sí, con este curso
en particular, tendrá una total
confianza de construir aplicaciones de
varias páginas con react agregando la
funcionalidad de enrutamiento, y podrá
garantizar una navegación fluida,
brindando a los usuarios una experiencia de
navegación fluida. Ahora bien, ¿para quién es este curso? Así que este curso es perfecto para desarrolladores de
react de todos los niveles, ya sea que recién estés
iniciando con react o si eres un desarrollador
avanzado de react. Este curso es perfecto para ti porque en este curso en
particular, he hecho las cosas lo suficientemente
grandes amigables. Entonces te explico todos
y cada uno, así que va a ser realmente
un paseo de pasteles para ti. Y si eres desarrollador de
nivel avanzado, este curso sigue siendo el
mejor porque, ya sabes,
es un buen repaso para los conceptos relacionados con
el enrutamiento y
podrías recoger algo nuevo
de este curso en particular Entonces eso es lo que es. Y la forma en que está diseñado este
curso, es completamente práctico. Me aseguro de codificar la mayor parte
del tiempo y
mostrarte diferentes
ejemplos en lugar de hacer uso de
presentaciones de PowerPoint. Entonces esa es la USP
de este curso. Ahora, ¿estás listo para llevar tus habilidades de reacción
al siguiente nivel? ¿Vamos a sumergirnos y comenzar a construir aplicaciones
dinámicas amigables con la navegación juntos?
2. Primeros pasos a configurar React Project: Oye, ahí. Entonces ahora
es el momento de que comencemos a crear nuestra aplicación
react, y
lo vamos a hacer con la ayuda
de la línea de comandos. Entonces primero lo primero, lo que
voy a hacer es dirigirme o
navegar a través de la línea de comandos hasta la
carpeta del proyecto. Ahora lo que quiero decir con carpeta de
proyectos
es que es una carpeta de
mi elección donde
deseo tener mis
proyectos de reacción organizados, ¿de acuerdo? Entonces, lo que puedes hacer es dirigirte
al Finder. Al igual que, si estás en Mac,
puedes dirigirte a Finder o si estás en
Windows como yo, puedes dirigirte
a Explorer, derecha, y crear una carpeta en la
ubicación que elijas, puedes llamar a la carpeta, como
quieras. Yo lo nombraría reaccionar. Y luego desde la línea de comandos, puedes simplemente navegar hasta la ubicación donde
has creado la carpeta. Así que he creado
esta carpeta de reacción aquí en esta ubicación en
particular, y CD es el comando, que es cambiar directorio, y me está ayudando a
navegar o dirigirme
a esta carpeta en particular o a estar en esta carpeta
desde la línea de comandos. Entonces ahora estoy en esta carpeta en
particular, voy a borrar todo lo demás. Todo bien. Ahora en esta carpeta en
particular, voy a comenzar a crear
mi aplicación react. Y para esto, voy
a hacer uso de NPX, ¿de acuerdo? Uy. Entonces ya he creado algunas
aplicaciones de reacción antes. Entonces puedes ver esta
sugerencia por aquí, bien, pero no hay nada que
pueda hacer al respecto. ¿Bien? Pero ignora esta
sugerencia por ahora porque lo que hace este
uh terminal en particular es, lo que sea que vea
en tu historia, simplemente
te sigue sugiriendo,
lo cual es bueno. Al mostrarte todo el comando,
eso está completamente bien. Entonces NPX voy a
hacer uso de NPX, ¿de acuerdo? Ahora bien, la sintaxis de NPX es correcta. Se usa para ejecutar
los paquetes de nodo, o se usa para
ejecutar los paquetes. Y luego vamos a hacer
uso de la app Create react. Todo bien. Ahora qué
es la aplicación Create React. La aplicación Create React es una herramienta que te ayuda a crear
toda la aplicación React. Ahora bien, ¿por qué estamos
haciendo uso de esto? Debido a que el proyecto react tiene que
organizarse de cierta manera, necesita tener la carpeta SRC, necesita tener algunos archivos
y todo esto se unen y te permiten o habilitan que tu aplicación
funcione de una manera perfecta, ¿verdad Así que también puedes ir y
crear manualmente esos archivos, pero esta es una herramienta
que te permite
crear para crear o configurar la estructura de la aplicación de la
manera correcta. ¿Bien? Y después de esto, solo
voy a mencionar el nombre de mi aplicación, así puedo llamarla
aplicación MyRact, algo así ¿Bien? Y lo que puedo hacer es
simplemente presionar Enter. En el momento en que presiono Enter, lo que esto va a
hacer es que va a crear una carpeta en esta ubicación en
particular. Entonces en esta
ubicación en particular,
se va a crear esta carpeta. ¿Por qué está creando una
carpeta en esta ubicación? Porque he navegado a esta
carpeta desde la terminal, y este será el nombre de la
carpeta bajo el cual existirán
todos los archivos de mi
proyecto react ¿Bien? Entonces puedes presionar Enter, y deberías ver algún tipo
de procesamiento sucediendo. Así podrás ver la creación de
una nueva app de reacción en esta ubicación en particular. Está instalando algunos paquetes, y esto podría tardar
un par de minutos. Entonces está instalando
también te está diciendo
lo que está instalando. Se trata de instalar
react, react Dom, react scripts y todo,
todo lo que necesita. Entonces esperaremos un rato hasta que se
complete todo
este proceso y veamos
una confirmación. Entonces tengo la confirmación, y también recibí un mensaje menor. Bien. Entonces para cuando
comencé a grabar este video, hay una nueva versión menor, dice de NPM
que está disponible, y me está preguntando
si puedo actualizar Bien, entonces voy a actualizar más tarde. Puede que no veas esto, bien, pero sí, solo voy a
ignorar esto por ahora. Es solo una
notificación de actualización. Puedes ver la
confirmación por aquí, happy hacking. Todo bien. Y si te desplazas hacia arriba por aquí, verás todo el
proceso de lo ocurrido. Entonces ejecutamos
este comando aquí. Uy. Déjame desplazarme hacia arriba. Así que ejecutamos este
comando por aquí. ¿Bien? Si vienes por aquí, puedes ver que agregó
tantos paquetes. Tomó 36 segundos. Si vienes aquí, bien, ha dicho
que el éxito creó esta aplicación en particular en esta ubicación y
dentro de ese directorio. Entonces necesitas navegar
a este directorio, y dentro de este, puedes ejecutar todos estos comandos por aquí. ¿Bien? Ahora, una vez que navega te
ha dado
comandos listos para usar como NPM start. Se iniciará en el servidor de
desarrollo. Entonces, la aplicación react
que has creado viene con un servidor
inbilt incrustado Puedes ejecutar puedes
ejecutar este comando para agrupar la aplicación
y en archivos estáticos, básicamente para implementación de
producción, esto iniciará el
ejecutor de prueba en caso de que quieras
ejecutar casos de prueba, NPM ejecuta expulsión Bien, esto es algo
que puedes correr. Entonces la sugerencia es, puedes comenzar por ejecutar esto por
aquí. Voy a copiar esto. ¿Bien? Lo pegaré por aquí. Voy a dirigirme a
este directorio, bien, y luego te está
diciendo que comience NPM. Ahora bien, este es un comando
mediante el cual puedes iniciar un servidor de desarrollo
en tu máquina local. Así que también puedo ejecutar este
comando, ¿de acuerdo? Y se podía ver la
aplicación en funcionamiento. Entonces esta es la
aplicación, ¿de acuerdo? Se puede ver el navegador
automáticamente abierto, y se puede ver, esta es la aplicación que
está en funcionamiento. Ahora bien, este es un servidor
que
te está mostrando tu contenido o si está ejecutando tu
aplicación react en el navegador. Ahora, cualquier cambio que
hagas en los archivos, verás recargas en vivo
sucediendo por aquí ¿Todo bien? Ahora, puedes
ver el mensaje por aquí, como necesitas editar
este archivo en particular y guardarlo para volver a cargarlo ¿Bien? Entonces esta interfaz viene de este archivo en
particular es lo que dice. Y si das click por
aquí, este es el enlace
al sitio web oficial de react. Eso es a
lo que se ha vinculado. ¿Bien? Así que puedes ir
a ese sitio web y revisar o leer algunas
cosas también. Todo bien. Pero algunas cosas que me
gustaría mencionar por aquí es que una vez que hayas iniciado
el servidor de desarrollo, puedes detenerlo presionando Control y C en Windows
o Comando y C en Mac. ¿Bien? Estoy en Windows, así que presiono Control C, y
pueden ver que terminó
este trabajo en particular. Y aquí ahora ven
si intentas refrescarte, esto no va a funcionar. Bien, porque el
servidor está caído, ¿verdad? Ahora, para que tu
servidor esté en funcionamiento, necesitas ejecutar NBM start
dentro de esta carpeta en particular ¿Bien? Sólo entonces su
servidor estará activo. Entonces,
mientras desarrollas mientras haces desarrollo, puedes mantener el servidor
encendido y realmente modificar los archivos y guardar y ver
los cambios que ocurren en vivo. ¿Bien? Ahora, voy a hablar un poco
más de este comando. Así que creamos la app react o toda
la aplicación usando
este comando en particular. Ahora también puedes agregar opciones
por aquí al final. ¿Bien? Entonces lo que puedes hacer es hacer uso de las
plantillas de aquí. ¿Bien? Ahora, digamos que cuando
estés trabajando con react, también
quieres hacer
uso de mecanografiado ¿Bien? Entonces, si estás haciendo
uso de mecanografiado, puedes agregar algo como esto Se puede decir plantilla por aquí, y se puede decir tipo script. No voy a ejecutar esto, pero esto es solo una información
extra. Lo que esto hará
es que hará uso de
la plantilla de mecanografía para
crear tu aplicación, y agregará el
soporte de mecanografía desde el principio, lo soporte de mecanografía desde el principio, cual es útil si
estás trabajando en un proyecto más grande que pueda
beneficiarse de una beneficiarse Todo bien. Entonces puedes hacer uso de este comando de
esta manera, bien. Espero que este comando sea
claro NPX create react tap. Entonces no tenemos el
servidor en funcionamiento, pero ahora puedes reiniciar
el servidor de nuevo diciendo que NPM ejecuta NPM start. Lo siento. Entonces es inicio de NPM,
algo así. Y si lo inicias,
volverá a iniciar el servidor. ¿Bien? Entonces espero que esto sea útil y espero que hayas
podido seguirlo.
3. Configuración de IDE con código de Visual Studio: Esta es nuestra primera aplicación
basada en reaccionar, que creamos, o debería
decir que no creamos. Bien. Por lo que este proyecto se
genera automáticamente usando la aplicación
Create React. Bien, y también
nos está dando alguna pista por aquí. Puede editar los puntos
qs de la aplicación y es seguro para recargar. ¿Bien? Tiene un enlace
para aprender a reaccionar, que te llevará al sitio web
oficial de react. Muy bien, hasta ahora tan bien. Entonces esta es nuestra aplicación en funcionamiento. Ahora,
¿qué tenemos que hacer? Tenemos que empezar a codificar
y modificar las cosas. ¿Y qué vamos
a hacer por eso? Vamos a instalar un IDE, que es el código ID de
Visual Studio. Bien. Entonces así es como se
ve. Si ya lo tienes en
la computadora bien y bien, si no lo haces, entonces dirígete
a este sitio web oficial. Es una herramienta gratuita, es gratuita, construida sobre
código abierto, se ejecuta en todas partes. Ya que estoy en Windows,
me
está incitando a descargar un establo
construido para Windows Puede cambiar al sistema
operativo que necesite. Pero si tu sistema operativo
tiene un instalador por aquí, va a
hacerlo automáticamente. Entonces, si estás iniciando
sesión desde Mac por aquí, te
va a mostrar la descarga de Mac. ¿Bien? Entonces, cualquiera que sea la plataforma desde la que
estés abriendo esto, te va a mostrar ese botón y
podrás pasar por esto si no estás al tanto de
qué es el código de Visual Studio Pero solo descárgalo e instálalo como cualquier
otro programa de software. Ya lo tengo instalado, así que no voy a estar mostrándote
los pasos de instalación, pero los pasos de instalación no
son para nada complejos. Es muy sencillo y
directo.
4. Comienza nuestro viaje con los primeros pasos: Ahora, una vez que haya instalado
correctamente el código de
Visual Studio, verá una página como esta. Entonces, si abres el código de
Visual Studio, por primera vez,
verás esta página de bienvenida. Ahora, he sido usuario de código de Visual Studio por un tiempo, ¿de acuerdo? Y ustedes están viendo todos
estos proyectos recientes. Por lo que es probable
que no veas la lista de proyectos recientes a menos
y hasta que seas usuario. Pero como soy
usuario, como dije, estoy viendo la lista de proyectos
recientes que
he usado o creado
en el pasado. Además, verás estas
opciones por aquí, nuevo archivo, archivo
abierto, carpeta abierta, clon repositorio Git,
conéctate a todo esto. Es una herramienta muy útil. Código de Visual Studio, lo
uso todo el tiempo. Ahora para abrir el proyecto, ya
conoces la carpeta, donde
has creado el proyecto. Así que simplemente puedes hacer clic aquí, Abrir carpeta y puedes navegar
hasta la ubicación de la carpeta donde has
creado el proyecto. Alternativamente, si por alguna razón
no estás viendo esto, puedes ir al archivo
desde las opciones del menú aquí y puedes decir
carpeta abierta. Ambos son iguales. Entonces lo que
voy a hacer es seleccionar Abrir carpeta, voy a navegar al
directorio de mi elección, y voy a abrir el
proyecto por aquí. Ahora cuando seleccioné Abrir carpeta, vi esta ventana de carpeta, que es exploer
navegarla hasta la carpeta donde he
creado la app react Y seleccionaré esta carpeta
en particular. Este es mi proyecto de app react
que hemos creado. En el interior, verás algunos archivos, pero debes seleccionar
la carpeta raíz. Diré seleccionar, y me abrirá esta
carpeta en particular. Ahora puedo cerrar esta página de
bienvenida por aquí. ¿Bien? Entonces puedes ver el proyecto por aquí en
el lado izquierdo, ¿de acuerdo? Puedes ver toda esta carpeta. Si expandes esto,
verás los archivos dentro. ¿Bien? Entonces, cuando ejecutaste el comando llamado
Create React app, bien con la app Create React, creó todo esto para ti. ¿Bien? También puedes
crearlo manualmente. Pero como puedes imaginar,
esto va a ser muy tedioso, Para que esa herramienta en particular, aplicación
Create react haga
el trabajo por ti
, en la que configura toda la estructura
del proyecto para ti. ¿Bien? Pronto pasaremos por
esta estructura de proyecto, pero por ahora, lo que también me gustaría
explicar es que tenemos el servidor listo y funcionando
desde la terminal. Ahora bien, lo que
puedo hacer es que no necesito hacer uso
de un terminal externo. El código de Visual Studio
tiene una forma en la que realmente
puedo tener un terminal
dentro del código de Visual Studio. De esta manera, nunca tengo que dejar código de
Visual Studio y
cambiar a una terminal local. Aquí en la parte superior en las opciones, voy a ver terminal por aquí. Se puede decir nuevo terminal,
y se puede ver que este es un terminal integrado
dentro del código de Visual Studio. Y si dices PWD, que está presente directorio de
trabajo, el terminal se abre
automáticamente en la carpeta que has abierto dentro del código de Visual Studio,
que es la carpeta del proyecto Entonces no necesitas
navegar también, no
necesitas ejecutar comando,
CD, y todo y navegar, esto simplemente funciona como
una terminal local. Entonces aquí, puedo decir que
NPM empieza de nuevo por aquí. En el momento que diga,
voy a obtener un error, pueden
ver, algo
ya está funcionando en el puerto 3 mil. Y lo que se está ejecutando, nuestra propia
aplicación se está ejecutando, y nos está preguntando
si
quieres ejecutar la app en
otro puerto en su lugar. Yo no quiero hacer
eso. Voy a decir que no. Bien, y sólo va a
detener la ejecución. ¿Bien? Pero lo que voy a hacer es que voy cerrar este servidor porque ya
no quiero hacer
uso de un
terminal externo, ya
sabes, externo por aquí. ¿Bien? Quiero apegarme al código de visual studio
proporcionado terminal, y voy a decir pin start, y esto ahora debería ejecutar el
servidor de desarrollo por ti. ¿Bien? Entonces de esta manera, lo que podemos hacer es mover esto
a una nueva Ventana. Entonces aquí estamos en
la nueva ventana, y tengo código de Visual Studio
ejecutándose en la nueva ventana. Así que de esta manera, no tengo que dejar nunca el código de Visual
Studio. Incluso puedo minimizar esto
por aquí así. ¿Bien? Incluso puedo crear
nueva terminal desde aquí, así que puedes ver más,
y puedes tener múltiples terminales
corriendo por aquí. ¿Bien? Es muy útil, y esta es la razón por la que. Entonces, este tipo de herramientas que proporciona el código de
Visual Studio, esa es la
razón por la que es
tan querido en la comunidad de
desarrolladores. Ahora, también te voy a mostrar la lista de extensiones
que tengo. Entonces aquí, si vas a
esta pestaña de extensión en el lado izquierdo, aquí tienes algunas
opciones como buscar, tienes control de fuente, ejecutar y depurar, todo esto, ¿bien? Estoy haciendo uso de Docker
también en algunos de mis proyectos, así puedes ver Docker
por aquí también Pero tal vez no veas esto. ¿Bien? Esto necesita una extensión
por separado, ¿de acuerdo? Pero si
vas a extensión. Ahora, ¿qué son las extensiones?
Por lo tanto, las extensiones le permiten mejorar o ampliar la funcionalidad predeterminada que ya proporciona el código de
Visual Studio. Para que puedan ver,
tengo extensión para cuaderno
Júpiter. Bien. Siempre que estoy codificando en Python, y si quiero soporte para notebook, hago uso de esta extensión. Bien. Entonces tengo esta extensión. Esto no es necesario para reaccionar. Tengo extensión Python. ¿Bien? Ahora bien, esta etiqueta de cambio de nombre automático, esto podría ser útil
para reaccionar porque, ya sabes, si
estás renombrando una etiqueta, bien, y si hay
una etiqueta de cierre, lo que esto hará es
que va a renombrar pagada la versión paga
de esa etiqueta en particular Bien, entonces esto es algo
que puedes tener. Es útil. Por ejemplo, si tengo
que darte un ejemplo, déjame darte un ejemplo. Entonces digamos si creo o me dejo abrir algún
archivo por aquí. Bien, déjame abrir un archivo HTML. Ahora bien, esta cosa de aquí, ya puede ver, déjame ir
por aquí, desplazarme hacia abajo. Entonces este título tiene una
etiqueta de apertura y una etiqueta de cierre. Entonces, debido a esa extensión
en particular, si renombro la etiqueta de apertura, se
puede ver que también se está renombrando la
etiqueta de cierre ¿Bien? Entonces ese es el beneficio
de esta etiqueta auto renombrada No tienes que renombrar primero
la etiqueta de apertura y luego cambiar el nombre de la etiqueta de cierre, ¿verdad? Ser par de coloración, como se puede hacer a
partir del icono en sí, se utiliza para que el color resalta el
par de cierre del soporte Esto es útil si
estás haciendo uso de muchos corchetes en tu Okay, Debugger para Java,
dev containers, jango doco todo esto lo
uso para otros lenguajes, paquete de
extensión para Java, gradle para Java, Italicde gradle para Java, Italicde ¿Bien? Esto es para el desarrollo
asistido por IA. Esto también es para esto es ejemplos de uso de API de
Intelicode. Bien. Tengo algunos para Python. Entonces estos son todos relacionados con Python. Me desplazaré hacia abajo, un servidor en vivo. No necesitamos a este
Maven para Java. Esto tampoco es necesario. Más bonita es algo
que puedes usar. Esto da formato al código. Bien. Yo organicé
el código para ti. Bien. Y si, esto
es lo que tenemos Bien. También voy a añadir algunas extensiones
ahora mismo por aquí. ¿Bien? Entonces, lo que puedes
hacer es buscar fragmentos de código de reacción por
aquí, algo como Bien. Bien, para que puedas buscar ES seven plus
react, algo así. Y verás esta extensión con casi millones
de instalaciones. Entonces esto es 12.9 millones ya
que estoy grabando este video. Por supuesto, esto seguirá
aumentando y es
posible que veas un número diferente
cuando estés viendo esto. Entonces esta es extensión. Este es el nombre ES seven plus react redux react
Native snippets Ahora bien, lo que esto hace es que te
da plantillas, ¿de acuerdo? Como por ejemplo, si
quieres crear una función, entonces puedes decir RAFC Simplemente puedes escribir
eso y
te dará toda la
definición de función para. Bien. Entonces este tipo
de atajos que tiene, lo que te ayuda a ahorrar tiempo. Para que puedas instalar
esto. Simplemente haré clic en Instalar y
agregarlo a mi lista de extensiones. ¿Bien? Así que sí,
ya lo tenemos instalado, ¿de acuerdo? Puedes explorar más complementos o
extensiones de
React en el
mercado
aquí y puedes
jugar con él. Y puedes mejorar la funcionalidad
predeterminada que
ya te proporciona el código de Visual Studio. Todo bien. Entonces sí, eso se trata de
configurar el código de Visual Studio, y espero que te haya resultado útil.
5. Navega por la web: introducción al routing en React: Hoy no, es muy común la aplicación tenga
navegaciones, ¿verdad Por ejemplo, podría crear una aplicación que podría
tener una página de producto, una página que muestre
toda la categoría, una página de inicio en aproximadamente la página, una página de equipos, etc., ¿verdad Entonces hay navegación y hay
que navegar a diferentes URL para
ver qué hay en esta página en particular.
Y esto es muy común. Incluso hoy, si estás construyendo un sitio web sencillo como
tu propio portafolio, va a tener cosas como habilidades, cómo contactarte. Y si tienes un blog,
así puedes ir a cortar la URL del
blog en tu dominio y
consultar todos los artículos ¿Bien? Entonces esto es bastante común. Y a la hora de construir aplicaciones de una
sola página, necesitas tener una
gran experiencia de usuario en la que deberías
poder navegar entre diferentes páginas o incluso componentes sin
recargar toda la página Y aquí es donde
entra en imagen el ruteo. Por lo que el enrutamiento es algo que
permite la navegación entre diferentes páginas o componentes
sin recargarlos. ¿Bien? Entonces la
experiencia de usuario es realmente buena, y hay una biblioteca
que facilita esto. Se llama como React Router. Es una biblioteca estándar que se utiliza para enrutar en aplicaciones de
reacción. ¿Bien? Ahora bien, ¿por qué se necesita el
enrutamiento? Por supuesto, hay algunos puntos y he
enumerado algunos por aquí. Al igual que, el
punto número uno es la experiencia del usuario. Por lo tanto, Routing mejora la
experiencia del usuario al permitir una navegación fluida entre
diferentes partes de su aplicación sin
recargar toda la página Esto es importante, ¿de acuerdo?
Separación de componentes. Entonces, debido a que el enrutamiento es
posible, ayuda a separar las preocupaciones. Así que haciendo que tu código sea más
modular y fácil de mantener. Lo que quiero decir por aquí es, por ejemplo, si
quieres mostrar una Navbar, algún contenido intermedio, como, por
ejemplo, Acerca de página y en la parte inferior,
quieres mostrar un pie Se pueden crear tres componentes. Puede mantener la barra NAV
y el pie de página consistentes, y luego puede volver a cargar
el componente en medio dependiendo de la URL Por lo que el componente está separado. Si esto no es posible,
entonces en ese caso, hay
que crear todo en un solo archivo para que
se rendericen juntos. Pero como el enrutamiento es posible, eres capaz de separarlo. Y esto es algo
que aprenderás cuando realmente empieces a usar o hacer enrutamiento en tus
aplicaciones. Administración de URL. Ahora, el enrutamiento permite el uso de URL para navegar a
diferentes componentes, lo que ayuda a compartir vistas
específicas con
personas que te rodean, o incluso puedes
marcar esas URL Entonces todo esto es posible
por el ruteo. Por lo tanto, el enrutamiento es importante en la construcción de aplicaciones
web modernas. Ahora, el enrutamiento es posible con
la ayuda del enrutador react. Bien. Entonces lo que vamos
a hacer es que vamos a agregar este paquete a
nuestra aplicación, ¿de acuerdo? Así que he creado una
nueva aplicación y vas a ir a la terminal. Bien. Voy a cambiar.
Diré enrutamiento de CD. Bien. Entonces esta es mi aplicación. ¿Bien? Entonces estoy en la carpeta raíz de la aplicación
real. Bien. Voy a
decir NPM install, react Router, Tom,
algo así ¿Bien? Entonces esto es algo que voy a agregar
a mi aplicación y verás que ocurre algo de procesamiento
e instalación. Y luego puedes venir a
empaquetar punto JASN y
vas a ver reaccionar a Tom
siendo agregado por aquí ¿Bien? Entonces sí, esto es
lo que vamos a usar, y hemos terminado con la configuración. ¿Bien? Entonces espero que tengas
claro qué es el enrutamiento y cuáles son las dependencias que necesitas agregar
a tu proyecto.
6. Establece el camino: configura rutas en React: Así que ahora lo que
vamos a hacer es que
vamos a construir tres URLs, en realidad, y
vamos a renderizar diferentes componentes cuando se acceda a
estas URL ¿Bien? Entonces necesitaremos
tres componentes como home about y contact, y estos tres componentes
se renderizarán sobre la
base de la URL. Así que slash renderizará home
slash A se renderizará sobre. Y luego si vas a cortar Contacto, verás contacto ¿Bien? Entonces
lo primero que necesitaremos es que necesitaremos estos tres
componentes presentes. ¿Bien? Entonces lo que
voy a hacer es ir a nuestra estructura de
aplicaciones, y voy a empezar a
agregar estos tres archivos. Voy a decir punto de inicio JSX por aquí, y puedo decir función
Vaya por aquí, Y voy a decir sobre o déjame
crear primero componente para el hogar. ¿Bien? No necesitamos
ningún tipo de parámetro, y esto va a volver
por aquí, H dos casa. Bien. Voy a mantener las cosas simples. Sólo voy a devolver una palabra de cada uno de los componentes.
Entonces este es el hogar. Voy a decir acerca de JSX, y por aquí, voy a decir algo que olvidé por
aquí, me olvidé de exportar Voy a decir export default. Home, L. Bien. Y por aquí, voy a decir export default. A L. Bien, casa sobre, y necesito agregar casa
acerca y contacto. Bien, contacto o su sexo. Entonces necesito decir función, necesito decir contacto. Bien. Y aquí, regresa. Diré dos, contacto. Y voy a decir exportación
por defecto, contacto. Bien. Así que ahora tengo tres
componentes preparados y listos. Bien. Lo que vamos
a hacer es que vamos a hacer uso del
ruteo por aquí, y vamos a configurar
rutas para diferentes URL. Entonces, en base a la URL, bien, se
renderizarán diferentes componentes. Así es como va a funcionar. Bien. Ahora para esto, vamos a
necesitar agregar Importar. Vamos a
importar algunas cosas de react router doom que hemos agregado
a nuestra aplicación Voy a colapsar
esto por aquí. Bien. ¿Qué vamos a
necesitar? ¿Bien? Entonces voy a agregar una declaración de
importación. Voy a decir Importar. Diré navegador. Enrutador, bien. ¿Y como router? Vaya, como router, voy a decir que reacciona
router, Tom. Bien. Entonces, por alguna razón, el orden
sugerir no está entrando, pero esto debería ser en
código único y voy a decir reaccionar. Ruta Tom. Oh, entró, finalmente. No lo sé, algún
tipo de problema tal vez. Pero si, esto es todo. Bien. Entonces estoy ingresando router de navegador, antes nada, ¿bien? Y también voy a necesitar rutas. Bien. Todo esto está presente dentro de esta
biblioteca en particular que hemos agregado. Diré rutas, y diré
ruta por aquí. Así. Bien. Ahora
entendamos cuáles son estos y por qué necesitamos estas tres cosas
en nuestra aplicación. Así que el router del navegador, en primer lugar, es un componente base que
habilitará el enrutamiento en nuestra aplicación
react. Entonces es un componente
que va a monitorear la barra de
direcciones del navegador. Entonces, si la barra de direcciones es slash, es una URL base, entonces
se mostrará home Si es de tajada,
se va a mostrar sobre. Si es contacto de barra, va a mostrar la página de
contacto por aquí ¿Bien? Entonces puedes
pensarlo como si un gerente se asegurara como si se mostrara
lo correcto, ¿de acuerdo? O la URL está sincronizado
con los componentes. Es el componente base, como dije, el que permite el
enrutamiento en nuestra aplicación. ¿Bien? Eso es todo lo que
tienes que recordar. Rutas por aquí, estamos implementando esto con
este nombre router. Estamos creando un
alias por aquí. Bien, estamos diciendo router de
navegador. Importar el enrutador del navegador como enrutador. Entonces podemos referirnos a
esto como router. ¿Bien? Tienes rutas. Ahora es un contenedor para todos
los componentes de ruta de aplicaciones. ¿Bien? Y tenemos
ruta por aquí. Lo que la ruta va a hacer
es que va a definir o mapear una ruta específica
a un componente específico. Entonces, por ejemplo,
queremos mapear barra A
punto de por
aquí, sobre componente Entonces Route nos va a
ayudar por aquí. ¿Bien? Ahora bien, lo que podemos hacer aquí es dejarnos básicamente
empezar a usar esto y tendrás
una mayor claridad en ese contexto en cuanto a
cómo se pueden usar. ¿Bien? Y después de hacer esto, también
puedes intentar
acceder a la URL en el navegador y verás
que notarás que esto funciona. ¿Bien? Entonces primero,
voy a decir router. Es un componente base
por aquí, bien. Y verás que se está usando este
router. Bien. Entonces voy a decir
rutas por aquí. Bien. Y dentro de ruta,
voy a decir ruta. Entonces, para cada ruta
que necesito definir, necesito agregar esta ruta. ¿Bien? Entonces esto va
a ser auto cerca de la etiqueta ,
o, y puedo decir camino. Cuenta con una propiedad de camino. Entonces voy a decir en slash, hay
que mencionar elemento Entonces, ¿qué elemento
quieres mostrar? ¿Bien? En barra, queremos
exhibir home, ¿verdad? Así que voy a decir por aquí, a casa. Bien, entonces voy a añadir
algo como esto, casa y así. Esta es una sintaxis, y necesito importar
a casa, por supuesto. Entonces presionaré Control Space
y esto va a ser importado. O si estás en
Mac, puedes presionar Comando y espacio y
esto se importará. ¿Bien? El insumo es necesario Ahora bien, si guardas esto y
si vienes a
la aplicación, verás que esto se está renderizando. Ahora bien, si comento esto,
déjeme comentar esto. Y si guardo y si
vengo aquí, se
puede ver que no
se está rindiendo nada. Espero que esto tenga sentido. Si hago control ese save on slash home se está renderizando Tiene sentido. Entonces así es como
estamos definiendo las URL ahora Vamos a decir slash y cuál es el próximo slash,
se trata, Entonces voy a decir sobre.
Bien. Y por aquí, voy a tener que añadir sobre
algo como esto. Bien. Y asegúrate de que también
se importa. Haremos lo mismo para
contactar por aquí. Bien, por aquí. Por aquí, necesito hacer contacto. Contacto. También
se importa el contacto. Y ahora, por aquí, si vienes, es
casa slash Contacto Puedes ver el contacto siendo
renderizado y sobre, deberías ver acerca de
ser renderizado. ¿Bien? Y si vas a
la URL raíz, es tu casa. ¿Bien? Entonces así es
como puedes hacer uso de estas entradas que
agregamos en la parte superior. ¿Bien? Estas entradas que
estamos en la parte superior para hacer uso del ruteo y para implementar enrutamiento básicamente en nuestras aplicaciones de
una sola página. ¿Bien? También puede agregar una barra de
navegación en la parte superior, que permitirá
a los usuarios navegar a las páginas. Ahora mismo, eso
no lo hemos agregado. Entonces acabo de
mostrar directamente cómo si ingresas esta URL en el navegador, el
componente se está cargando. ¿Bien? Pero espero que
esto quede claro y espero que esto haya sido valioso.
7. Transiciones fluidas: agrega navegación para una experiencia de usuario fluida: Tenemos una aplicación donde se
pueden ver diferentes componentes. ¿Bien? Entonces si voy a por eso, bien, ya verás sobre
si llego a casa, verás a casa por aquí,
y si voy a contactar, voy a ver contacto. Así que diferentes
componentes se están cargando pased en la URL que escribes Ahora, habrá
escenarios en los que
desea agregar una barra de navegación. Por supuesto, no es un escenario, pero es obligatorio en estos
días, debería decir. Es obligatorio en estos
días que tengas una barra de navegación en la parte superior donde el usuario
pueda hacer clic y navegar. Nadie va a escribir
la URL en el navegador. Por supuesto. Necesitas botones que
permitan la navegación, y aquí es donde puedes
habilitar una barra de navegación en tu aplicación que
te permita navegar entre
diferentes páginas. Entonces lo que voy a hacer es
agregar enlaces por aquí. ¿Bien? Entonces aquí, justo
debajo del router, lo que voy a
hacer es que voy a agregar un Nav por aquí. Bien. Y aquí, presionaré Enter
y aquí, diré UL. Bien. Voy a agregar lista desordenada, y después agregaré una
lista como esta. ¿Bien? Ahora, dentro de una lista, voy a agregar,
bien, 1 segundo. Entonces tomaré esto
en una sola línea. ¿Bien? Así que voy a tener
múltiples listas por aquí, múltiples elementos de la lista, ¿de acuerdo? Y dentro de cada lista, voy a agregar, como, Inicio, aquí estará en casa o
déjame agregar Enlace por aquí, porque debería navegar. Entonces voy a decir Link
por aquí y pueden ver esto me está mostrando el enlace
de react router doom React router doom también te da este enlace mediante el cual
puedes permitir navegaciones En el momento en que seleccione Enlace
de React Router doom, verá que el enlace se
importa aquí Puede ver que
se ha agregado tinta a esta declaración de
importación en particular. Entonces aquí, lo que voy
a hacer es que voy a decir el texto que
voy a mostrar. Así que aquí está en casa, Esta casa. Y aquí, voy a decir dos. ¿A dónde quieres que navegue este
enlace? Entonces voy a decir,
voy a decir slash. Este es un link a slash, y puedo duplicarlo
tres veces por aquí Entonces esto va a ser sobre, y esto va a ser contacto. Esto es sólo un texto que
estamos mostrando por aquí. Entonces se trata de, y esto es contacto. Voy a decir contacto. Voy a guardar esto.
En el momento en que guardes esto, si vienes por aquí,
algún problema ahí. No sé por qué no
es refrescante. Déjame revisar la
consola, ¿qué pasa? Bien. Entonces déjame cerrar esto. Bien. Y déjame correr esto otra vez. Déjame ver. Bien,
está funcionando bien. Probablemente la recarga
tardó un poco de tiempo. No sé por qué. Quizá
algún problema con mi sistema. Pero puedes ver que los
enlaces ya están por aquí. ¿Bien? No se ve
tan elegante, o. Pero por ahora, solo nos
centraremos en la funcionalidad. Bien, pronto vamos a bonito esto. Para que veas sobre,
irás a aproximadamente. Puede hacer clic en Contacto Inicio
y ver la URL también. La URL también está cambiando. Se puede ver que esto es todo
sin ningún tipo de recarga. ¿Bien? Esto es solo el
componente que se está recargando o componente que se está cargando
dependiendo de la URL en la que se encuentre, y este es el
concepto de mantener URL sincronizada con lo que
se va a mostrar ¿Bien? Para que puedas ver cómo está funcionando bien
esto. Ahora, vamos a embellecer esto un poco,
nosotros por supuesto, podemos mejorar la interfaz que
estás viendo por aquí Y para mejorar la interfaz, podemos hacer uso de
lo que podemos llamarla. Podemos hacer uso de tailwind CSS. ¿Bien? Ahora, ahora, CSS de viento cola
blanco, es fácil. Está basado en clases. Solo hay que hacer uso de unas cuantas clases de utilidad que obtenemos y un
poco de configuración. Así que ven a tailwindsss.com, busca Tailwind CSS,
y vendrás Haga clic en Comenzar.
Dirígete a la instalación. Entonces aquí, lo primero
es la instalación. Bien. Pero por casualidad, si
esto no se abre, puedes dar click en
Instalación aquí. ¿Bien? Ahora, vamos a
hacer uso de tailwind CLI o tailwind y
también voy a necesitar
post CSS junto con Autoprefixa post CSS junto Entonces esta es la
documentación para la misma. ¿Bien? Se recomienda
agregar los tres. Así que voy a empezar a
añadir estos comandos. Bien, entonces voy a borrar esto
y aquí voy a ver Bien, 1 segundo, déjame ver si estoy
en el directorio del proyecto. No estoy en el directorio de
proyectos, así que puedo decir enrutamiento, reaccionar, diré claro. Y aquí, voy a instalar esto. ¿Bien? Por lo que tardará un
tiempo en instalarse. Bien. En tanto,
vamos a venir aquí. Conseguiremos este mando
por aquí. Bien. Y voy a tomar esto y
voy a decir al final, voy a añadir guión P
por aquí. Bien. Y presionaré Enter, y verás que
se están creando dos archivos, que es tailwind config
y post CSS config ¿Bien? Ahora si vienes por aquí, puedes ver dos archivos. Tailwind CSS y
post CSS config. Ahora en tailwind config, necesitamos agregar un
poco de configuración, así que necesitamos agregar este contenido que se nos está proporcionando Entonces voy a agregar esto por aquí. ¿Bien? Significa que bajo SRC, viento de cola debe ser aplicable
a HTML JS y también a También tenemos algunos
archivos JSX. ¿Bien? Por lo que debería ser
aplicable allá. Voy a desplazarme hacia abajo,
y necesitas
agregar esto en el punto principal CSS. Me desplazaré hacia arriba. ¿Bien? Entonces
tengo este índice punto CSS, que se está cargando
en el punto principal CSS. Se puede ver índice punto CSS. ¿Bien? Así que he agregado
estas directivas o anotaciones en las directivas
tailwind básicamente en ese archivo CSS Bien. Y esto es todo. Creo que el viento de cola está
ahí para nosotros ahora. Bien, podemos hacer uso de ella. Entonces empecemos a
hacer uso de ella. Bien. También tengo
Italicens de viento de cola ¿Bien? Tailwind Si buscas
en el mercado de extensiones, verás este enchufe en
tailwind Por lo tanto, proporciona una buena
característica de autosuges para todas las
clases en Y es muy útil. Te recomiendo encarecidamente si
estás trabajando con tailwind ¿Bien? Ahora por aquí, lo que tenemos que hacer es que básicamente
voy a
tener tengo UI, lo siento, UL, tengo
NAV en la parte superior, voy a agregar
un TIF por aquí. Voy a decir
TIF. Bien. Y voy a decir por
aquí, nombre de la clase. Bien. Voy a agregar
algunas clases de viento de cola Entonces voy a decir
mínimo H pantalla por aquí y fondo de la de gris cien. ¿Bien?
Esto está hecho. Y voy a añadir este cierre
después así que esto debería cerrar. ¿Dónde debería cerrar? cerrar justo antes de la ruta. Bien. Sí, por aquí. Bien. Así que he agregado esto y
ahora lo que tenemos
que hacer es agregar algo de
CSS por aquí. Diré el nombre de la clase por aquí. Diré BG. Voy a mantener esto como
azul, azul de digamos 600. Esto se ve decente.
Bien, ya puede ver. También puedes comparar los
diferentes tonos de color del azul. Ya ves. 600,
800 son más oscuros, así que diré 600. ¿Bien? 600 se ve decente y
acolchado de cuatro por aquí. Bien. Y voy a seleccionar esto y vamos a ver cómo
se ve. Bien. Entonces el CSS no se
aplica por alguna razón. ¿Bien? Déjame ver
déjame reiniciar el servidor. Veamos si reiniciar es
lo que está causando esto. Bien, ahora se aplica. Porque hice muchos cambios de
configuración,
cambios y dependencias,
no estaba apareciendo, pero ahora está
apareciendo, ya ves, ¿bien? Eso es decente. Ahora
voy a venir aquí. Tengo algo de CSS por aquí. Ahora aquí a UL, voy a decir, vaya voy a decir clase, nombre de
clase, y voy a
decir nombre de clase de flex y justificaré centro Bien. Y podemos tener un espacio de X y
voy a decir seis tal vez. Bien, seis. Voy a ver esto. Veamos
cómo se ve esto. Se puede ver cómo se ve. Bien, se ve decente. Y ahora necesitamos
agregar algún tipo de CSS básicamente o algún tipo de clases por aquí a todos
los atributos de enlace. Entonces voy a llevar esto a nueva línea. Voy a añadir una pestaña. Esto
también en nueva línea, y voy a decir el
nombre de la clase por aquí. Bien. ¿Cuál es el
nombre de la clase? Diré texto. Bien, blanco. Bien,
necesito blanco por aquí. El texto debe ser blanco.
El negro no se ve bien. Oh, el texto debería
estar bien, amarillo. Y hay tantas
hojas amarillas, seleccionaré 300. Bien. Diré que la fuente es mediana. Tengamos la fuente como medio. Diré transición Bien. S por aquí y voy a
decir duración de 300. A ver si esto vamos a ver. Se puede ver cómo
está funcionando esto. Bien. ¿Puedes ver? Un poco de efecto. Lo
que puedo hacer ahora es simplemente copiar esta clase por
cada enlace que exista. ¿Bien? Entonces voy a copiar esto.
Voy a venir aquí. Simplemente volcaremos el
enlace por aquí. Bien. Voy a tocar. Bien. Uy. bien. Así que voy a sangrar esto y llevaré
esto a una nueva línea, ¿de acuerdo? Toca un par de veces. Bien. Y si, toca un par
de veces, y lo pegaré. Bien. Entonces esto debería
verse decente ahora. Se puede ver casa
acerca de en contacto. Bien, se ve demasiado grande porque estoy un
poco acercado ¿Bien? Puedes ver.Esta es la vista
real del sitio web ¿Bien? Pero estoy un poco acercado para
que sea fácil para ti ver si estás
en dispositivos más pequeños Normalmente, la gente
lo aprecia. Bien. Pero sí,
básicamente he agregado esto, ¿de acuerdo? Ahora puedo venir por aquí, y lo que puedo hacer son estas rutas
enteras por aquí. Puedo envolver esto por dentro en
TIF algo así,
esta tieso, cortaré esto
y lo agregaré por aquí. Bien. Así que he agregado todas
estas rutas en
esta rígida y esta rígida, puedo llamar a esto como nombre de clase, contenedor, Bien,
algo como esto, y puedo decir X auto. Vaya, auto por aquí y
Pi acolchando cinco a las ocho. Bien. Y si, esto es todo. Ahora lo que podemos hacer es
dejarnos diseñar
componentes individuales también. Entonces en estos momentos, acabamos de
estilizar el top Navbar. ¿Bien? Vamos a diseñar componentes
individuales. Entonces voy a venir.
Empezaré por casa por aquí. Bien. En su mayoría el estilo será similar para
todos los componentes. Bien, así que tenlo en mente.
Voy a deshacerme de esto. En primer lugar, voy a tener porque voy a escribir
múltiples líneas de código, y voy a
decir tabulación por aquí. Bien. Agreguemos este Dev
voy a añadir H dos por aquí. H dos es la página de inicio. Bien, algo como esto,
y voy a decir P tag por aquí. La etiqueta P es bienvenida
a la página principal. Bien. Y puedo decir Explora, decide aprender más,
algo así. Bien. Y ahora me dirijo a Dev y Div
voy a decir nombre de clase. Bien, voy a decir flex, flex, call, column, y voy a
decir items center. Bien. Entonces debería agregar esto o debería ser
Mantengamos esto como columna. Centro de artículos justifican centro. Algo así, y
voy a decir mínimo H pantalla. Entonces esta es la altura mínima
que estamos agregando, y puedo decir PG de gris 50. Bien. Veamos cómo se ve
esto para el hogar. ¿Bien? Aún no se agrega el fondo de
gris. Se agrega aquí en
la manada, ¿de acuerdo? Y déjame en realidad, ya sabes, déjame realmente, como, tomar esto así, tomarlo así, ¿de acuerdo? Para que pueda ver todo
lado a lado, bien. Entonces sí, esto es un par de
vistas por ahora desde hace algún tiempo, nos apegaremos a este
tipo de vista. Bien. Ahora para H dos, puedo presionar Enter. Veré el nombre de la clase.
Así. Bien, por aquí. Y por aquí, voy
a decir texto tres Excel, y fuente de negrita, luego texto de azul 600. Así. Se puede
ver esto cambiando. Y luego por esta cosa de
aquí, diré el nombre de la clase. Vaya, los niños se aplicaron. Uy. Entonces voy a cambiar esto voy a
agregar el nombre de la clase por aquí. Nombre de la clase Voy a
mantener el texto como gris. Bien. Mantengámonos grises de 700. Bien. Y margen superior de cuatro
y texto tan grande. Bien. Y se puede ver esta interfaz. Está acercado ahora mismo,
pero si te diriges por aquí, esto debería ser decente Bien. Se puede ver. Un poco
decente, ¿de acuerdo? No mucho, pero decente. Bien. Entonces esto
es algo que hemos agregado y se
puede replicar esto
en todos los componentes Entonces lo que voy a
hacer es que voy a conseguir esta etiqueta de retorno por aquí. Voy a ir a
A, y en aproximadamente, voy a agregar la misma etiqueta de
retorno por aquí. ¿Bien? Uy. Necesito
deshacerme de esto. Esto está hecho y por aquí, melocotón
casero, así que voy a
decir sobre durazno. Bien. Y voy a decir esta página, necesito agregar algo de
texto por aquí. Entonces voy a decir que esta página
proporciona información. Uy. Información sobre
nosotros y conocer más sobre nuestros
valores de máquina y así sucesivamente. Bien. Bien. duplicar esto y
agregarlo al contacto también. Así que voy a reemplazar
esto por aquí. ¿Bien? Para contacto,
esta es la página de contacto. Muy bien, contacto, y voy a decir por aquí. Voy a
deshacerme de esto. Diré que no dude
en comunicarse con nosotros a través de nuestro contacto, formulario o correo electrónico,
algo así. Bien. Y sí, nos encantaría saber algo así, ¿
de acuerdo? Entonces ahora aquí, si refrescas, puedes ver sobre contrato, y puedes ver lo dulce se
ve
nuestra pequeña aplicación, ya sabes, con pocos
cambios de configuración para CSS de viento de cola, usando pocas clases y agregando
una barra de navegación en la parte superior Bien. Entonces esto es Router
dom react Router, en acción, ¿de acuerdo? Y espero que esto te
esté dando una idea de cómo
se talan las aplicaciones web modernas, ¿de acuerdo? Te puedes imaginar, como si esto
crezca en tamaño, ya sabes, tienes alrededor de 20 o 30 partes de
ruta por aquí, y tienes algunos
enlaces en la parte superior. Incluso puede separar estos enlaces en un
componente separado llamado Navbar Puedes crear un
componente separado llamado Navbar, y puedes simplemente tomar este rígido completamente, todo esto, todo este pedazo de código, pedazo de código, desde NAV por
aquí hasta aquí, en un componente separado y simplemente renderizar la barra NAV
por aquí en la parte superior Eso es algo
que puedes hacer si el Navbar se vuelve complejo Pero por ahora, lo he
declarado aquí, pero todo se puede segregar
a la hora de reaccionar, y puedes modularizar tu
código de una manera increíble. Bien. Espero que esto te haya ayudado a
adquirir una nueva perspectiva y
espero que esto haya sido útil.
8. Organiza rutas como un profesional: domina el enrutamiento anidado: Ahora, comencemos a
hablar de rutas anidadas. Entonces aquí tenemos una página A, que se está
renderizando en Acerca de. Ahora, digamos que queremos
agregar una nueva página, que es la página del equipo, y queremos mostrar la
información sobre el equipo. Ahora bien, esta página de equipo está
lógicamente relacionada con A y debería ser yo quiero
que esté debajo de la URL, que está por aquí, si digo, la URL debería ser
slash Auth ¿Bien? Entonces quiero que el componente
del equipo venga aquí, ¿de acuerdo? Entonces, ¿qué voy a hacer en ese caso Voy a hacer uso de rutas
anidadas, ¿de acuerdo? Y lo voy a organizar de
tal manera que equipo es un equipo en realidad
es un subtema, básicamente, y nos permite. Lo que vamos a
hacer es que vamos a mantener juntas estas
rutas relacionadas, ¿de acuerdo? Y vamos a definir una relación
jerárquica. Bien. Así que slash About
renderizará la página Acerca y slash About slash El equipo
renderizará la página del equipo, y especificará los
detalles del ¿Bien? Y una de las
mejores cosas ruta
anidada es que puedes
hacer uso del código que se
ha definido en acerca componente dentro o en
esta página de equipo, ¿bien? Entonces, cuando renderizas
la página del equipo, también
puedes mostrar los
componentes o el código. Básicamente, eso se
define dentro de aproximadamente. Y déjenme
demostrarlo en cuanto a lo que quiero decir, porque existe una relación
jerárquica entre dos ya que
los estamos anidando, ¿bien Ya que el equipo está siendo
anidado dentro de aproximadamente, entonces hay una relación jerárquica Así que puedes reutilizar el diseño
acerca de los componentes, como cualquier tipo de
diseño como encabezado, barra lateral o cualquier tipo
de contenido compartido,
bien, en el
componente del equipo, ¿de acuerdo? Y déjame
mostrarte cómo funciona esto, ¿de acuerdo? Lo que voy a hacer
es primero lo primero, en realidad
me voy
a deshacer de esto. Déjame deshacerme de este
comentario de aquí. Y por aquí, tengo esto sobre y voy a quitar
el auto cierre. Bien, lo cerraré
por separado así. Bien. Y dentro de
esto dentro de esto, voy a agregar la
página del equipo, así. Diré equipo de slash. Bien.
Y voy a decir slash Team Ahora el equipo no
existe, claro, así que voy a obtener un error si
guardo este archivo. Pero lo que voy a hacer es
agregar una página de equipo. Diré equipo punto JSX. Bien. Ahora bien, ¿de qué
consiste la página del equipo? Ahora la página del equipo, necesitamos una página de equipo que sea
realmente, muy simple. Bien. Lo que voy a hacer es
simplemente obtener el diseño de la casa. Lo pegaré para que me guste el equipo. Voy a cambiar el nombre de esto a Equipo. Cambiar el nombre de esto a
Equipo, y voy a añadir algunos cambios de contenido como
esta es la página Equipo. Bien, o podemos decir que el
equipo conoce a nuestro equipo. Bien. Hagámoslo
un poco divertido, conozca a nuestro equipo,
algo así. Bien. Y aquí, ¿voy
a ver qué decimos? Podemos deshacernos de esto. Podemos decir que contamos con
un talentoso equipo de profesionales o
dedicados a nuestra misión. Bien, lo voy a mantener simple.
Bien, tenemos esto, y ahora voy a venir
aquí y conseguiré que equipo
T sea importado. Equipos importados. Ahora bien, ¿qué debería pasar idealmente? ¿Bien? Esto está anidado dentro de A, ¿verdad? Es una ruta anidada Entonces, si vamos a cortar
Acerca de slash Team, deberíamos ver al equipo
siendo ¿Bien? Eso no va a
pasar en realidad. Déjame
mostrarte eso. Bien, entonces estamos recibiendo algún
error por aquí. ¿Bien? Entonces déjame ver cuál es el error. Es así que
fui a inspeccionar por aquí en el navegador para ver el error, y se puede ver la ruta
absoluta para el equipo de
slash anidado bajo
path about no es válido ¿Bien? Y sé
por qué no es válido. Entonces aquí no se puede
tener slash hacia adelante. ¿Bien? Entonces me desharé de
esto y voy a salvar esto. En el momento en que guardo
esto, funciona bien. ¿Bien? Entonces esto está funcionando
bien sobre el hogar y el contacto. Ahora si voy a At y si
digo slash team por aquí,
Bien, puedes ver que el equipo no
está siendo renderizado, solo
se muestra la página acerca, ¿bien? Y hay una razón
para esto, ¿de acuerdo? Y la razón de
esto es que
no estamos haciendo uso de un componente de
salida. Ahora, ¿qué es el componente de salida? Ahora, el componente de salida es un marcador de posición para componentes
anidados, y debe hacer uso del componente de salida dentro
del componente padre Ahora, que es el componente
padre. En nuestro caso, el
componente padre es la página A. Entonces, dentro de la página At, necesitamos hacer uso del marcador de posición de
salida, ¿de acuerdo? Y esto es para decir esto es
decir reaccionar por aquí. Que cualquier tipo de componente
anidado si existe, lo renderiza por aquí ¿Bien? Entonces actúa
como un marcador de posición. Y déjame mostrarte cómo
puedes realmente hacer uso de ella. Entonces lo que vamos a
hacer es que vamos a venir aquí y dentro sobre, ya que este es un padre de familia, tenemos que hacer uso de él por aquí. ¿Bien? Justo antes del último TIF, antes de cerrar esto,
lo que voy a hacer es agregar un TF uno más Bien. Y lo estoy estilizando porque el resto de la página
se ve bien. ¿Bien? Entonces voy a
decir margen arriba de ocho y W completo por
aquí, ancho del 100%. Y voy a decir max Bien. Y digo cuatro Excel por aquí. Bien. Entonces este es Ancho Máx. Y luego por aquí, voy a decir outlet. Ahora, se puede ver
outlet. Tienes que importarlo del enrutador
React doom Se puede ver Bien. Y es auto cierre. Entonces lo cerraré. Y verás que esta entrada se
agrega en la parte superior. Bien. Ahora voy a guardar esto
y ahora si voy por aquí, se
puede ver conocer o equipo. ¿Bien? Esto se está renderizando. Se puede ver cómo se está
renderizando en la página A. Y si vas a disculparte,
no en la página Acerca de, sino en sobre el equipo de slash Ahora bien, si vas a sobre, ya
verás sobre, y si vas al equipo A slash, vas a ver
sobre y equipo Bien. Entonces A es padre
y equipo es el niño. Bien, hay una
relación jerárquica entre ellos. Y este es un concepto
de rutas anidadas, ¿de acuerdo? Y así es como se
puede hacer uso de ella. Y, por supuesto, esto
también es esto explica también
por qué se necesita outlet. ¿Bien? Es como un marcador de posición. Puedes ver aquí
en la documentación, renderiza la
raíz hijo coincidente de la raíz principal. O nada si ninguna raíz
hijo coincide. Entonces, si nada coincide, no
va a
renderizar nada. Pero si quieres que
algo
rinda o si hay algún tipo
de niño ahí, o del padre, va a renderizar eso. ¿Bien? Entonces espero que esto haya
sido útil y
espero que hayan
podido seguirlo. Apenas una pequeña actualización
antes de detener este video, lo que hice es por dentro. ¿Bien? Entonces antes, aquí no
había ningún enlace. Tenía que confiar únicamente en la URL. Entonces si vas a sobre he
agregado dos enlaces por aquí, equipo
R, de vuelta a casa. Entonces, si vas al equipo,
verás este discurso. De vuelta a casa,
volverás a casa. O también puedes tener de
vuelta a por aquí. Bien, entonces he agregado
esta navegación para que no
tengas que confiar en, ya
sabes, los VRL y en su lugar, puedes hacer clic por
aquí y navegar Y para eso, he añadido
este bloque dentro sobre. Bien, puedes ver
equipo y volver a casa con CSS simple, ¿bien? Y tuve que agregar enlace por aquí, como el enlace de
react router dom, bien, para agregar estos enlaces. ¿Bien? Entonces sí, esto es todo, y espero que esto haya sido útil.
9. ¡Ups! Página no encontrada: crea una página 404 personalizada: Ahora en nuestra aplicación, si navegamos a
diferentes rutas, estamos viendo
diferentes componentes, y básicamente,
habrá escenarios
en los que el usuario navegue a
una URL que no existe Por ejemplo, si
tecleo ABC por aquí, bien, esta URL ABC
no existe, pero no hay ningún tipo de feedback o mensaje que le esté dando
al usuario para que diga eso, Oye, esto no existe. Entonces básicamente, manejar esto se conoce como cuatro, no cuatro, ¿de acuerdo? Entonces puedes manejar pie cuatro errores en donde esto no
se encuentre, ¿verdad? Entonces necesitas mostrar
al usuario, ¿verdad? Pero ahora mismo por defecto, puedes ver que esto es lo que
está pasando si intentas acceder a algo que
no existe. Bien. Lo que
voy a hacer es primero voy a construir
una página de cuatro, no cuatro, y luego vamos a
manejar esto usando enrutamiento. Así que volvamos a nuestro código, voy a venir aquí. Voy a replicar cualquier
tipo de diseño por aquí. Bien. Y voy a renombrar
esto a componente NotFound, y voy a venir
aquí para no encontrado, y voy a decir que no se encuentra por
aquí, algo así Bien. Bien, no debería haber
replicado la página acerca de En realidad debería
replicar una página simple, que es la página principal Bien. Así que sólo voy a copiar
la declaración de retorno de esto y la
pegaré por aquí. Bien. Ahora en vez de homepage, voy a decir cuatro, no cuatro. Bien. Y por aquí,
voy a añadir un mensaje. Lo voy a mantener simple.
Puedo decir Ups Así. Bien.
Uy. La página que buscas
no existe, ¿de acuerdo? No existe,
algo así. ¿Bien? Ahora, lo que podemos
hacer es hacer uso de esta página
en particular en nuestra aplicación. ¿Bien? Entonces lo que voy a hacer, voy
a venir aquí. ¿Bien? Tenemos enrutamiento para
todas las piezas, ¿verdad? Ahora, quiero agregar enrutamiento para cualquier otra cosa
aparte de estas partes. Entonces cualquier cosa
aparte de esto debería ser redirigido a esta cuatro,
no a cuatro páginas, ¿verdad? ¿Cómo puedo definir
eso? Entonces voy a decir ruta por aquí. ¿Bien? Camino y voy a decir estrella. Bien. Y voy a
decir elemento es igual a. Bien. Y aquí, no se encuentra, así. Bien. Y voy a
cerrar esto, así. Bien. Y voy a cerrar esto
también. Bien. Ahora, si alguien visita
alguna otra página, puedes ver esto automáticamente
recargarla por aquí ¿Bien? Entonces phono
cuatro, ya puedes ver Vaya, la página que estás
buscando no existe. ¿Bien? Así que en realidad puedes
navegar a cualquier otra página, y si tecleas
algo más aparte de eso, cualquier otra cosa,
obtendrás la fuente cuatro. Por lo que se
cargaría el componente pie cuatro y se
mostraría al usuario. Entonces así es como puedes manejar los errores de
pie cuatro, ¿de acuerdo? Puedes mejorar esta interfaz a mucho mejor y algo que coincida con el tema de
tu organización. Pero espero que entiendas la funcionalidad en cuanto a cómo puedes construir esto. El objetivo de este video es enseñarte a construir
la funcionalidad. El descanso se puede cuidar, ya
sabes, los diseños pueden
seguir cambiando. Pero la funcionalidad es
algo importante, ¿de acuerdo? Entonces espero que esto haya sido útil y espero que
hayan podido seguirlo.
10. Conclusión del curso: Y eso nos lleva al final de este emocionante viaje hacia el mundo del ruteo con react. Hemos cubierto
muchos conceptos a
lo largo de este curso
en particular. Primero entendemos qué es
React Router, cómo
puedes configurarlo y también aprendimos cómo puedes crear
aplicaciones de varias páginas con React Implementar una
navegación intuitiva para una experiencia de usuario fluida. También hemos aprendido
cómo puede estructurar rutas
anidadas para mejorar la escalabilidad de
su aplicación
y cómo puede manejar errores y personalizados
para no para página Pero recuerda, el aprendizaje
no se detiene aquí el poder real de cualquier concepto en el
mundo de la programación como react Router radica en aplicar estos conceptos
a proyectos del mundo real. Por lo que definitivamente debes aplicar estos conceptos a
tus propios proyectos. Debes seguir explorando temas
avanzados, y debes seguir practicando lo que hayas aprendido porque eso
es realmente importante. Me encantaría ver el tipo
de proyectos que se te
ocurren y cómo haces
uso del router react. En tus proyectos. Por último, este curso
en particular tiene una sección de proyectos donde
encontrarás un proyecto de clase. Te animaría mucho a completar el proyecto de clase y compartir tu trabajo en la propia sección de
proyectos. Ahora, gracias por acompañarme
en este viaje en particular. Espero que este curso
te haya empoderado con las habilidades para crear una aplicación de
reacción amigable con la
navegación bien estructurada , seguir construyendo, seguir
explorando y feliz codificación.
Faisal Memon, Product | Engineer | Entrepreneur
