From dabf61a41345e69a81d4129dfd86571b8d2e7515 Mon Sep 17 00:00:00 2001 From: Arnaldo Perez Date: Thu, 8 Feb 2024 16:28:35 -0400 Subject: [PATCH 1/4] =?UTF-8?q?Patrones=20de=20dise=C3=B1o=20de=20react?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lesson/react-design-patterns.es.md | 242 +++++++++++++++++- src/content/lesson/what-is-react-flux.md | 2 +- 2 files changed, 242 insertions(+), 2 deletions(-) diff --git a/src/content/lesson/react-design-patterns.es.md b/src/content/lesson/react-design-patterns.es.md index 4cdeb906b..30d7a446b 100644 --- a/src/content/lesson/react-design-patterns.es.md +++ b/src/content/lesson/react-design-patterns.es.md @@ -1 +1,241 @@ -# https://codesandbox.io/p/sandbox/higher-order-component-card-vv2grj?file=%2Fsrc%2FPlanetCard.js +## ¿Que son patrones de diseño? + +La programación se trata de escribir instrucciones para ser interpretadas por una maquina, lo que nos lleva en muchos casos a que existan muchas formas de solucionar un mismo problema. Aun asi hay asuntos comunes que se deben considerar a la hora de hacer crecer un sistema o lograr que tenga un buen desempeño si tiene una gran concurrencia, ahi los patrones de diseño nos ayudan a dar solución a estos escenarios. + +> Los patrones de diseño son estrategias para solucionar problemas comunes en la programación. Algunos solucionan problemas de reutilización de código, otros problemas de escalabilidad o eficiencia. No se trata de librerías o frameworks específicos, son mas bien formas de utilizar las herramientas que te ofrece una determinada tecnología, para evitar problemas que ya son bien conocidos y cuyas soluciones ya han sido probadas. + +Los planteamientos de los patrones de diseño se hacen de forma genérica, de manera que puedan ser implementados en contextos específicos con sus propias particularidades. En éste articulo vamos a ver algunos patrones utilizados en React y que sirven para hacer nuestra aplicación mas escalable y eficiente. + +## Componentes de orden superior (Higher order components - HOC) + +Este patrón plantea la creación de componentes que estén diseñados para contener en su interior a otro componente, al mismo tiempo que le agrega funcionalidades. Este componente contenedor, llamado de orden superior, tiene que contemplar funcionalidades comunes que puedan ser requeridas por los demás componentes que serán envueltos con él. + +En este ejemplo tenemos un componente de tarjeta (Card) de bootstrap que tiene una funcionalidad básica, pero que implementa el patrón HOC para que recibir otros componentes como cuerpo de dicha tarjeta. Esto permite tener componentes de tarjeta similares, que comparten funcionalidades comunes, pero que tienen una estructura propia para el contenido. + +```react +// Card.jsx +export default function wrapCard(BodyComponent) { + const CardWrapper = (props) => { + // Esta función será utilizada por todos los componentes envueltos en este + const saveClick = () => { + console.log("Saved props: " + JSON.stringify(props)); + }; + return ( + <> +
+
+
    + {/* Barra de herramienta para las tarjetas*/} +
+
+ {/* Aquí se coloca el componente del cuerpo de la tarjeta*/} + +
+ + ); + }; + return CardWrapper; +} +``` + +A la hora de crear el componente para el cuerpo se debe exportar llamando a la función que lo va a envolver en el componente de nivel superior. + +```react +// Character.jsx +import wrapCard from "./Card"; + +const CharacterCard = ({ character }) => { + return ( + <> +
+ {/* Encabezado de la tarjeta */} +
+
+ {/* Cuerpo de la tarjeta */} +
+ + ); +}; +// Se exporta envuelto en el componente de nivel superior +export default wrapCard(CharacterCard); +``` + +Así como este componente pueden crearse todos los que sean necesarios utilizando el patrón HOC para que todos compartan funcionalidades y estilos. Aquí tienes un ejemplo implementando esta tarjeta: + + + +## Patrón proveedor (Provider) + +Este patrón se popularizo en la comunidad de React desde que se introdujo la api de contexto (Context API), se trata de básicamente de crear un componente que **provee** de un estado a todos los componentes en su interior. Tratándose de aplicaciones que se forman en base a componentes, se pueden crear varias capas de proveedores (cada una dentro de otra) que provean de varios contextos a tu aplicación. + +![Las apps de react son como cebollas](https://breathecode.herokuapp.com/v1/media/file/apps-de-react-son-como-cebollas "Las apps de react son como cebollas"). + +![React apps are like onions](https://breathecode.herokuapp.com/v1/media/file/react-apps-are-like-onions "React apps are like onions"). + +Algunas librerías implementan este patrón por defecto, como por ejemplo React Router que envuelve toda la aplicación en un componente `` y luego te permite crear layouts con rutas dinámicas con el componente ``, creando asi varias capas de proveedores. Si quieres saber más de como usar React Router puedes visitar [éste artículo](https://4geeks.com/es/lesson/routing-our-views-with-react-router-es). +[this article](https://4geeks.com/lesson/routing-our-views-with-react-router). + +Claro que también puedes crear tus propios contextos con lo que necesites, por ejemplo puedes crear un contexto que sirva para cambiar el diseño de tu aplicación de un modo claro a un modo oscuro, veamos como hacerlo: + +```react +// ThemeProvider.jsx +import React, { createContext, useContext, useState } from "react"; + +// Crearemos nuestro contexto y creamos la instancia que se va a exportar +const ThemeContext = createContext(); +function useTheme() { + return useContext(ThemeContext); +} +export default useTheme; + +// Se crea el proveedor para envolver nuestra app, +// usando como valor un estado para el tema +// y una función que alterna entre claro y oscuro. +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState("light"); + const changeTheme = () => { + setTheme(theme === "light" ? "dark" : "light"); + }; + return ( + + {children} + + ); +} +``` + +Luego de esto solo queda envolver nuestra aplicación en el proveedor y empezar a usar el contexto en nuestros componentes. + +```react +// index.jsx +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import { ThemeProvider } from "./ThemeProvider.jsx"; + +ReactDOM.createRoot(document.getElementById("root")).render( + + {/* El proveedor se usa para envolver el componente raíz de la app */} + + + + , +); +``` + +```react +// App.jsx +import "./App.css"; +// Importamos el contexto de nuestro tema +import useTheme from "./ThemeProvider"; + +export default function App() { + // Accedemos al estado del tema y la función que lo cambia + const { theme, changeTheme } = useTheme(); + return ( +
+

Theme {theme}

+ +
+ ); +} +``` + +Puedes ver otros usos de la api de contexto en [ésta lección](https://4geeks.com/lesson/context-api). Aquí podemos ver el resultado final en funcionamiento: + + +## Patrón de componentes compuestos (Compound components) + +Este patrón plantea la integración de componentes que están hechos para trabajar juntos o muy integrados. Para ello el componente principal crea un contexto y lo expone a los componentes hijos que deben ir dentro, lo que les permite compartir datos y funciones dentro del conjunto. Una librería que implementa este patrón es **React Bootstrap**, que implementa sus formularios como un componente que debe estar integrado por otros subcomponentes para los controles, permitiéndole integrar funciones como la validación de manera conjunta. + +Si bien los componentes hijos se declaran como cualquier otro componente, se suelen exportar como miembros del componente principal, para que en implementación sea mas notoria su integración. + +```react +// Contexto para el conjunto de componentes +const SelectContext = createContext(); + +// Componente principal +const Select = (props) => {...}; + +// Componente hijo +const Option = (props) => {...}; + +// Se agrega al componente principal una propiedad que contiene al hijo +Select.Option = Option; + +export default Select; +``` + + Para el ejemplo crearemos un selector de opciones para un formulario. El componente padre será ` checkOption(value)} + name={name} + value={value} + /> + + + ); +}; +``` + +En esta demostración podemos ver la implementación final de nuestro selector utilizando el patron de componentes compuestos: + + + +## Conclusión + +Como hemos visto los patrones nos ofrecen soluciones a problemas típicos que nos encontramos en el desarrollo de un software. No son mas que una manera ingeniosa de utilizar las herramientas que ya tenemos con React, para que faciliten determinada función. + +No podemos decir que uno sea mejor que otro, solo que cada uno sirve para casos específicos o se adaptan mejor a determinada situación. Tampoco es obligatorio su uso, mas bien es bueno implementarlos en casos donde se necesite escalar en la complejidad, pero para casos muy sencillos puede llegar a ser excesivos. Ahora que conoces estos patrones, piensa en qué proyectos los puedes aprovechar. \ No newline at end of file diff --git a/src/content/lesson/what-is-react-flux.md b/src/content/lesson/what-is-react-flux.md index a6d0f6793..cc5f2aa8c 100644 --- a/src/content/lesson/what-is-react-flux.md +++ b/src/content/lesson/what-is-react-flux.md @@ -222,4 +222,4 @@ export default function ListItem({ task, index }) { We have implemented the logic of our application in a context applying the flux pattern, allowing its use in different components. Now we can see the final result working. - \ No newline at end of file + \ No newline at end of file From d1fd041398e7cb4d7eb4d51bd0e1313b156675d7 Mon Sep 17 00:00:00 2001 From: Arnaldo Perez Date: Thu, 8 Feb 2024 16:31:33 -0400 Subject: [PATCH 2/4] Patrones de componentes react --- .../lesson/react-design-patterns.es.md | 118 +++++++++--------- 1 file changed, 58 insertions(+), 60 deletions(-) diff --git a/src/content/lesson/react-design-patterns.es.md b/src/content/lesson/react-design-patterns.es.md index 30d7a446b..a428660bc 100644 --- a/src/content/lesson/react-design-patterns.es.md +++ b/src/content/lesson/react-design-patterns.es.md @@ -6,72 +6,12 @@ La programación se trata de escribir instrucciones para ser interpretadas por u Los planteamientos de los patrones de diseño se hacen de forma genérica, de manera que puedan ser implementados en contextos específicos con sus propias particularidades. En éste articulo vamos a ver algunos patrones utilizados en React y que sirven para hacer nuestra aplicación mas escalable y eficiente. -## Componentes de orden superior (Higher order components - HOC) - -Este patrón plantea la creación de componentes que estén diseñados para contener en su interior a otro componente, al mismo tiempo que le agrega funcionalidades. Este componente contenedor, llamado de orden superior, tiene que contemplar funcionalidades comunes que puedan ser requeridas por los demás componentes que serán envueltos con él. - -En este ejemplo tenemos un componente de tarjeta (Card) de bootstrap que tiene una funcionalidad básica, pero que implementa el patrón HOC para que recibir otros componentes como cuerpo de dicha tarjeta. Esto permite tener componentes de tarjeta similares, que comparten funcionalidades comunes, pero que tienen una estructura propia para el contenido. - -```react -// Card.jsx -export default function wrapCard(BodyComponent) { - const CardWrapper = (props) => { - // Esta función será utilizada por todos los componentes envueltos en este - const saveClick = () => { - console.log("Saved props: " + JSON.stringify(props)); - }; - return ( - <> -
-
-
    - {/* Barra de herramienta para las tarjetas*/} -
-
- {/* Aquí se coloca el componente del cuerpo de la tarjeta*/} - -
- - ); - }; - return CardWrapper; -} -``` - -A la hora de crear el componente para el cuerpo se debe exportar llamando a la función que lo va a envolver en el componente de nivel superior. - -```react -// Character.jsx -import wrapCard from "./Card"; - -const CharacterCard = ({ character }) => { - return ( - <> -
- {/* Encabezado de la tarjeta */} -
-
- {/* Cuerpo de la tarjeta */} -
- - ); -}; -// Se exporta envuelto en el componente de nivel superior -export default wrapCard(CharacterCard); -``` - -Así como este componente pueden crearse todos los que sean necesarios utilizando el patrón HOC para que todos compartan funcionalidades y estilos. Aquí tienes un ejemplo implementando esta tarjeta: - - - ## Patrón proveedor (Provider) Este patrón se popularizo en la comunidad de React desde que se introdujo la api de contexto (Context API), se trata de básicamente de crear un componente que **provee** de un estado a todos los componentes en su interior. Tratándose de aplicaciones que se forman en base a componentes, se pueden crear varias capas de proveedores (cada una dentro de otra) que provean de varios contextos a tu aplicación. ![Las apps de react son como cebollas](https://breathecode.herokuapp.com/v1/media/file/apps-de-react-son-como-cebollas "Las apps de react son como cebollas"). -![React apps are like onions](https://breathecode.herokuapp.com/v1/media/file/react-apps-are-like-onions "React apps are like onions"). - Algunas librerías implementan este patrón por defecto, como por ejemplo React Router que envuelve toda la aplicación en un componente `` y luego te permite crear layouts con rutas dinámicas con el componente ``, creando asi varias capas de proveedores. Si quieres saber más de como usar React Router puedes visitar [éste artículo](https://4geeks.com/es/lesson/routing-our-views-with-react-router-es). [this article](https://4geeks.com/lesson/routing-our-views-with-react-router). @@ -144,6 +84,64 @@ export default function App() { Puedes ver otros usos de la api de contexto en [ésta lección](https://4geeks.com/lesson/context-api). Aquí podemos ver el resultado final en funcionamiento: +## Componentes de orden superior (Higher order components - HOC) + +Este patrón plantea la creación de componentes que estén diseñados para contener en su interior a otro componente, al mismo tiempo que le agrega funcionalidades. Este componente contenedor, llamado de orden superior, tiene que contemplar funcionalidades comunes que puedan ser requeridas por los demás componentes que serán envueltos con él. + +En este ejemplo tenemos un componente de tarjeta (Card) de bootstrap que tiene una funcionalidad básica, pero que implementa el patrón HOC para que recibir otros componentes como cuerpo de dicha tarjeta. Esto permite tener componentes de tarjeta similares, que comparten funcionalidades comunes, pero que tienen una estructura propia para el contenido. + +```react +// Card.jsx +export default function wrapCard(BodyComponent) { + const CardWrapper = (props) => { + // Esta función será utilizada por todos los componentes envueltos en este + const saveClick = () => { + console.log("Saved props: " + JSON.stringify(props)); + }; + return ( + <> +
+
+
    + {/* Barra de herramienta para las tarjetas*/} +
+
+ {/* Aquí se coloca el componente del cuerpo de la tarjeta*/} + +
+ + ); + }; + return CardWrapper; +} +``` + +A la hora de crear el componente para el cuerpo se debe exportar llamando a la función que lo va a envolver en el componente de nivel superior. + +```react +// Character.jsx +import wrapCard from "./Card"; + +const CharacterCard = ({ character }) => { + return ( + <> +
+ {/* Encabezado de la tarjeta */} +
+
+ {/* Cuerpo de la tarjeta */} +
+ + ); +}; +// Se exporta envuelto en el componente de nivel superior +export default wrapCard(CharacterCard); +``` + +Así como este componente pueden crearse todos los que sean necesarios utilizando el patrón HOC para que todos compartan funcionalidades y estilos. Aquí tienes un ejemplo implementando esta tarjeta: + + + ## Patrón de componentes compuestos (Compound components) Este patrón plantea la integración de componentes que están hechos para trabajar juntos o muy integrados. Para ello el componente principal crea un contexto y lo expone a los componentes hijos que deben ir dentro, lo que les permite compartir datos y funciones dentro del conjunto. Una librería que implementa este patrón es **React Bootstrap**, que implementa sus formularios como un componente que debe estar integrado por otros subcomponentes para los controles, permitiéndole integrar funciones como la validación de manera conjunta. From be3c4c912c98a6546e7ec6145cee47356b1b6e93 Mon Sep 17 00:00:00 2001 From: Arnaldo Perez Date: Thu, 8 Feb 2024 16:32:26 -0400 Subject: [PATCH 3/4] Patrones de componentes react --- src/content/lesson/react-design-patterns.md | 239 ++++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 src/content/lesson/react-design-patterns.md diff --git a/src/content/lesson/react-design-patterns.md b/src/content/lesson/react-design-patterns.md new file mode 100644 index 000000000..f1bf0929a --- /dev/null +++ b/src/content/lesson/react-design-patterns.md @@ -0,0 +1,239 @@ +## ¿Que son patrones de diseño? + +La programación se trata de escribir instrucciones para ser interpretadas por una maquina, lo que nos lleva en muchos casos a que existan muchas formas de solucionar un mismo problema. Aun asi hay asuntos comunes que se deben considerar a la hora de hacer crecer un sistema o lograr que tenga un buen desempeño si tiene una gran concurrencia, ahi los patrones de diseño nos ayudan a dar solución a estos escenarios. + +> Los patrones de diseño son estrategias para solucionar problemas comunes en la programación. Algunos solucionan problemas de reutilización de código, otros problemas de escalabilidad o eficiencia. No se trata de librerías o frameworks específicos, son mas bien formas de utilizar las herramientas que te ofrece una determinada tecnología, para evitar problemas que ya son bien conocidos y cuyas soluciones ya han sido probadas. + +Los planteamientos de los patrones de diseño se hacen de forma genérica, de manera que puedan ser implementados en contextos específicos con sus propias particularidades. En éste articulo vamos a ver algunos patrones utilizados en React y que sirven para hacer nuestra aplicación mas escalable y eficiente. + +## Componentes de orden superior (Higher order components - HOC) + +Este patrón plantea la creación de componentes que estén diseñados para contener en su interior a otro componente, al mismo tiempo que le agrega funcionalidades. Este componente contenedor, llamado de orden superior, tiene que contemplar funcionalidades comunes que puedan ser requeridas por los demás componentes que serán envueltos con él. + +En este ejemplo tenemos un componente de tarjeta (Card) de bootstrap que tiene una funcionalidad básica, pero que implementa el patrón HOC para que recibir otros componentes como cuerpo de dicha tarjeta. Esto permite tener componentes de tarjeta similares, que comparten funcionalidades comunes, pero que tienen una estructura propia para el contenido. + +```react +// Card.jsx +export default function wrapCard(BodyComponent) { + const CardWrapper = (props) => { + // Esta función será utilizada por todos los componentes envueltos en este + const saveClick = () => { + console.log("Saved props: " + JSON.stringify(props)); + }; + return ( + <> +
+
+
    + {/* Barra de herramienta para las tarjetas*/} +
+
+ {/* Aquí se coloca el componente del cuerpo de la tarjeta*/} + +
+ + ); + }; + return CardWrapper; +} +``` + +A la hora de crear el componente para el cuerpo se debe exportar llamando a la función que lo va a envolver en el componente de nivel superior. + +```react +// Character.jsx +import wrapCard from "./Card"; + +const CharacterCard = ({ character }) => { + return ( + <> +
+ {/* Encabezado de la tarjeta */} +
+
+ {/* Cuerpo de la tarjeta */} +
+ + ); +}; +// Se exporta envuelto en el componente de nivel superior +export default wrapCard(CharacterCard); +``` + +Así como este componente pueden crearse todos los que sean necesarios utilizando el patrón HOC para que todos compartan funcionalidades y estilos. Aquí tienes un ejemplo implementando esta tarjeta: + + + +## Patrón proveedor (Provider) + +Este patrón se popularizo en la comunidad de React desde que se introdujo la api de contexto (Context API), se trata de básicamente de crear un componente que **provee** de un estado a todos los componentes en su interior. Tratándose de aplicaciones que se forman en base a componentes, se pueden crear varias capas de proveedores (cada una dentro de otra) que provean de varios contextos a tu aplicación. + +![React apps are like onions](https://breathecode.herokuapp.com/v1/media/file/react-apps-are-like-onions "React apps are like onions"). + +Algunas librerías implementan este patrón por defecto, como por ejemplo React Router que envuelve toda la aplicación en un componente `` y luego te permite crear layouts con rutas dinámicas con el componente ``, creando asi varias capas de proveedores. Si quieres saber más de como usar React Router puedes visitar [éste artículo](https://4geeks.com/es/lesson/routing-our-views-with-react-router-es). +[this article](https://4geeks.com/lesson/routing-our-views-with-react-router). + +Claro que también puedes crear tus propios contextos con lo que necesites, por ejemplo puedes crear un contexto que sirva para cambiar el diseño de tu aplicación de un modo claro a un modo oscuro, veamos como hacerlo: + +```react +// ThemeProvider.jsx +import React, { createContext, useContext, useState } from "react"; + +// Crearemos nuestro contexto y creamos la instancia que se va a exportar +const ThemeContext = createContext(); +function useTheme() { + return useContext(ThemeContext); +} +export default useTheme; + +// Se crea el proveedor para envolver nuestra app, +// usando como valor un estado para el tema +// y una función que alterna entre claro y oscuro. +export function ThemeProvider({ children }) { + const [theme, setTheme] = useState("light"); + const changeTheme = () => { + setTheme(theme === "light" ? "dark" : "light"); + }; + return ( + + {children} + + ); +} +``` + +Luego de esto solo queda envolver nuestra aplicación en el proveedor y empezar a usar el contexto en nuestros componentes. + +```react +// index.jsx +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import { ThemeProvider } from "./ThemeProvider.jsx"; + +ReactDOM.createRoot(document.getElementById("root")).render( + + {/* El proveedor se usa para envolver el componente raíz de la app */} + + + + , +); +``` + +```react +// App.jsx +import "./App.css"; +// Importamos el contexto de nuestro tema +import useTheme from "./ThemeProvider"; + +export default function App() { + // Accedemos al estado del tema y la función que lo cambia + const { theme, changeTheme } = useTheme(); + return ( +
+

Theme {theme}

+ +
+ ); +} +``` + +Puedes ver otros usos de la api de contexto en [ésta lección](https://4geeks.com/lesson/context-api). Aquí podemos ver el resultado final en funcionamiento: + + +## Patrón de componentes compuestos (Compound components) + +Este patrón plantea la integración de componentes que están hechos para trabajar juntos o muy integrados. Para ello el componente principal crea un contexto y lo expone a los componentes hijos que deben ir dentro, lo que les permite compartir datos y funciones dentro del conjunto. Una librería que implementa este patrón es **React Bootstrap**, que implementa sus formularios como un componente que debe estar integrado por otros subcomponentes para los controles, permitiéndole integrar funciones como la validación de manera conjunta. + +Si bien los componentes hijos se declaran como cualquier otro componente, se suelen exportar como miembros del componente principal, para que en implementación sea mas notoria su integración. + +```react +// Contexto para el conjunto de componentes +const SelectContext = createContext(); + +// Componente principal +const Select = (props) => {...}; + +// Componente hijo +const Option = (props) => {...}; + +// Se agrega al componente principal una propiedad que contiene al hijo +Select.Option = Option; + +export default Select; +``` + + Para el ejemplo crearemos un selector de opciones para un formulario. El componente padre será ` checkOption(value)} + name={name} + value={value} + /> + + + ); +}; +``` + +En esta demostración podemos ver la implementación final de nuestro selector utilizando el patron de componentes compuestos: + + + +## Conclusión + +Como hemos visto los patrones nos ofrecen soluciones a problemas típicos que nos encontramos en el desarrollo de un software. No son mas que una manera ingeniosa de utilizar las herramientas que ya tenemos con React, para que faciliten determinada función. + +No podemos decir que uno sea mejor que otro, solo que cada uno sirve para casos específicos o se adaptan mejor a determinada situación. Tampoco es obligatorio su uso, mas bien es bueno implementarlos en casos donde se necesite escalar en la complejidad, pero para casos muy sencillos puede llegar a ser excesivos. Ahora que conoces estos patrones, piensa en qué proyectos los puedes aprovechar. \ No newline at end of file From 82e41fbb4a9d16b6665a0058330cf78b58f130bf Mon Sep 17 00:00:00 2001 From: Arnaldo Perez Date: Mon, 12 Feb 2024 11:43:25 -0400 Subject: [PATCH 4/4] Traduccion --- src/content/lesson/react-design-patterns.es.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/lesson/react-design-patterns.es.md b/src/content/lesson/react-design-patterns.es.md index a428660bc..14a37dc68 100644 --- a/src/content/lesson/react-design-patterns.es.md +++ b/src/content/lesson/react-design-patterns.es.md @@ -10,7 +10,7 @@ Los planteamientos de los patrones de diseño se hacen de forma genérica, de ma Este patrón se popularizo en la comunidad de React desde que se introdujo la api de contexto (Context API), se trata de básicamente de crear un componente que **provee** de un estado a todos los componentes en su interior. Tratándose de aplicaciones que se forman en base a componentes, se pueden crear varias capas de proveedores (cada una dentro de otra) que provean de varios contextos a tu aplicación. -![Las apps de react son como cebollas](https://breathecode.herokuapp.com/v1/media/file/apps-de-react-son-como-cebollas "Las apps de react son como cebollas"). +![Las apps de react son como cebollas](https://breathecode.herokuapp.com/v1/media/file/apps-de-react-son-como-cebollas "Las apps de react son como cebollas") Algunas librerías implementan este patrón por defecto, como por ejemplo React Router que envuelve toda la aplicación en un componente `` y luego te permite crear layouts con rutas dinámicas con el componente ``, creando asi varias capas de proveedores. Si quieres saber más de como usar React Router puedes visitar [éste artículo](https://4geeks.com/es/lesson/routing-our-views-with-react-router-es). [this article](https://4geeks.com/lesson/routing-our-views-with-react-router).