diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index de8b3ef42..d5eed847e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -20,11 +20,11 @@ La documentación está dividida en secciones para atender a diferentes estilos **[Aprende React](https://es.react.dev/learn)** está diseñado para introducir conceptos fundamentales paso a paso. Cada artículo individual de Aprende React se basa en los conocimientos de los anteriores, así que asegúrate de no añadir ninguna "dependencia cíclica" entre ellos. Es importante que el lector pueda empezar por el primer artículo y llegar hasta el último artículo de Aprende React sin tener que "mirar hacia delante" en busca de una definición. Esto explica algunas opciones de ordenación (por ejemplo, que el estado se explique antes que los eventos, o que "pensar en React" no utilice refs). Learn React también sirve como manual de referencia para los conceptos de React, por lo que es importante ser muy estricto con sus definiciones y las relaciones entre ellas. -**[Referencia API](https://es.react.dev/reference/react)** está organizada por APIs y no por conceptos. Pretende ser exhaustiva. Cualquier caso práctico o recomendación que se haya omitido por brevedad en Aprende React se mencionará en la documentación de referencia de las API correspondientes. +**[Referencia API](https://es.react.dev/reference/react)** está organizada por las API y no por conceptos. Pretende ser exhaustiva. Cualquier caso práctico o recomendación que se haya omitido por brevedad en Aprende React se mencionará en la documentación de referencia de las API correspondientes. **Intenta seguir tus propias instrucciones.** -Cuando escribas instrucciones paso a paso (por ejemplo, cómo instalar algo), intenta olvidar todo lo que sabes sobre el tema y sigue realmente las instrucciones que has escrito, paso a paso. A menudo descubrirás que hay conocimientos implícitos que olvidaste mencionar, o que en las instrucciones faltan pasos o están desordenados. Puntos extra por hacer que *otra persona* siga los pasos y observar con qué dificultades se encuentra. A menudo será algo muy sencillo que no has previsto. +Cuando escribas instrucciones paso a paso (por ejemplo, cómo instalar algo), intenta olvidar todo lo que sabes sobre el tema y sigue realmente las instrucciones que has escrito, paso a paso. A menudo descubrirás que hay conocimientos implícitos que olvidaste mencionar, o que en las instrucciones faltan pasos o están desordenados. Puntos extra por hacer que _otra persona_ siga los pasos y observar con qué dificultades se encuentra. A menudo será algo muy sencillo que no has previsto. ## Pautas para los ejemplos de código @@ -42,7 +42,7 @@ Ignora esto si estás escribiendo específicamente sobre ES5. Recuerda que ES6 es todavía nuevo para mucha gente. Aunque lo usamos en muchos sitios (`const` / `let`, clases, funciones de flecha), si el código ES5 equivalente es igual de sencillo y legible, considera usarlo. -En particular, deberías preferir las declaraciones `function` con nombre a las flechas `const myFunction = () => ...` para las funciones de nivel superior. Sin embargo, *deberías* usar funciones de flecha cuando proporcionen una mejora tangible (como preservar el contexto `this` dentro de un componente). Considera ambos lados de la compensación cuando decidas si utilizar una nueva función. +En particular, deberías preferir las declaraciones `function` con nombre a las flechas `const myFunction = () => ...` para las funciones de nivel superior. Sin embargo, _deberías_ usar funciones de flecha cuando proporcionen una mejora tangible (como preservar el contexto `this` dentro de un componente). Considera ambos lados de la compensación cuando decidas si utilizar una nueva función. #### No utilices funciones que aún no estén normalizadas. diff --git a/content/docs/concurrent-mode-reference.md b/content/docs/concurrent-mode-reference.md index 682900b85..a9c724754 100644 --- a/content/docs/concurrent-mode-reference.md +++ b/content/docs/concurrent-mode-reference.md @@ -14,28 +14,27 @@ prev: concurrent-mode-adoption.html
->Advertencia: +> Advertencia: > ->Esta página describía **funcionalidades experimentales que aún no están disponibles en una versión estable**. Estaba dirigida a usuarios pioneros y personas curiosas. +> Esta página describía **funcionalidades experimentales que aún no están disponibles en una versión estable**. Estaba dirigida a usuarios pioneros y personas curiosas. > ->Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. **Por favor dirígete al [artículo del anuncio de React 18 Alfa](/blog/2021/06/08/the-plan-for-react-18.html -) para obtener información actualizada.** +> Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. **Por favor dirígete al [artículo del anuncio de React 18 Alfa](/blog/2021/06/08/the-plan-for-react-18.html) para obtener información actualizada.** > ->Antes de que se lance React 18, reemplazaremos esta página con documentación estable. +> Antes de que se lance React 18, reemplazaremos esta página con documentación estable.
Esta página es una referencia del API del [Modo concurrente](/docs/concurrent-mode-intro.html) de React. Si estás buscando una guía de introducción, revisa [Patrones concurrentes en interfaces de usuario](/docs/concurrent-mode-patterns.html). -**Nota: Esto es un una vista previa de la comunidad y no es la versión final estable. Es probable que existan futuros cambios a estas APIs. ¡Úsalas bajo tu propio riesgo!** +**Nota: Esto es un una vista previa de la comunidad y no es la versión final estable. Es probable que existan futuros cambios a estas API. ¡Úsalas bajo tu propio riesgo!** - [Habilitando el modo concurrente](#concurrent-mode) - - [`createRoot`](#createroot) + - [`createRoot`](#createroot) - [Suspense](#suspense) - - [`Suspense`](#suspensecomponent) - - [`SuspenseList`](#suspenselist) - - [`useTransition`](#usetransition) - - [`useDeferredValue`](#usedeferredvalue) + - [`Suspense`](#suspensecomponent) + - [`SuspenseList`](#suspenselist) + - [`useTransition`](#usetransition) + - [`useDeferredValue`](#usedeferredvalue) ## Habilitando el modo concurrente {#concurrent-mode} @@ -65,8 +64,9 @@ Para más información del Modo concurrente, revisa la [documentación del modo En este ejemplo, `ProfileDetails` está esperando una llamada asíncrona del API para obtener algunos datos. Mientras esperamos a `ProfileDetails` y `ProfilePhoto`, vamos a ir mostrando `Loading...` como contenido de respaldo mientras tanto. Es importante tener en cuenta que hasta que todos los hijos de `` hayan cargado, continuaremos mostrando el contenido de respaldo. `Suspense` lleva dos props: -* **fallback** lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense` hayan terminado de renderizar. -* **unstable_avoidThisFallback** lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura. + +- **fallback** lleva un indicador de carga. El contenido de respaldo es mostrado hasta que todos los hijos de `Suspense` hayan terminado de renderizar. +- **unstable_avoidThisFallback** lleva un booleano. Le dice a React si debe "omitir" revelar este límite durante la carga inicial. Es probable que esta API sea eliminada en una versión futura. ### `` {#suspenselist} @@ -90,19 +90,20 @@ En este ejemplo, `ProfileDetails` está esperando una llamada asíncrona del API Cuando varios componentes necesitan obtener datos, estos datos pueden llegar en un orden impredecible. Sin embargo, si envuelves estos elementos en un `SuspenseList`, React no mostrará un elemento de la lista hasta que todos los elementos anteriores se hayan mostrado (este comportamiente es ajustable). `SuspenseList` lleva dos props: -* **revealOrder (forwards, backwards, together)** define el orden en el cual los hijos de `SuspenseList` deberían ser mostrados. - * `together` muestra *todos* ellos cuando estén listos en lugar de uno por uno. -* **tail (collapsed, hidden)** decide como los contenidos de respaldo en un `SuspenseList` son mostrados. - * Por defecto, `SuspenseList` va a mostrar todos los contenidos de respaldo en la lista. - * `collapsed` solo muestra el siguiente contenido de respaldo en la lista. - * `hidden` no muestra ningun contenido de respaldo. + +- **revealOrder (forwards, backwards, together)** define el orden en el cual los hijos de `SuspenseList` deberían ser mostrados. + - `together` muestra _todos_ ellos cuando estén listos en lugar de uno por uno. +- **tail (collapsed, hidden)** decide como los contenidos de respaldo en un `SuspenseList` son mostrados. + - Por defecto, `SuspenseList` va a mostrar todos los contenidos de respaldo en la lista. + - `collapsed` solo muestra el siguiente contenido de respaldo en la lista. + - `hidden` no muestra ningun contenido de respaldo. Tener en cuenta que `SuspenseList` solo funciona en los componentes `Suspense` y `SuspenseList` más cercanos debajo de él. No busca límites más profundos que un nivel. Sin embargo, es posible anidar múltiples componentes `SuspenseList` entre sí para construir grillas. ### `useTransition` {#usetransition} ```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; +const SUSPENSE_CONFIG = {timeoutMs: 2000}; const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); ``` @@ -110,13 +111,14 @@ const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG); `useTransition` permite a los componentes evitar estados de carga no deseada al esperar que se cargue el contenido antes de **transicionar hacia la siguiente pantalla**. También permite que los componentes difieran las actualizaciones de datos obtenidos más lentas hasta la siguiente renderización, de modo que se puedan presentar actualizaciones más cruciales de inmediato. El hook `useTransition` retorna dos valores en un array. -* `startTransition` es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir. -* `isPending` es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine. + +- `startTransition` es una función que toma un callback. Nosotros podemos usarlo para decirle a React cual estado queremos diferir. +- `isPending` es un booleano. Es la manera en que React nos informa si estamos esperando que la transición termine. **Si alguna actualización de estado causa que un componente se suspenda, esa actualización de estado debería estar envuelta en una transición.** ```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; +const SUSPENSE_CONFIG = {timeoutMs: 2000}; function App() { const [resource, setResource] = useState(initialResource); @@ -130,11 +132,10 @@ function App() { const nextUserId = getNextId(resource.userId); setResource(fetchProfileData(nextUserId)); }); - }} - > + }}> Next - {isPending ? " Loading..." : null} + {isPending ? ' Loading...' : null} }> @@ -152,18 +153,17 @@ El booleano `isPending` le permite a React saber si nuestro componente está tra #### Configuración de useTransition {#usetransition-config} ```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; +const SUSPENSE_CONFIG = {timeoutMs: 2000}; ``` `useTransition` acepta una **Configuración de suspenso opcional** con un `timeoutMs`. Este tiempo de espera (en milisegundos) le dice a React cuánto tiempo esperar antes de mostrar el siguiente estado (la nueva página de perfil en el ejemplo anterior). **Nota: Recomendamos que compartas tu Configuración de suspenso entre diferentes módulos.** - ### `useDeferredValue` {#usedeferredvalue} ```js -const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); +const deferredValue = useDeferredValue(value, {timeoutMs: 2000}); ``` Retorna una versión diferida del valor que puede "quedarse atrás" con un máximo de `timeoutMs`. @@ -174,8 +174,8 @@ Un buen ejemplo de esto es una entrada de texto. ```js function App() { - const [text, setText] = useState("hello"); - const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); + const [text, setText] = useState('hello'); + const deferredText = useDeferredValue(text, {timeoutMs: 2000}); return (
@@ -186,7 +186,7 @@ function App() {
); - } +} ``` Esto nos permite empezar a mostrar el nuevo texto para el `input` inmediatamente, lo que permite que la página se sienta responsiva. Mientras tanto, `MySlowList` "se queda atrás" por hasta 2 segundos de acuerdo con `timeoutMs` antes de actualizar, permitiendo renderizar con el texto actual en segundo plano. @@ -196,7 +196,7 @@ Esto nos permite empezar a mostrar el nuevo texto para el `input` inmediatamente #### Configuración de useDeferredValue {#usedeferredvalue-config} ```js -const SUSPENSE_CONFIG = { timeoutMs: 2000 }; +const SUSPENSE_CONFIG = {timeoutMs: 2000}; ``` `useDeferredValue` acepta una **Configuración de suspenso opcional** con un `timeoutMs`. Este tiempo de espera (en milisegundos) le dice a React cuánto tiempo se puede retrasar el valor diferido. diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 9f209caac..86e6ac2b0 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -307,8 +307,8 @@ export function Footer() { Referencia de la API - React APIs - React DOM APIs + Las API React + Las API React DOM
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 4541617c4..d5e051129 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -300,7 +300,7 @@ export function HomeContent() { permite servir HTML bajo demanda mientras aún estás cargando datos, rellenando progresivamente el contendido faltante antes de que cargue ningún código de - JavaScript. En el cliente, React puede usar APIs web + JavaScript. En el cliente, React puede usar las API web estándares para mantener tu interfaz de usuario responsiva incluso en medio del renderizado.

@@ -392,10 +392,10 @@ export function HomeContent() { Expo{' '} te permiten construir aplicaciones en React para Android, iOS y aún más. Lucen y se sienten como - nativas porque sus UIs son realmente nativas. - No es una vista web: tus componentes de React - renderizan vistas reales de Android y iOS provistas - por la plataforma. + nativas porque sus UI son realmente nativas. No + es una vista web: tus componentes de React renderizan + vistas reales de Android y iOS provistas por la + plataforma.

diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index 7e0fb5cf5..2076bee65 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -22,7 +22,7 @@ Estas actualizaciones son principalmente apuntado a los mantenedores de otras bi ## ¿Qué hay de nuevo en React 18? {/*whats-coming-in-react-18*/} -Cuando se publique, React 18 incluirá mejoras listas para usar (como [procesamiento por lotes automático](https://github.com/reactwg/react-18/discussions/21)), nuevas APIs (como [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), y un [nuevo renderizad del lado del servidor con *streaming*](https://github.com/reactwg/react-18/discussions/37) integrado con `React.lazy`. +Cuando se publique, React 18 incluirá mejoras listas para usar (como [procesamiento por lotes automático](https://github.com/reactwg/react-18/discussions/21)), nuevas API (como [`startTransition`](https://github.com/reactwg/react-18/discussions/41)), y un [nuevo renderizad del lado del servidor con *streaming*](https://github.com/reactwg/react-18/discussions/37) integrado con `React.lazy`. Estas características son posibles gracias a un nuevo mecanismo de suscripción que estamos agregando en React 18. Se llama "renderizado concurrente" y permite a React preparar múltiples versiones de la interfaz de usuario al mismo tiempo. Este cambio se produce principalmente tras bambalinas, pero abre nuevas posibilidades para mejorar el rendimiento real y percibido de tu aplicación. diff --git a/src/content/blog/2022/03/29/react-v18.md b/src/content/blog/2022/03/29/react-v18.md index 7f890b42d..f88d58de8 100644 --- a/src/content/blog/2022/03/29/react-v18.md +++ b/src/content/blog/2022/03/29/react-v18.md @@ -38,9 +38,9 @@ Para los usuarios de React Native, React 18 se lanzará en React Native con la N La adición más importante en React 18 es algo en lo que esperamos que nunca tengas que pensar: la concurrencia. Creemos que esto es en gran medida cierto para los desarrolladores de aplicaciones, aunque la situación puede ser un poco más complicada para los mantenedores de bibliotecas. -La concurrencia no es una funcionalidad en sí misma. Es un nuevo mecanismo detrás de escena que permite a React preparar múltiples versiones de tu interfaz de usuario al mismo tiempo. Puedes pensar en la concurrencia como un detalle de implementación: es valiosa debido a las funcionalidades que desbloquea. React utiliza técnicas sofisticadas en su implementación interna, como colas de prioridad y múltiples búferes. Pero no verás esos conceptos en ninguna de nuestras APIs públicas. +La concurrencia no es una funcionalidad en sí misma. Es un nuevo mecanismo detrás de escena que permite a React preparar múltiples versiones de tu interfaz de usuario al mismo tiempo. Puedes pensar en la concurrencia como un detalle de implementación: es valiosa debido a las funcionalidades que desbloquea. React utiliza técnicas sofisticadas en su implementación interna, como colas de prioridad y múltiples búferes. Pero no verás esos conceptos en ninguna de nuestras API públicas. -Cuando diseñamos las APIs, tratamos de ocultar los detalles de implementación a los desarrolladores. Como desarrollador de React, te enfocas en cómo quieres que sea la experiencia del usuario y React se encarga de cómo ofrecer esa experiencia. Por lo tanto, no esperamos que los desarrolladores de React sepan cómo funciona la concurrencia bajo el capó. +Cuando diseñamos las API, tratamos de ocultar los detalles de implementación a los desarrolladores. Como desarrollador de React, te enfocas en cómo quieres que sea la experiencia del usuario y React se encarga de cómo ofrecer esa experiencia. Por lo tanto, no esperamos que los desarrolladores de React sepan cómo funciona la concurrencia bajo el capó. Sin embargo, React Concurrente es más importante que un simple detalle de implementación, es una actualización fundamental en el modelo de renderizado central de React. Entonces, aunque no es muy importante saber cómo funciona la concurrencia, puede valer la pena saber qué es a grandes rasgos. @@ -62,9 +62,9 @@ La estrategia general de actualización consiste en hacer que tu aplicación fun Después de actualizar a React 18, podrás comenzar a utilizar funcionalidades concurrentes de inmediato. Por ejemplo, puedes utilizar startTransition para navegar entre pantallas sin bloquear la entrada del usuario. O usar useDeferredValue para limitar la frecuencia de las costosas re-renderizaciones. -Sin embargo, a largo plazo, esperamos que la forma principal de agregar concurrencia a tu aplicación sea utilizando una biblioteca o marco de trabajo compatible con la concurrencia. En la mayoría de los casos, no interactuarás directamente con las APIs concurrentes. Por ejemplo, en lugar de que los desarrolladores llamen a startTransition cada vez que naveguen a una nueva pantalla, las bibliotecas de enrutamiento envolverán automáticamente las navegaciones en startTransition. +Sin embargo, a largo plazo, esperamos que la forma principal de agregar concurrencia a tu aplicación sea utilizando una biblioteca o marco de trabajo compatible con la concurrencia. En la mayoría de los casos, no interactuarás directamente con las API concurrentes. Por ejemplo, en lugar de que los desarrolladores llamen a startTransition cada vez que naveguen a una nueva pantalla, las bibliotecas de enrutamiento envolverán automáticamente las navegaciones en startTransition. -Puede llevar algún tiempo que las bibliotecas se actualicen para ser compatibles con la concurrencia. Hemos proporcionado nuevas APIs para facilitar a las bibliotecas aprovechar las funcionalidades concurrentes. Mientras tanto, te pedimos paciencia con los mantenedores mientras trabajamos en la migración gradual del ecosistema de React. +Puede llevar algún tiempo que las bibliotecas se actualicen para ser compatibles con la concurrencia. Hemos proporcionado nuevas API para facilitar a las bibliotecas aprovechar las funcionalidades concurrentes. Mientras tanto, te pedimos paciencia con los mantenedores mientras trabajamos en la migración gradual del ecosistema de React. Para obtener más información, consulta nuestra publicación anterior: [Como actualizar a React 18](/blog/2022/03/08/react-18-upgrade-guide). @@ -163,7 +163,7 @@ Suspense en React 18 funciona mejor cuando se combina con la API de transición. Para más información, consulta el RFC para [Suspense en React 18](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md). -### Nuevas APIs de renderizado en cliente y servidor {/*new-client-and-server-rendering-apis*/} +### Nuevas API de renderizado en cliente y servidor {/*new-client-and-server-rendering-apis*/} En esta versión, aprovechamos la oportunidad para rediseñar las API que exponemos para el renderizado en el cliente y en el servidor. Estos cambios permiten a los usuarios seguir utilizando las antiguas API en el modo React 17 mientras actualizan a las nuevas API en React 18. @@ -180,7 +180,7 @@ Tanto `createRoot` como `hydrateRoot` aceptan una nueva opción llamada `onRecov #### Servidor React DOM {/*react-dom-server*/} -Estas nuevas APIs son exportadas desde `react-dom/server` y tienen soporte completo para Suspense en el servidor: +Estas nuevas API son exportadas desde `react-dom/server` y tienen soporte completo para Suspense en el servidor: * `renderToPipeableStream`: para transmisión en entornos de Node * `renderToReadableStream`: para entornos de tiempo de ejecución modernos, como Deno y Cloudflare workers. @@ -225,7 +225,7 @@ Con el modo estricto (Strict Mode) en React 18, React simulará el desmontaje y #### useId {/*useid*/} -`useId` es un nuevo gancho (hook) para generar IDs unicos tanto en el cliente como en el servidor, evitando desajustes en la hidratación. Es especialmente útil para bibliotecas de componentes que se integran con API de accesibilidad que requieren identificadores únicos. Esto resuelve un problema que ya existe en React 17 y versiones anteriores, pero es aún más importante en React 18 debido a cómo el nuevo renderizador de servidor en streaming entrega el HTML sin un orden específico. [Consulta la documentación](/reference/react/useId). +`useId` es un nuevo gancho (hook) para generar los ID únicos tanto en el cliente como en el servidor, evitando desajustes en la hidratación. Es especialmente útil para bibliotecas de componentes que se integran con API de accesibilidad que requieren identificadores únicos. Esto resuelve un problema que ya existe en React 17 y versiones anteriores, pero es aún más importante en React 18 debido a cómo el nuevo renderizador de servidor en streaming entrega el HTML sin un orden específico. [Consulta la documentación](/reference/react/useId). > Note > @@ -264,7 +264,7 @@ Consulta [Cómo Actualizar a React 18](/blog/2022/03/08/react-18-upgrade-guide) ### React {/*react*/} * Añadido `useTransition` y `useDeferredValue` para separar las actualizaciones urgentes de las transiciones. ([#10426](https://github.com/facebook/react/pull/10426), [#10715](https://github.com/facebook/react/pull/10715), [#15593](https://github.com/facebook/react/pull/15593), [#15272](https://github.com/facebook/react/pull/15272), [#15578](https://github.com/facebook/react/pull/15578), [#15769](https://github.com/facebook/react/pull/15769), [#17058](https://github.com/facebook/react/pull/17058), [#18796](https://github.com/facebook/react/pull/18796), [#19121](https://github.com/facebook/react/pull/19121), [#19703](https://github.com/facebook/react/pull/19703), [#19719](https://github.com/facebook/react/pull/19719), [#19724](https://github.com/facebook/react/pull/19724), [#20672](https://github.com/facebook/react/pull/20672), [#20976](https://github.com/facebook/react/pull/20976) por [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), [@rickhanlonii](https://github.com/rickhanlonii), y [@sebmarkbage](https://github.com/sebmarkbage)) -* Añadido `useId` para generar IDs únicos. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) por [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), y [@sebmarkbage](https://github.com/sebmarkbage)) +* Añadido `useId` para generar los ID únicos. ([#17322](https://github.com/facebook/react/pull/17322), [#18576](https://github.com/facebook/react/pull/18576), [#22644](https://github.com/facebook/react/pull/22644), [#22672](https://github.com/facebook/react/pull/22672), [#21260](https://github.com/facebook/react/pull/21260) por [@acdlite](https://github.com/acdlite), [@lunaruan](https://github.com/lunaruan), y [@sebmarkbage](https://github.com/sebmarkbage)) * Añadido `useSyncExternalStore` para ayudar a liberías de tiendas externas a integrarse con React. ([#15022](https://github.com/facebook/react/pull/15022), [#18000](https://github.com/facebook/react/pull/18000), [#18771](https://github.com/facebook/react/pull/18771), [#22211](https://github.com/facebook/react/pull/22211), [#22292](https://github.com/facebook/react/pull/22292), [#22239](https://github.com/facebook/react/pull/22239), [#22347](https://github.com/facebook/react/pull/22347), [#23150](https://github.com/facebook/react/pull/23150) por [@acdlite](https://github.com/acdlite), [@bvaughn](https://github.com/bvaughn), y [@drarmstr](https://github.com/drarmstr)) * Añadido `startTransition` como una versión de `useTransition` sin comentarios pendientes.([#19696](https://github.com/facebook/react/pull/19696) por [@rickhanlonii](https://github.com/rickhanlonii)) * Añadido `useInsertionEffect` para librerías CSS-en-JS. ([#21913](https://github.com/facebook/react/pull/21913) por [@rickhanlonii](https://github.com/rickhanlonii)) @@ -319,7 +319,7 @@ Consulta [Cómo Actualizar a React 18](/blog/2022/03/08/react-18-upgrade-guide) * Lanzar error cuando se usa `act` en producción. ([#21686](https://github.com/facebook/react/pull/21686) por [@acdlite](https://github.com/acdlite)) * Soporte para deshabilitar las advertencias espurias con `global.IS_REACT_ACT_ENVIRONMENT`. ([#22561](https://github.com/facebook/react/pull/22561) por [@acdlite](https://github.com/acdlite)) -* Expandir las advertencias act para cubrir todas las APIs que podrían crear trabajo en React. ([#22607](https://github.com/facebook/react/pull/22607) por [@acdlite](https://github.com/acdlite)) +* Expandir las advertencias act para cubrir todas las API que podrían crear trabajo en React. ([#22607](https://github.com/facebook/react/pull/22607) por [@acdlite](https://github.com/acdlite)) * Hacer agrupamientos de actualizaciones `act`. ([#21797](https://github.com/facebook/react/pull/21797) por [@acdlite](https://github.com/acdlite)) * Remover advertencias por effectos pasivos colgados. ([#22609](https://github.com/facebook/react/pull/22609) por [@acdlite](https://github.com/acdlite)) diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 6f6f10d92..59ecd7fa6 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -45,7 +45,7 @@ Veamos más de cerca qué puedes encontrar en cada sección. -Todavía hay algunos casos raros de uso de componentes de clase que aún no tienen un equivalente basado en Hooks. Los componentes de clase siguen siendo compatibles y se documentan en la sección de [APIs heredadas de React](/reference/react/legacy) del nuevo sitio. +Todavía hay algunos casos raros de uso de componentes de clase que aún no tienen un equivalente basado en Hooks. Los componentes de clase siguen siendo compatibles y se documentan en la sección de las [API heredadas de React](/reference/react/legacy) del nuevo sitio. @@ -226,7 +226,7 @@ También nos gustaría destacar [Pensar en React](/learn/thinking-in-react), ese -El ejemplo anterior es un *sandbox*. ¡Hemos agregado muchos sandboxes, más de 600, por todas partes en el sitio! Puedes editar cualquier sandbox o presionar "Bifurcar" en la esquina superior derecha para abrirlo en una pestaña separada. Los sandboxes te permiten jugar rápidamente con las APIs de React, explorar tus ideas y comprobar tu comprensión. +El ejemplo anterior es un *sandbox*. ¡Hemos agregado muchos sandboxes, más de 600, por todas partes en el sitio! Puedes editar cualquier sandbox o presionar "Bifurcar" en la esquina superior derecha para abrirlo en una pestaña separada. Los sandboxes te permiten jugar rápidamente con las API de React, explorar tus ideas y comprobar tu comprensión. @@ -454,19 +454,19 @@ Hemos confirmado con los proveedores de navegadores que esta representación es ## Una nueva y detallada Referencia de la API {/*a-new-detailed-api-reference*/} -En la [Referencia de la API](/reference/react), cada API de React ahora tiene una página dedicada. Esto incluye todo tipo de APIs: +En la [Referencia de la API](/reference/react), cada API de React ahora tiene una página dedicada. Esto incluye todo tipo de las API: - Hooks incorporados como [`useState`](/reference/react/useState). - Componentes incorporados como [``](/reference/react/Suspense). - Componentes de navegadores incorporados como [``](/reference/react-dom/components/input). -- APIs orientadas al framework como [`renderToPipeableStream`](/reference/react-dom/server/renderToReadableStream). -- Otras APIs de React como [`memo`](/reference/react/memo). +- Las API orientadas al framework como [`renderToPipeableStream`](/reference/react-dom/server/renderToReadableStream). +- Otras API de React como [`memo`](/reference/react/memo). Observarás que cada página de API se divide en al menos dos segmentos: *Referencia* y *Uso*. [Referencia](/reference/react/useState#reference) describe la firma formal de la API al listar sus argumentos y valores de retorno. Es concisa, pero puede sentirse un poco abstracta si no estás familiarizado con esa API. Describe qué hace una API, pero no cómo utilizarla. -[Uso](/reference/react/useState#usage) muestra por qué y cómo utilizarías esta API en la práctica, como podría explicarlo un colega o un amigo. Muestra los **escenarios canónicos de cómo el equipo de React pretendía que se utilizara cada API.** Hemos añadido fragmentos de código con colores, ejemplos de cómo usar diferentes APIs juntas y recetas que puedes copiar y pegar: +[Uso](/reference/react/useState#usage) muestra por qué y cómo utilizarías esta API en la práctica, como podría explicarlo un colega o un amigo. Muestra los **escenarios canónicos de cómo el equipo de React pretendía que se utilizara cada API.** Hemos añadido fragmentos de código con colores, ejemplos de cómo usar diferentes API juntas y recetas que puedes copiar y pegar: @@ -604,7 +604,7 @@ button { display: block; margin-top: 10px; } -Algunas páginas de la API también incluyen [solución de problemas](/reference/react/useEffect#troubleshooting) (para problemas comunes) y [Alternativas](/reference/react-dom/findDOMNode#alternatives) (para APIs obsoletas). +Algunas páginas de la API también incluyen [solución de problemas](/reference/react/useEffect#troubleshooting) (para problemas comunes) y [Alternativas](/reference/react-dom/findDOMNode#alternatives) (para las API obsoletas). Esperamos que este enfoque haga que la referencia de la API sea útil no solo como una forma de buscar un argumento, sino también como una forma de ver todas las cosas diferentes que se pueden hacer con cualquier API y cómo se conecta con las demás. diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index b673888d6..0ce2f720b 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -45,9 +45,9 @@ Las advertencias de desarrollo no afectarán el comportamiento del tiempo de eje En general, *no* cambiamos la versión mayor para cambios en: * **Advertencias de desarrollo.** Dado que estas no afectan el comportamiento de producción, podemos agregar nuevas advertencias o modificar advertencias existentes entre versiones mayores. De hecho, esto es lo que nos permite advertir de manera confiable sobre los próximos cambios importantes. -* **APIs que comienzan con `unstable_`.** Estas son proporcionadas como funcionalidades experimentales cuyas APIs aún no confiamos. Al lanzarlas con un prefijo `unstable_`, podemos iterar más rápido y obtener una API estable antes. -* **Versiones alfa y canary de React.** Proporcionamos versiones alfa de React como una forma de probar nuevas funciones tempranamente, pero necesitamos la flexibilidad para hacer cambios basados en lo que aprendemos en el período alfa. Si usas estas versiones, tenga en cuenta que las APIs pueden cambiar antes del lanzamiento estable. -* **APIs no documentadas y estructuras de datos internas.** Si accedes a nombres de propiedades internas como `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` o `__reactInternalInstance$uk43rzhitjg`, no hay garantía. Estas por tu cuenta. +* **Las API que comienzan con `unstable_`.** Estas son proporcionadas como funcionalidades experimentales cuyas API aún no confiamos. Al lanzarlas con un prefijo `unstable_`, podemos iterar más rápido y obtener una API estable antes. +* **Versiones alfa y canary de React.** Proporcionamos versiones alfa de React como una forma de probar nuevas funciones tempranamente, pero necesitamos la flexibilidad para hacer cambios basados en lo que aprendemos en el período alfa. Si usas estas versiones, tenga en cuenta que las API pueden cambiar antes del lanzamiento estable. +* **Las API no documentadas y estructuras de datos internas.** Si accedes a nombres de propiedades internas como `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` o `__reactInternalInstance$uk43rzhitjg`, no hay garantía. Estas por tu cuenta. Esta política está diseñada para ser pragmática: ciertamente, no queremos causarle dolores de cabeza. Si cambiamos la versión mayor para todos estos cambios, terminaríamos lanzando más versiones mayores y, en última instancia, causando más problemas de versionado para la comunidad. También significaría que no podemos hacer progreso en el mejoramiento de React tan rápido como nos gustaría. @@ -69,7 +69,7 @@ Si un lanzamiento incluye cambios no esenciales, como refactorización interna, ## Todos los canales de lanzamiento {/*all-release-channels*/} -React se basa en una próspera comunidad de código abierto para presentar informes de errores, abrir solicitudes de incorporación de cambios y [enviar RFCs](https://github.com/reactjs/rfcs). Para alentar los comentarios, a veces compartimos compilaciones especiales de React que incluyen funciones inéditas. +React se basa en una próspera comunidad de código abierto para presentar informes de errores, abrir solicitudes de incorporación de cambios y [enviar las RFC](https://github.com/reactjs/rfcs). Para alentar los comentarios, a veces compartimos compilaciones especiales de React que incluyen funciones inéditas. @@ -83,7 +83,7 @@ Cada uno de los canales de lanzamiento de React está diseñado para un caso de - [**Canary**](#canary-channel) rastrea la rama principal del repositorio del código fuente de React. Piense en estos como candidatos de lanzamiento para el próximo lanzamiento de semver. **[Los marcos de trabajo u otras configuraciones seleccionadas pueden elegir usar este canal con una versión fijada de React.](/blog/2023/05/03/react-canaries) También puede usar el canal canary para pruebas de integración entre React y proyectos de terceros.** -- [**Experimental**](#experimental-channel) incluye APIs experimentales y funciones que no están disponibles en los lanzamientos estables. Estos también rastrean la rama principal, pero con indicadores de funciones adicionales activados. Use esto para probar las próximas funciones antes de su lanzamiento. +- [**Experimental**](#experimental-channel) incluye las API experimentales y funciones que no están disponibles en los lanzamientos estables. Estos también rastrean la rama principal, pero con indicadores de funciones adicionales activados. Use esto para probar las próximas funciones antes de su lanzamiento. Todos los lanzamientos son publicados en npm, pero solo latest utiliza el versionado semántico. Los prelanzamientos (aquellos en los canales canary y experimental) tienen versiones generadas a partir de un hash de sus contenidos y la fecha de confirmación, ej. `18.3.0-canary-388686f29-20230503` para canary y `0.0.0-experimental-388686f29-20230503` para experimental. @@ -141,7 +141,7 @@ Un proyecto que usa este flujo de trabajo es Next.js. Puedes referirte a su [con ### Canal experimental {/*experimental-channel*/} -Como canary, el canal experimental es un canal de presentación que rastrea la rama principal del repositorio de React. A diferencia de canary, las versiones experimentales incluyen funciones adicionales y APIs que no están listas para una versión más amplia. +Como canary, el canal experimental es un canal de presentación que rastrea la rama principal del repositorio de React. A diferencia de canary, las versiones experimentales incluyen funciones adicionales y las API que no están listas para una versión más amplia. Por lo general, una actualización en canary es acompañada por una actualización correspondiente a experimental. Se basan en la misma revisión de origen, pero son compilados usando un conjunto diferente de indicadores de funciones. diff --git a/src/content/community/videos.md b/src/content/community/videos.md index f0563e367..c645db549 100644 --- a/src/content/community/videos.md +++ b/src/content/community/videos.md @@ -36,7 +36,7 @@ Para averiguar más a fondo, mira la charla de [Shaundai Person](https://twitter ### El primer grupo de trabajo de React {/*the-first-react-working-group*/} -Para React 18, hemos creado nuestro primer grupo de trabajo para colaborar con un comité de expertos, desarrolladores, mantenedores de biblioteca, y educadores. Juntos hemos trabajado para crear nuestra estrategia de adopción gradual y para refinar nuestras APIs como `useId`, `useSyncExternalStore`, y `useInsertionEffect`. +Para React 18, hemos creado nuestro primer grupo de trabajo para colaborar con un comité de expertos, desarrolladores, mantenedores de biblioteca, y educadores. Juntos hemos trabajado para crear nuestra estrategia de adopción gradual y para refinar nuestras API como `useId`, `useSyncExternalStore`, y `useInsertionEffect`. Para ver una descripción general sobre este trabajo, mira la charla de [Aakansha' Doshi](https://twitter.com/aakansha1216): diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index de662b50f..16fc4b2a3 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -2529,7 +2529,7 @@ Cambia la estructura de estado para admitir la selección múltiple. (¿Cómo lo -En lugar de un único ID seleccionado, es posible que desees mantener una matriz o un[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) de IDs seleccionados en el estado. +En lugar de un único ID seleccionado, es posible que desees mantener una matriz o un[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) de los ID seleccionados en el estado. diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 093845e23..1ff34d886 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -54,7 +54,7 @@ export default function Counter() { -Una ref es como un bolsillo secreto de tu componente que React no puede rastrear. Por ejemplo, puedes usar refs para almacenar [timeout IDs](https://developer.mozilla.org/es/docs/Web/API/setTimeout#valor_devuelto), [DOM elements](https://developer.mozilla.org/en-US/docs/Web/API/Element), y otros objetos que no tienen un impacto en el resultado del renderizado de tu componente. +Una ref es como un bolsillo secreto de tu componente que React no puede rastrear. Por ejemplo, puedes usar refs para almacenar [los ID _timeout_](https://developer.mozilla.org/es/docs/Web/API/setTimeout#valor_devuelto), [elementos DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element), y otros objetos que no tienen un impacto en el resultado del renderizado de tu componente. diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 10af7b5c1..2929002e3 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -339,7 +339,7 @@ body > div > div { padding: 20px; } #### Extraer información hacia un objeto {/*extract-information-into-an-object*/} -Extrae la URL de la imagen hacia el objeto `person`. +Extrae el URL de la imagen hacia el objeto `person`. @@ -381,7 +381,7 @@ body > div > div { padding: 20px; } -Mueve la URL de la imagen a una propiedad llamada `person.imageUrl` y léela desde la etiqueta `` usando las llaves: +Mueve el URL de la imagen a una propiedad llamada `person.imageUrl` y léela desde la etiqueta `` usando las llaves: @@ -426,9 +426,9 @@ body > div > div { padding: 20px; } #### Escribe una expresión dentro de llaves JSX {/*write-an-expression-inside-jsx-curly-braces*/} -En el objeto a continuación, la URL de la imagen completa está dividida en 4 partes: la URL de base, `imageId`, `imageSize` y la extensión del archivo. +En el objeto a continuación, el URL de la imagen completa está dividida en 4 partes: el URL de base, `imageId`, `imageSize` y la extensión del archivo. -Queremos que la URL de la imagen combine estos atributos juntos: la URL de base (siempre `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), y la extensión del archivo (siempre `'.jpg'`). Sin embargo, algo está mal con la forma en que la etiqueta `` especifica su `src`. +Queremos que el URL de la imagen combine estos atributos juntos: el URL de base (siempre `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), y la extensión del archivo (siempre `'.jpg'`). Sin embargo, algo está mal con la forma en que la etiqueta `` especifica su `src`. ¿Puedes arreglarlo? diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index a4a767dbc..399e63ac1 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -394,7 +394,7 @@ function ChatRoom({ roomId }) { // Las props cambian con el tiempo Al incluir `serverUrl` como una dependencia, te aseguras de que el Efecto se vuelva a sincronizar después de que cambie. -Intenta cambiar la sala de chat seleccionada o editar la URL del servidor en este _sandbox_: +Intenta cambiar la sala de chat seleccionada o editar el URL del servidor en este _sandbox_: @@ -1317,7 +1317,7 @@ Aprenderás un enfoque más general para este tipo de problema en [Separar Event #### Solucionar un cambio de conexión {/*fix-a-connection-switch*/} -En este ejemplo, el servicio de chat en `chat.js` expone dos APIs diferentes: `createEncryptedConnection` y `createUnencryptedConnection`. El componente raíz `App` permite al usuario elegir si usar o no el cifrado, y luego pasa el método de API correspondiente al componente secundario `ChatRoom` como la prop `createConnection`. +En este ejemplo, el servicio de chat en `chat.js` expone dos API diferentes: `createEncryptedConnection` y `createUnencryptedConnection`. El componente raíz `App` permite al usuario elegir si usar o no el cifrado, y luego pasa el método de API correspondiente al componente secundario `ChatRoom` como la prop `createConnection`. Nota que inicialmente, los registros de la consola dicen que la conexión no está cifrada. Intenta cambiar el valor del checkbox: no sucederá nada. Sin embargo, si cambias la sala de chat seleccionada después de eso, entonces el chat se reconectará *y* habilitará el cifrado (como verás en los mensajes de la consola). Esto es un error. Arregla el error para que el cambio del checkbox *también* haga que el chat se reconecte. diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index ccc8abba5..02d170953 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -1243,7 +1243,7 @@ textarea { En una aplicación de chat real, probablemente querrás recuperar el estado de la entrada cuando el usuario vuelva a seleccionar el destinatario anterior. Hay algunas maneras de mantener el estado "vivo" para un componente que ya no es visible: -- Podrías mostrar _todos_ los chats en lugar de sólo el actual, pero ocultar todos los demás con CSS. Los chats no se eliminarían del árbol, por lo que su estado local se conservaría. Esta solución funciona muy bien para UIs simples. Pero puede ser muy lenta si los árboles ocultos son grandes y contienen muchos nodos DOM. +- Podrías mostrar _todos_ los chats en lugar de sólo el actual, pero ocultar todos los demás con CSS. Los chats no se eliminarían del árbol, por lo que su estado local se conservaría. Esta solución funciona muy bien para las UI simples. Pero puede ser muy lenta si los árboles ocultos son grandes y contienen muchos nodos DOM. - Podrías [subir el estado](/learn/sharing-state-between-components) y mantener el mensaje pendiente para cada destinatario en el componente padre. De esta manera, cuando los componentes hijos se eliminan, no importa, porque es el padre el que mantiene la información importante. Esta es la solución más común. También podrías utilizar una fuente diferente además del estado de React. Por ejemplo, probablemente quieras que el borrador de un mensaje persista incluso si el usuario cierra accidentalmente la página. Para implementar esto, podrías hacer que el componente `Chat` inicialice su estado leyendo de [`localStorage`](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage) y guardar los borradores allí también. diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 80b2ab973..e7864e95c 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -256,7 +256,7 @@ React proporciona una versión integrada de `useRef` porque es suficientemente c ## ¿Cuándo usar refs? {/*when-to-use-refs*/} -Típicamente, usarás una ref cuando tu componente necesite "salir" de React y comunicarse con APIs externas —a menudo una API del navegador no impactará en la apariencia de un componente. Estas son algunas de estas situaciones raras: +Típicamente, usarás una ref cuando tu componente necesite "salir" de React y comunicarse con las API externas —a menudo una API del navegador no impactará en la apariencia de un componente. Estas son algunas de estas situaciones raras: - Almacenar [identificadores de timeouts](https://developer.mozilla.org/docs/Web/API/setTimeout) - Almacenar y manipular [elementos del DOM](https://developer.mozilla.org/docs/Web/API/Element), que cubrimos en [la siguiente página](/learn/manipulating-the-dom-with-refs) @@ -268,7 +268,7 @@ Si tu componente necesita almacenar algún valor, pero no impacta la lógica del Seguir estos principios hará que tus componentes sean más predecibles: -- **Trata a las refs como una puerta de escape.** Las refs son útiles cuando trabajas con sistemas externos o APIs del navegador. Si mucho de la lógica de tu aplicación y del flujo de los datos depende de las refs, es posible que quieras reconsiderar tu enfoque. +- **Trata a las refs como una puerta de escape.** Las refs son útiles cuando trabajas con sistemas externos o las API del navegador. Si mucho de la lógica de tu aplicación y del flujo de los datos depende de las refs, es posible que quieras reconsiderar tu enfoque. - **No leas o escribas `ref.current` durante el renderizado.** Si se necesita alguna información durante el renderizado, usa en su lugar [el estado](/learn/state-a-components-memory). Como React no sabe cuándo `ref.current` cambia, incluso leerlo mientras se renderiza hace que el comportamiento de tu componente sea difícil de predecir. (La única excepción a esto es código como `if (!ref.current) ref.current = new Thing()` que solo asigna la ref una vez durante el renderizado inicial). Las limitaciones del estado en React no se aplican a las refs. Por ejemplo, el estado actúa como una [instantánea para cada renderizado](/learn/state-as-a-snapshot) y [no se actualiza de manera síncrona.](/learn/queueing-a-series-of-state-updates) Pero cuando mutas el valor actual de una ref, cambia inmediatamente: diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index be226a3c9..65b544b4e 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -1509,7 +1509,7 @@ Los Eventos de Efecto como `onAppear` no son reactivos, por lo que puedes leer ` #### Soluciona la reconexión del chat {/*fix-a-reconnecting-chat*/} -En este ejemplo, cada vez que presionas "Toggle theme", el chat se reconecte. ¿Por qué pasa esto? Soluciona el error para que el chat se reconecte solo cuando edites la URL del servidor o elijas una habitación de chat diferente. +En este ejemplo, cada vez que presionas "Toggle theme", el chat se reconecte. ¿Por qué pasa esto? Soluciona el error para que el chat se reconecte solo cuando edites el URL del servidor o elijas una habitación de chat diferente. Trata `chat.js` como una biblioteca externa de terceros: puedes consultarla para comprobar su API, pero no la edites. diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index 3d7cdd4f1..8334174f9 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -417,9 +417,9 @@ Los nombres de archivos en una carpeta y las _keys_ JSX en un array tienen un pr -Podrías estar tentado a usar el índice del elemento en el array como su _key_. De hecho, eso es lo que React usará si tu no especifícas una _`key`_ en absoluto. Pero el orden en el que renderizas elementos cambiará con el tiempo si un elemento es insertado, borrado, o si se reordena su array. El índice como _key_ lleva a menudo a sutiles y confusos errores. +Podrías estar tentado a usar el índice del elemento en el array como su _key_. De hecho, eso es lo que React usará si tu no especificas una _`key`_ en absoluto. Pero el orden en el que renderizas elementos cambiará con el tiempo si un elemento es insertado, borrado, o si se reordena su array. El índice como _key_ lleva a menudo a sutiles y confusos errores. -Igualmente, no generes _keys_ sobre la marcha, p. ej. con `key={Math.random()}`. Esto hará que las _keys_ nunca coincidan entre renderizados, llevando a todos tus componentes y al DOM a recrearse cada vez. No solo es una manera lenta, si no que también pierde cualquier input del usuario dentro de los elementos listados. En vez de eso, usa unas IDs basadas en datos. +Igualmente, no generes _keys_ sobre la marcha, p. ej. con `key={Math.random()}`. Esto hará que las _keys_ nunca coincidan entre renderizados, llevando a todos tus componentes y al DOM a recrearse cada vez. No solo es una manera lenta, si no que también pierde cualquier input del usuario dentro de los elementos listados. En vez de eso, usa unos ID basados en datos. Date cuenta de que tus componentes no reciben la _`key`_ como un prop. Solo es usado como pista para React. Si tus componentes necesitan un ID, se lo tienes que pasar como una prop separada: ``. @@ -972,7 +972,7 @@ export const recipes = [{ -Cada una de las `recipes` ya incluye un campo `id`, y eso es lo que el bucle exterior usa para su _`key`_. No hay un ID que puedas usar para hacer un bucle sobre los ingredientes. Sin embargo, es razonable asumir que el mismo ingrediente no estará listado dos veces dentro de la misma receta, por lo tanto su nombre puede servir como _`key`_. Alternativamente, podrías cambiar la estructura de los datos para añadir IDs, o usar el índice como _`key`_ (con la advertencia de que no puedes reordenar ingredientes de forma segura). +Cada una de las `recipes` ya incluye un campo `id`, y eso es lo que el bucle exterior usa para su _`key`_. No hay un ID que puedas usar para hacer un bucle sobre los ingredientes. Sin embargo, es razonable asumir que el mismo ingrediente no estará listado dos veces dentro de la misma receta, por lo tanto su nombre puede servir como _`key`_. Alternativamente, podrías cambiar la estructura de los datos para añadir los ID, o usar el índice como _`key`_ (con la advertencia de que no puedes reordenar ingredientes de forma segura). diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md index 204ad4ca1..60ff2d0bd 100644 --- a/src/content/learn/reusing-logic-with-custom-hooks.md +++ b/src/content/learn/reusing-logic-with-custom-hooks.md @@ -449,7 +449,7 @@ Cuando necesites compartir el estado en sí entre múltiples componentes, [levá El código dentro de los Hooks personalizados se volverá a ejecutar durante cada nuevo renderizado de tu componente. Por eso, como los componentes, los Hooks personalizados [deben ser puros.](/learn/keeping-components-pure) ¡Piensa en el código de los Hooks personalizados como parte del cuerpo de tu componente! -Dado que los Hooks personalizados se rerenderizan en conjunto con tu componente, siempre reciben las últimas props y estado. Para ver qué significa esto, considera este ejemplo de una sala de chat. Cambia la URL del servidor o la sala de chat seleccionada: +Dado que los Hooks personalizados se rerenderizan en conjunto con tu componente, siempre reciben las últimas props y estado. Para ver qué significa esto, considera este ejemplo de una sala de chat. Cambia el URL del servidor o la sala de chat seleccionada: @@ -645,7 +645,7 @@ export default function ChatRoom({ roomId }) { ¡Esto parece mucho más simple! (Pero hace lo mismo). -Observa que la lógica *sigue respondiendo* a los cambios de props y estado. Intenta editar la URL o la sala seleccionada: +Observa que la lógica *sigue respondiendo* a los cambios de props y estado. Intenta editar el URL o la sala seleccionada: diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md index 9abf4fe12..29356ba2c 100644 --- a/src/content/learn/separating-events-from-effects.md +++ b/src/content/learn/separating-events-from-effects.md @@ -607,7 +607,7 @@ function Page({ url }) { } ``` -Piense en lo que quiere que haga el código. Usted *quiere* registrar una visita separada para diferentes URLs ya que cada URL representa una página diferente. En otras palabras, esta llamada a `logVisit` *debería* ser reactiva con respecto a la `url`. Por eso, en este caso, tiene sentido seguir el linter de dependencias, y añadir `url` como dependencia: +Piense en lo que quiere que haga el código. Usted *quiere* registrar una visita separada para las diferentes URL ya que cada URL representa una página diferente. En otras palabras, esta llamada a `logVisit` *debería* ser reactiva con respecto a la `url`. Por eso, en este caso, tiene sentido seguir el linter de dependencias, y añadir `url` como dependencia: ```js {4} function Page({ url }) { diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index e667d42af..842bcb42e 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -39,7 +39,7 @@ A partir de ahora en este texto, "Efecto" en mayúsculas se refiere a la definic ## Quizás no necesites un Efecto {/*you-might-not-need-an-effect*/} -**No te apresures en añadir Efectos en tus componentes.** Ten en cuenta que los Efectos se usan típicamente para "salir" de tu código React y sincronizar con algún sistema *externo*. Esto incluye APIs del navegador, widgets de terceros, red, etc. Si tu Efecto solo ajusta un estado basado en otro estado, [quizás no necesites un Efecto.](/learn/you-might-not-need-an-effect) +**No te apresures en añadir Efectos en tus componentes.** Ten en cuenta que los Efectos se usan típicamente para "salir" de tu código React y sincronizar con algún sistema *externo*. Esto incluye las API del navegador, widgets de terceros, red, etc. Si tu Efecto solo ajusta un estado basado en otro estado, [quizás no necesites un Efecto.](/learn/you-might-not-need-an-effect) ## Cómo escribir un Efecto {/*how-to-write-an-effect*/} @@ -611,7 +611,7 @@ useEffect(() => { Ten en cuenta que en este caso no se necesita limpiar nada. En desarrollo, React llamará al Efecto dos veces, pero esto no es un problema porque llamar a `setZoomLevel` dos veces con el mismo valor no hace nada. Puede ser un poco más lento, pero no importa porque no se montará innecesariamente en producción. -Algunas APIs pueden no permitir que se las llame dos veces seguidas. Por ejemplo, el método [`showModal`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) del elemento integrado [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) arrojará una excepción si se le llama dos veces. Implementa la función de limpieza para que cierre el elemento ``. +Algunas API pueden no permitir que se las llame dos veces seguidas. Por ejemplo, el método [`showModal`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) del elemento integrado [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement) arrojará una excepción si se le llama dos veces. Implementa la función de limpieza para que cierre el elemento ``. ```js {4} useEffect(() => { diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 152697dfc..e5229f593 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -206,7 +206,7 @@ setArtists( ); ``` -Aquí, `artists.filter(a => a.id !== artist.id)` significa "crea un nuevo _array_ conformado por aquellos `artists` cuyos IDs son diferentes de `artist.id`". En otras palabras, el botón "Eliminar" de cada artista filtrará a _ese_ artista del _array_ y luego solicitará un rerenderizado con el _array_ resultante. Ten en cuenta que `filter` no modifica el _array_ original. +Aquí, `artists.filter(a => a.id !== artist.id)` significa "crea un nuevo _array_ conformado por aquellos `artists` cuyos ID son diferentes de `artist.id`". En otras palabras, el botón "Eliminar" de cada artista filtrará a _ese_ artista del _array_ y luego solicitará un rerenderizado con el _array_ resultante. Ten en cuenta que `filter` no modifica el _array_ original. ### Transformar un _array_ {/*transforming-an-array*/} diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md index 244552152..2bc9e4920 100644 --- a/src/content/learn/your-first-component.md +++ b/src/content/learn/your-first-component.md @@ -4,7 +4,7 @@ title: Tu primer componente -Los *componentes* son uno de los conceptos esenciales de React. Constituyen los cimientos sobre los que construyes interfaces de usuario (UIs por sus siglas en inglés). ¡Y eso los convierte en el lugar perfecto para comenzar tu recorrido por React! +Los *componentes* son uno de los conceptos esenciales de React. Constituyen los cimientos sobre los que construyes interfaces de usuario (las UI por sus siglas en inglés). ¡Y eso los convierte en el lugar perfecto para comenzar tu recorrido por React! @@ -16,7 +16,7 @@ Los *componentes* son uno de los conceptos esenciales de React. Constituyen los -## Componentes: Elementos básicos para construir UIs {/*components-ui-building-blocks*/} +## Componentes: Elementos básicos para construir las UI {/*components-ui-building-blocks*/} En la Web, HTML nos permite crear documentos estructurados con su conjunto integrado de etiquetas como `

` y `
  • `: diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 4e6c7c2da..89832cc20 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -46,7 +46,7 @@ Una aplicación construida completamente con React suele llamar `createRoot` una * **opcional** `options`: Un objeto que contiene opciones para esta raíz de React. * **opcional** `onRecoverableError`: _callback_ que se llama cuando React se recupera de errores automáticamente. - * **opcional** `identifierPrefix`: prefijo de tipo string que React utiliza para IDs generados por [`useId`.](/apis/react/useId) Útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. + * **opcional** `identifierPrefix`: prefijo de tipo string que React utiliza para los ID generados por [`useId`.](/apis/react/useId) Útil para evitar conflictos cuando se utilizan múltiples raíces en la misma página. #### Devuelve {/*returns*/} diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index f6bf4c91a..446b0317d 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -42,7 +42,7 @@ React se unirá al HTML que existe dentro de `domNode`, y se encargará de gesti * **opcional** `options`: Un objeto que contiene opciones para esta raíz de React. * **opcional** `onRecoverableError`: *Callback* que se llama cuando React se recupera automáticamente de los errores. - * **opcional** `identifierPrefix`: Prefijo que React utiliza para los IDs generados por [`useId`.](/reference/react/useId) Útil para evitar conflictos cuando se utilizan varias raíces en la misma página. Debe ser el mismo prefijo que se utiliza en el servidor. + * **opcional** `identifierPrefix`: Prefijo que React utiliza para los ID generados por [`useId`.](/reference/react/useId) Útil para evitar conflictos cuando se utilizan varias raíces en la misma página. Debe ser el mismo prefijo que se utiliza en el servidor. * **opcional** `nonce`: #### Devuelve {/*returns*/} @@ -190,7 +190,7 @@ Las causas más comunes que conducen a errores de hidratación incluyen: * Espacios en blanco extra (como nuevas líneas) alrededor del HTML generado por React dentro del nodo raíz. * Utilizar comprobaciones como `typeof window !== 'undefined'` en tu lógica de renderizado. -* Utilizar APIs exclusivas del navegador como [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) en tu lógica de renderizado. +* Utilizar las API exclusivas del navegador como [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) en tu lógica de renderizado. * Renderizar datos diferentes en el servidor y en el cliente. React puede recuperarse de algunos errores de hidratación, pero **debes solucionarlos como cualquier otro error.** En el mejor de los casos, conducirán a una aplicación más lenta; en el peor, los manejadores de eventos se adjuntarán a los elementos equivocados. diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md index a0b092f35..68d252044 100644 --- a/src/content/reference/react-dom/client/index.md +++ b/src/content/reference/react-dom/client/index.md @@ -1,16 +1,16 @@ --- -title: APIs del cliente React DOM +title: Las API del cliente React DOM --- -Las APIs de `react-dom/client` te permiten renderizar componentes de React en el cliente (en el navegador). Estas APIs son típicamente usadas en el nivel superior de tu aplicación para inicializar tu árbol de React. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) podría llamar a estas APIs por ti. La mayoría de tus componentes no necesitan importarlas o usarlas. +Las API de `react-dom/client` te permiten renderizar componentes de React en el cliente (en el navegador). Estas API son típicamente usadas en el nivel superior de tu aplicación para inicializar tu árbol de React. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) podría llamar a estas API por ti. La mayoría de tus componentes no necesitan importarlas o usarlas. --- -## APIs del cliente {/*client-apis*/} +## Las API del cliente {/*client-apis*/} * [`createRoot`](/reference/react-dom/client/createRoot) te permite crear una raíz para mostrar componentes de React dentro de un nodo del DOM del navegador. * [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) te permite mostrar componentes de React dentro de un nodo DOM del navegador cuyo contenido HTML fue generado previamente por [`react-dom/server.`](/reference/react-dom/server) diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md index fd9d5e426..03411dff4 100644 --- a/src/content/reference/react-dom/components/input.md +++ b/src/content/reference/react-dom/components/input.md @@ -235,7 +235,7 @@ input { margin: 5px; } ### Leer los valores de los inputs cuando se envía un formulario {/*reading-the-input-values-when-submitting-a-form*/} -Añade un [`
    `](https://developer.mozilla.org/es/docs/Web/HTML/Element/form) que rodee tus inputs con un [`