From d7b081b1de5f7f7c058e398dc4bc2fc9b8399894 Mon Sep 17 00:00:00 2001 From: Camilo Cortes <67564515+CamiloCortesM@users.noreply.github.com> Date: Tue, 18 Oct 2022 17:14:48 -0500 Subject: [PATCH 1/2] translate spanish hydrateRoot. --- .../apis/react-dom/client/hydrateRoot.md | 132 +++++++++--------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/beta/src/content/apis/react-dom/client/hydrateRoot.md b/beta/src/content/apis/react-dom/client/hydrateRoot.md index b00146f4f..7b5f5104b 100644 --- a/beta/src/content/apis/react-dom/client/hydrateRoot.md +++ b/beta/src/content/apis/react-dom/client/hydrateRoot.md @@ -4,7 +4,7 @@ title: hydrateRoot -`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/apis/react-dom/server) +`hydrateRoot` te permite mostrar componentes React dentro de un nodo DOM del navegador cuyo contenido HTML fue generado previamente por [`react-dom/server`.](/apis/react-dom/server) ```js const root = hydrateRoot(domNode, reactNode, options?) @@ -16,11 +16,12 @@ const root = hydrateRoot(domNode, reactNode, options?) --- -## Usage {/*usage*/} +## Uo {/*usage*/} -### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} +### Hydrating de HTML renderizado en el servidor {/*hydrating-server-rendered-html*/} -If your app's HTML was generated by [`react-dom/server`](/apis/react-dom/client/createRoot), you need to *hydrate* it on the client. + +Si el HTML de tu aplicación fue generado por [`react-dom/server`](/apis/react-dom/client/createRoot),hay que *hidratarla* en el cliente. ```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]] import {hydrateRoot} from 'react-dom/client'; @@ -28,18 +29,18 @@ import {hydrateRoot} from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ```` -This will hydrate the server HTML inside the browser DOM node with the React component for your app. Usually, you will do it once at startup. If you use a framework, it might do this behind the scenes for you. +Esto hidratará el HTML del servidor dentro del nodo DOM del navegador con el Componente React para su aplicación. Por lo general, lo harás una vez al inicio. Si utilizas un marco de trabajo, puede hacer esto detrás de las escenas para ti. -To hydrate your app, React will "attach" your components' logic to the initial generated HTML from the server. Hydration turns the initial HTML snapshot from the server into a fully interactive app that runs in the browser. +Para hidratar tu aplicación, React "adjuntará" la lógica de tus componentes al HTML inicial generado desde el servidor. La hidratación convierte la instantánea inicial de HTML del servidor en una app totalmente interactiva que se ejecuta en el navegador. ```html public/index.html -

Hello, world!

+

Hola, mundo!

``` ```js index.js active @@ -59,7 +60,7 @@ import { useState } from 'react'; export default function App() { return ( <> -

Hello, world!

+

Hola, mundo!

); @@ -69,7 +70,7 @@ function Counter() { const [count, setCount] = useState(0); return ( ); } @@ -77,39 +78,39 @@ function Counter() { -You shouldn't need to call `hydrateRoot` again or to call it in more places. From this point on, React will be managing the DOM of your application. If you want to update the UI, your components can do this by [using state.](/apis/react/useState) +No deberías necesitar llamar a `hydrateRoot` de nuevo o llamarlo en más sitios. A partir de este punto, React gestionará el DOM de tu aplicación. Si quieres actualizar la interfaz de usuario, tus componentes pueden hacerlo [usando un estado].(/apis/react/useState) -The React tree you pass to `hydrateRoot` needs to produce **the same output** as it did on the server. +El árbol de React que pases a `hydrateRoot` tiene que producir **la misma salida** que en el servidor. -This is important for the user experience. The user will spend some time looking at the server-generated HTML before your JavaScript code loads. Server rendering creates an illusion that the app loads faster by showing the HTML snapshot of its output. Suddenly showing different content breaks that illusion. This is why the server render output must match the initial render output on the client during hydration. +Esto es importante para la experiencia del usuario. El usuario pasará algún tiempo mirando el HTML generado por el servidor antes de que se cargue su código JavaScript. El renderizado del servidor crea la ilusión de que la aplicación se carga más rápido al mostrar la instantánea del HTML de su salida. Mostrar de repente un contenido diferente rompe esa ilusión. Por ello, la salida de renderizado del servidor debe coincidir con la salida de renderizado inicial en el cliente durante la hidratación. -The most common causes leading to hydration errors include: +Las causas más comunes que conducen a errores de hidratación incluyen: -* Extra whitespace (like newlines) around the React-generated HTML inside the root node. -* Using checks like `typeof window !== 'undefined'` in your rendering logic. -* Using browser-only APIs like [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your rendering logic. -* Rendering different data on the server and the client. +* 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 su lógica de renderizado. +* Utilizar APIs exclusivas del navegador como [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) en su lógica de renderizado. +* Renderización de datos diferentes en el servidor y en el cliente. -React can recover from some hydration errors, but **you must fix them like other bugs.** In the best case, they'll lead to a slower app; in the worst case, event handlers would get attached to the wrong elements. +React puede recuperarse de algunos errores de hidratación, pero **debes solucionarlos como otros errores.** En el mejor de los casos, llevarán a una aplicación más lenta; en el peor, los manejadores de eventos se adjuntarán a los elementos equivocados. -### Updating a hydrated root component {/*updating-a-hydrated-root-component*/} +### Actualización de un componente raíz hidratado {/*updating-a-hydrated-root-component*/} -After the root has finished hydrating, you can call [`root.render`](#root-render) to update the root React component. **Unlike with [`createRoot`](/apis/react-dom/client/createRoot), you don't usually need to do this because the initial content was already rendered as HTML.** +Después de que la raíz haya terminado de hidratarse, puede llamar a [`root.render`](#root-render) para actualizar el componente raíz de React. **Al contrario que con [`createRoot`](/apis/react-dom/client/createRoot), normalmente no es necesario hacerlo porque el contenido inicial ya se ha renderizado como HTML.** -If you call `root.render` at some point after hydration, and the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive: +Si llamas a `root.render` en algún momento después de la hidratación, y la estructura del árbol de componentes coincide con lo que se renderizó previamente, React [preservará el estado].(/learn/preserving-and-resetting-state) Fíjate en que puedes escribir la entrada, lo que significa que las actualizaciones de las repetidas llamadas a `render` cada segundo en este ejemplo no son destructivas: ```html public/index.html -

Hello, world! 0

+

Hola, mundo! 0

``` ```js index.js active @@ -134,7 +135,7 @@ export default function App({counter}) { return ( <>

Hello, world! {counter}

- + ); } @@ -142,101 +143,100 @@ export default function App({counter}) { -It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually, you'll [update state](/apis/react/useState) inside one of the components instead. +Es poco común llamar a [`root.render`](#root-render) en una raíz hidratada. Por lo general, se [actualizar el estado](/apis/react/useState) dentro de uno de los componentes. --- -## Reference {/*reference*/} +## Referencia {/*reference*/} ### `hydrateRoot(domNode, options?)` {/*hydrate-root*/} -Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment. +Llama a `hydrateRoot` para "adjuntar" React al HTML existente que ya fue renderizado por React en un entorno de servidor. ```js const domNode = document.getElementById('root'); const root = hydrateRoot(domNode, reactNode); ``` -React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrateRoot` call with its root component. - -[See examples above.](#usage) +React se unirá al HTML que existe dentro del `domNode`, y se encargará de gestionar el DOM dentro de él. Una aplicación completamente construida con React normalmente sólo tendrá una llamada a `hydrateRoot` con su componente raíz. -#### Parameters {/*parameters*/} +[Véanse los ejemplos anteriores.](#usage) -* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server. +#### Parámetros {/*parameters*/} -* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `` which was rendered with a `ReactDOM Server` method such as `renderToPipeableStream()`. +* `domNode`: Un [elemento DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element) que se ha representado como elemento raíz en el servidor. +* `reactNode`: El "nodo React" utilizado para renderizar el HTML existente. Normalmente será un trozo de JSX como `` que se ha renderizado con un método `ReactDOM Server` como `renderToPipeableStream()`. -* **optional** `options`: A object contain options for this React root. +* **opcional** `options`: Un objeto que contiene opciones para esta raíz de React. - * `onRecoverableError`: optional callback called when React automatically recovers from errors. - * `identifierPrefix`: optional prefix React uses for IDs generated by [`useId`.](/apis/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. + * `onRecoverableError`: callback opcional llamado cuando React se recupera automáticamente de los errores. + * `identifierPrefix`: prefijo opcional que React utiliza para los IDs generados por [`useId`.](/apis/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. -#### Returns {/*returns*/} +#### Devuelve {/*returns*/} -`hydrateRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`hydrateRoot` devuelve un objeto con dos métodos: [`render`](#root-render) y [`unmount`.](#root-unmount) -#### Caveats {/*caveats*/} -* `hydrateRoot()` expects the rendered content to be identical with the server-rendered content. You should treat mismatches as bugs and fix them. -* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive. -* You'll likely have only one `hydrateRoot` call in your app. If you use a framework, it might do this call for you. -* If your app is client-rendered with no HTML rendered already, using `hydrateRoot()` is not supported. Use [`createRoot()`](/apis/react-dom/client/createRoot) instead. +#### Advertencias {/*caveats*/} +* `hydrateRoot()` espera que el contenido renderizado sea idéntico al contenido renderizado por el servidor. Deberías tratar los desajustes como errores y solucionarlos. +* En el modo de desarrollo, React avisa de los desajustes durante la hidratación. No hay garantías de que las diferencias de atributos sean parcheadas en caso de desajustes. Esto es importante por razones de rendimiento, ya que en la mayoría de las aplicaciones, los desajustes son raros, por lo que validar todo el marcado sería prohibitivamente caro. +* Es probable que sólo tengas una llamada a `hydrateRoot` en tu aplicación. Si utilizas un marco de trabajo, puede hacer esta llamada por ti. +* Si tu aplicación está renderizada por el cliente y no tiene HTML renderizado, el uso de `hydrateRoot()` no está soportado. Utilice [`createRoot()`](/apis/react-dom/client/createRoot) en su lugar. --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to update a React component inside a hydrated React root for a browser DOM element. +Llama a `root.render` para actualizar un componente React dentro de una raíz React hidratada para un elemento DOM del navegador. ```js root.render(); ``` -React will update `` in the hydrated `root`. +React actualizará `` en la `root` hidratada. -[See examples above.](#usage) +[Véanse los ejemplos anteriores].(#usage) -#### Parameters {/*root-render-parameters*/} +#### Parámetros {/*root-render-parameters*/} -* `reactNode`: A "React node" that you want to update. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/apis/react/createElement), a string, a number, `null`, or `undefined`. +* `reactNode`: Un "nodo React" que quieres actualizar. Normalmente será un trozo de JSX como ``, pero también puedes pasar un elemento React construido con [`createElement()`].(/apis/react/createElement), una cadena, un número, `null`, o `undefined`. -#### Returns {/*root-render-returns*/} +#### Devuelve {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` devuelve `undefined`. -#### Caveats {/*root-render-caveats*/} +#### Advertencias {/*root-render-caveats*/} -* If you call `root.render` before the root has finished hydrating, React will clear the existing server-rendered HTML content and switch the entire root to client rendering. +* Si llamas a `root.render` antes de que la raíz haya terminado de hidratarse, React borrará el contenido HTML existente renderizado por el servidor y cambiará toda la raíz a renderizado por el cliente. --- ### `root.unmount()` {/*root-unmount*/} -Call `root.unmount` to destroy a rendered tree inside a React root. +Llama a `root.unmount` para destruir un árbol renderizado dentro de una raíz de React. ```js root.unmount(); ``` -An app fully built with React will usually not have any calls to `root.unmount`. +Una aplicación completamente construida con React normalmente no tendrá ninguna llamada a `root.unmount`. -This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions. +Esto es muy útil si el nodo DOM de tu raíz React (o cualquiera de sus ancestros) puede ser eliminado del DOM por algún otro código. Por ejemplo, imagina un panel de pestañas jQuery que elimina las pestañas inactivas del DOM. Si se elimina una pestaña, todo lo que hay dentro de ella (incluyendo las raíces React que hay dentro) se eliminará también del DOM. En ese caso, tienes que decirle a React que "deje" de gestionar el contenido de la raíz eliminada llamando a `root.unmount`. De lo contrario, los componentes dentro de la raíz eliminada no sabrán limpiar y liberar recursos globales como las suscripciones. -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +Al llamar a `root.unmount` se desmontarán todos los componentes de la raíz y se "separará" React del nodo DOM raíz, incluyendo la eliminación de cualquier controlador de eventos o estado en el árbol. -#### Parameters {/*root-unmount-parameters*/} +#### Parámetros {/*root-unmount-parameters*/} -`root.unmount` does not accept any parameters. +`root.unmount` no acepta ningún parámetro. -#### Returns {/*root-unmount-returns*/} +#### Devuelve {/*root-unmount-returns*/} -`render` returns `null`. +`render` devuelve `null`. -#### Caveats {/*root-unmount-caveats*/} +#### Advertencias {/*root-unmount-caveats*/} -* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node. +* Llamando a `root.unmount` se desmontarán todos los componentes del árbol y se "separará" React del nodo DOM raíz. -* Once you call `root.unmount` you cannot call `root.render` again on the root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. +* * Una vez que se llama a `root.unmount` no se puede volver a llamar a `root.render` en la raíz. El intento de llamar a `root.render` en una raíz desmontada arrojará el error "No se puede actualizar una raíz no montada ". From b196ceee524b610dfddee36b1f06a17913e7706d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Fri, 9 Dec 2022 22:37:59 -0500 Subject: [PATCH 2/2] Update hydrateRoot.md --- .../apis/react-dom/client/hydrateRoot.md | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/beta/src/content/apis/react-dom/client/hydrateRoot.md b/beta/src/content/apis/react-dom/client/hydrateRoot.md index 7b5f5104b..7815e1fbe 100644 --- a/beta/src/content/apis/react-dom/client/hydrateRoot.md +++ b/beta/src/content/apis/react-dom/client/hydrateRoot.md @@ -4,7 +4,7 @@ title: hydrateRoot -`hydrateRoot` te permite mostrar componentes React dentro de un nodo DOM del navegador cuyo contenido HTML fue generado previamente por [`react-dom/server`.](/apis/react-dom/server) +`hydrateRoot` te permite mostrar componentes de React dentro de un nodo DOM del navegador cuyo contenido HTML fue generado previamente por [`react-dom/server`.](/apis/react-dom/server) ```js const root = hydrateRoot(domNode, reactNode, options?) @@ -16,12 +16,11 @@ const root = hydrateRoot(domNode, reactNode, options?) --- -## Uo {/*usage*/} +## Uso {/*usage*/} -### Hydrating de HTML renderizado en el servidor {/*hydrating-server-rendered-html*/} +### Hidratación de HTML renderizado en el servidor {/*hydrating-server-rendered-html*/} - -Si el HTML de tu aplicación fue generado por [`react-dom/server`](/apis/react-dom/client/createRoot),hay que *hidratarla* en el cliente. +Si el HTML de tu aplicación fue generado por [`react-dom/server`](/apis/react-dom/client/createRoot), hay que *hidratarlo* en el cliente. ```js [[1, 3, "document.getElementById('root')"], [2, 3, ""]] import {hydrateRoot} from 'react-dom/client'; @@ -29,18 +28,18 @@ import {hydrateRoot} from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ```` -Esto hidratará el HTML del servidor dentro del nodo DOM del navegador con el Componente React para su aplicación. Por lo general, lo harás una vez al inicio. Si utilizas un marco de trabajo, puede hacer esto detrás de las escenas para ti. +Esto hidratará el HTML del servidor dentro del nodo DOM del navegador con el componente de React para tu aplicación. Por lo general, lo harás una vez al inicio. Si utilizas un *framework*, puede que tras bambalinas lo haga por ti. -Para hidratar tu aplicación, React "adjuntará" la lógica de tus componentes al HTML inicial generado desde el servidor. La hidratación convierte la instantánea inicial de HTML del servidor en una app totalmente interactiva que se ejecuta en el navegador. +Para hidratar tu aplicación, React "adjuntará" la lógica de tus componentes al HTML inicial generado desde el servidor. La hidratación convierte la instantánea inicial de HTML del servidor en una aplicación totalmente interactiva que se ejecuta en el navegador. ```html public/index.html -

Hola, mundo!

+

Hola, mundo!

``` ```js index.js active @@ -60,7 +59,7 @@ import { useState } from 'react'; export default function App() { return ( <> -

Hola, mundo!

+

¡Hola, mundo!

); @@ -78,30 +77,30 @@ function Counter() { -No deberías necesitar llamar a `hydrateRoot` de nuevo o llamarlo en más sitios. A partir de este punto, React gestionará el DOM de tu aplicación. Si quieres actualizar la interfaz de usuario, tus componentes pueden hacerlo [usando un estado].(/apis/react/useState) +No deberías necesitar llamar a `hydrateRoot` de nuevo o llamarlo en más sitios. A partir de este punto, React gestionará el DOM de tu aplicación. Si quieres actualizar la interfaz de usuario, tus componentes pueden hacerlo [usando el estado.](/apis/react/useState) El árbol de React que pases a `hydrateRoot` tiene que producir **la misma salida** que en el servidor. -Esto es importante para la experiencia del usuario. El usuario pasará algún tiempo mirando el HTML generado por el servidor antes de que se cargue su código JavaScript. El renderizado del servidor crea la ilusión de que la aplicación se carga más rápido al mostrar la instantánea del HTML de su salida. Mostrar de repente un contenido diferente rompe esa ilusión. Por ello, la salida de renderizado del servidor debe coincidir con la salida de renderizado inicial en el cliente durante la hidratación. +Esto es importante para la experiencia del usuario. El usuario pasará algún tiempo mirando el HTML generado por el servidor antes de que se cargue tu código JavaScript. El renderizado del servidor crea la ilusión de que la aplicación se carga más rápido al mostrar la instantánea del HTML de su salida. Mostrar de repente un contenido diferente rompe esa ilusión. Por ello, la salida de renderizado del servidor debe coincidir con la salida del renderizado inicial en el cliente durante la hidratación. 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 su lógica de renderizado. -* Utilizar APIs exclusivas del navegador como [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) en su lógica de renderizado. -* Renderización de datos diferentes en el servidor y en el cliente. +* 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. +* Renderizar datos diferentes en el servidor y en el cliente. -React puede recuperarse de algunos errores de hidratación, pero **debes solucionarlos como otros errores.** En el mejor de los casos, llevarán a una aplicación más lenta; en el peor, los manejadores de eventos se adjuntarán a los elementos equivocados. +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. ### Actualización de un componente raíz hidratado {/*updating-a-hydrated-root-component*/} -Después de que la raíz haya terminado de hidratarse, puede llamar a [`root.render`](#root-render) para actualizar el componente raíz de React. **Al contrario que con [`createRoot`](/apis/react-dom/client/createRoot), normalmente no es necesario hacerlo porque el contenido inicial ya se ha renderizado como HTML.** +Después de que la raíz haya terminado de hidratarse, puedes llamar a [`root.render`](#root-render) para actualizar el componente raíz de React. **Al contrario que con [`createRoot`](/apis/react-dom/client/createRoot), normalmente no es necesario hacerlo porque el contenido inicial ya se ha renderizado como HTML.** -Si llamas a `root.render` en algún momento después de la hidratación, y la estructura del árbol de componentes coincide con lo que se renderizó previamente, React [preservará el estado].(/learn/preserving-and-resetting-state) Fíjate en que puedes escribir la entrada, lo que significa que las actualizaciones de las repetidas llamadas a `render` cada segundo en este ejemplo no son destructivas: +Si llamas a `root.render` en algún momento después de la hidratación, y la estructura del árbol de componentes coincide con lo que se renderizó previamente, React [preservará el estado.](/learn/preserving-and-resetting-state) Fíjate que puedes escribir en la entrada de texto, lo que significa que las actualizaciones de las llamadas sucesivas a `render` cada segundo en este ejemplo no son destructivas: @@ -110,7 +109,7 @@ Si llamas a `root.render` en algún momento después de la hidratación, y la es Todo el contenido HTML dentro de
...
fue generado al renderizar con react-dom/server. --> -

Hola, mundo! 0

+

¡Hola, mundo! 0

``` ```js index.js active @@ -143,7 +142,7 @@ export default function App({counter}) { -Es poco común llamar a [`root.render`](#root-render) en una raíz hidratada. Por lo general, se [actualizar el estado](/apis/react/useState) dentro de uno de los componentes. +Es poco común llamar a [`root.render`](#root-render) en una raíz hidratada. Por lo general, lo que deberías hacer es [actualizar el estado](/apis/react/useState) dentro de uno de los componentes. --- @@ -151,25 +150,26 @@ Es poco común llamar a [`root.render`](#root-render) en una raíz hidratada. Po ### `hydrateRoot(domNode, options?)` {/*hydrate-root*/} -Llama a `hydrateRoot` para "adjuntar" React al HTML existente que ya fue renderizado por React en un entorno de servidor. +Llama a `hydrateRoot` para "adjuntar" React al HTML existente que ya fue renderizado por React en un entorno del servidor. ```js const domNode = document.getElementById('root'); const root = hydrateRoot(domNode, reactNode); ``` -React se unirá al HTML que existe dentro del `domNode`, y se encargará de gestionar el DOM dentro de él. Una aplicación completamente construida con React normalmente sólo tendrá una llamada a `hydrateRoot` con su componente raíz. +React se unirá al HTML que existe dentro de `domNode`, y se encargará de gestionar el DOM dentro de él. Una aplicación completamente construida con React normalmente sólo tendrá una llamada a `hydrateRoot` con su componente raíz. -[Véanse los ejemplos anteriores.](#usage) +[Consulta los ejemplos anteriores.](#usage) #### Parámetros {/*parameters*/} -* `domNode`: Un [elemento DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element) que se ha representado como elemento raíz en el servidor. -* `reactNode`: El "nodo React" utilizado para renderizar el HTML existente. Normalmente será un trozo de JSX como `` que se ha renderizado con un método `ReactDOM Server` como `renderToPipeableStream()`. +* `domNode`: Un [elemento del DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element) que se ha renderizado como el elemento raíz en el servidor. + +* `reactNode`: El "nodo de React" utilizado para renderizar el HTML existente. Normalmente será un trozo de JSX como `` que se ha renderizado con un método de `ReactDOM Server` como `renderToPipeableStream()`. * **opcional** `options`: Un objeto que contiene opciones para esta raíz de React. - * `onRecoverableError`: callback opcional llamado cuando React se recupera automáticamente de los errores. + * `onRecoverableError`: *callback* opcional que se llama cuando React se recupera automáticamente de los errores. * `identifierPrefix`: prefijo opcional que React utiliza para los IDs generados por [`useId`.](/apis/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. #### Devuelve {/*returns*/} @@ -179,26 +179,26 @@ React se unirá al HTML que existe dentro del `domNode`, y se encargará de gest #### Advertencias {/*caveats*/} * `hydrateRoot()` espera que el contenido renderizado sea idéntico al contenido renderizado por el servidor. Deberías tratar los desajustes como errores y solucionarlos. * En el modo de desarrollo, React avisa de los desajustes durante la hidratación. No hay garantías de que las diferencias de atributos sean parcheadas en caso de desajustes. Esto es importante por razones de rendimiento, ya que en la mayoría de las aplicaciones, los desajustes son raros, por lo que validar todo el marcado sería prohibitivamente caro. -* Es probable que sólo tengas una llamada a `hydrateRoot` en tu aplicación. Si utilizas un marco de trabajo, puede hacer esta llamada por ti. -* Si tu aplicación está renderizada por el cliente y no tiene HTML renderizado, el uso de `hydrateRoot()` no está soportado. Utilice [`createRoot()`](/apis/react-dom/client/createRoot) en su lugar. +* Es probable que sólo tengas una llamada a `hydrateRoot` en tu aplicación. Si utilizas un *framework*, puede que la haga por ti. +* Si tu aplicación está renderizada en el cliente y no tiene HTML renderizado, el uso de `hydrateRoot()` no es válido. Utiliza [`createRoot()`](/apis/react-dom/client/createRoot) en su lugar. --- ### `root.render(reactNode)` {/*root-render*/} -Llama a `root.render` para actualizar un componente React dentro de una raíz React hidratada para un elemento DOM del navegador. +Llama a `root.render` para actualizar un componente de React dentro de una raíz de React hidratada para un elemento DOM del navegador. ```js root.render(); ``` -React actualizará `` en la `root` hidratada. +React actualizará `` en la raíz hidratada (`root`). -[Véanse los ejemplos anteriores].(#usage) +[Consulta los ejemplos anteriores.](#usage) #### Parámetros {/*root-render-parameters*/} -* `reactNode`: Un "nodo React" que quieres actualizar. Normalmente será un trozo de JSX como ``, pero también puedes pasar un elemento React construido con [`createElement()`].(/apis/react/createElement), una cadena, un número, `null`, o `undefined`. +* `reactNode`: Un "nodo de React" que quieres actualizar. Normalmente será un trozo de JSX como ``, pero también puedes pasar un elemento React construido con [`createElement()`.](/apis/react/createElement), un *string*, un número, `null`, o `undefined`. #### Devuelve {/*root-render-returns*/} @@ -207,7 +207,7 @@ React actualizará `` en la `root` hidratada. #### Advertencias {/*root-render-caveats*/} -* Si llamas a `root.render` antes de que la raíz haya terminado de hidratarse, React borrará el contenido HTML existente renderizado por el servidor y cambiará toda la raíz a renderizado por el cliente. +* Si llamas a `root.render` antes de que la raíz haya terminado de hidratarse, React borrará el contenido HTML existente renderizado por el servidor y cambiará toda la raíz a renderizado del cliente. --- @@ -221,7 +221,7 @@ root.unmount(); Una aplicación completamente construida con React normalmente no tendrá ninguna llamada a `root.unmount`. -Esto es muy útil si el nodo DOM de tu raíz React (o cualquiera de sus ancestros) puede ser eliminado del DOM por algún otro código. Por ejemplo, imagina un panel de pestañas jQuery que elimina las pestañas inactivas del DOM. Si se elimina una pestaña, todo lo que hay dentro de ella (incluyendo las raíces React que hay dentro) se eliminará también del DOM. En ese caso, tienes que decirle a React que "deje" de gestionar el contenido de la raíz eliminada llamando a `root.unmount`. De lo contrario, los componentes dentro de la raíz eliminada no sabrán limpiar y liberar recursos globales como las suscripciones. +Esto es útil mayormente si el nodo DOM de tu raíz de React (o cualquiera de sus ancestros) puede ser eliminado del DOM por algún otro código. Por ejemplo, imagina un panel de pestañas jQuery que elimina las pestañas inactivas del DOM. Si se elimina una pestaña, todo lo que hay dentro de ella (incluyendo las raíces React que hay dentro) se eliminará también del DOM. En ese caso, tienes que decirle a React que "deje" de gestionar el contenido de la raíz eliminada llamando a `root.unmount`. De lo contrario, los componentes dentro de la raíz eliminada no sabrán limpiar y liberar recursos globales como las suscripciones. Al llamar a `root.unmount` se desmontarán todos los componentes de la raíz y se "separará" React del nodo DOM raíz, incluyendo la eliminación de cualquier controlador de eventos o estado en el árbol. @@ -239,4 +239,4 @@ Al llamar a `root.unmount` se desmontarán todos los componentes de la raíz y s * Llamando a `root.unmount` se desmontarán todos los componentes del árbol y se "separará" React del nodo DOM raíz. -* * Una vez que se llama a `root.unmount` no se puede volver a llamar a `root.render` en la raíz. El intento de llamar a `root.render` en una raíz desmontada arrojará el error "No se puede actualizar una raíz no montada ". +* Una vez que se llama a `root.unmount` no se puede volver a llamar a `root.render` en la raíz. El intento de llamar a `root.render` en una raíz desmontada arrojará el error "Cannot update an unmounted root" (No se puede actualizar una raíz desmontada).