From ec9da7a2aed275264db45bfc5f20ac3ba59ff441 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 9 May 2023 00:10:41 -0600 Subject: [PATCH 01/17] WIP: Translate "Passing Data Deeply with Context" --- .../learn/passing-data-deeply-with-context.md | 28 +++++++++---------- src/sidebarLearn.json | 4 +-- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 45c5e77da..b3a99ebfb 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -1,44 +1,44 @@ --- -title: Passing Data Deeply with Context +title: Pasar datos en profundidad con Context --- -Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. *Context* lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props. +Usualmente, tu pasarías información desde un componente papá a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlos a través de múltiples componentes, o si varios componentes en tu app necesitan la misma información. *Context* permite que cierta información del componente papá esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. -- What "prop drilling" is -- How to replace repetitive prop passing with context -- Common use cases for context -- Common alternatives to context +- Qué es "perforación de props" +- Cómo reemplazar el paso repetitivo de props con context +- Casos de uso comunes para context +- Alternativas comunes a context -## The problem with passing props {/*the-problem-with-passing-props*/} +## El problema con pasar props {/*the-problem-with-passing-props*/} -[Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it. +[Pasar props](/learn/passing-props-to-a-component) es una gran manera de enviar explícitamente datos a través del árbol de la UI a componentes que los usen. -But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation called "prop drilling". +No obstante, pasar props puede conversirse en una tarea verbosa e incoveniente cuando necesitas enviar algunas props profundamente a través del árbol, o si múltiples componentes necesitan de las mismas. El ancestro común más cercano podría estar muy alejado de los componentes que necesitan los datos, y [elevar el estado](/learn/sharing-state-between-components) tan alto puede ocasionar la situación llamada "perforación de props". - + -Lifting state up +Elevar el estado - + -Prop drilling +Perforación de props -Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is! +¿No sería grandioso si existiese alguna forma de "teletransportar" datos a componentes en el árbol que lo necesiten sin tener que pasar props? ¡Con el context de React es posible! ## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/} diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index f55c5dc5c..d8aad1b13 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -146,7 +146,7 @@ "path": "/learn/extracting-state-logic-into-a-reducer" }, { - "title": "Passing Data Deeply with Context", + "title": "Pasar datos en profundidad con Context", "path": "/learn/passing-data-deeply-with-context" }, { @@ -186,7 +186,7 @@ }, { "title": "Eliminar dependencias de los Efectos", - "path": "/learn/removing-effect-dependencies" + "path": "/learn/removing-effect-dependencies" }, { "title": "Reutilización de lógica con Hooks personalizados", From fa45bd40af30c59ac109ae9fa17c0a409f70d159 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 10 May 2023 22:48:50 -0600 Subject: [PATCH 02/17] WIP: Translate passing data deeply with context --- .../learn/passing-data-deeply-with-context.md | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index b3a99ebfb..bcddc1821 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -40,9 +40,9 @@ Perforación de props ¿No sería grandioso si existiese alguna forma de "teletransportar" datos a componentes en el árbol que lo necesiten sin tener que pasar props? ¡Con el context de React es posible! -## Context: an alternative to passing props {/*context-an-alternative-to-passing-props*/} +## Context: Una alternativo a pasar props {/*context-an-alternative-to-passing-props*/} -Context lets a parent component provide data to the entire tree below it. There are many uses for context. Here is one example. Consider this `Heading` component that accepts a `level` for its size: +Context permite que el componente papá provea datos al árbol entero debajo de él. Hay muchas utilidades para el context. Este es un solo ejemplo. Considera el componente `Heading` que acepta `level` como su tamaño: @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Let's say you want multiple headings within the same `Section` to always have the same size: +Supongamos que tu quieres múltiples encabezados (*headings*) dentro del mismo componente `Section` para siempre tener el mismo tamaño: @@ -180,7 +180,7 @@ export default function Heading({ level, children }) { -Currently, you pass the `level` prop to each `` separately: +Actualmente, estás pasando la prop `level` a cada `` separadamente: ```js
@@ -189,8 +189,7 @@ Currently, you pass the `level` prop to each `` separately: Videos
``` - -It would be nice if you could pass the `level` prop to the `
` component instead and remove it from the ``. This way you could enforce that all headings in the same section have the same size: +Sería genial si tu pudieras pasar la prop `level` al componente `
` y removerlo del ``. De esta forma podrías reforzar que todos los encabezados tengan el mismo tamaño en una misma sección (*section*): ```js
@@ -200,15 +199,15 @@ It would be nice if you could pass the `level` prop to the `
` component
``` -But how can the `` component know the level of its closest `
`? **That would require some way for a child to "ask" for data from somewhere above in the tree.** +¿Pero como podría el componente `` conocer el `level` de su `
` más cercano? **Eso requeriría alguna forma en la que el hijo "pediría" datos desde algún lugar arriba en el árbol.** -You can't do it with props alone. This is where context comes into play. You will do it in three steps: +No podrías lograrlo únicamente con props. Aquí es donde el contexto entra a jugar. Lo conseguirás en tres pasos: -1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.) -2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.) -3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.) +1. **Crear** un contexto. (puedes llamarlo `LevelContext`, ya que es para el `level` de los encabezados) +2. **Usar** ese contexto desde el componente que necesita los datos. (`Heading` usará `LevelContext`) +3. **Proveer** ese contexto desde el componente que especifica los datos. (`Section` proveerá `LevelContext`) -Context lets a parent--even a distant one!--provide some data to the entire tree inside of it. +El contexto permite que en un papá (incluso uno distante) provea algunos datos a la totalidad del árbol dentro de él. From 47b9ee8c683ed52cfeea70f48c4b89179a426a9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 10 May 2023 22:53:28 -0600 Subject: [PATCH 03/17] WIP: Change context to contexto --- .../learn/passing-data-deeply-with-context.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index bcddc1821..0e63c04d4 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -1,19 +1,19 @@ --- -title: Pasar datos en profundidad con Context +title: Pasar datos en profundidad con contexto --- -Usualmente, tu pasarías información desde un componente papá a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlos a través de múltiples componentes, o si varios componentes en tu app necesitan la misma información. *Context* permite que cierta información del componente papá esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. +Usualmente, tu pasarías información desde un componente papá a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlos a través de múltiples componentes, o si varios componentes en tu app necesitan la misma información. El *contexto* permite que cierta información del componente papá esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. - Qué es "perforación de props" -- Cómo reemplazar el paso repetitivo de props con context -- Casos de uso comunes para context -- Alternativas comunes a context +- Cómo reemplazar el paso repetitivo de props con contexto +- Casos de uso comunes para el contexto +- Alternativas comunes al contexto @@ -38,11 +38,11 @@ Perforación de props -¿No sería grandioso si existiese alguna forma de "teletransportar" datos a componentes en el árbol que lo necesiten sin tener que pasar props? ¡Con el context de React es posible! +¿No sería grandioso si existiese alguna forma de "teletransportar" datos a componentes en el árbol que lo necesiten sin tener que pasar props? ¡Con el contexto de React es posible! -## Context: Una alternativo a pasar props {/*context-an-alternative-to-passing-props*/} +## Contexto: Una alternativo a pasar props {/*context-an-alternative-to-passing-props*/} -Context permite que el componente papá provea datos al árbol entero debajo de él. Hay muchas utilidades para el context. Este es un solo ejemplo. Considera el componente `Heading` que acepta `level` como su tamaño: +El contexto permite que el componente papá provea datos al árbol entero debajo de él. Hay muchas utilidades para el contexto. Este es un solo ejemplo. Considera el componente `Heading` que acepta `level` como su tamaño: From c972b7393361378c1c8411dcb40449ae4e64d86c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 10 May 2023 23:08:01 -0600 Subject: [PATCH 04/17] WIP: Translate diagrams --- src/content/learn/passing-data-deeply-with-context.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 0e63c04d4..777651009 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -211,15 +211,14 @@ El contexto permite que en un papá (incluso uno distante) provea algunos datos - - -Using context in close children + +Usar contexto en un hijo cercano - + -Using context in distant children +Usar contexto en hijos lejanos From 584d209f956619fba05b770af09d65a55c895d10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Thu, 11 May 2023 23:16:50 -0600 Subject: [PATCH 05/17] WIP: Step 1, 2 and 3 --- .../learn/passing-data-deeply-with-context.md | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 777651009..16e326c54 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -224,9 +224,9 @@ Usar contexto en hijos lejanos -### Step 1: Create the context {/*step-1-create-the-context*/} +### Paso 1: Crear el contexto {/*step-1-create-the-context*/} -First, you need to create the context. You'll need to **export it from a file** so that your components can use it: +Primeramente, necesitas crear el contexto. Necesitarás **exportarlo desde un archivo** para que tus componentes lo puedan usar: @@ -306,26 +306,24 @@ export const LevelContext = createContext(1); -The only argument to `createContext` is the _default_ value. Here, `1` refers to the biggest heading level, but you could pass any kind of value (even an object). You will see the significance of the default value in the next step. +El único parámetro que se le pasa a `createContext` es el valor _predeterminado_. En este caso, `1` se refiere al nivel de encabezado más grande, pero tu puedes pasar cualquier valor (incluso un objeto). Ya verás la importancia del valor predeterminado en el siguiente paso. -### Step 2: Use the context {/*step-2-use-the-context*/} +### Paso 2: Usar el contexto {/*step-2-use-the-context*/} -Import the `useContext` Hook from React and your context: +Importa el Hook `useContext` desde React y tu contexto: ```js import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` - -Currently, the `Heading` component reads `level` from props: +Actualmente, el componente `Heading` lee `level` con props: ```js export default function Heading({ level, children }) { // ... } ``` - -Instead, remove the `level` prop and read the value from the context you just imported, `LevelContext`: +En su lugar, remueva la prop `level` y lee el valor desde el contexto que acabas de importar, `LevelContext`: ```js {2} export default function Heading({ children }) { @@ -334,9 +332,9 @@ export default function Heading({ children }) { } ``` -`useContext` is a Hook. Just like `useState` and `useReducer`, you can only call a Hook immediately inside a React component (not inside loops or conditions). **`useContext` tells React that the `Heading` component wants to read the `LevelContext`.** +`useContext` es un Hook. Así como `useState` y `useReducer`, únicamente puedes llamar a un Hook inmediatamente adentro de un componente de React (no dentro de ciclos o condiciones). **`useContext` le dice a React que el componente `Heading` quiere leer el contexto `LevelContext`.** -Now that the `Heading` component doesn't have a `level` prop, you don't need to pass the level prop to `Heading` in your JSX like this anymore: +Ahora que el componente `Heading` no tiene una prop `level`, ya no tienes que pasarla a `Heading` en tu JSX de esta forma: ```js
@@ -345,8 +343,7 @@ Now that the `Heading` component doesn't have a `level` prop, you don't need to Sub-sub-heading
``` - -Update the JSX so that it's the `Section` that receives it instead: +Actualiza el JSX para que sea `Section` el que recibe la prop: ```jsx
@@ -355,8 +352,7 @@ Update the JSX so that it's the `Section` that receives it instead: Sub-sub-heading
``` - -As a reminder, this is the markup that you were trying to get working: +Como recordatorio, esta es la estructura que estabas intentando que funcionara: @@ -440,13 +436,13 @@ export const LevelContext = createContext(1); -Notice this example doesn't quite work, yet! All the headings have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it! +Nota que este ejemplo no funciona, ¡Aún! Todos los encabezados tienen el mismo tamaño porque **pese a que estás *usando* el contexto, no lo has *proveído* aún.** ¡React no sabe dónde obtenerlo! -If you don't provide the context, React will use the default value you've specified in the previous step. In this example, you specified `1` as the argument to `createContext`, so `useContext(LevelContext)` returns `1`, setting all those headings to `

`. Let's fix this problem by having each `Section` provide its own context. +Si no provees el contexto, React usará el valor predeterminado que especificaste en el paso previo. En este ejemplo, especificaste `1` como el parámetro de `createContext`, entonces `useContext(LevelContext)` retorna `1`, ajustando todos los encabezados a `

`. Arreglemos este problema haciendo que cada `Section` provea su propio contexto. -### Step 3: Provide the context {/*step-3-provide-the-context*/} +### Paso 3: Proveer el contexto {/*step-3-provide-the-context*/} -The `Section` component currently renders its children: +El componente `Section` actualmente renderiza sus hijos: ```js export default function Section({ children }) { @@ -457,8 +453,7 @@ export default function Section({ children }) { ); } ``` - -**Wrap them with a context provider** to provide the `LevelContext` to them: +**Envuélvelos con un proveedor de contexto** para proveer `LevelContext` a ellos: ```js {1,6,8} import { LevelContext } from './LevelContext.js'; @@ -473,8 +468,7 @@ export default function Section({ level, children }) { ); } ``` - -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +Esto le dice a React: "si cualquier componente adentro de este `
` pregunta por `LevelContext`, envíales este `level`." El componente usará el valor del `` más cercano en el árbol de la UI encima de él. @@ -562,11 +556,11 @@ export const LevelContext = createContext(1); -It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above: +¡Es el mismo resultado del código original, pero no tuviste que pasar la prop `level` a cada componente `Heading`! En su lugar, "comprende" su nivel de encabezado al preguntar al `Section` más cercano de arriba: -1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. -3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. +1. Tú pasas la prop `level` al `
`. +2. `Section` envuelve a sus hijos con ``. +3. `Heading` pregunta el valor más cercano de arriba de `LevelContext` por medio de `useContext(LevelContext)`. ## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} From 55b3ecec8852599f7cf69c775875d86cebb18918 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Thu, 11 May 2023 23:18:12 -0600 Subject: [PATCH 06/17] WIP: Fix spelling --- src/content/learn/passing-data-deeply-with-context.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 16e326c54..0682a5c0d 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -4,7 +4,7 @@ title: Pasar datos en profundidad con contexto -Usualmente, tu pasarías información desde un componente papá a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlos a través de múltiples componentes, o si varios componentes en tu app necesitan la misma información. El *contexto* permite que cierta información del componente papá esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. +Usualmente, tú pasarías información desde un componente papá a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlos a través de múltiples componentes, o si varios componentes en tu app necesitan la misma información. El *contexto* permite que cierta información del componente papá esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Supongamos que tu quieres múltiples encabezados (*headings*) dentro del mismo componente `Section` para siempre tener el mismo tamaño: +Supongamos que tú quieres múltiples encabezados (*headings*) dentro del mismo componente `Section` para siempre tener el mismo tamaño: @@ -189,7 +189,7 @@ Actualmente, estás pasando la prop `level` a cada `` separadamente: Videos
``` -Sería genial si tu pudieras pasar la prop `level` al componente `
` y removerlo del ``. De esta forma podrías reforzar que todos los encabezados tengan el mismo tamaño en una misma sección (*section*): +Sería genial si tú pudieras pasar la prop `level` al componente `
` y removerlo del ``. De esta forma podrías reforzar que todos los encabezados tengan el mismo tamaño en una misma sección (*section*): ```js
@@ -306,7 +306,7 @@ export const LevelContext = createContext(1); -El único parámetro que se le pasa a `createContext` es el valor _predeterminado_. En este caso, `1` se refiere al nivel de encabezado más grande, pero tu puedes pasar cualquier valor (incluso un objeto). Ya verás la importancia del valor predeterminado en el siguiente paso. +El único parámetro que se le pasa a `createContext` es el valor _predeterminado_. En este caso, `1` se refiere al nivel de encabezado más grande, pero tú puedes pasar cualquier valor (incluso un objeto). Ya verás la importancia del valor predeterminado en el siguiente paso. ### Paso 2: Usar el contexto {/*step-2-use-the-context*/} From 5f7d8b4c4bdf4f558f9d6b53f5d685aa41f85ba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 16 May 2023 18:10:38 -0600 Subject: [PATCH 07/17] WIP: Details --- .../learn/passing-data-deeply-with-context.md | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 0682a5c0d..2e8710f9e 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -562,9 +562,9 @@ export const LevelContext = createContext(1); 2. `Section` envuelve a sus hijos con ``. 3. `Heading` pregunta el valor más cercano de arriba de `LevelContext` por medio de `useContext(LevelContext)`. -## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} +## Usar y proveer el contexto desde el mismo componente {/*using-and-providing-context-from-the-same-component*/} -Currently, you still have to specify each section's `level` manually: +Actualmente, tú aún puedes especificar el `level` de cada sección manualmente: ```js export default function Page() { @@ -576,8 +576,7 @@ export default function Page() {
... ``` - -Since context lets you read information from a component above, each `Section` could read the `level` from the `Section` above, and pass `level + 1` down automatically. Here is how you could do it: +Debido a que el contexto te permite leer información desde un componente de arriba, cada `Section` podría leer el `level` desde el `Section` arriba, y pasar `level + 1` hacia abajo automáticamente. Así es cómo lo podrías conseguir: ```js Section.js {5,8} import { useContext } from 'react'; @@ -594,8 +593,7 @@ export default function Section({ children }) { ); } ``` - -With this change, you don't need to pass the `level` prop *either* to the `
` or to the ``: +Con este cambio, no es necesario pasar la prop `level` ni al `
` o al ``: @@ -687,19 +685,19 @@ export const LevelContext = createContext(0); -Now both `Heading` and `Section` read the `LevelContext` to figure out how "deep" they are. And the `Section` wraps its children into the `LevelContext` to specify that anything inside of it is at a "deeper" level. +Ahora, tanto el `Heading` como el `Section` leen el `LevelContext` para averiguar qué tan "profundos" están. El `Section` envuelve sus hijos con el `LevelContext` para especificar que cualquier componente adentro de él está a un nivel más "profundo". -This example uses heading levels because they show visually how nested components can override context. But context is useful for many other use cases too. You can pass down any information needed by the entire subtree: the current color theme, the currently logged in user, and so on. +Este ejemplo usa niveles de encabezados porque muestran visualmente cómo componentes anidados pueden sobreescribir contextos. Sin embargo, los contextos son útiles para otros casos de uso también. Tú puedes pasar hacia abajo cualquier información necesitada por el subárbol entero: el color actual del tema, el usuario actual que inició sesión, entre otros. -## Context passes through intermediate components {/*context-passes-through-intermediate-components*/} +## El contexto pasa a través de componentes intermedios {/*context-passes-through-intermediate-components*/} -You can insert as many components as you like between the component that provides context and the one that uses it. This includes both built-in components like `
` and components you might build yourself. +Tú puedes insertar tantos componentes como desees entre el componente que provee el contexto y el componente que lo usa. Esto incluye tanto componentes integrados como `
` como componentes construídos por ti. -In this example, the same `Post` component (with a dashed border) is rendered at two different nesting levels. Notice that the `` inside of it gets its level automatically from the closest `
`: +En este ejemplo, el mismo componente `Post` (con un borde discontinuo) es renderizado en dos distintos niveles anidados. Nota que el `` que está adentro tiene el nivel automáticamente desde el `
` más cercano: @@ -824,13 +822,13 @@ export const LevelContext = createContext(0); -You didn't do anything special for this to work. A `Section` specifies the context for the tree inside it, so you can insert a `` anywhere, and it will have the correct size. Try it in the sandbox above! +No necesitaste hacer nada especial para esta tarea. Cada `Section` especifica el contexto para el árbol adentro de él, por lo que puedes insertar un `` en cualquier lado, y tendrá el tamaño correcto. -**Context lets you write components that "adapt to their surroundings" and display themselves differently depending on _where_ (or, in other words, _in which context_) they are being rendered.** +**El contexto te permite crear componentes que se "adaptan a sus alrededores" y se despliegan de forma diferente dependiendo de _dónde_ (o en otras palabras, _en cuál contexto_) están siendo renderizados.** -How context works might remind you of [CSS property inheritance.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) In CSS, you can specify `color: blue` for a `
`, and any DOM node inside of it, no matter how deep, will inherit that color unless some other DOM node in the middle overrides it with `color: green`. Similarly, in React, the only way to override some context coming from above is to wrap children into a context provider with a different value. +El funcionamiento de los contextos te podría recordar a la [herencia de CSS.](https://developer.mozilla.org/es/docs/Web/CSS/inheritance) En CSS, tú puedes especificar `color: blue` para un `
`, y cualquier nodo DOM adentro de él, no importa qué tan profundo esté, heredará ese color a no ser de que otro nodo DOM en el medio lo sobreescriba con `color: green`. Asimismo, en React, la única forma de sobreescribir un contexto que viene desde arriba es envolviendo sus hijos con un proveedor de contexto que tenga un valor distinto. -In CSS, different properties like `color` and `background-color` don't override each other. You can set all `
`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem. +En CSS, diversas propiedades como `color` y `background-color` no se sobreescriben entre ellas. Tú puedes definir la propiedad `color` de todos los `
` a `red` sin impactar `background-color`. Similarmente, **diversos contextos de React no se sobreescriben entre ellos mismos.** Cada contexto que creas con `createContext()` está completamente separado de los otros, y une los componentes usando y proveyendo *ese* contexto en particular. Un componente podría usar o proveer muchos contextos diferentes sin ningún problema. ## Before you use context {/*before-you-use-context*/} From 64b455b34f1b17e3cfb80a19b507f95c9fb0889b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 16 May 2023 18:40:09 -0600 Subject: [PATCH 08/17] WIP: Before you use context --- .../learn/passing-data-deeply-with-context.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 2e8710f9e..6be51602a 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -830,16 +830,16 @@ El funcionamiento de los contextos te podría recordar a la [herencia de CSS.](h En CSS, diversas propiedades como `color` y `background-color` no se sobreescriben entre ellas. Tú puedes definir la propiedad `color` de todos los `
` a `red` sin impactar `background-color`. Similarmente, **diversos contextos de React no se sobreescriben entre ellos mismos.** Cada contexto que creas con `createContext()` está completamente separado de los otros, y une los componentes usando y proveyendo *ese* contexto en particular. Un componente podría usar o proveer muchos contextos diferentes sin ningún problema. -## Before you use context {/*before-you-use-context*/} +## Antes de usar contexto {/*before-you-use-context*/} -Context is very tempting to use! However, this also means it's too easy to overuse it. **Just because you need to pass some props several levels deep doesn't mean you should put that information into context.** +¡El contexto es bien tentador de usar! Sin embargo, esto también significa que es muy fácil sobreusarlo. **Solo porque necesitas pasar algunas props a varios niveles en profundidad no significa que debas poner esa información en un contexto.** -Here's a few alternatives you should consider before using context: +Aquí hay algunas alternativas que podrías considerar antes de usar el contexto: -1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props. -2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like ``. Instead, make `Layout` take `children` as a prop, and render ``. This reduces the number of layers between the component specifying the data and the one that needs it. +1. **Empieza [pasando props.](/learn/passing-props-to-a-component)** Si tus componentes no son triviales, no es inusual pasar muchas props hacia abajo a través de muchos componentes. Podría considerarse tedioso, ¡pero deja bien claro cuáles componentes usan cuáles datos! La persona dándole mantenimiento a tu código estará agradecida de que hiciste el flujo de datos explícito con props. +2. **Extraer componentes y [pasarles el JSX como `children`](/learn/passing-props-to-a-component#passing-jsx-as-children).** Si pasas algunos datos a través de muchas capas de componentes intermedios que no usan esos datos (y lo único que hacen es pasarlos hacia abajo), esto muchas veces significa que olvidaste extraer algunos componentes sobre la marcha. Por ejemplo, quizá pasaste algunas props como `posts` a componentes visuales que no las usan directamente, como lo puede ser ``. En su lugar, haz que `Layout` tome `children` como prop, y renderiza ``. Esto reduce la cantidad de capas que hay entre el componente que especifica los datos y el componente que los necesita. -If neither of these approaches works well for you, consider context. +Si ninguna de estas alternativas funcionan bien para ti, considera el contexto. ## Use cases for context {/*use-cases-for-context*/} From cee43ea74e6ce3abea9ee9e112f6708ddf69c347 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 16 May 2023 20:07:17 -0600 Subject: [PATCH 09/17] WIP: Use cases --- .../learn/passing-data-deeply-with-context.md | 16 ++++++++-------- src/sidebarLearn.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 6be51602a..7c0317adc 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -841,16 +841,16 @@ Aquí hay algunas alternativas que podrías considerar antes de usar el contexto Si ninguna de estas alternativas funcionan bien para ti, considera el contexto. -## Use cases for context {/*use-cases-for-context*/} +## Casos de uso para el contexto {/*use-cases-for-context*/} -* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look. -* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value. -* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too. -* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle. - -Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state. +* **Temas:**: Si tus apps permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicación, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. +* **Cuenta actual:** Muchos componentes podrían necesitar saber el usuario actual que inició sesión. Ponerlo en un contexto lo hace conveniente para leerlo desde cualquier lado del árbol. Algunas apps también te permiten manejar múltiples cuentas al mismo tiempo (por ejemplo, dejar un comentario con un usuario distinto). En esos casos, puede ser conveniente envolver parte de la UI con un proveedor anidado que tenga una cuenta actual diferente. +* **Enrutamiento:** La mayoría de las soluciones de enrutamiento usan contexto internamente para mantener la ruta actual. Así es cómo cada enlace "sabe" si está activo o no. Si construyes tu propio enrutador, podrías necesitar hacerlo también. +* **Gestionar estados:** A medida que tu aplicación crece, podrías terminar con muchos estados cerca de la parte superior de tu aplicación. Muchos componentes distantes de abajo podrían querer cambiarlos. Es común [usar un reducer con un contexto](/learn/scaling-up-with-reducer-and-context) para gestionar estados complejos y pasarlos a componentes lejanos sin mucha molestia. -In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you. +El contexto no está limitado a valores estáticos. Si tú pasas un valor distinto en el siguiente render, ¡React actualizará todos los componentes debajo que lean el contexto! Es por esto que muchas veces el contexto es usado en combinación con estados. + +En general, si alguna información es necesitada por componentes lejanos en diferentes partes del árbol, es un buen indicador de que el contexto te ayudará. diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index d8aad1b13..7964b2fd1 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -146,7 +146,7 @@ "path": "/learn/extracting-state-logic-into-a-reducer" }, { - "title": "Pasar datos en profundidad con Context", + "title": "Pasar datos en profundidad con contexto", "path": "/learn/passing-data-deeply-with-context" }, { From 95706e12212eb54030d6f8c99f725849d9f63f6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 16 May 2023 22:51:10 -0600 Subject: [PATCH 10/17] WIP: Typos --- src/content/learn/passing-data-deeply-with-context.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 7c0317adc..ce51faad9 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -576,7 +576,7 @@ export default function Page() {
... ``` -Debido a que el contexto te permite leer información desde un componente de arriba, cada `Section` podría leer el `level` desde el `Section` arriba, y pasar `level + 1` hacia abajo automáticamente. Así es cómo lo podrías conseguir: +Debido a que el contexto te permite leer información desde un componente de arriba, cada `Section` podría leer el `level` desde el `Section` arriba, y pasar `level + 1` hacia abajo automáticamente. Así es como lo podrías conseguir: ```js Section.js {5,8} import { useContext } from 'react'; @@ -845,7 +845,7 @@ Si ninguna de estas alternativas funcionan bien para ti, considera el contexto. * **Temas:**: Si tus apps permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicación, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. * **Cuenta actual:** Muchos componentes podrían necesitar saber el usuario actual que inició sesión. Ponerlo en un contexto lo hace conveniente para leerlo desde cualquier lado del árbol. Algunas apps también te permiten manejar múltiples cuentas al mismo tiempo (por ejemplo, dejar un comentario con un usuario distinto). En esos casos, puede ser conveniente envolver parte de la UI con un proveedor anidado que tenga una cuenta actual diferente. -* **Enrutamiento:** La mayoría de las soluciones de enrutamiento usan contexto internamente para mantener la ruta actual. Así es cómo cada enlace "sabe" si está activo o no. Si construyes tu propio enrutador, podrías necesitar hacerlo también. +* **Enrutamiento:** La mayoría de las soluciones de enrutamiento usan contexto internamente para mantener la ruta actual. Así es como cada enlace "sabe" si está activo o no. Si construyes tu propio enrutador, podrías necesitar hacerlo también. * **Gestionar estados:** A medida que tu aplicación crece, podrías terminar con muchos estados cerca de la parte superior de tu aplicación. Muchos componentes distantes de abajo podrían querer cambiarlos. Es común [usar un reducer con un contexto](/learn/scaling-up-with-reducer-and-context) para gestionar estados complejos y pasarlos a componentes lejanos sin mucha molestia. El contexto no está limitado a valores estáticos. Si tú pasas un valor distinto en el siguiente render, ¡React actualizará todos los componentes debajo que lean el contexto! Es por esto que muchas veces el contexto es usado en combinación con estados. From f4808c14182732e437902457e00c2f34c5241d12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 16 May 2023 23:14:30 -0600 Subject: [PATCH 11/17] WIP: Traslate Recap and Challenges --- .../learn/passing-data-deeply-with-context.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index ce51faad9..e9e20e744 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -854,26 +854,26 @@ En general, si alguna información es necesitada por componentes lejanos en dife -* Context lets a component provide some information to the entire tree below it. -* To pass context: - 1. Create and export it with `export const MyContext = createContext(defaultValue)`. - 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. -* Context passes through any components in the middle. -* Context lets you write components that "adapt to their surroundings". -* Before you use context, try passing props or passing JSX as `children`. +* El contexto permite que el componente provea alguna información al árbol completo debajo de él. +* Para pasar un contexto: + 1. Crear y exportar el contexto con `export const MyContext = createContext(defaultValue)`. + 2. Pasarlo al Hook `useContext(MyContext)` para leerlo en cualquier componente hijo, sin importar qué tan profundo es. + 3. Envolver los hijos con `` para proveerlo desde el papá. +* El contexto pasa a través de cualquier componente en el medio. +* El contexto te permite escribir componentes que se "adaptan a sus alrededores". +* Antes de usar contexto, trata de pasar props o pasar JSX como `children`. -#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/} +#### Reemplazar perforación de props con contexto {/*replace-prop-drilling-with-context*/} -In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it. +En este ejemplo, activar la casilla cambia la prop `imageSize` que se pasa a cada ``. El estado de la casilla se mantiene en el nivel superior del componente `App`, pero cada `` necesita estar consciente del estado. -Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`. +Actualmente, `App` pasa `imageSize` a `List`, el cual lo pasa a cada `Place`, el cual lo pasa al `PlaceImage`. Remueve la prop `imageSize`, y en su lugar pásala desde el componente `App` directamente al `PlaceImage`. -You can declare context in `Context.js`. +Puede declarar el contexto en `Context.js`. @@ -1010,9 +1010,9 @@ li { -Remove `imageSize` prop from all the components. +Remueve la prop `imageSize` de todos los componentes. -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: +Crea y exporta `ImageSizeContext` desde `Context.js`. Luego, envuelve la lista con `` para pasar el valor hacia abajo, y `useContext(ImageSizeContext)` para leerlo en el componente `PlaceImage`: @@ -1147,7 +1147,7 @@ li { -Note how components in the middle don't need to pass `imageSize` anymore. +Nota como los componentes en el medio ya no tienen que pasar `imageSize`. From 0255d7778e50ab4dd7d7388f16f301f5b2e00dfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Tue, 16 May 2023 23:34:50 -0600 Subject: [PATCH 12/17] Fix typos --- .../learn/passing-data-deeply-with-context.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index e9e20e744..ce42d4c9e 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -40,7 +40,7 @@ Perforación de props ¿No sería grandioso si existiese alguna forma de "teletransportar" datos a componentes en el árbol que lo necesiten sin tener que pasar props? ¡Con el contexto de React es posible! -## Contexto: Una alternativo a pasar props {/*context-an-alternative-to-passing-props*/} +## Contexto: Una alternativa a pasar props {/*context-an-alternative-to-passing-props*/} El contexto permite que el componente papá provea datos al árbol entero debajo de él. Hay muchas utilidades para el contexto. Este es un solo ejemplo. Considera el componente `Heading` que acepta `level` como su tamaño: @@ -203,9 +203,9 @@ Sería genial si tú pudieras pasar la prop `level` al componente `
` y No podrías lograrlo únicamente con props. Aquí es donde el contexto entra a jugar. Lo conseguirás en tres pasos: -1. **Crear** un contexto. (puedes llamarlo `LevelContext`, ya que es para el `level` de los encabezados) -2. **Usar** ese contexto desde el componente que necesita los datos. (`Heading` usará `LevelContext`) -3. **Proveer** ese contexto desde el componente que especifica los datos. (`Section` proveerá `LevelContext`) +1. **Crear** un contexto (puedes llamarlo `LevelContext`, ya que es para el `level` de los encabezados) +2. **Usar** ese contexto desde el componente que necesita los datos (`Heading` usará `LevelContext`) +3. **Proveer** ese contexto desde el componente que especifica los datos (`Section` proveerá `LevelContext`) El contexto permite que en un papá (incluso uno distante) provea algunos datos a la totalidad del árbol dentro de él. @@ -323,7 +323,7 @@ export default function Heading({ level, children }) { // ... } ``` -En su lugar, remueva la prop `level` y lee el valor desde el contexto que acabas de importar, `LevelContext`: +En su lugar, remueve la prop `level` y lee el valor desde el contexto que acabas de importar, `LevelContext`: ```js {2} export default function Heading({ children }) { @@ -468,7 +468,7 @@ export default function Section({ level, children }) { ); } ``` -Esto le dice a React: "si cualquier componente adentro de este `
` pregunta por `LevelContext`, envíales este `level`." El componente usará el valor del `` más cercano en el árbol de la UI encima de él. +Esto le dice a React: "si cualquier componente adentro de este `
` pregunta por `LevelContext`, envíales este `level`". El componente usará el valor del `` más cercano en el árbol de la UI encima de él. @@ -556,7 +556,7 @@ export const LevelContext = createContext(1); -¡Es el mismo resultado del código original, pero no tuviste que pasar la prop `level` a cada componente `Heading`! En su lugar, "comprende" su nivel de encabezado al preguntar al `Section` más cercano de arriba: +Es el mismo resultado del código original, ¡pero no tuviste que pasar la prop `level` a cada componente `Heading`! En su lugar, el componente "comprende" su nivel de encabezado al preguntarle al `Section` más cercano de arriba: 1. Tú pasas la prop `level` al `
`. 2. `Section` envuelve a sus hijos con ``. @@ -576,7 +576,7 @@ export default function Page() {
... ``` -Debido a que el contexto te permite leer información desde un componente de arriba, cada `Section` podría leer el `level` desde el `Section` arriba, y pasar `level + 1` hacia abajo automáticamente. Así es como lo podrías conseguir: +Debido a que el contexto te permite leer información desde un componente de arriba, cada `Section` podría leer el `level` del `Section` de arriba, y pasar `level + 1` hacia abajo automáticamente. Así es como lo podrías conseguir: ```js Section.js {5,8} import { useContext } from 'react'; @@ -593,7 +593,7 @@ export default function Section({ children }) { ); } ``` -Con este cambio, no es necesario pasar la prop `level` ni al `
` o al ``: +Con este cambio, no es necesario pasar la prop `level` al `
` o al ``: @@ -826,7 +826,7 @@ No necesitaste hacer nada especial para esta tarea. Cada `Section` especifica el **El contexto te permite crear componentes que se "adaptan a sus alrededores" y se despliegan de forma diferente dependiendo de _dónde_ (o en otras palabras, _en cuál contexto_) están siendo renderizados.** -El funcionamiento de los contextos te podría recordar a la [herencia de CSS.](https://developer.mozilla.org/es/docs/Web/CSS/inheritance) En CSS, tú puedes especificar `color: blue` para un `
`, y cualquier nodo DOM adentro de él, no importa qué tan profundo esté, heredará ese color a no ser de que otro nodo DOM en el medio lo sobreescriba con `color: green`. Asimismo, en React, la única forma de sobreescribir un contexto que viene desde arriba es envolviendo sus hijos con un proveedor de contexto que tenga un valor distinto. +El funcionamiento de los contextos te podría recordar a la [herencia de CSS.](https://developer.mozilla.org/es/docs/Web/CSS/inheritance) En CSS, tú puedes especificar `color: blue` para un `
`, y cualquier nodo DOM adentro de él, no importa qué tan profundo esté, heredará ese color a no ser de que otro nodo DOM en el medio lo sobreescriba con `color: green`. Asimismo, en React la única forma de sobreescribir un contexto que viene desde arriba es envolviendo sus hijos con un proveedor de contexto que tenga un valor distinto. En CSS, diversas propiedades como `color` y `background-color` no se sobreescriben entre ellas. Tú puedes definir la propiedad `color` de todos los `
` a `red` sin impactar `background-color`. Similarmente, **diversos contextos de React no se sobreescriben entre ellos mismos.** Cada contexto que creas con `createContext()` está completamente separado de los otros, y une los componentes usando y proveyendo *ese* contexto en particular. Un componente podría usar o proveer muchos contextos diferentes sin ningún problema. @@ -843,7 +843,7 @@ Si ninguna de estas alternativas funcionan bien para ti, considera el contexto. ## Casos de uso para el contexto {/*use-cases-for-context*/} -* **Temas:**: Si tus apps permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicación, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. +* **Temas:** Si tus apps permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicación, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. * **Cuenta actual:** Muchos componentes podrían necesitar saber el usuario actual que inició sesión. Ponerlo en un contexto lo hace conveniente para leerlo desde cualquier lado del árbol. Algunas apps también te permiten manejar múltiples cuentas al mismo tiempo (por ejemplo, dejar un comentario con un usuario distinto). En esos casos, puede ser conveniente envolver parte de la UI con un proveedor anidado que tenga una cuenta actual diferente. * **Enrutamiento:** La mayoría de las soluciones de enrutamiento usan contexto internamente para mantener la ruta actual. Así es como cada enlace "sabe" si está activo o no. Si construyes tu propio enrutador, podrías necesitar hacerlo también. * **Gestionar estados:** A medida que tu aplicación crece, podrías terminar con muchos estados cerca de la parte superior de tu aplicación. Muchos componentes distantes de abajo podrían querer cambiarlos. Es común [usar un reducer con un contexto](/learn/scaling-up-with-reducer-and-context) para gestionar estados complejos y pasarlos a componentes lejanos sin mucha molestia. @@ -873,7 +873,7 @@ En este ejemplo, activar la casilla cambia la prop `imageSize` que se pasa a cad Actualmente, `App` pasa `imageSize` a `List`, el cual lo pasa a cada `Place`, el cual lo pasa al `PlaceImage`. Remueve la prop `imageSize`, y en su lugar pásala desde el componente `App` directamente al `PlaceImage`. -Puede declarar el contexto en `Context.js`. +Puedes declarar el contexto en `Context.js`. From 8c3bca98c9c088e209e9be9fa0479718c6adc057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 17 May 2023 17:39:14 -0600 Subject: [PATCH 13/17] Fix line number --- src/content/learn/passing-data-deeply-with-context.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index ce42d4c9e..185f54acc 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -189,6 +189,7 @@ Actualmente, estás pasando la prop `level` a cada `` separadamente: Videos
``` + Sería genial si tú pudieras pasar la prop `level` al componente `
` y removerlo del ``. De esta forma podrías reforzar que todos los encabezados tengan el mismo tamaño en una misma sección (*section*): ```js From f943662c3ab696a7ddb525342bc23295a2fe7020 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 17 May 2023 17:41:19 -0600 Subject: [PATCH 14/17] Fix line number --- src/content/learn/passing-data-deeply-with-context.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 185f54acc..3fa32ec55 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -215,6 +215,7 @@ El contexto permite que en un papá (incluso uno distante) provea algunos datos Usar contexto en un hijo cercano + From 73946bb6c356fad4b2c1d61558cb3da59dfbc6b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 17 May 2023 17:42:17 -0600 Subject: [PATCH 15/17] Fix line number --- src/content/learn/passing-data-deeply-with-context.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 3fa32ec55..fb7b059ab 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -318,6 +318,7 @@ Importa el Hook `useContext` desde React y tu contexto: import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; ``` + Actualmente, el componente `Heading` lee `level` con props: ```js From b3e8194e2e27bf6f781b443b0c4afca7616d23ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=20Andr=C3=A9s=20Mej=C3=ADas=20Rojas?= Date: Wed, 17 May 2023 17:44:43 -0600 Subject: [PATCH 16/17] Fix line numbers --- src/content/learn/passing-data-deeply-with-context.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index fb7b059ab..6a43dda74 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -326,6 +326,7 @@ export default function Heading({ level, children }) { // ... } ``` + En su lugar, remueve la prop `level` y lee el valor desde el contexto que acabas de importar, `LevelContext`: ```js {2} @@ -346,6 +347,7 @@ Ahora que el componente `Heading` no tiene una prop `level`, ya no tienes que pa Sub-sub-heading
``` + Actualiza el JSX para que sea `Section` el que recibe la prop: ```jsx @@ -355,6 +357,7 @@ Actualiza el JSX para que sea `Section` el que recibe la prop: Sub-sub-heading
``` + Como recordatorio, esta es la estructura que estabas intentando que funcionara: @@ -456,6 +459,7 @@ export default function Section({ children }) { ); } ``` + **Envuélvelos con un proveedor de contexto** para proveer `LevelContext` a ellos: ```js {1,6,8} @@ -471,6 +475,7 @@ export default function Section({ level, children }) { ); } ``` + Esto le dice a React: "si cualquier componente adentro de este `
` pregunta por `LevelContext`, envíales este `level`". El componente usará el valor del `` más cercano en el árbol de la UI encima de él. @@ -579,6 +584,7 @@ export default function Page() {
... ``` + Debido a que el contexto te permite leer información desde un componente de arriba, cada `Section` podría leer el `level` del `Section` de arriba, y pasar `level + 1` hacia abajo automáticamente. Así es como lo podrías conseguir: ```js Section.js {5,8} @@ -596,6 +602,7 @@ export default function Section({ children }) { ); } ``` + Con este cambio, no es necesario pasar la prop `level` al `
` o al ``: From 5d77065c003557e7c36ee6b1246cdb4e39ef8d10 Mon Sep 17 00:00:00 2001 From: Rainer Martinez Date: Tue, 23 May 2023 22:22:02 -0400 Subject: [PATCH 17/17] Update passing-data-deeply-with-context.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Corrección de erratas - Adecuar elementos de estilo de escritura al resto del sitio --- .../learn/passing-data-deeply-with-context.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 6a43dda74..1743671ae 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -4,7 +4,7 @@ title: Pasar datos en profundidad con contexto -Usualmente, tú pasarías información desde un componente papá a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlos a través de múltiples componentes, o si varios componentes en tu app necesitan la misma información. El *contexto* permite que cierta información del componente papá esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. +Por lo general, pasarás información desde un componente padre a un componente hijo por medio de props. Sin embargo, pasar props puede convertirse en una tarea verbosa e inconveniente si tienes que pasarlas a través de múltiples componentes, o si varios componentes en tu aplicación necesitan la misma información. El *contexto* permite que cierta información del componente padre esté disponible en cualquier componente del árbol que esté por debajo de él sin importar qué tan profundo sea y sin pasar la información explícitamente por medio de props. @@ -21,11 +21,11 @@ Usualmente, tú pasarías información desde un componente papá a un componente [Pasar props](/learn/passing-props-to-a-component) es una gran manera de enviar explícitamente datos a través del árbol de la UI a componentes que los usen. -No obstante, pasar props puede conversirse en una tarea verbosa e incoveniente cuando necesitas enviar algunas props profundamente a través del árbol, o si múltiples componentes necesitan de las mismas. El ancestro común más cercano podría estar muy alejado de los componentes que necesitan los datos, y [elevar el estado](/learn/sharing-state-between-components) tan alto puede ocasionar la situación llamada "perforación de props". +No obstante, pasar props puede convertirse en una tarea verbosa e inconveniente cuando necesitas enviar algunas props profundamente a través del árbol, o si múltiples componentes necesitan de las mismas. El ancestro común más cercano podría estar muy alejado de los componentes que necesitan los datos, y [elevar el estado](/learn/sharing-state-between-components) tan alto puede ocasionar la situación llamada "perforación de props". - + Elevar el estado @@ -40,9 +40,9 @@ Perforación de props ¿No sería grandioso si existiese alguna forma de "teletransportar" datos a componentes en el árbol que lo necesiten sin tener que pasar props? ¡Con el contexto de React es posible! -## Contexto: Una alternativa a pasar props {/*context-an-alternative-to-passing-props*/} +## Contexto: una alternativa a pasar props {/*context-an-alternative-to-passing-props*/} -El contexto permite que el componente papá provea datos al árbol entero debajo de él. Hay muchas utilidades para el contexto. Este es un solo ejemplo. Considera el componente `Heading` que acepta `level` como su tamaño: +El contexto permite que el componente padre provea datos al árbol entero debajo de él. Hay muchas utilidades para el contexto. Este es un solo ejemplo. Considera el componente `Heading` que acepta `level` como su tamaño: @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -Supongamos que tú quieres múltiples encabezados (*headings*) dentro del mismo componente `Section` para siempre tener el mismo tamaño: +Supongamos que quieres múltiples encabezados (*headings*) dentro del mismo componente `Section` para siempre tener el mismo tamaño: @@ -190,7 +190,7 @@ Actualmente, estás pasando la prop `level` a cada `` separadamente:
``` -Sería genial si tú pudieras pasar la prop `level` al componente `
` y removerlo del ``. De esta forma podrías reforzar que todos los encabezados tengan el mismo tamaño en una misma sección (*section*): +Sería genial si pudieras pasar la prop `level` al componente `
` y removerlo del ``. De esta forma podrías reforzar que todos los encabezados tengan el mismo tamaño en una misma sección (*section*): ```js
@@ -208,17 +208,17 @@ No podrías lograrlo únicamente con props. Aquí es donde el contexto entra a j 2. **Usar** ese contexto desde el componente que necesita los datos (`Heading` usará `LevelContext`) 3. **Proveer** ese contexto desde el componente que especifica los datos (`Section` proveerá `LevelContext`) -El contexto permite que en un papá (incluso uno distante) provea algunos datos a la totalidad del árbol dentro de él. +El contexto permite que en un padre (incluso uno distante) provea algunos datos a la totalidad del árbol dentro de él. - + Usar contexto en un hijo cercano - + Usar contexto en hijos lejanos @@ -308,7 +308,7 @@ export const LevelContext = createContext(1); -El único parámetro que se le pasa a `createContext` es el valor _predeterminado_. En este caso, `1` se refiere al nivel de encabezado más grande, pero tú puedes pasar cualquier valor (incluso un objeto). Ya verás la importancia del valor predeterminado en el siguiente paso. +El único parámetro que se le pasa a `createContext` es el valor _predeterminado_. En este caso, `1` se refiere al nivel de encabezado más grande, pero puedes pasar cualquier valor (incluso un objeto). Ya verás la importancia del valor predeterminado en el siguiente paso. ### Paso 2: Usar el contexto {/*step-2-use-the-context*/} @@ -566,13 +566,13 @@ export const LevelContext = createContext(1); Es el mismo resultado del código original, ¡pero no tuviste que pasar la prop `level` a cada componente `Heading`! En su lugar, el componente "comprende" su nivel de encabezado al preguntarle al `Section` más cercano de arriba: -1. Tú pasas la prop `level` al `
`. +1. Pasas la prop `level` al `
`. 2. `Section` envuelve a sus hijos con ``. 3. `Heading` pregunta el valor más cercano de arriba de `LevelContext` por medio de `useContext(LevelContext)`. ## Usar y proveer el contexto desde el mismo componente {/*using-and-providing-context-from-the-same-component*/} -Actualmente, tú aún puedes especificar el `level` de cada sección manualmente: +Actualmente, aún puedes especificar el `level` de cada sección manualmente: ```js export default function Page() { @@ -699,13 +699,13 @@ Ahora, tanto el `Heading` como el `Section` leen el `LevelContext` para averigua -Este ejemplo usa niveles de encabezados porque muestran visualmente cómo componentes anidados pueden sobreescribir contextos. Sin embargo, los contextos son útiles para otros casos de uso también. Tú puedes pasar hacia abajo cualquier información necesitada por el subárbol entero: el color actual del tema, el usuario actual que inició sesión, entre otros. +Este ejemplo usa niveles de encabezados porque muestran visualmente cómo componentes anidados pueden sobrescribir contextos. Sin embargo, los contextos son útiles para otros casos de uso también. Puedes pasar hacia abajo cualquier información necesitada por el subárbol entero: el color actual del tema, el usuario actual que inició sesión, entre otros. ## El contexto pasa a través de componentes intermedios {/*context-passes-through-intermediate-components*/} -Tú puedes insertar tantos componentes como desees entre el componente que provee el contexto y el componente que lo usa. Esto incluye tanto componentes integrados como `
` como componentes construídos por ti. +Puedes insertar tantos componentes como desees entre el componente que provee el contexto y el componente que lo usa. Esto incluye tanto componentes integrados como `
` como componentes construidos por ti. En este ejemplo, el mismo componente `Post` (con un borde discontinuo) es renderizado en dos distintos niveles anidados. Nota que el `` que está adentro tiene el nivel automáticamente desde el `
` más cercano: @@ -836,13 +836,13 @@ No necesitaste hacer nada especial para esta tarea. Cada `Section` especifica el **El contexto te permite crear componentes que se "adaptan a sus alrededores" y se despliegan de forma diferente dependiendo de _dónde_ (o en otras palabras, _en cuál contexto_) están siendo renderizados.** -El funcionamiento de los contextos te podría recordar a la [herencia de CSS.](https://developer.mozilla.org/es/docs/Web/CSS/inheritance) En CSS, tú puedes especificar `color: blue` para un `
`, y cualquier nodo DOM adentro de él, no importa qué tan profundo esté, heredará ese color a no ser de que otro nodo DOM en el medio lo sobreescriba con `color: green`. Asimismo, en React la única forma de sobreescribir un contexto que viene desde arriba es envolviendo sus hijos con un proveedor de contexto que tenga un valor distinto. +El funcionamiento de los contextos te podría recordar a la [herencia de CSS.](https://developer.mozilla.org/es/docs/Web/CSS/inheritance) En CSS, puedes especificar `color: blue` para un `
`, y cualquier nodo DOM adentro de él, no importa qué tan profundo esté, heredará ese color a no ser de que otro nodo DOM en el medio lo sobrescriba con `color: green`. Asimismo, en React la única forma de sobrescribir un contexto que viene desde arriba es envolviendo sus hijos con un proveedor de contexto que tenga un valor distinto. -En CSS, diversas propiedades como `color` y `background-color` no se sobreescriben entre ellas. Tú puedes definir la propiedad `color` de todos los `
` a `red` sin impactar `background-color`. Similarmente, **diversos contextos de React no se sobreescriben entre ellos mismos.** Cada contexto que creas con `createContext()` está completamente separado de los otros, y une los componentes usando y proveyendo *ese* contexto en particular. Un componente podría usar o proveer muchos contextos diferentes sin ningún problema. +En CSS, diversas propiedades como `color` y `background-color` no se sobrescriben entre ellas. Puedes definir la propiedad `color` de todos los `
` a `red` sin impactar `background-color`. Similarmente, **diversos contextos de React no se sobrescriben entre ellos mismos.** Cada contexto que creas con `createContext()` está completamente separado de los otros, y une los componentes usando y proveyendo *ese* contexto en particular. Un componente podría usar o proveer muchos contextos diferentes sin ningún problema. ## Antes de usar contexto {/*before-you-use-context*/} -¡El contexto es bien tentador de usar! Sin embargo, esto también significa que es muy fácil sobreusarlo. **Solo porque necesitas pasar algunas props a varios niveles en profundidad no significa que debas poner esa información en un contexto.** +¡El uso contexto resulta muy atractivo! Sin embargo, esto también significa que fácilmente puedes terminar abusando de él. **Solo porque necesitas pasar algunas props a varios niveles en profundidad no significa que debas poner esa información en un contexto.** Aquí hay algunas alternativas que podrías considerar antes de usar el contexto: @@ -853,12 +853,12 @@ Si ninguna de estas alternativas funcionan bien para ti, considera el contexto. ## Casos de uso para el contexto {/*use-cases-for-context*/} -* **Temas:** Si tus apps permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicación, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. -* **Cuenta actual:** Muchos componentes podrían necesitar saber el usuario actual que inició sesión. Ponerlo en un contexto lo hace conveniente para leerlo desde cualquier lado del árbol. Algunas apps también te permiten manejar múltiples cuentas al mismo tiempo (por ejemplo, dejar un comentario con un usuario distinto). En esos casos, puede ser conveniente envolver parte de la UI con un proveedor anidado que tenga una cuenta actual diferente. +* **Temas:** Si tus aplicaciones permiten que los usuarios cambien la apariencia (por ejemplo, modo oscuro), puedes poner un proveedor de contexto en el primer nivel de tu aplicación, y usar ese contexto en componentes que necesiten ajustar su comportamiento visual. +* **Cuenta actual:** Muchos componentes podrían necesitar saber el usuario actual que inició sesión. Ponerlo en un contexto lo hace conveniente para leerlo desde cualquier lado del árbol. Algunas aplicaciones también te permiten manejar múltiples cuentas al mismo tiempo (por ejemplo, dejar un comentario con un usuario distinto). En esos casos, puede ser conveniente envolver parte de la UI con un proveedor anidado que tenga una cuenta actual diferente. * **Enrutamiento:** La mayoría de las soluciones de enrutamiento usan contexto internamente para mantener la ruta actual. Así es como cada enlace "sabe" si está activo o no. Si construyes tu propio enrutador, podrías necesitar hacerlo también. * **Gestionar estados:** A medida que tu aplicación crece, podrías terminar con muchos estados cerca de la parte superior de tu aplicación. Muchos componentes distantes de abajo podrían querer cambiarlos. Es común [usar un reducer con un contexto](/learn/scaling-up-with-reducer-and-context) para gestionar estados complejos y pasarlos a componentes lejanos sin mucha molestia. -El contexto no está limitado a valores estáticos. Si tú pasas un valor distinto en el siguiente render, ¡React actualizará todos los componentes debajo que lean el contexto! Es por esto que muchas veces el contexto es usado en combinación con estados. +El contexto no está limitado a valores estáticos. Si pasas un valor distinto en el siguiente render, ¡React actualizará todos los componentes debajo que lean el contexto! Es por esto que muchas veces el contexto es usado en combinación con estados. En general, si alguna información es necesitada por componentes lejanos en diferentes partes del árbol, es un buen indicador de que el contexto te ayudará. @@ -868,7 +868,7 @@ En general, si alguna información es necesitada por componentes lejanos en dife * Para pasar un contexto: 1. Crear y exportar el contexto con `export const MyContext = createContext(defaultValue)`. 2. Pasarlo al Hook `useContext(MyContext)` para leerlo en cualquier componente hijo, sin importar qué tan profundo es. - 3. Envolver los hijos con `` para proveerlo desde el papá. + 3. Envolver los hijos con `` para proveerlo desde el padre. * El contexto pasa a través de cualquier componente en el medio. * El contexto te permite escribir componentes que se "adaptan a sus alrededores". * Antes de usar contexto, trata de pasar props o pasar JSX como `children`. @@ -1020,7 +1020,7 @@ li { -Remueve la prop `imageSize` de todos los componentes. +Elimina la prop `imageSize` de todos los componentes. Crea y exporta `ImageSizeContext` desde `Context.js`. Luego, envuelve la lista con `` para pasar el valor hacia abajo, y `useContext(ImageSizeContext)` para leerlo en el componente `PlaceImage`: