¿Cuándo necesitas React Router?

Agradecido con el de arriba que el profe Juan David siga sacando cursos 🥺, personalmente es mi profe favorito de Platzi! ❤️

Documentación oficial de react router 6
https://reactrouter.com/en/main

Platzi, sigan creando nuevos cursos de react con el profe Juan David! Estos cursos están geniales! Let’s get this party started!

Se hace tanto hincapié en usar la 6, porque cada versión tiene sus diferencias sustanciales y no son retrocompatibles. Por favor sigan la recomendación para ahorrarse dolores de cabeza.

Pinta muy bien el curso, sigamos aprendiendo!

Hoy tuve que hacer la migracion de react-router-dom de la version 5 a la 6. Habia unos cuantos breaking changes. Este curso me sirve para repasar los conceptos.

En serio sigo odiando tanto la intro nueva eso hará que no disfrute tanto los cursos como antes es una lastima

Algo que no pude solucionar con github pages es que si intentaba entrar a un parametro del link directamente me mandaba codigo 404, pero si entraba primero a la pagina principal y luego accesaba por click a ese parametro del link si me mandaba la pagina… a ver si eso se puede soluionar aqui 😄

Resumen de la clase
Reac Router

• Es una herramienta necesaria cuando nuestra app pasa de una página a varias páginas para poder funcionar correctamente.

Requisitos:

• Fundamentos de React: componente, estado, props, etc.
• Patrones de render: render props, HOC y custom hooks.
• Manejo de estado: useReducer.

Temario:

• Fundamentos de navegación
  • ¿Qué es SSR y SPA?
  • ¿Qué tipo de navegación utilizamos en cada caso?
• React Router DOM 6
  • Existen muchas versiones de router.
  • Se usará la 6 para aprender.
  • Con el conocimiento adquirido podremos luego trabajar con otras versiones más adelante.
  • Se va construir un flujo para autentificación.
• TODO Machine con navegación
  • Se convertirá el modal en nueva página.
  • Se podrá editar las tareas en nuevas rutas.
  • Compartir información entre rutas.
  • Deploy en GitHub Pages de una app con React Router
• Muchos retos

Sobre la app

• En la app TODO machine existe en una sola página.
• Cuando nuestra app es más compleja como platzi se usa rutas, incluso rutas dinámicas donde la pagina es estructuralmente la misma pero muestra diferente información.

Navegación:

• Mejor shareability. (fácil de compartir, contenido separado en rutas).
• Separación de responsabilidades. (separar distintos componentes con un mismo objeto a una ruta distinta será mas liviana nuestra app de desarrollar)
• Menos portales/condicionales manuales en UI. (menos estados para mostrar un componente)

Les dejo un arículo del profe que complementa la introducción al curso
SPA vs SSR
https://platzi.com/blog/spa-vs-ssr-vs-static-site-generators/

Ya habla como Freddy jajaj 😅

Siempre he usado React Router de forma muy superficial ,ver que este curso es tan amplio y tiene mucho contenido me dice que es una herramienta que tiene más utilidad de la que le he dado siempre!

¿Cuándo necesitas React Router?

.
Cada vez que nuestra aplicación pasa a crecer considerablemente, se necesita utilizar varias páginas, rutas o vistas. En esa situación, en el 90% de los casos vamos a necesitar React Router.
.
El temario principal consta de:
.

• Fundamentos de navegación
• React Router DOM 6
• TODO Machine con navegación
• Muchos retos!

.
Muchas aplicaciones no pueden vivir en una sola página, por lo que es común que se haga uso de rutas.
.
Por ejemplo, teniendo las siguientes 2 rutas:
.

platzi.com/clases/como-aprender-react

platzi.com/clases/efectos-con-useeffect

.
Si bien ambas renderizan los mismo componentes, tienen información diferente. Esto porque la información depende de esa parte dinámica de la url.
.
Finalmente, las razones por las que necesitamos navegación son:
.

• Mejor shareability: significa que es muy fácil de compartir. De hecho, podemos copiar una url y compartirla por algún medio, y esa ruta será una parte en específico que queremos compartir de la aplicación.
  .
• Separación de responsabilidades: tiene que ver con mejorar la developer experience, nos permite separar distintos componentes que cumplen un mismo objetivo a una ruta completamente distinta. Esto hace que nuestra aplicación quede mucho más liviana, es decir, separar las responsabilidades de cada distinto grupo de componentes por rutas y no tener todo en un mismo componente que condicione qué renderizar dependiendo del estado.
  .
• Menos portales/condicionales manuales en la UI: significa que no será necesario realizar muchos condicionales sobre el estado para saber si renderizar ciertos componentes, o abrir un portal a otro nodo en el HTML y a su vez mostrar un componente o no. Muchas veces podemos prescindir de utilizar portales utilizando rutas.

let’s go

Well, let’s get started.

Bueno ahora entramos en este curso de React Router, vamos a ver que tal es

Como cambia Juan entre cursos

Juan David tiene estilo para dar un curso en especial estos de react.
gente formal: "Los cursos de react"
Juan david:"La saga de react.js"
no cambies profe

Gracias profesor💚💚💚

Navegación

¡Buen inicio!

vamos a un nuevo curso! nunca pares de aprender!

Like si intentaste entrar a https://www.todomachine.com
Ya ese es mi primer error en este curso.

Amo llegar a un curso y que el maestro sea Juan, explica todo muy bien 😍

Este curso se ve muy muy bueno 🤩 Ya me preparo para aprender más sobre React Router con uno de los mejores profes de Platzi 💪

Bien prof. aqui vamos aprender mucho, gracias y vamos sobre reat-router-dom

Shareability 😃 buen concepto me hace acordar a mis criterios de usabilidad en mis test hace 15 año. Buenazo. Voy a barrerme todo reactjs

Mis apuntes de Notion💚

1 y 2da clase al pedo tiempo perdidoooo