Cómo empezar con el enrutador de reacción | Sandra L | Skillshare

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Cómo empezar con el enrutador de reacción

teacher avatar Sandra L, Front Development

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Aplicación de arranque

      2:53

    • 2.

      Pila de navegación

      6:26

    • 3.

      Definir las rutas

      6:47

    • 4.

      Componente de contacto - Solución

      2:05

    • 5.

      react-router-dom

      9:07

    • 6.

      Acabado

      7:58

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

156

Estudiantes

1

Proyectos

Acerca de esta clase

React ofrece la solución perfecta para crear interfaces basadas en JavaScript, con una gran variedad de usos, que incluyen la creación de aplicaciones móviles nativas y aplicaciones web.

Esta clase te enseñará a crear componentes dinámicos de sitios web y aplicaciones en tiempo real con React.js.

=====

  1. Intro to React: Cómo empezar - ver
  2. Intro to React: Aprende los fundamentos - parte 1 - reloj
  3. Intro to React: Aprende los fundamentos - parte 2 - watch
  4. Construye un temporizador de cuenta atrás con React.js - watch
  5. Lista simple de todo con el uso de React y HTML5 Localstorage - watch
  6. React, Node.js - Construye un generador de citas con una API restante - watch
  7. Construye una aplicación meteorológica con React, Bootstrap y HTML5 LocalStorage - ver
  8. Aprende React Redux en menos de 1 hora - ver
  9. Cómo empezar con el enrutador de reacciones: ver
  10. Introducción a los ganchos de reacción - watch
  11. Construye una aplicación FullStack con MERN - Parte 1 - reloj
  12. Construye una aplicación FullStack con MERN - Parte 2 - reloj

===================================================

React es una biblioteca de Javascript, desarrollada en 2013 por Jordan Walke de Facebook. Encontrarás que React es muy popular (es la quinta biblioteca de JS más protagonizada en GitHub) y utilizada en sitios principales, como Facebook, Netflix y Khan Academy.

Te encantará la flexibilidad de usar React con tus tecnologías web favoritas (¡excepto jQuery!), y este camino te llevará desde los fundamentos hasta la creación de aplicaciones completas con un estilo personalizado. Con esta clase, aprenda la A-Z de React :

  • los conceptos básicos y los fundamentos con las clases de video de mordeduras de bocado. Desde simples a complejos, tutoriales y ejercicios te ayudarán a ponerte al día con los principales conceptos de desarrollo web con react.js
  • Comprensión de los componentes de reacción (componentes Components y estatales)
  • Escribir y mostrar datos con JSX
  • Networking con peticiones HTTP asincrónicas y API RESTFul
  • Mantener el estado de tu aplicación
  • Pasar datos dinámicos con objetos de apoyo
  • Ciclo de vida útil de componentes (componentDidMount, componentDidUpdate)
  • Comunicación entre componentes
  • Eventos y eventos vinculantes
  • Trabajar con State y HTML5 LocalStorage
  • Crear código mantenido con módulos JavaScript
  • Persistencia de datos con Redux
  • Enrutamiento con el Router de reacción 4
  • Aprovechando las nuevas funciones de ES6
  • Los ganchos de reacción (useState, useEffect)
  • + Mucho más

¿Qué construiremos juntos?

  • Una aplicación de página única y en tiempo real - contador de cuenta atrás - que indica cuántos días, horas y minutos quedan hasta este increíble evento que esperas.

  • El ejemplo clásico de Todo List para ponerte al día con los conceptos básicos y los conceptos principales en un corto período de tiempo

  • Una lista de verificación interactiva - desarrollada con la biblioteca de Bootstrap, iconos de Font Awesome y almacenamiento local HTML5

  • Un ejemplo de frente a frente con el de la espalda con MERN (MongoDB, Express.js, React.js y Node.js)

  • un widget del tiempo con la API de Restful openweathermap(dot)org

  • + Mucho más

¿A quiénes está dirigida esta clase?

  • Cualquiera que quiera aprender y desarrollar habilidades sólidas de frente.

  • Desarrolladores que desean crecer y afinar sus habilidades de javascript

Conoce a tu profesor(a)

Teacher Profile Image

Sandra L

Front Development

Profesor(a)

My name is Sandy. I am a freelance Front End Engineer based out of Toronto, in Ontario, Canada.

- Check out the latest Learning Path Series :

React.js - Front End & Fullstack - React 16.8 + 

Intro to React: Getting Started - watch Intro to React: Learn the fundamentals - part 1 - watch Intro to React: Learn the fundamentals - part 2 - watch Build a Countdown Timer with React.js - watch Simple Todo List with using React & HTML5 Localstorage - watch React, Node.js - Build a Quote Generator with a Restful API - watch Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch Learn React Redux in less than 1 hour - watch Getting Started with React Router - watch Introduction the React Hooks - ... Ver perfil completo

Habilidades relacionadas

Desarrollo Herramientas de desarrollo React
Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Aplicación de principiante: Entonces ahora vamos a ver cómo implementar el enrutamiento como una bruja navega entre páginas con reaccionar. Entonces esa no va a ser una sola aplicación de playa. Tendrá múltiples componentes, componentes, múltiples vistas manejadas por componentes. Entonces vamos a hacer es cambiar entre componentes. Y siempre que tengamos un coincidente seguro un euro que coincida con un camino que definamos, se va a mostrar de la representación visual fuera de un componente. Entonces veamos cómo configuramos esto. Entonces estoy proporcionando como recursos que estoy aportando, um pero Miriam de eso. De acuerdo, así que estoy desfilando con nuestras plantillas, así que como código calderico para que no necesites teclear desde cero. Entonces lo que tendremos en nuestra aplicación de página fundida es una página para el home home display Teoh . Tan solo una página de inicio básica. Ni siquiera recuerdo qué es exactamente, pero esto es como, simple podrías ver. Entonces tenemos la vista de contactos con el formulario y una sección sobre sobre sobre competente con algunos MIPs menores aleatorios indexados a representar sobre Paige uh, y luego algún estilo así en el CSS abduct. Entonces vamos a seguir adelante y crear en tu app, así que voy a asegurarme de Cindy a CD en las cosas de la cubierta. Y luego desde aquí, voy a crear reaccionar hacia arriba, y voy a llamar a este uno enrutamiento aplicación de casi dos páginas tal y como quieras. De acuerdo, entonces tendremos un nuevo proyecto instalado. Está siendo andamio lo. Está bien, Acordado. Y luego tomaremos éste y abriremos en visual. Podría estudio. Aquí tienes. Y por dentro. Por lo que veremos las plantillas básicas de inicio. Podemos poner en marcha la subida. Y cuando estemos listos, vamos a empezar a completar el arriba. Es decir, crear nuevos componentes. Eso van a ser los puntos de partida aquí hace. Entonces tienes este logo que algún texto y un enlace que dice aprender, reaccionar. Entonces se va a diferente. Por supuesto, lo que haremos es que te voy a invitar a descargar. Entonces si aún no lo has hecho, Así que esto es lo que debes descargar de los recursos sutiles esta carpeta mundial router con toda la capa calderilla que usará para crear una nueva página, los nuevos componentes. Y lo haremos. Um, justo hasta este video 2. Stack de navegación: por lo que, como se explicó antes. Por lo que estoy proporcionando código repetitivo que se utilizará para crear las vistas. Tendrá unas vistas para el hogar, Otra para la página de contacto, como un formulario y otra para la sección sobre. Pero antes de eso tendrá una portada donde tendremos una navegación en la parte superior, y esta navegación tendrá enlaces para permitir navegar una enorme otra. Entonces vamos a empezar con eso es vamos a ir a nuestros, um Abdel Jets. Entonces aquí es donde vamos a hacer algunos cambios. Uh, no vamos a quedarnos unas cuantas cosas, pero no vamos a quedarnos con todo. Entonces, en realidad, esto brota, todo eso puedes quitar, y en cambio, lo que tendremos es una lista en orden. De acuerdo, así que esto es para que simplemente se vaya porque es como, recargar. Entonces, por ahora, ya no tenemos nada. Pero en cambio, lo que tendremos es una lista de pedidos y listar elementos, y yo tributo para crear un enlace y dentro tendremos un ANC ataques para crear para habilitar la navegación. Entonces por ahora, solo va a ser esto no va a estar navegando, y tendré primero a casa. Y luego, al igual que el propósito es navegar de una playa otra Así tendremos casa y luego tendremos sobre y contactos. Está bien, vamos a ver. Aquí vamos. Tan muy básico por ahora. No hace nada porque no hemos puesto ningún enlace real. O sea, dirección para navegar a lo que va a hacer. Además, mayor estilo hará una rápida visita al get bootstrap que vienen. Um, va a ser más sencillo para el diseño. También de estos ejemplo de estas aplicaciones. Me gustaría usar los recursos bootstrap, así que usaremos el cdn más rápido. No necesitamos descargar las faltas. En cambio, vamos a buscar, um, lo que necesitemos de un euro remoto. Entonces vamos a copiar eso al portapapeles y luego volver a la ah, esta vez, esta vez, ir a la carpeta pública y encontrar el índice que HTML y derechos antes del título Vas a pegar esto. Ah, realmente no necesitamos los guiones. Simplemente vamos a mantener este estilo caga. El fin de semana de guiones va porque no vamos a estar haciendo esto. Estaremos inventando esto interactivo con cualquier jazz Plug de JavaScript usará el CSS solo para pres trump y vamos a usar uno. Um, una vez que se esta regla, que será un estilo no A, creo que recuerda y estilo una lista en línea. Bien. En realidad usaba ambos porque lo que me gustaría hacer es quitar el otro default menos un estilo que pero también para hacer lo menos en nueve. Entonces uno al lado del otro y no encima el uno del otro, porque por defecto y una etiqueta de luz es un bloque un ataque de bloque, lo que significa que va a ir a la siguiente línea. Queremos que estén uno al lado del otro. Entonces tengo una lista en línea creo que es aquí que te parece que no es tipografía aquí hace. Por lo que solo necesitas usar realmente estas clases a la lista de uno ordenado con el fin de hacer tu estancia en línea igual que este ejemplo de aquí. Entonces lo haremos hace un año en adelante. En realidad, voy a escribirlo porque asegúrate de escribir nombre de clase en lugar de clase, y se va a arrendar en la vida. Y creo que también quitó el defecto. El tipo menos predeterminado. Por lo que realmente no necesitamos precisar esto. Y justo en línea, Uh, una cosa puede no haber hecho aún y llegar a un especificado también. Entonces para nuestra clase, para cada menos artículo. Por lo que vamos a tomar esto y proporcionar con una clase fort cada ítem de la lista así con el fin tener estos resultados finales muy buenos. Y aquí hace, Así que tienes tu lista a la luz. Entonces eso es genial. Bueno, hacer también es agregar algunos, creo margen a la parte superior. Pero, ¿qué hará Quicker? Uh, vamos a revisar otra vez. Entonces esto algunos recursos que estoy brindando, ya ves que tienes estos CSS abducto. Podemos usar eso porque tienes algún estilo básico que estoy brindando. Creo que estoy agregando algún margen a la parte superior en algún momento. No estoy seguro, pero de todos modos, si no es el caso, sólo lo agregaremos. Ves margen tan bien en esto, estoy demostrando solo una utilidad. Entonces usamos eso. Entonces voy a copiar todo eso y reemplazar cualquier regla CSS que tenga en las plantillas de inicio fuera de la nueva aplicación y reemplazar, y eso va a proporcionar reglas CSS. Scilingo, por toda la sección sobre la que estamos a punto de crear, creo, para las páginas de contacto. Bueno, tal vez. O tal vez no. Pero solo por el cerca, OK, así que no tenemos que preocuparnos demasiado por salir a personalizar fuera de página y de inmediato se sumará este margen. Voy a agregarlo, en realidad. Aquí mismo, Sr. Eso es y deberíamos ver, como, Bien, aquí vamos. Entonces ahora tenemos un pequeño hueco. Es de sólo 30 pixeles 30 creo que no sólo 20. Podría tener fechas y hacer más grande para agregar más brecha. Está bien, genial. Entonces agregaremos más estilo Un punto, porque me gusta tener más espacio alrededor de los enlaces también, pero por ahora, solo trabajaremos con eso. Porque lo que quiero hacer es crear de inmediato unos nuevos componentes para cada enlace correspondiente. Por lo que tendremos una vista para el hogar. Otro para el alrededor y otro para el contacto. Tú. Entonces hagámoslo a continuación 3. Definir las rutas: Por lo que ahora dentro de sus aplicaciones. Entonces ve a la fuente, Boulder y creándote carpeta Components. Este incluirá todos los componentes. Estaba empezando con casa esquivadores y cuarto que estoy brindando con, um, algo básico, um, lo volé. Abrigo de calderas, agarrar toro de ella. Ahí vamos a importante. Reacciona de reacciones y avaricia en tu clase. Entonces clase a casa y vamos a extenderse desde reaccionar hasta crear acompañamiento También puedes, uh, cerrar algunos se extiende desde reacciona en Riyadh componente extiende componentes rojos Mi cama Eso es un extracto que palabra que no necesitamos También puedes importar directamente desde componentes Y justo medio de esto marcas cargadas y así en lugar de adentro recuerda que siempre necesitas métodos de Orender y dentro de render, vas a devolver el visual para los componentes del sol. Entonces vamos a abrir los textos caseros. Podemos abrirlo aquí y simplemente copiar y pegar este en retorno interior. Y no te olvides de exportar también tu clase y en realidad vamos a expertar así por defecto, como así y por dentro. Tendremos también estados para cada componente, y esto será solo información. Eso es por el título, el título, y vamos a leer en casa, ¿de acuerdo? Y siguiente. Ah, lo que voy a hacer es que me gusta uhm exhibir um, pero no sólo ahora. Entonces lo que haremos es usar un router para mostrar estos componentes uno de nuestros click en un nick. Pero por ahora, tendremos que hacer alguna configuración. No está terminado. No va a ser posible de inmediato exhibir a casa desde el ducado s a menos que hagamos algo así, uh, quiero decir, no va a ser navegación, pero lo que podemos hacer es importar casa desde casa en éste. Este componente está dentro. Los componentes especificarán la muerte exacta, y luego simplemente usarán, por ejemplo, uh, la tachuela personalizada y luego mostrarán inicio. Eso debería funcionar. Creo que pude haber ocurrido en el mar. Tengo una extractiva aquí cerrando Deve. Bueno, tal vez no defectuoso. De acuerdo, acuerdo, vamos a quitar eso. Va a ser Div. Y como, así de Oregon simplemente lo voy a poner aquí. Está bien. Está bien. Por lo que a casa. Cuando volvamos a la vista, verás que tendrás um Oh, volvamos a casa para corregir el error. Pero en lugar de tener un signo igual, va a ser aquí, Colon. Ya están hace. Quitémoslo. Ya tiene de vuelta. Y aquí se puede ver la página que corresponde a la vista para el hogar. Hagamos lo mismo por aproximadamente. Vamos a crear un nuevo componente para la sección sobre, y tenemos más. Tendremos más texto para el sobre, así que eso tendrá más sentido. Entonces diciendo que vamos a crear toda la plantilla para crear un nuevo componente. Y en lugar de tener otro hogar, se va a tratar. Y tú ibas a leer sobre y vamos a abrir el texto. Es decir, la plantilla que corresponde a la sobre confianza. Copia. Y vamos a reemplazar aquí y ahora de vuelta para secuestrar a GS. Vamos a importar también de estos componentes sobre componente y luego sobre, y haremos lo mismo. En realidad voy a reemplazar y reemplazar con sobre y voy a poder ver um, ser sobre plantilla para el sobre competente. Vamos a ver de qué falta, Vale, que algunos solo pienso en la tasa sobre aquí, puede que tenga un um extra te haga eso todo correcto. De acuerdo, probablemente estoy proporcionando un div extra aquí mismo. Vamos a subir. Tú otra vez. Vale, eso es extrasolar Solo hazlo o solo tenía que asegurarte de que no tienes nada dentro del padre que apoderarte. Oh, eso fue sólo un error de mi parte cuando estaba pegando o puede tener un extra, um, así que alguna vez fuiste el Ok, aquí voy. Margen justo aquí. Y Ok, ese es el X intentos justo aquí. De acuerdo, así que solo haré la corrección de todos modos, Así que cada vez que te den esta falta, tienes así la plantilla correcta, aquello que es el error. De acuerdo, así que me aseguraré de dar formato a esto muy bien. Y ya debería tener algún error. Y ahora tienes la página que corresponde a, um ¿Ves estos? Algunos sobre aquí mismo en lo que hacemos es aquí reemplazado porque estamos usando el del estado. Lo que vamos a hacer es hacer este título estatal para tener el título correcto para esta página, que es sobre Ok, entonces y entonces solo necesito hacer lo mismo también. Para el hogar. Sustituiré por esto establece este título estatal. Está bien, ahí está la unidad, uh, demasiado oscura para hacer, que es el contacto competente, cual te dejaré hacer como ejercicio. Entonces vamos a corregir así en el siguiente video juntos 4. Componente de contacto: solución: Entonces lo que les pedí que hicieran es crear los componentes que correspondan. Para, por supuesto, quiere Teoh la vista de contacto. Entonces vamos al router y abrimos este archivo de texto y vas a seguir adelante y ir a la competencia y crearte. Contacto Js Fall. Va a seguir exactamente el mismo formato para crear un nuevo componente aquí mismo, en lugar de tener cerca tendrá contacto. Y para el título, va a ser contacto también aquí mismo. Y vamos a reemplazar por lo que tengamos aquí, que es el contacto, y eso nos va a dar una bonita plantilla para un formulario. Y creo que no hay ninguna duda uh, abrigo. Eso es genial. Y aquí se reemplaza. Vamos a leer el título real fuera de esta página para esta página, este título estatal. Así que probemos esto para ver si eso funciona correctamente. En lugar de importar, vamos a importar primeros contactos, tener acceso a este componente y en lugar de tener aquí sobre, tendremos contacto. Y porque ya estamos usando esa correa este check out otra vez ya levantando bootstrapped. Tendré una bonita plantilla gracias a lo que golpeó aquí mismo. Está bien, genial. Pero el propósito aquí es poder navegar desde un futuro. Otro mediante el uso de estos enlaces, y esto es lo que haremos a continuación lo veremos, también. Cómo primero veremos cómo la instalación para la ruta del router React React y enlaces desde ruta directa Un tonto y veremos la edad de uso también. Entonces cómo definir el escribió los raps. ¿ Cómo encontraste el camino para lo correspondiente, competente y finalmente ayudó a navegar de un continente a otro? Hagámoslo a continuación. 5. react-router-dom: Entonces sigamos adelante e inculquemos una nueva dependencia. ¿ Ves eso en los paquetes? Y así siempre que tengas un proyecto de inicio, tienes estas dependencias en tu proyecto automáticamente. Entonces primero te reacciona. Eso se necesita para, um, a grande. Es decir, para construir un naufragado. ¿ Tienes las tiras de reaccionar tontas y directas, que es este guiones con el fin de empezar a construir sobre. En lo que va de momento. Por lo que este es el Esto corresponde a la línea de devenir limpia. Y ahora, en el Abda. Jess, lo que haremos es, um, en realidad, vamos a usar la consola, la consulta integrada. Voy a abrir una nueva terminal para que en realidad no necesitemos matar al servidor. Por lo que todavía va a estar funcionando en el anfitrión local 3000. Entonces ven que este es el anfitrión local Stalin. Entonces esto se está ejecutando en esto en el deporte. Lo que vamos a hacer es l abriendo en tu terminal, y voy a ejecutar tu propio anuncio, reacciona tonto router, y verás que está en tu paquete. Jason, tienes que conectar recibo ya que este es un edificio aquí, va a agregar una nueva dependencia justo dentro de dependencias. Ya verás. Reaccionar enrutado, um, y la versión para estas dependencia. Entonces eso está bien es ahora Tenemos acceso al reactor fuera de tonta. Por lo que cualquier cosa relacionada con la ruta de navegación enrutador enlaces extra está en un módulo separado con reaccionar. No está en el mismo modelo que reaccionar y reaccionar ante ellos. Por lo que necesitamos asegurarnos de instalar este por separado. Y ahora que tenemos este en los no módulos, echemos un vistazo a esto. Deberíamos poder encontrar en el o así toda la dependencia que necesitamos realmente crear. Um, el camino. Implementar el router. Aquí vamos. Reaccionar, enrutador y reaccionar los enrutó. Entonces esto es lo que necesitamos. De acuerdo, entonces volvamos a la Abda, Jess. Ahora, lo que haremos es importar desde este nuevo módulo que tenemos instalado, y vamos a asegurarnos de terminar para especificar el router del navegador como corredor, y este pozo nos dará acceso al historial. Entonces cuando navega a un camino y necesitas volver atrás, va a ser manejado por el navegador Roeder porque va a hacer un seguimiento del historial navegación. Después tendremos rutas para definir las rutas y el camino y el pozo de Milliken, por lo que los enlaces serán el equivalente a un ataque ANC de cada vez que necesites crear un enlace con Roger. Con el enlace, vas a especificar una ruta a la que navegar. Y ahora vamos a importar de reaccionar Router Rotterdam. Exactamente. Entonces lo que hay que hacer ahora es definir las rutas y será eso aquí mismo. Por lo que este será el primer paso. Por lo que cada envoltura será para la incorruptibilidad especificar un camino. Y para éste, en realidad, voy a empezar especificando de los componentes y tú entenderás. Por lo que este será para casa 1er 1 y para el hogar básicamente tendrá la ruta pasada , lo que significa que no vamos a especificar ningún punto final. Van a ser las raíces. O sea, el euro principal para un 2do 1 vamos a especificar una ruta para el alrededor, tienes tú y es una semana no son bien corresponden al alrededor. Verás que esto en realidad está resaltado. Esto corresponde a los componentes sobre. Por lo que para cualquier enlace de rutas correspondiente a esta ruta que definimos como sobre así serán los puntos finales sobre los cuales se especificarán las navegaciones al componente sobre. Hagamos lo mismo para los contactos, y ese será el contacto de punto final. Precisamos que queremos exhibir la empresa y,por supuesto, por supuesto, debe ponerse en contacto con el área. Entonces estas son nuestras rutas, y absolutamente necesitamos envolver las rutas y esto se utilizará como interruptor. Se podría entender. Por lo que router. Por lo que este será el rapero para todas las rutas. Así que asegúrate de encapsular todo eso, um , dentro del router, y éste funcionará como un switch. Por lo que dentro de la carretera o se define el camino. Y cuando selecciones del hogar, um, por ahora es solo la ruta, pero vamos a definir los enlaces después de eso. Pero cuando seleccionas un enlace que corresponda al camino así, la ruta pasada va a cambiar al pacto del hogar. Y cuando seleccionas un enlace que coincida con esto sobre endpoints, va a cambiar a la empresa sobre. Entonces eso no es todo. Cuando miras la vista, um, tengo un tipo de aquí. Cuando miras la vista no cambia nada por ahora, tienes lo mismo Pero lo que queremos es definir el lince, el lince, que serán esos. Entonces, por ahora, sólo tenemos algo estático. ¿ Cuándo tuviste enlaces dinámicos? Entonces vamos a armar esto aquí mismo en lugar de tener enlaces como así vamos a definir dentro. El y yo íbamos a sustituir los ataques del ANC por enlaces. Voy a poner eso afuera por ahora. Va a ser este enlace, y se pone su tiene. Cada enlace tiene una propiedad que es hacia y dentro de los dos como valor, vas a pasar el camino real al que quieres navegar aquí y luego dentro. Se especifica el texto para este enlace. Entonces voy a reemplazar todo esto con vamos a copiar, vamos a entrar X y luego ritmo para reemplazar el ataque del ANC. Vas a reemplazar por este enlace y hagamos lo mismo por los demás. Entonces casa primero y luego siguiente va a ser sobre así para el sobre lo que especificas es el sobre ruta y reemplazado por el nombre y contacto correspondiente para el último área de contacto . Entonces, cada vez que selecciones un enlace, verás que va a seleccionar. Se va a ver si un camino coincide con el año de enlace, el camino de especificado aquí mismo, para luego mostrar la confianza correspondiente. Por lo que para poder energizar hacer que funcione, tendremos que envolver. Ya veremos que obtendrás un error. De todos modos, uh, este Lincoln estaría fuera del router. Vamos a necesitar mover este router uno. Vamos a necesitar subir esto para incluir todo eso. Por lo que como se especifica antes funciona como interruptor. Por lo que necesitamos tener todo eso encapsular los enlaces y las rutas correspondientes que definimos a continuación, así. Y vemos que cuando cambiamos de una a otra y tenemos la página correspondiente. Entonces vamos a necesitar hacer algunos cambios para el hogar. Um, creo, pero para el hogar. De acuerdo, así que tenemos esto. Esto parece ser duplicados. Lo que hará también es especificar tan exacta esta palabra clave. Entonces sabemos que para las raíces, bomba en las raíces cuando quiero decir son las raíces de tus proyectos. Esta será la primera entrada, como la página principal fuera de tu aplicación. Entonces lo que corresponda a estas Beth, que es el camino raíz va a mostrar la página principal, El hogar confiado, Tiny. A ver. Ahí es cuando selecciono casa aquí mismo sobre contacto. Y ves que el euro está cambiando. Si lo hago al respecto va a mostrar sobre OK, así que eso funciona bien. Entonces acabamos de habilitar la navegación mediante el uso de reaccionar a enrutado, Um , en esto arriba Ah, budismo re factoring Lo que me gustaría es tener los enlaces en una sección separada justo aquí. Entonces lo haremos a continuación. Básicamente, en realidad podría explicarte esto y dejarte hacerlo como ejercicio. Lo que solía tener, um, para reducir, optimizar el código, hacerlo podría hacerlo más modular al tener su separada esta sección y también evita, ah, repetir. Ves que esto es similar. Por lo que tienes tres veces las mismas etiquetas aliadas, así que intenta permitir la reutilización para hacer algo bueno, que es reutilizable. Podrías tener un enlace separado. Me refiero a otro y yo componente. Entonces hagámoslo a continuación 6. Acabado: así como ejercicio y solo para que no sólo entienda mejor reaccione redondeada, sino también para entender el propósito del reactor que es utilizar para implementar y utilizar componentes reutilizables . lo haremos a continuación. En primer lugar. A mí me gustaría conseguir toda esta parte en unos componentes separados, competentes, competentes, apátridas en el mismo otoño. Simplemente está bien. Lo que haremos es aquí crear una nueva confianza apátrida y luego devolverle toda su y ya verás que por ahora no tendremos ningún cambio. Entonces si voy a revisar para no tener ningún enlace, pero volvamos y lo que vamos a hacer es entonces referirnos a tener y lo recuperaremos. Aquí vamos. Entonces tenemos tiempo en la navegación contigo. Entonces aquí el propósito es hacer que el código sea reutilizable. Y vamos a tener otro aquí que llame, no enlace, porque va a entrar en conflicto aquí mismo con este Algunos. Pero podríamos llamarlo efectivo. Sí, podríamos volver a llamarlo. Como usted desee. En realidad, podríamos pasar colega, y aquí va a devolver este tipo fuera, um, um, plantillas es sólo una mentira, y en lugar de tener esto no se va a estudiar abrigo. Es que tendremos primero, una constante. Vamos a definir nuestros enlaces. Empecemos con eso vamos a hacer, encontrar todos los enlaces y como enlaces lo que tenemos su primer hogar. Entonces tenemos como ahora. Entonces tenemos contacto. Y básicamente, lo que haremos es, um, muy sencillo. Vamos a mapear. Vamos a redirigir sobre cada objeto, sólo tres cada objeto que tenemos en esa tasa y luego volver a aplicar el mismo tiempo de assman como tenemos objetando que array re use la misma confianza que será camino aquí. Entonces vamos a mantener justo aquí la lista de energía. Y bueno, lo que haré en realidad es poner todas esas minúsculas. Te explicaré después de que sólo va a ser minúscula para empezar. Y entonces íbamos a usar el camino y siempre empezar con una vida. Y ahora vamos paso a paso, y yo y luego, uh, apellido exactamente lo mismo que aquí. Ese soy yo. Copiarlo. Pero antes de eso, vamos a necesitar usar mapas, ¿recuerdas? Va a ser así que va a ser mapa de enlaces. Y por cada objeto que tengamos en esos enlaces, vamos a tener una variable local, que somos que vamos a nombrar Link, y esto va a ir esperar y adentro justo aquí. Entonces vamos a usar link. Entonces voy a capitalizar. Se va a capitalizar a minúscula a mayúscula puede usar Capitalizar de las tiras de Jena . Ahí vas. Deberían funcionar. Y para mejor, lo que haremos es usar primero para poder combinar simplemente comer. Entonces, primer texto medio. Entonces, um usado, empleado, empleado, encuadernación. Entonces voy a pasar enlace dentro de las llaves con curvas, como así precedido por este signo de dólar. Y la cosa es tendremos que especificar que para el enlace en el caso, esto es igual a casa. Ya veremos eso a continuación. Cuando sólo iba a ver si esto está funcionando de todos modos, tenemos suficiente y nos recuperamos. Capitalizar para el vamos a ver si eso funciona. Se espera en una vid 15. Vamos a necesitar hacer volver aquí porque no devuelve nada. Entonces no entiende ¿Cuándo regresaste? Entonces veamos cómo se ve eso. No parece funcionar. ¿ Qué va a hacer. Bueno, ¿sabes cómo vamos a ir a casa y por aquí? Entonces va a ser que vamos a cuarto de hielo capitalino. Y esta vez aquí lamenta lo nuestro. Lo único es, ¿qué harías, eh, es que esto está funcionando bien. No parece molestar, pero prefiero tener un enlace en punto final con la minúscula. Entonces lo que podrías hacer es aquí, ¿verdad? ¿ Podría usted a minúsculas? En realidad, vamos a hacer los formatos aquí mismo en esta ubicación. Entonces en lugar de tener el tope más tarde, cada vez que cambies de un camino a otro, va a ser minúscula. ¿ De acuerdo? El hogar no parece funcionar. Es porque no tenemos camino para casa. Ya ves que no tenemos. No hemos especificado ningún punto final con esto. Fascinante. En realidad es la ruta que necesitamos porque cada vez que tienes las raíces tienes esto es lo que necesitamos. Entonces lo que vamos a hacer, va a ser muy sencillo. Podemos hacer algo así como primero aquí debido a chequear. En primer lugar, podemos comprobar si el enlace es igual. Teoh casa. Muy sencillo. Vamos a revisar tu físico a casa, y luego si es el caso, vamos a devolver Nada. De lo contrario, eso se devuelve, Link. Está bien. Y ahora solo necesitas un camino así y podemos seguir. La fuga es solo para el camino que necesitamos hacer eso porque para el camino necesitamos algo que es corresponde al camino especificado. Vale, vale, así que hagámoslo en casa. Ahora. Tenemos casa que tenemos sobre casa, y esto está funcionando muy bien. Está bien, Perfecto. Siguiente para el resto del ejercicio porque realmente queremos usar un componente reutilizable. Tomemos todo eso. Y debido a que estos son los formatos finales que esperamos, tomemos todo eso y usemos ahora el camino. Y para este camino, quiero decir, este nuevo baño de empresa, va a ser como Así queremos Teoh pase apoyos como Niños porque necesitamos Teoh, uh, uh, usó el linchamiento. Entonces vamos a hacer eso de esta manera. Encuadernación patrimonial y lo que corresponda a la lógica de este pasado, lo vamos a tomar y sumar al camino porque eso es más alérgico ponerlo aquí y ahora, creo que todos estamos bien. Estamos todos configurados. Tenemos unos componentes reutilizables y creo que no está definido. Um, tenemos que especificarlo aquí mismo, que será el puntal que pasemos de niño aquí mismo. Está bien. Y solo un rápido le gusta Centex Eyre, como aquí. Va a ser en cambio pasado como esto. De acuerdo, así que ahora, en lugar de tener, um, llevaste a casa hace y esto está funcionando bien.