Empezando con React Router 4: Crear una aplicación de una sola página

1. Introducción: Oigan, chicos, bienvenidos a mi clase. Conseguir una estrella, Reaccionaría. Sequía. Por lo tanto, mi nombre es Esteban Herrera. He estado desarrollando aplicaciones desde hace más de 10 años desde el uso de JavaScript simple hasta la biblioteca de algunos marcos como una consulta, angular y reaccionar en particular. No tengo reaccionar. Y este paradigma para desarrollar aplicaciones Web en esta clase, sabes cómo crear una sola aplicación de presión reaccionaría y reaccionaría. Router. Las aplicaciones de una sola página son con aplicaciones que no necesitan una repostería completa cuando su contenido cambia, como el correo electrónico o Twitter. Esta clase es para principiantes. Sólo necesitas saber, saliente de Audrey en las obras y cómo crear un reaccionar hasta alcoba o cosas como ¿qué son aplicaciones de una sola página? El concepto de un más bien ayudó a configurar reaccionar más bien los componentes esenciales fuera de esta biblioteca. Cómo crear páginas a partir de reaccionar componentes anidados ruta sobre cómo construir rutas con Europa, parámetros. entonces de esta clase, tendrás el conocimiento para crear aplicaciones sencillas de reacción de una sola página con reaccionar Router. Esto se mata es importante porque por un lado, las aplicaciones de un solo lugar proporcionan una mejor experiencia de usuario Por otro lado, son más fáciles de implementar y mantener que una aplicación Web tradicional. Entonces empecemos 2. ¿Qué son las aplicaciones de una página?: Las aplicaciones de un solo lugar son aplicaciones gráficas que cargan dinámicamente su contenido en una sola página en lugar de redirigir el dedo del pie del usuario. Otras páginas de forma tradicional aplicación. Al hacer clic en un botón o enlace, el navegador se pone en contacto con el servidor y carga toda una página nueva, aunque sólo cambie una pequeña parte del ritmo, lo que da un sentido de interrupción apagado, sobre todo si la nueva página lleva algún tiempo al amor. Por otro lado, una aplicación de un solo lugar solo recarga la sección del ritmo que va a cambiar. La aplicación sigue en contacto con el servidor cuando el usuario solicita algo, pero esto se hace en segundo plano, usando Ajax en el servidor en lugar de regresar. HTML. Kot, que representa un ritmo, devuelve respuesta adyacente. Apenas los datos que necesita la APP. Tampoco es un buen ejemplo. Off this type off application. Al hacer clic en él, sólo la información de los tweets se obtiene del servidor. El paciente no re completamente el amor. Las ventajas son que estas aplicaciones son más receptivas. La experiencia del usuario es más fluida. Puedes tener indicadores de carga para que los usuarios sepan que la aplicación está haciendo algo, y si la diseñas correctamente. La aplicación puede manejar la mayor parte del procesamiento en el cliente para reducir el número de solicitudes al servidor, lo que podría evitar errores de red y mejorar el rendimiento. Otra ventaja es que la mayoría de las veces estas aplicaciones son justo cuando un archivo vaporizador , buen CSS y JavaScript bond lo hace. Esto los hace más fáciles de implementar porque se pueden cargar a cualquier servidor de contenido estético . Por supuesto, la aplicación necesitará un back in para obtener sus datos, pero eso puede ser una compilación de aplicación separada con una tecnología completamente diferente que probablemente recitará en otro servidor, lo que mejora mantener capacidad. No obstante, también hay algunas desventajas en una aplicación de un solo lugar. La mayoría de las veces, todo el coath necesario sobre los recursos siempre arbolan al principio en la carga base inicial. Entonces si el dedo gordo arriba de un tamaño significativo, estos odio inicial será un motor de búsqueda lento. Optimización S CEO podría ser complicado porque solo hay una página y la aplicación se construye dinámicamente, por lo que los barcos de búsqueda pueden no chica viejo de tu lado o ejecutar el crecimiento de JavaScript de una manera similar . Las herramientas analíticas pueden no realizar un seguimiento correcto de las vistas de página, ya que bueno, las aplicaciones de presión única realmente no contienen páginas. Otra desventaja es que estas aplicaciones pueden llegar a ser complejas fácilmente, por lo que requerían ser mejor diseñadas que las aplicaciones tradicionales. Remolcar, evitar fugas de memoria, problemas de seguridad u otro tipo de problemas. Una de ellas, en particular, es la historia del navegador. Dado que la aplicación está contenida en una sola página, no puede confiar en los botones de avance y retroceso de los navegadores. Por esta razón, algo que puede cambiar el Ural para empujar o reemplazar tus eventos de historia oral en el navegador, acuerdo con el patrimonio de la Aplicación, tampoco está en ninguno de los dos. Por ejemplo, observe cómo van los cambios Ural. Se hace clic en un tweet y cómo se genera una entrada de historial. Este es el trabajo fuera de nuestro después A. Más bien permite que tu aplicación navegue entre diferentes componentes cambiando el euro del navegador, modificando el historial del navegador y manteniendo el estado U. S en pensamiento React es un popular biblioteca para la construcción de aplicaciones de base única. No obstante, como React se centra únicamente en la construcción de interfaces de usuario, no tiene una solución integrada para el enrutamiento. Reactor Router es la biblioteca de enrutamiento más popular para reaccionar. Hablemos de reactor después en la siguiente lección 3. React Router: algunas personas piensan reaccionar. Router es parte de la cancha off React Day. Sí, pero en realidad es un código abierto. Estimado Party Lavery desarrolló un mantener por entrenamiento reaccionar. Además, el router REAC se divide en tres paquetes. Web, nativa y core. No obstante, casi nunca tendrás que trabajar directamente con el paquete core porque solo proporciona los componentes centrales de reaccionar. Router. Si estás trabajando con una aplicación Web, debes usar React. Rafter Gwen. Y si estás construyendo una aplicación móvil, reaccionaría. Nativo. Deberías usar reaccionar alrededor de su nativo. En cualquier caso, estos paquetes instalarán reaccionar Rotor Core s una dependencia en este curso. Todos se enfocan en reaccionar Router Web. No muchas cosas también se aplicarán para reaccionar. Router Native Reactor out Nuestros trabajos con un modelo llamado Enrutamiento dinámico donde se declara ruta a lo largo de la aplicación en el lugar en que se utilizan. Esto es diferente. Ese enrutamiento estático. Toma este código, por ejemplo, donde tienes que declarar las rutas fuera de tu aplicación de front aspire de tus tareas de inicialización up antes de que nada se renderice de esta manera, nosotros enrutamiento dinámico reaccionamos ruta o maneja enrutamiento en el lado del cliente de la aplicación. El servidor manejará la ruta inicial para atender a la aplicación de reaccionar. Pero después de que eso vuelva a ocurrir, Outer va a estar escuchando la ruta solicitada por el usuario para atender a los componentes de Riad asociados a esos reactor de ruta fuera o no reconoce una ruta determinada. El pedido se pasará a través del servidor, y si puede manejarlo, el servidor respondería con una página completamente nueva, lo cual es útil para funcionalidades como iniciar sesión y cerrar sesión. Muy bien ahora, vamos a configurar una aplicación de reaccionar e instalar el router React. 4. Configuración de la aplicación React: Está bien, vamos a crear una aplicación de reaccionar Voy a usar Crear Reaccionar arriba Si no has usado esta herramienta No te preocupes mientras no tengas día Sí, y mpm instalado No necesitas este dólar confundir ni nada más. Voy a asumir que ya tienes instaladas estas herramientas. Sólo asegúrate de tener al menos no estallido en seis Puedes correr al norte ¿Esto irrumpe? No sabes a qué persona tienes instalada y también necesitas la última versión fuera de MPM porque a veces las cosas no hacen gárgaras No tienes un reciente estallido en puedes ejecutar MPM hace esta persona para saber buen estallido tienes instalado O si solo vas a hacer seguro tener la más reciente puedes ejecutar mpm Isdell npm deskee on mpm se actualizará siguiente Ejecutar el siguiente comando mpm x crear que Reacciona que arriba mi escritorio reacciona ese rotor que arriba. MPM X es una herramienta que permite ejecutar, no paquetes aunque los paquetes no estén instalados localmente. Está bien. Mi reaccionar escribió un rap es el nombre del up de esta manera y directorio con este nombre se creará Great Now voy a ver el en estos directorio. Y como esta es una gran aplicación, todavía voy a reaccionar bastante tonto con MP y Mr Eso es el rotor reaccionar seguro Dumb. En este punto, se puede ejecutar inicio MPM en una ventana del navegador se abrirá en host local para 3000. Verás algo como esto. De acuerdo, voy a subir en el proyecto en un editor. Estoy usando corchetes, pero puedes usar cualquier editor que uno en el archivo público es último punto índice html después del bootstrap C. archivo bootstrap C. S s. Eso me ayudará un estilo, la aplicación. Entonces seguiré adelante y reemplazaré el contenido off app El CSS con mi propio costo azulejos honestos sobre el contenido fuera de la cárcel? Sí también. Al guardar un archivo, los cambios se vuelven a cargar automáticamente. No necesitas una cosa sobre Rex acute mpm mr. Para verlas No te preocupes por los estilos. Instructor de la aplicación en este punto, puedes instalar tu aplicación en cualquier persona que quieras y podrás encontrar todo el crecimiento de la fuente fuera del proyecto en este get off repositorio. El enlace está en la descripción de la clase. Para cada lección hay una sucursal va, puedes echar un vistazo a Dickov fuera de las revisiones de aplicación en esa lección. Ahora estamos listos para usar el router de reaccionar. Pero antes de eso, déjame decirte que el router reaccionar se basa en tres componentes. Más bien el rotor que mantiene el tú. Es decir, piensa con el enlace de chica, un enlace de siesta que renderiza un enlace de navegación en ruta que renderiza un componente U I. dependiendo de la niña. En la siguiente lección, sabes cómo integrar rutas a la aplicación con el componente router. 5. El componente del router: mayoría de las veces, no tengo que usar directamente el componente escritor. Utilizarás una de sus implementaciones en una aplicación Web. Tienes dos opciones. Browser Router, que utiliza el historial de cinco HTML, A B I y Cash Router, que utiliza un carácter hash para establecer la parte de anclaje fuera de un euro y se puede acceder con un hash de punto de ubicación de punto de ventana correctamente. Si vas a apuntar a navegadores más antiguos que no soportan los cinco HTML, su historia a p A. Usualmente el uso tiene más bien que crea euros con estos primeros. De lo contrario, se puede utilizar el router del navegador, que crea euros sin el hash. Usaré rotor del navegador en estas aplicación demo, por lo que en llagas, es último índice el día. Sí, voy a importarlo desde React Rotterdam y usarlo para agarrar el componente APP. Es importante mencionar que nuestro componente externo solo puede tener un elemento secundario. Por ejemplo, si agrego otro elemento cuando guardo el archivo, la aplicación arrojará la foto por error. El mensaje son otros pueden tener sólo un elemento hijo. De acuerdo, voy a eliminar este elemento extra. Como puede ver, este componente no tiene ningún efecto en la U. I. El I. Golfo principal de un router es crear un objeto de historial para realizar un seguimiento del Ural, la ubicación cuando la ubicación cambia el componente secundario fuera del rotor. En este caso, arriba Israel Orender. La mayoría de las veces se utiliza un componente de enlace para cambiar la ubicación. Hablemos de enlaces en la siguiente lección. 6. Los componentes Enlace y NavLink: reactor por ahí proporciona el enlace suficientes componentes de enlace para renderizar longitud que puede usar para navegar por su aplicación. El componente link, excepto que atribuyen a eso toma s string que representa la ubicación a navegar. Y también puedes preguntar parámetros de Europa. Pero ¿prefieres también puedes pasar un objeto con las propiedades, pero nombra la ruta para enlazar a Lo sentimos. Una cadena que representa los parámetros de consulta tiene un hash el arranque en el euro en el estado en el objeto que representa el estado, el persiste a la ubicación. Otro atributo importante se reemplaza cuando se establece en true, la ubicación fuera del componente link reemplazará la entrada actual en el historial del navegador lugar de agregar una nueva. Por otro lado, naff Link es una versión especial fuera del componente de la extremidad que en los atributos declarantes de Sonny, los cuales son útiles para los menús de navegación. Por ejemplo, Duerson atributo de nombre de clase activa que quita el nombre de una clase CSS que se agregará a las clases CSS cuando el elemento esté activo. En otras guerras, cuando la ubicación fuera del enlace mucho es la actual Ural, el nombre de cristal del teléfono está activo o puedes usar al activista que voy a atribuir para pasar un estilo de todavía con el mismo propósito. Otros dos atributos importantes son exactos en un ir estricto. Exact se establece en true. La clase o estilo activo será sólo se aplica si la ubicación es mucho exactamente, y un distrito se establece en true. El tres Leanness slash off a localizaciones, pero el nombre se tomará en consideración a la hora de determinar si la ubicación coincide. El Ural actual merece los atributos más importantes off link y ningún link, pero puedes saber más sobre ellos en el router Documentation off React. Muy bien ahora, vamos a crear una navegación. Muchos en fuente recortan dudoso. Sí, seguiré adelante y reemplazaré estos elementos de anclaje por un componente de enlace. Tendré dos enlaces más. 14 sobre base y otra para una usurpación. Además, no olvidemos importante el componente link en la parte superior del archivo. Ahora en el navegador, verás algo como esto. Si inspeccionas el código HTML, verás que el componente lean solo genera un elemento de anclaje. No obstante, esos se encuentran en elementos de anclaje regulares. Cambiaron el Ural sin refrescar la base. Si tienes un regular un elemento al Goethe. El paciente será plenamente Reno. Eso así recuerda que el componente lean no representa ahora un elemento de anclaje regular. No es que no pasa nada cuando se hace clic en un enlace en la siguiente lección. Junor Cómo ejecutar su algo con el componente ruta. 7. El componente de la ruta: el componente off the road es renderizar algo cuando la ubicación mucho solo un camino que puedes definir. Gladys renderiza mediante el uso de una de las siguientes propiedades fuera del componente carretera con la propiedad componente. Hace que un componente vaya. El lugar coincide. El spot vial te haría pasar una función que devuelve el elemento o componente a renderizar niños enojados. También pasa una función que devuelve los elementos o componente a renderizar. La diferencia es que el elemento de retorno se renderiza sin madre si el camino es coincidente o no . Cada una es útil en diferentes situaciones, pero sólo se puede utilizar una de estas propiedades en una ruta determinada. Componente en esta lección son para que tengas que usar el componente correctamente. Además, al usar la propiedad PATH, especificas a cualquiera que seas malo de esta manera. Se crea un nuevo componente usando reaccionar que crean elemento. Esto significa que en cada render, crea un nuevo componente. En lugar de simplemente actualizar uno existente, el camino puede definir por los rebeldes, y puede ser una expresión regular. REAC Rotor utiliza el camino de la biblioteca para rechazar el estallido 1.7. Para perseguir estas expresiones, incluso hay una herramienta que te permite ingresar a una ruta, y te mostrará la expresión regular para esa ruta, y también puedes ingresar una ruta para ver si coincide con la ruta. Es muy útil volver al componente vial. También toma un exacto correctamente que pasó por el componente. Goldberg se rinde sólo si el mal coincide exactamente con un aparte estricto que tiene una locura última sólo coincidirá con una ubicación con un trailing esta última. Si la propiedad es verdadera y, por último, cuando el sensible correctamente es cierto, hará que el coincidente sea sensible a mayúsculas y minúsculas. De acuerdo, Ahora mismo, en nuestra aplicación, el euro cambia cuando se hace clic en un enlace. Pero no la u I. Arreglemos eso. Voy a crear un directorio de componentes y dentro de él tres componentes, uno para cada ruta. En primer lugar el componente domiciliario para la ruta principal. En este punto, cada componente solo mostrará un mensaje. Entonces tienes sed de la ruta slash usuarios Finalmente estoy a punto de la carretera. Se recorta alrededor de ahora dedo del pie. Especificar el Ural que corresponde a cada componente en fuente slash el día. Sí, utilicé algunos componentes de carretera dentro del elemento dif con el componente principal de clase CSS. Estos componentes de rutas se pueden colocar en cualquier lugar dentro del router Rotor Broza en este caso y el componente asociado se renderiza en ese lugar. Ahora lo único que tengo que hacer es importar todos estos componentes y su componente de ruta también . Y en el navegador podemos ver la U I está actualizada. Muestra el componente del hogar. No obstante, mira lo que pasa cuando voy a la otra ruta. Por culpa, las carreteras son inclusivas. Más de un componente de sequía puede igualar el Camino Ural y renderizar al mismo tiempo. Pero no te preocupes, vamos a arreglar esto en la siguiente lección. 8. El componente del switch: en esta lección, les voy a mostrar cómo utilizar el componente switch para renderizar solo una ruta del grupo de rutas. El componente switch funciona como un switch regular, una declaración en JavaScript con el fin de la aplicación demo. Pero los usuarios y sobre Pat contenían este último personaje, lo que también son mucho y renderizan por la ruta de inicio. De esta forma podemos mostrar diferentes componentes con solo declarar que pertenecen al mismo camino. Pero en este caso, esto no es lo que queremos. Por lo que podemos utilizar la propiedad exacta en la carretera para que el componente de casa lo renderice sólo si el Ural mucho es el camino. Exactamente. Ahora en la aplicación, podemos ver que todo funciona bien. Las rutas usuarios y alrededor ya no son una coincidencia para el camino del componente home. Ambos solo se mostrará un componente en el momento, por lo que también podemos usar un componente de switch para renderizar solo la primera ruta que coincida con la ubicación. Aunque dupliques la ruta sobre, déjame importar este que componente ahora si visito la página sobre, sus componentes se renderizarán solo unos. No obstante, nada es que simplemente no necesitara especificar la propiedad exacta para el homeópata o sus usuarios esposa y alrededor también lo igualará. Y el componente con siempre se renderizará porque esta es la primera ruta que se define en match, déjame mostrarte. La alternativa, por supuesto, es definir al compañero como el último. Ahí lo tienes. No obstante, salgo de la ruta domiciliaria con el excepto adecuadamente. Ahora, también puedes especificar en la cuarta ronda para renderizar algo cuando ningún camino es mucho. Este comportamiento se implementa con un listo ese componente. Solo necesitas pasar el euro para listo recto con las dos propiedades. De hecho, un componente de switch sólo acepta como Children ya sea ruta o elementos erectos rojos escribieron Los elementos están mucho usando su propiedad de ruta mientras que los elementos de reiterar están usando mucho su de propiedad. Ahora bien, si voy a mi casa, la aplicación me redirigirá al hogar. Un componente derecho que no tiene ruta, propiedad o componente ya leído que no tiene de propiedad siempre coincidirá con la ubicación actual . Esa historia, algunos bastante este erecto rojo al final del componente switch puede atrapar cualquier camino que no era previamente igualado. Sólo digamos adiós antes de que ahí lo tengas. Por último, algo que hay que tener en cuenta es que el componente retórico fue navegar a una nueva ubicación, reemplazando el deseo de curado en la pila de historia al igual que lo hace un erect rojo del lado del servidor. 9. Propiedades de procesamiento en la ruta: cuando estabas bajo algo con el componente de ruta. Se pasan tres objetos como parámetros mucho, que es un objeto que contiene información sobre cómo las rutas pero mucho. El euro ubicación, que es un objeto inmutable que representa eran La APP está ahora tiene propiedades para obtener la parte. The Chorus String and the House of the Euro and History, Un objeto para gestionar el historial de decisiones en el navegador con métodos para retroceder y avanzar en la pila de historia. Estas propiedades siempre se pasan sin importar qué método de render utilices en un componente, puedes obtenerlas del objeto properties. El objeto mucho será el que usarás con más frecuencia, por lo que podrás destruir el objeto de propiedades para obtener justo ese objeto. Por ejemplo, así es como lo harás con una función de render. Por cierto, hay bajo función es útil cuando se desea pasar propiedades personalizadas al componente. Vas a renderizar como la propiedad de color en este ejemplo, y así es como lo haces usando Children. Recuerda que la diferencia entre render on Children es que el posterior siempre representa el elemento devuelto por la función de esta manera, puedes usar la propiedad much para saber si la ruta realmente coincide con el Ural actual. Si no lo hace, el objeto mucho estará vacío. De acuerdo, puedes ver estas propiedades en acción sin modificar la aplicación. Uso de la Extensión React Developer Tools. Por ejemplo, en Crumb, abriré el taburete desarrollador y buscaré el final de reaccionar. Voy a ampliar todas estas notas y buscar el componente de casa. Está justo aquí. Si seleccioné, verás las tres propiedades listadas aquí. Aquí está el objeto de historia con algunos métodos para controlar el navegador dice tu historial. No es que el historial contenga un objeto de ubicación, que es básicamente el mismo que el otro objeto de ubicación que el componente está recibiendo como parámetro. La única diferencia es que el objeto de ubicación en la historia es mutable, por lo que no se recomienda usar algo. Tenemos el objeto cotejo. Si navego a su página sobre, se puede ver cómo su campo con diferentes datos todo bien en la siguiente lección usará el objeto mucho para crear una ruta anidada 10. Rutas anidadas: Aquí hay un ejemplo fuera de un nester Sequía Usuarios es últimos detalles. La mayoría de las veces, son dos partes, los principales usuarios del camino, en este caso en un camino suave. Detalles. En este caso, generalmente la parte blanda se define como una parte soportable. Entonces en este caso, muchas veces me d Puede tomar valores como uno o dos. De hecho, vamos a implementar una ruta anidada para o ellos un proyecto igual que éste. Y para eso, vamos a usar la gran propiedad. Recuerda eso mucho. Se trata de un objeto que contiene las siguientes propiedades Barham y objeto con valor clave pares partes del Ural correspondientes al camino por los rebeldes, es exacto en lingotes con el valor verdadero si son mucho el patrón de baño utilizado en el componente de carretera y eres una cadena que representa la porción mágica de la URL. Muy bien, entonces para la sección de usuarios, queremos mostrar una lista de usuarios, y cada elemento fuera de la lista será un enlace como si fuera Últimos Usuarios es el último. Son los últimos usuarios últimos dos, y así sucesivamente que te mostramos los detalles de ese usuario, así que empecemos modificando el componente de usuarios para generar enlaces para algunos usuarios de muestra. Para mantener las cosas simples, sólo voy a la función final que bueno devolver una lista. Otra opción será llamar a un B I para sacar la lista de baja. Usuarios en la empresa sí método de actualización y una tienda lo menos en el estado del componente . Entonces necesitamos cambios. Se puede renderizar. Pero sólo voy al hallazgo una matriz. Y con un bucle de cuatro, siento su anillo con objetos que solo contienen una propiedad I. D que el representa la idea de los usuarios a cambio. Eso menos ahora voy a reemplazar el cuerpo del componente y llamé a la función. Después usé el método matemático. Recuerda que este método crea una nueva matriz con los resultados de una función llamada a cada elemento del rayo. Por lo que esta función va a tomar un perímetro, ese usuario de alcohol que representa el objeto con la propiedad idea que soy para cada usuario. Este componente renderizará un elemento H de dos. Recuerda que renderizaría en un arrendado elementos. React requiere una propiedad clave con un valor único en cada elemento. Entonces tendré un componente de ala para crear un enlace para mostrar los detalles de ese usuario. Por último, en enlace de importación el. Si ejecuto la aplicación, veremos que los enlaces se renderizan correctamente. También, observe cómo van los cambios Ural. Doy click en Sun Off Este link. Ahora podemos hacer algo nosotros para mejorar esto. En lugar de codificar duro los usuarios se separan del camino podemos usarlos gran parte de aún así el componente recibe. Si abrí el reaccionar desarrollador tienda espinal, busco el componente de usuario podemos ver La propiedad euro tiene el valor, sus últimos usuarios. Por lo que podemos el instructor coincidir desde el objeto de propiedades que el componente recibe y usar mucho punto yura en lugar del valor de núcleo duro es último, los usuarios esto menos y el principio es importante porque de lo contrario estaremos creando anidados rutas bajo el spot del usuario. Genial. Todavía están trabajando en los enlaces. En la siguiente lección se agregará la funcionalidad para mostrar el detalle de cada usuario 11. Usar los parámetros de la ruta: Muy bien, usemos sus parámetros de salida para mostrar los detalles de cada usuario. Después de la lista fuera de los enlaces de usuario, voy a declarar alrededor de componente con un parámetro para capturar al usuario i d Estas ideas son números para que podamos hacer cumplir la regla con una expresión regular. Recuerda que los murciélagos aceptan cualquier expresión que la biblioteca, pero a Rogic puede manejar. Estoy colocando el componente de varilla aquí porque quiero que el componente de usuario aparezca después de lo menos. Si quieres que este componente reemplace la lista de usuarios, tendrás que colocar lo menos en app dot sí, junto al otro componente de ruta. De todos modos, si hay una coincidencia, el componente de usuario se estará renderizado. Por lo que voy a importar los componentes de usuario y enrutar y crear un nuevo archivo. ¿ Dijiste que gay? Sí, para este ejemplo, sólo voy a mantenerlo sencillo en exhibición. La idea del usuario, pero no es cómo se extrae el I D del mucho objeto del barón usando el mismo nombre que se define en el baño. Si abres el navegador, deberías ver algo similar a esto. Ahora vamos a tener otros cuatro mensajes algo como Por favor seleccione un usuario de lo menos. Pero en lugar de crear un componente para despidos, usaré la propiedad render fuera del componente carretera. A ver, ahí lo tienes. Incluso si se ingresa un camino encarnado, el mensaje sigue apareciendo. También podemos subir estas rutas en un componente de estiramiento para garantizar que solo se empareje una de las dos. Déjame importar el componente switch y probar su aplicación. Genial. Está funcionando y ya terminamos. Pero hay una última cosa que quiero mencionar. Tienes que tener cuidado con la forma en que declaras ruta. Por ejemplo, si declaras la ruta que hace primero a la missus, el componente de usuario nunca se renderizado porque la ruta como esta última usuarios esta última bien, im mucho. El camino son los últimos usuarios. Entonces si declaras la ruta en este orden que exacta para evitar este comportamiento por lo que podemos decir que la lección aquí siempre se declara primero las rutas más específicas. Ahora vamos a crecer este vaso 12. Reflexiones finales: todo bien. Por ahora, deberías tener una buena comprensión de qué son las aplicaciones de pasta única. Cómo crear uno con reaccionar y reaccionar. Rafter. Has aprendido que una ruta o mantiene tu aplicación tú y los Ural piensas y reaccionas. Router es la biblioteca de rotor más popular para reaccionar. Además, has aprendido a configurar el router React, su componente más importante. Cómo funcionan las rutas sobre cómo construir Nido dinámico, la sequía con parámetros de parte para aún hay mucho más por desenterrar. En la documentación oficial se incluyen algunos ejemplos interactivos básicos así como más avanzados . Ahora en el proyecto de clase, reunirás todo esto. Tendrás que crear una aplicación de un solo lugar con al menos las siguientes características. Página principal, otro paciente con algún texto y no de página en una página de detalles maestra Con Nestor Sequía, los valores pueden ser Marco, por ejemplo, un catálogo fuera de productos o una lista de mensajes. El app puede ser un sandbox de dedo hinchado, coath, penn o abrigo para que todos los demás puedan comprobarlo. Recuerda que puedes encontrar el crecimiento completo de la fuente fuera del Dem Un proyecto en Get the Link está en la descripción de la clase. Y si tienes preguntas o problemas deja un comentario y trataré de responder lo antes posible. Muy bien, espero que hayan disfrutado de la clase. Agradezco si tienes tiempo para dejar una reseña y si te gusta la clase, sígueme para ser notificado. Cuando libere más clases, veré la próxima vez tomador y gracias por ver.