React.js: flujo de datos dentro de la aplicación

Hola mi nombre es Tony y en estas lecciones hablaremos sobre el flujo de datos dentro de la estructura de carpetas de una aplicación y ganchos personalizados con API de contexto. En esta lección hablaremos de múltiples componentes, enrutamiento y navegación. Echemos un vistazo a la aplicación. Puede agregar tareas aquí una por una. Márcalos y eliminarlos. Y hay un contador debajo que lleva la cuenta para nosotros. Hasta ahora todo está servido. Nosotros por un solo componente y eso. El componente solía estar alojado en la aplicación. Ahora nuestra aplicación se ve un poco diferente. Eso lo vemos ahora mismo. Esto está disponible para nosotros en Slashnda y si vamos aquí, obtenga esta pequeña página mínima solo para ilustrar el punto que dice bienvenido a mi aplicación. Entonces, cómo lo estamos haciendo somos nosotros. Están utilizando un componente de reacción proporcionado. Nosotros por reaccionar enrutador Dom llamado enrutador del navegador o enrutador. Esta es su nomenclatura. El enrutador es el componente superior. Las rutas están inmediatamente debajo. Ahora aquí, una vez más, estamos exportando enrutadores de navegador. Supongo que podríamos hacer esto para eliminar la confusión. Esto efectivamente nos da lo mismo. Entonces, el enrutador del navegador es el componente principal. Las rutas están inmediatamente debajo y las rutas individuales. Aquí hay un componente de ruta única. Entonces, ¿qué está pasando dentro de este único componente que señala cada individuo. Camino a algún tipo de componente. Que sirve esta ruta. Entonces el camino es primero. Entonces, para la agenda de Slash, cuando este camino. Es exacto, el elemento que estamos usando. La salida para esta ruta es esta. Elemento de la agenda aquí mismo. Echemos un vistazo. Es básicamente lo que teníamos en el. Componente de la aplicación antes de que lo moviéramos. Ser su propio componente. Estos vienen como accesorios. Entonces los pasamos desde el componente de la aplicación. Y el resto es como. Solía ​​serlo antes. Entonces no hay cambios en esta parte. Estamos haciendo lo mismo aquí. Sólo que no estamos pasando ningún accesorio. Aquí en absoluto porque este es un componente muy, muy simple. Básicamente dice bienvenido a mi aplicación en medio de la pantalla. Pero también tenemos la capacidad de hacerlo. Haz algo bastante bueno aquí. Hasta ahora hemos estado usando rutas exactas pero también tenemos el. Posibilidad de utilizar comodines. Así, por ejemplo, si quisiéramos todos. Solicite a Tareas que cualquier cosa sea redirigida a Agenda, esto es cómo haríamos esto. Usaríamos el componente de ruta, las rutas serían Tareas estrella. Entonces Star es, por supuesto, un comodín. Para cualquier cosa que siga una ruta de tareas Slash. O mejor dicho, parte del camino. Y vamos a utilizar Navegar, que es una opción especial. elemento que nosotros. También se transportan desde el enrutador React Dom. y vamos a utilizar este Navegar para navegar a la agenda de Slash. Veamos cómo funciona. Entonces, si fuéramos a. Y literalmente cualquier cosa aquí vamos a ser redirigidos a la agenda. Ahora bien, por supuesto, en una organización profesional, esto se ampliará mucho más. Pero básicamente lo que vas a hacer. Ver va a ser algún tipo. De una variación de lo que acabamos de ver, pero una vez más ampliado. A escala profesional en un entorno del mundo real. En nuestra próxima lección, vamos. Para echar un vistazo a la estructura adecuada de carpetas de la aplicación. Gracias por ver. Adiós.