División de la aplicación en rutas

Clase 19 de 37 • Curso de React.js 2019

Resumen

Para instalar React Router lo hacemos desde la terminal con npm install react-router-dom. Como es importante usar exactamente la misma versión, del package.json en “dependencies” se quita lo que está delante del 4.

Link internamente tiene un elemento <a> pero va a interceptar el clic para navegar de manera interna sin refrescar toda la página.

Simón Arenas

student•

Jose Morales Varon

student•

jajaj Amigo eres un crack!

Angui Clavijo Gutierrez

student•

Crueldad para con Richard

Wandy Rafael Santana Evangelista

student•

ATENCION: Pueden instalar la version 5 en adelante de react-router-dom, hice todas las pruebas y todo marcha de maravilla, incluso hay errores que no me marcan como al profesor. Sin problema pueden ejecutar npm install react-router-dom y aprender.

Jhon Carlos Colorado Angulo

student•

Gracias. Lo instalé y si funcionó.

Wilson Delgado

student•

capa sin héroe

Mateo Santiago Zapata Maldonado

student•

Me gusta mucho este profesor, me parece practico, no hace sonidos extraños como Leonidas, "turututu", "snack snack", "ojito ojito", "guiño guiño", "No puse Medias porque parecia que dijera medias, EJJEJEJEJJE", muchas y mas frases de estas son las parecidas por el profesor anterior que aveces son insoportables y hace que los videos DUREN MUCHO.

Irving Meyer

student•

No se puede complacer a todo el mundo, personalmente, me parece q leonidas es mas didactico x q la idea es enseñar a principiantes. Yo empece con este profesor, pero regrese al anterior con leonidas para entender algunas cosas q aca se saltan y asumen q ya sabes. Digamos q es más practico y avanzado. Pero para entender paso a paso, leonidas. Ojito ojito con eso.

En este curso, pienso q ambos profesores complementan. De hecho lo q recomiendo es hacer el curso con ambos. Turututu

Me recuerda a cuando hice la carrera de ensamblaje e informatica en mis inicios, y enseñaban las partes de la computadora (una perdida de tiempo para mi) pero mi sorpresa era mucha al descubrir q habia mucha gente q no sabia nada, absolutamente nada.

Asi q un poco de paciencia, ojito ojito con eso :v

Facundo Petre

student•

Haters gonna hate

Ezequiel Miguel Brandan

student•

Para instalar la misma versión de react router que usa el, tienen que usar la siguiente linea.

npm install react-router-dom@4.3.1

Eso se aplica a cualquier dependencia que quieran instalar con NPM, pones el @ y seguido la versión que especifica que quieras.

Abdiel Ortega

student•

Como dato adicional para quien no sepa si agregas la bandera --save-exact o -E haces que se guarde la versión exacta en el package.json sin este simbolo ^4.3.1 y así al correr npm install no se actualice ejemplo:

npm install -S -E react-router-dom@4.3.1

Javier Romero

student•

una pregunta tiene que ser así

//paso 1

-dom@4.3.1
// todo junto

o tiene que ser separado, es decir así

//paso 2

-dom @4.3.1
// aquí esta separado

en fin cual es la manera correcta de escribirlo al final del comando, el paso 1 o el paso 2 ?

Carlos Ferrer

student•

Con “react-router-dom”: “5.0.0”, parece que ya no es un requisito que <BrowserRouter> tenga solo un hijo:

Tampoco he puesto <Switch></Switch> y parece que no hay problema. Este código no me da ningún error y se ejecuta perfectamente.

Sebastián Barre

student•

Hola Hammer, también estoy usando la version 5 y creo que si es necesario colocar el switch, seguro que cuando cambias de página solo te muestra uno porque está con la propiedad exact, de hecho si se la elimina te muestra ambas vistas.

Ariel Jacob

student•

Sí, me anduvo tambien con la version 5, pero es útil aprender a solucionarlo por las dudas.

Manuel Salv. Lemos Foncubierta

student•

En la v.5 de ReactRouter, BrowserRouter puede tener más de un Route sin hacer la chapuza del <div>

Pablo Colqui

student•

Entre a leer los comentarios para confirmarlo, gracias!

Carlos Andres Castañeda Osorio

student•

A hoy, react-router-dom se encuentra en la versión 5.1.2 y el ejemplo mostrado funciona igual de bien.

julian roland

student•

Una pregunta: luego de terminar este curso me conviene empezar con el de React.js avanzado o con el de React Router?

Matias Cariboni

student•

a mi tambien me gustaria saber esto...

Juan Castro

teacher•

El curso de React Avanzado se lanza el 18 de Julio.

:wink::P

Robert Romero Medina

student•

Velooooooz

Juan David Reyes

student•

Lo hace:

Robert Romero Medina

student•

Buen meme jajajaa

Wilson Fabian Pérez Sucuzhañay

student•

Si fuese tan bueno las SPA, todos utilizarán, Facebook no usa SPA, creo que deberían enseñar a crear proyectos no siempre con SPA, en todos los cursos ya sea de VUE o REACT solo hacemos SPA, deberíamos probar con un backedn en php o python a que solo generamos componentes dentro de cada vista que sirve el servidor para tener reactividad pero con una gran experiencia de que el server sirva el resto para tener también el SEO

José Manuel Casani Guerra

student•

Te equivocas , Facebook usa SPA , pero como todo proyecto grande y que depende del SEO , usa Server Side Rendering , SSR en siglas.

Tanto , React , Angular y Vuejs tiene su forma y funciones de hacer SSR .. Aunque tenemos un paquete para hacer eso en React puedes usar Next.js y en Vue puedes usar Nuxt.js..

No hay que buscar excusas para no usar un SPA y aumentar la experiencia de usuario 😎

PD: Facebook y Platzi no usa Next.js , ellos usan directamente las funciones de React para hacer SSR.

David De Freitas

student•

te falta hacer unos cuantos cursitos más y examinar bien la página que das como ejemplo, un site grande como Facebook se divide en varias SPA, únicamente tendrás la carga de la página nuevamente cuando te saltas entre SPA, ejemplo cuando vas de inicio a tu perfil.

Esa solución es muy común en la industria, en efecto también tienen que ver el SEO, responsabilidades y demás para elegir cuales serían las SPA de un sitio.

Isaias Chávez

student•

Me estoy enamorando muchísimo de react <3

ANGEL DAVID SULBARAN CALDERON

student•

Division de la aplicación en rutas

Ya sabemos lo que es react router, e esta clase vamos a agarrar las dos paginas que tenemos “badges” y “badgenew” convertirlas en rutas y enlanzar badges a badgenew Para comenzar usamos npm para instalar nuestro react router de manera que escribimos en la terminal “npm install react-router-dom”, luego de instalar el router, que esto debe hacerse antes de cargar el servidor, vamos a proceder a escribir en el “index.js” el import de manera que;

import app from './components/app'

Procedemos a crear el archive “App.js” para asi trabajar en nuestro browser router. Lo que hacemos es importar react y empezar con una función.

import React from 'react';

function App(){
    return 'App'
}

export default App;

Habiendo colo cado e el index lo siguiente;

ReactDOM.render(&lt;App /&gt;, container);

Procedemos a importar el browser router y el route, prosiguiendo a declarar las dos rutas “paginas” que vamos a poseer en el de manera que ;

import React from 'react';
import {BrowserRouter, route} from 'react-router-dom';

function App(){
    return (
        &lt;BrowserRouter&gt;
        &lt;Route path=&quot;/badges&quot; component={Badges}/&gt;
        &lt;Route path=&quot;/badges/new&quot; component={BadgeNew}/&gt;

        &lt;/BrowserRouter&gt;
    );
}

export default App;

Quedara todo en blanco porque estaremos en la ruta diagonal mientras que todo lo que hemos hecho estará en “Badges” y en “BadgesNew” nos vamos a la consola y podremos apreciar que nos dira que BrowserRouter solo puede tener un hijo, por lo que la forma de solucionarlo es, creando un div de la siguiente manera;

 function App(){
    return (
        &lt;BrowserRouter&gt;
            &lt;div&gt;
                &lt;Route path=&quot;/badges&quot; component={Badges}/&gt;
                &lt;Route path=&quot;/badges/new&quot; component={BadgeNew}/&gt;
            &lt;/div&gt;

        &lt;/BrowserRouter&gt;
    );
}

Aun asi hay un detalle, las dos rutas se renderizaran al dar click en el botón de newBadge, asi que precederemos a solucionar eso.

En lugar de utilizar un “div” utilizaremos un “switch” este lo que hace es tomar la dirección que esta en el navegador y solo va a renderizar un sola ruta(la primera que coincida con esa dirección), puede fallar porque de la forma que funciona react Router pude tomar solo una parte del path y ver que coincida aunque sea en el principio, por lo que no seria muy exacto, por lo que agregaremos el código necesario para que esto sea asi, que por ende vendría siendo “exact” ;


function App(){
    return (
        &lt;BrowserRouter&gt;
            &lt;Switch&gt;
                &lt;Route exact path=&quot;/badges&quot; component={Badges}/&gt;
                &lt;Route exact path=&quot;/badges/new&quot; component={BadgeNew}/&gt;
            &lt;/Switch&gt;

        &lt;/BrowserRouter&gt;
    );
}

Luego de esto nos falta un detalle que entender y es el siguiente, si nos fijamos en el botón de new badge, este nos da la dirección a un link por lo que debemos es evitar que recarge la pagina completa y solo traiga lo que necesitamos que haga, de la siguiente manera, cambiaremos el elemento ancla que esta en nuestro botón de badges por un elemnto Link y en vez de utilizar “href” usa “to”


                    &lt;div className=&quot;Badges__buttons&quot;&gt;
                        &lt;Link to=&quot;/badges/new&quot; className=&quot;btn btn-primary&quot;&gt;
                            New Badge
                        &lt;/Link&gt;
                    &lt;/div&gt;

Esto al probarlo, veras la velocidad que react se gasta, esto es lo que hace a react veloz.

Habith José Mendoza Martínez

student•

Por qué al instalar paquetes me salen estos WARN?

Edward Steven Ramos Palacios

teacher•

Son warnings que te notifican de dependencias que se deberían instalar pero que por algún motivo no se pudieron instalar.

Isaac Navajas Pozo

student•

como lo arreglaste?¿ me pasa lo mismo y no se como solucionarlo

Juan Manuel Hernandez Marcano

student•

Esta clase si estuvo mundial el uso de BrowserRouter, Link, Route y Switch era lo que buscaba

Oscar Grey

student•

"Eso es lo que hace a react...." Velooozz

Claudia Andrea Aparicio Chavez

student•

Es posible que con la version 5 no se tenga el problema ese del unico hijo en <BrowserRouter> ? Mera curiosidad por que no me salio es error

Ulises Moralez

student•

Puede ser que en 2021 ya no se necesite que el BrowserRouter tenga obligatoriamente un sólo child?

Nazareno Aznar Altamiranda

student•

En efecto, React arregló varias cosas desde que este curso se diseño y entre ellas desde la v16 ya no te tira un error si tenés más hijos en BrowserRouter

Otra cosa interesante fue que agregaron un reemplazo para <React.Fragment></React.Fragment> a <></>, funcionan exactamente igual con la diferencia de que React.Fragment se pueden pasar propiedades (atributos) al elemento

Incluso leí por los comentarios que si usas un <div> de padre React lo entiende y ya no lo renderiza, pero no se si eso es así

Miguel Angel Reyes Moreno

student•

Yo después de ver esta clase:

Johan Garzon

student•

El error de que el Router necesita un solo Child (minuto 4:42) no aparece en la version 5.1.2 de React Router DOM. No es una informacion super importante pero cabe mencionarlo. De todas maneras vamos a tener que usar <Switch>.

Cristian Córdova

student•

Cierto. Instalé la versión del profesor y me daba ese error. Actualice la versión de react-router-dom y funciona perfecto.

Diego Alejandro Bayona Cardozo

student•

Para los que vienen con el entorno de desarrollo del curso de Webpack y tienen el error de "cannor GET url" tienen que modificar el webpack config el public path sera "/" y en devServer agregar : historyApiFallback: true

fuente: https://tylermcginnis.com/react-router-cannot-get-url-refresh/

División de la aplicación en rutas

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión