Introducción a React Router

Clase 18 de 37 • Curso de React.js 2019

Resumen

Las aplicaciones que se trabajan en React son llamadas single page apps. Esto es posible gracias a React Router que es una librería Open Source.

Multi Page Apps: Cada página implica una petición al servidor. La respuesta usualmente tiene todo el contenido de la página.

Single Page Apps (SPA): Aplicaciones que cargan una sola página de HTML y cualquier actualización la hacen re-escribiendo el HTML que ya tenían.

React Router (v4): Nos da las herramientas para poder hacer SPA fácilmente. Usaremos 4 componentes:

BrowserRouter: es un componente que debe estar siempre lo más arriba de la aplicación. Todo lo que esté adentro funcionará como una SPA.
Route: Cuando hay un match con el path, se hace render del component. El component va a recibir tres props: match, history, location.
Switch: Dentro de Switch solamente van elementos de Route. Switch se asegura que solamente un Route se renderize.
Link: Toma el lugar del elemento <a>, evita que se recargue la página completamente y actualiza la URL.

Jose L. Figueroa

student•

React Router tiene 4 componentes principales:

Browser Router. Es necesario colocar el componente en la parte superior de la aplicación, lo que esté dentro de este va a servir como una Single Page App y les va a permitir al resto de las herramientas funcionar. Ya que fuera de él NO Funciona.
Route. Representa una dirección de Internet, el path es donde va a renderizar el componente y el componente es el componente que va a renderizar, usualmente es un a página.
Switch. Componente que nos sirve para representar 1 sola ruta de varias que podemos poner dentro del componente.
Link. Toma el lugar del elemento ancla, evita que se recargue completamente la página, actualiza la URL sin recargar la página completa.

Willy David Da Conceicao Lozada

student•

gg por esos apuntes

Bernardo Aguayo Ortega

student•

thanks bro

Daniel Páez

student•

React Router será nuestro caballo de troya para crear una single page app , lo haremos a través de sus cuatro jinetes:

BrowserRouter: que es el Componente Contenedor de todos los que siguen, necesario para funcionar como una Single Page App
Route que es una ruta concreta de tu Aplicacion Ej: "/home" , recibe por props el Componente que debe renderizar
Switch: que efectivamente es como el switch de js donde escogeras una ruta de tu pagina web
Link que nos ayudara a navegar a paginas concretas de nuestra aplicacion sin recargar completamente la página

Llevemos esto a la práctica y hagamos que algo relevante suceda!

concepts only gain value with execution

Jorge Enríquez

student•

El caballo de Troya no llevaba ningún jinete.

Bernardo Aguayo Ortega

student•

thanks paez

Mario Alejandro Crespo Reyes

student•

Estoy comenzando a enamorarme de React ♥️

Pau Pregoni Juan

student•

Somos 2, te vas a enamorar aún más con la nueva sintaxis, (Sin clases, puramente funcional, escribís la mitad de código, es todo mucho más escalable y reutilizable).

React Conf

Emanuel Torres Clemente

student•

MPA => Vieja Escuela (Sitios Web Tradicionales) SPA => Nueva Escuela (Sitios Actuales)

Daniel Muñoz Martín

student•

Platzi cómo lo hace ? No es una SPA cierto ?

Héctor Jama Escobedo Olguin

student•

Creo que si es SPA, de hecho, freddy ha comentado en varias veces que Platzi está construido sobre React

Bernardo Aguayo Ortega

student•

si est'a construido sobre react

Jesus Ruvalcaba Miranda

student•

Listo, reto cumplido utilizando CSS Grid

en el CSS:

.Home {
  width: 100%;
  min-height: calc(100vh - 60px);
  background: url('../../images/stars.svg'), #1B1B25;
  background-repeat: repeat;

  color: #ffffff;

  display: grid;
	grid-template: 1fr / 100px 300px 1fr 100px;	
	grid-template-areas: ". text image .";
	align-items: center;
	justify-items: center;
}

.col-img{
	grid-area: image;	
}

.col-img img{	
	width: 100%;
}

.col-text{
	grid-area: text
}

.col-text img{
	margin-bottom: 20px;
}

El el archivo de JSX:

import React from 'react'
import { Link } from 'react-router-dom'

import astro from '../images/astronauts.svg'
import logo from '../images/platziconf-logo.svg'
import './styles/Home.css'

function BadgeHome() {
	return (
		<div className="Home">
			<dir className="col-text">
				<img src={logo} alt="Platzi conf logo"/>
				<p>
					<h1>BADGE MANAGEMENT SYSTEM</h1>
					<Link className="btn btn-primary" to="/badges">Start</Link>
				</p>
			</dir>
			<dir className="col-img">
				<img src={astro} alt="Astronauta"/>
			</dir>
		</div>
	)
}

export default BadgeHome

Alfredo Enrique Rojas

student•

Multi Page Apps: Se hace una petición al servidor cada que se cambia de pagina

Sigle Page Apps: Se pide una sola vez el html y cuando cambia solo se piden los datos necesarios para la actualización

Daniel Páez

student•

Según comprendo la diferencia fundamental entre single page app y multi page app radica en que la última implica una peticion al servidor cada vez que cambiamos de ruta, la primera no, es una sola peticion.

Enriquezcan mi aporte, corrijanme, discutamos :)

Luis Jeanpier Monserrate

student•

en lineas generales es eso, ya que los spa cargan todo el codigo al momento de ingresar al sitio, entonces cuando hay una actualización lo que hace es reescribir el codigo que deba modificar.

Estefany Minerva Camarena Gordillo

student•

Introducción a React Router Las aplicaciones que se trabajan en React son llamadas single page apps. Esto es posible gracias a React Router que es una librería Open Source.

Multi Page Apps: Cada página implica una petición al servidor. La respuesta usualmente tiene todo el contenido de la página.

Single Page Apps (SPA): Aplicaciones que cargan una sola página de HTML y cualquier actualización la hacen re-escribiendo el HTML que ya tenían.

React Router (v4): Nos da las herramientas para poder hacer SPA fácilmente. Usaremos 4 componentes:

BrowserRouter: es un componente que debe estar siempre lo más arriba de la aplicación. Todo lo que esté adentro funcionará como una SPA. Route: Cuando hay un match con el path, se hace render del component. El component va a recibir tres props: match, history, location. Switch: Dentro de Switch solamente van elementos de Route. Switch se asegura que solamente un Route se renderize. Link: Toma el lugar del elemento <a>, evita que se recargue la página completamente y actualiza la URL.

Yadiel Vélez

student•

El nombre técnico para la técnica que hace uso React Router es client-side routing

Alberto Eligio Sánchez Germán

student•

Excelente profesor @Richard Kaufman

Patricio Manuel Ugarte

student•

Resúmen de la clase

ReactJS está pensado para hacer Single Page Applications (SPA), el concepto se basa en su estructura de VirtualDOM, que le permite actualizar y renderizar sólo algunas partes de la UI de manera independiente. Esto es una ventaja muy grande, tanto en rendimiento como en experiencia de usuario frente a los sitios web basados en peticiones al servidor, donde el FrontEnd lanza un pedido al servidor, este lo procesa y devuelve una nueva página, lo cual implica que el FrontEnd tiene que volver a recargarse completamente para presentar el HTML solicitado.

¿Cómo evita ReactJS la realización de peticiones al servidor que obligan a recargar el sitio?

Una de las soluciones es utilizar React Router, que es una librería Open Source para el manejo de rutas con React.

Nota: Para utilizar los componentes que veremos a continuación es preciso tener Node instalado con el manejador de paquete npm y ejecutar desde la terminal en la carpeta del proyecto el comando:

npm install react-router-dom

De esta librería estaremos haciendo uso principalmente de 4 componentes:

BrowserRouter: este componente lo utilizaremos para encapsular todo lo que nosotros queramos que se comporte como una SPA. El uso más común es incluirlo en el index.js de nuestra aplicación y que el mismo encierre al componente principal <App /> con el que trabajemos, dentro de la función ReactDOM.render(). Es necesario encapsular para que dentro de todos los componentes anidados funcionen las demás herramientas de React Router.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "../../App.js";
 
ReactDOM.render(
   <BrowserRouter>
       <App />
   </BrowserRouter>,
   document.getElementById("root")
);

Route: Es el componente que va a definir las rutas internamente en React y a indicar qué componente se deberá renderizar ante una petición del usuario en la URL o una redirección. Vendría a “reemplazar” al Servidor Web en el esquema de cliente-servidor que utilizan las Multi Page Apps, evitando hacer todo el camino hasta el BackEnd y la recarga completa del sitio.
Switch: Es un componente en el cual encerramos a todas nuestras Routes, para asegurarnos que sólo se renderiza una ruta (Hará el render del primer componente que coincida con la Route solicitada). Funciona de forma similar al switch de JavaScript donde el case es la coincidencia del path y el break está implícito.
Link: Reemplaza a la etiqueta <a> de HTML, esto es para evitar que se haga una recarga de la página completa, la etiqueta Link va a ir a buscar entre las rutas que tengamos definidas con la etiqueta Route y renderizará el componente que corresponda a la misma.

Juan Sebastian Torchia

student•

Muchas gracias !

Carlos Jaime Yerena

student•

Excelente aporte, muchas gracias camarada!!!

Félix Alejandro Zelaya Orellana

student•

Genial!! Cada vez se va poniendo mejor!

Leandro Videla

student•

Una de las ventajas de una SPA es que solo tenemos un bundle.js, es decir, un archivo main.js que se encarga de ejecutar toda la aplicación y cada página (en este caso un Component) puede ejecutar su propio JS. Por ejemplo, en la página /Portfolio tenemos que correr animaciones que solo se ejecutar en esa pantalla.

Mayra Yelitza Navas Carrascal

student•

Excelente explicación, aquí usaremos solo cuatro componentes: -BrowserRouter -Route -Switch -Link

Debo profundizar más con el curso recomendado por él de React Router :)

Jhon Alexander Romero Gonzaga

student•

Esta muy bueno Reactjs y se me hace más fácil trabajar con esta libreria que con angular que era un poco más complicado para mi.

Wladimir Chópite

student•

Dale una oportunidad a VueJs. Creo que es mucho mas facil y divertida de aprender/usar, e igual de poderosa que ReactJs

Jhon Alexander Romero Gonzaga

student•

Pues si, VueJs tiene una curva de aprendizaje mucho más fácil que ReactJs y Angular. Ademas es más limpio y ordenado que ReactJs con jsx que no esta mal.

Eddi Garcia Bermejo

student•

Definitivamente React es mejor, a comienzo a tomarle cariño

Johan García Trejo

student•

BrowserRouter: es un componente que debe estar siempre lo más arriba de la aplicación. Todo lo que esté adentro funcionará como una SPA.
Route: Cuando hay un match con el path, se hace render del component. El component va a recibir tres props: match, history, location.
Switch: Dentro de Switch solamente van elementos de Route. Switch se asegura que solamente un Route se renderize.
Link: Toma el lugar del elemento <a>, evita que se recargue la página completamente y actualiza la URL.

Oscar Castañeda

student•

¿Se ve afectado el SEO?

Daniel Esteves

student•

Hola @digitalactive, el SEO de las SPA, en este caso React con React Router se verá afectado solo la cantidad que tu lo consideres, ya que usando paquetes como react-helmet podremos realizar el SEO de nuestro sitio de una manera muy fácil

HECTOR JESUS CACHO RAMIREZ

student•

Como puedo pasar Props desde el Route, intente hacerlo pero si tengo el Switch no los pasa y si no lo tengo renderiza dos veces mi componente

Karen Paola Diaz Duarte

student•

gracias!!

Introducción a React Router

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