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

Name: React.js: flujo de datos dentro de la aplicación
Author: Tony Davydets

Este curso cubre conceptos esenciales relacionados con el enrutamiento y la navegación en una aplicación web React. Aprenderá a manejar diferentes rutas y a…

Preview the first lesson free — get full access to all 1 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

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.

Proveedor : Tony Davydets 1 lección · 13m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Este curso cubre conceptos esenciales relacionados con el enrutamiento y la navegación en una aplicación web React. Aprenderá a manejar diferentes rutas y a crear enlaces para navegar entre páginas. Además, aprenderá sobre la API de contexto y cómo crear enlaces personalizados.

El enrutamiento y la navegación son partes esenciales de cualquier aplicación web y React proporciona herramientas para hacer que este proceso sea fácil e intuitivo. Aprenderá a crear un sistema de enrutamiento para su aplicación utilizando React Router. Aprenderá a definir diferentes rutas para diferentes páginas, a usar componentes de enlace para navegar entre páginas y a pasar parámetros a través de URL.

Pasar datos entre componentes puede volverse tedioso a medida que crece la aplicación, sobre todo si debe pasar datos a través de varias capas de componentes. En este módulo, aprenderá a crear y a usar la API de contexto para compartir fácilmente datos en su aplicación. También aprenderá a crear enlaces personalizados con la API de contexto, que puede simplificar el proceso de pasar datos a través de la aplicación.

Por último, se le presentará una estructura de carpetas sugerida para organizar su aplicación React. Aprenderá a organizar sus componentes, estilos y utilidades en directorios separados, lo que puede facilitar la gestión y la navegación de su código.

Lo que aprenderás

Navegar por aplicaciones web de React utilizando React Router
Definir diferentes rutas para diferentes páginas y crear enlaces para navegar entre ellas
Pasar parámetros a través de URLs para mover datos entre páginas
Usar la API de contexto para compartir datos en su aplicación
Crear hooks personalizados con la API de contexto para simplificar el paso de datos
Organizar componentes, estilos y utilidades en una estructura de carpetas sugerida

Puntos clave

El enrutamiento y la navegación son partes esenciales de cualquier aplicación web, y React proporciona herramientas para hacer que el proceso sea fácil e intuitivo.
React Router le permite construir un sistema de enrutamiento que defina rutas, use componentes de enlace para navegación y pase parámetros a través de URLs.
La API de contexto comparte datos en una aplicación sin pasarlos a través de múltiples capas de componentes.
Los hooks personalizados construidos con la API de contexto simplifican el paso de datos en toda la aplicación.
Una estructura de carpetas sugerida que separa componentes, estilos y utilidades hace que el código sea más manejable y más fácil de navegar.

Preguntas frecuentes

¿Qué cubre este curso?

Cubre enrutamiento y navegación en una aplicación web de React, incluyendo manejo de rutas y creación de enlaces con React Router, uso de la API de contexto para compartir datos, creación de hooks personalizados con la API de contexto y una estructura de carpetas sugerida para organizar su aplicación.

¿Qué aprenderé sobre la gestión del flujo de datos en React?

Aprenderá cómo pasar datos entre componentes usando la API de contexto para compartir datos en su aplicación fácilmente, y cómo crear hooks personalizados con la API de contexto para simplificar el paso de datos en toda la aplicación.

¿Cómo se maneja la navegación en este curso?

Aprenderá a crear un sistema de enrutamiento usando React Router, definir diferentes rutas para diferentes páginas, usar componentes de enlace para navegar entre páginas y pasar parámetros a través de URLs.

¿Qué lecciones se incluyen en este curso?

El curso incluye tres lecciones: Múltiples componentes, enrutamiento y navegación; estructura de carpetas de aplicación; y paso de datos y hooks personalizados con la API de contexto.

¿Qué habilidades están asociadas con este curso?

Las habilidades asociadas incluyen crear aplicación React, Flux (React.js), React JSX, React VR, React.js (biblioteca JavaScript) y WebMethods Flow.