Manual básico de react-router v3, ReactJs

1. REACT-
INSTRUCTORA: JUDIT SÁNCHEZ

2. REACT-ROUTER
REACT - SPA
▸SPA - Single-Page Applications
▸Todo en un único archivo (index.html, main.js, /statics)
▸Optimización de solicitudes al servidor y de carga
▸Todas las páginas en un único documento, pero en
diferentes rutas (gracias a react-router)
▸Navegación más fluida
▸Mejor experiencia de usuario

3. REACT-ROUTER
MAPA DE RUTAS
▸Route Map: Es el archivo que contiene la definición de las
rutas de nuestra app, de aquí nacerá.
▸Cuando el proyecto es pequeño, se define en index.jsx.
▸Si el proyecto es grande, suele usarse el estándar de patrón
de diseño para buenas prácticas `/app/routes/map.jsx` e
importarlo en el index.jsx

4. REACT-ROUTER
INICIALIZAR RUTAS
▸Las rutas han de ser definidas en la raíz de la app. Esto suele ser index.jsx.
▸Las rutas han de ser englobadas por un enrutador <Router />, donde se
define history que es quien se encarga de la navegación. Hay muchos tipos
de historias, las dos principales:
▸BrowserHistory: Usa api estandarizada y creada por los propios
navegadores.
▸HashHistory: Permite almohadilla en las rutas y es menos estable y
segura.
▸La history escogida influye en la formulación de rutas, por lo que afecta
directamente al SEO y la indexación en buscadores.

5. REACT-ROUTER
CONOZCAMOS REACT-ROUTER
▸Route: Es un objeto que une la URL con una vista. Cuando
accedemos a un enlace en nuestra app, es procesada y te
presentará la vista que hayas definido a esa ruta.
▸Atributos:
▸Path: Definición de la ruta, siempre relativa a su madre.
▸Component: Indicamos el componente que contiene la
vista asociada.

6. REACT-ROUTER
INDEXROUTE
▸IndexRoute: Indica al enrutador cual es la vista general que
ha de cargar si alguien accede a la raíz de una ruta anidada.

7. REACT-ROUTER
TIPOS DE RUTAS
▸Simples:
▸Ruta única, se comporta como un archivo.
▸Carga su vista haciendo referencia al layout general de la app.
▸Compuestas/Anidadas:
▸Se comportan como un directorio.
▸Mount Point: Ruta madre, que contendrá las anidaciones.
▸Layout View: Vista que define el look&feel de la vista que contendrá la ruta.
▸Index Route: Vista que mostraremos si el usuario accede a la ruta madre (Mount Point).
▸Child Routes: Anidaciones, contendrán su propia vista que será incluida en el layout view
definido.
▸Los Child Routes, en la vista, son definidos como {this.props.children}

8. REACT-ROUTER
RUTAS DINÁMICAS
▸Parametrizadas: desde la propiedad params en las props:
▸`/blog/:id`
▸Para definir rutas dinámicas podemos utilizar:
▸*: representa 0, 1 o más caracteres.
▸**: representa cualquier número de caracteres hasta llegar
a /, ? o #.

9. REACT-ROUTER
ENLACES
▸Links. Representa, en Html, un elemento <a href=“#”></a>.
▸To: Se le indica el path, a donde va.
▸onClick: Podemos inicializar controladores para este evento.
▸onlyActiveOnIndex: Indicamos que solo deseamos que se muestre como activo
cuando está en el index de la anidación.
▸Active:
▸activeClassName: Añade una clase específica cuando estás en la ruta activa.
▸ActiveStyle: Añade unos estilos específicos cuando estás en la ruta activa.

10. REACT-ROUTER
NAVEGACIÓN
▸Para cambiar de vista utilizaremos:
▸<Link>: Por enlace.
▸push(): añade a nuestra actual ruta un string.
▸replace(): modifica la actual ruta, es sustituida por el string que le
indiquemos.
▸go(): salta hacia delante o hacia atrás el número que le indiques, positivo
o negativo.
▸goBack(): da un paso atrás inmediato.
▸goFoward(): da un paso adelante inmediato.

11. REACT-ROUTER
¡¡GRACIAS!!
▸Para dudas o rectificaciones: info@jodiehag.com
▸www.jodiehag.com