Translate react-dom/render section

beta/src/content/apis/react-dom/render.md

@@ -4,14 +4,14 @@ title: render
 
 <Pitfall>
 
-In React 18, `render` was replaced by [`createRoot`.](/apis/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
+En React 18, `render` fue reemplazado por [`createRoot`.](/apis/react-dom/client/createRoot) Utilizando `render` en React 18 se te advertirá que tu aplicación se comportará como si estuviera ejecutándose en React 17. Aprende mas [aquí.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
 
 </Pitfall>
 
 
 <Intro>
 
-`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
+`render` renderiza una pieza de [JSX](/learn/writing-markup-with-jsx) ("React node") en un nodo del DOM del navegador.
 
 ```js
 render(reactNode, domNode, callback?)
@@ -23,9 +23,9 @@ render(reactNode, domNode, callback?)
 
 ---
 
-## Usage {/*usage*/}
+## Uso {/*usage*/}
 
-Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
+Usa `render` para mostrar un <CodeStep step={1}>componente de React</CodeStep> dentro de un <CodeStep step={2}>nodo DOM del navegador</CodeStep>.
 
 ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
 import {render} from 'react-dom';
@@ -34,9 +34,9 @@ import App from './App.js';
 render(<App />, document.getElementById('root'));
 ````
 
-### Rendering the root component {/*rendering-the-root-component*/}
+### Renderiza el componente raíz "Root component" {/*rendering-the-root-component*/}
 
-In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
+En aplicaciones totalmente construidas con React, **Por lo general sólo realizarás esto una vez al inicio**--para renderizar el componente "raíz" -- "root".
 
 <Sandpack>
 
@@ -50,26 +50,26 @@ render(<App />, document.getElementById('root'));
 
 ```js App.js
 export default function App() {
-  return <h1>Hello, world!</h1>;
+  return <h1>Hola, mundo!</h1>;
 }
 ```
 
 </Sandpack>
 
-Usually you shouldn't need to call `render` 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)
+Generalmente no necesitas llamar a `render` de nuevo o llamarlo en otros lugares. En este punto, React manejará el DOM de tu aplicación. Si quieres actualizar la UI, tu componente puede hacer esto [usando state.](/apis/react/useState)
 
 ---
 
-### Rendering multiple roots {/*rendering-multiple-roots*/}
+### Renderlizando múltiples raices "roots"  {/*rendering-multiple-roots*/}
 
-If your page [isn't fully built with React](/learn/add-react-to-a-website), call `render` for each top-level piece of UI managed by React.
+Si tu página [no está totalmente construida con React](/learn/add-react-to-a-website), debes llamar a `render` por cada pieza de nivel superior "top-leve" de la UI administrada por React.
 
 <Sandpack>
 
 ```html public/index.html
 <nav id="navigation"></nav>
 <main>
-  <p>This paragraph is not rendered by React (open index.html to verify).</p>
+  <p>Este párrafo no está renderizado por React (abre el archivo index.html para verificarlo).</p>
   <section id="comments"></section>
 </main>
 ```
@@ -112,8 +112,8 @@ export function Comments() {
   return (
     <>
       <h2>Comments</h2>
-      <Comment text="Hello!" author="Sophie" />
-      <Comment text="How are you?" author="Sunil" />
+      <Comment text="Hola!" author="Sophie" />
+      <Comment text="¿Cómo estás?" author="Sunil" />
     </>
   );
 }
@@ -132,13 +132,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
 
 </Sandpack>
 
-You can destroy the rendered trees with [`unmountComponentAtNode()`.](/apis/react-dom/unmountComponentAtNode)
+Puedes destruir los árboles renderizados con [`unmountComponentAtNode()`.](/apis/react-dom/unmountComponentAtNode)
 
 ---
 
-### Updating the rendered tree {/*updating-the-rendered-tree*/}
+### Actualizando el árbol renderizado {/*updating-the-rendered-tree*/}
 
-You can call `render` more than once on the same DOM node. As long as 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:
+Puedes llamar a `render` más de una vez en el mismo nodo DOM. Siempre y cuando la estructura de componente de árbol coincida con lo renderizado previamente, React [preservará el estado.](/learn/preserving-and-resetting-state) Nota como puedes escribir en el input, lo que significa que se cada segundo se actualiza repetidamente `render` y en este ejemplo no se destruye.
 
 <Sandpack>
 
@@ -161,57 +161,57 @@ setInterval(() => {
 export default function App({counter}) {
   return (
     <>
-      <h1>Hello, world! {counter}</h1>
-      <input placeholder="Type something here" />
+      <h1>Hola, mundo! {counter}</h1>
+      <input placeholder="Escribe algo aquí" />
     </>
   );
 }
 ```
 
 </Sandpack>
 
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/apis/react/useState) inside one of the components instead.
+No es muy común llamar a `render` varias veces. Por lo general [actualizarás el estado](/apis/react/useState) dentro de uno de los componentes.
 
 ---
 
-## Reference {/*reference*/}
+## Referencia {/*reference*/}
 
 ### `render(reactNode, domNode, callback?)` {/*render*/}
 
-Call `render` to display a React component inside a browser DOM element.
+Utiliza `render` para mostrar un componente de React dentro del navegador o elemento del DOM.
 
 ```js
 const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```
 
-React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
+React mostrará `<App />`  en el `domNode`, y se encargará de gestionar el DOM dentro de él.
 
-An app fully built with React will usually only have one `render` call with its root component.  A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
+Una aplicación totalmente construida con React usualmente tendrá sólo un llamado a `render` con su componente raíz "root". Una página que utiliza "sprinkles" de React para partes de la página puede tener tantas llamadas `render` como sean necesarias.
 
-[See examples above.](#usage)
+[Vea los ejemplos anteriores.](#usage)
 
-#### Parameters {/*parameters*/}
+#### Parámetros {/*parameters*/}
 
-* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/apis/react/createElement), a string, a number, `null`, or `undefined`. 
+* `reactNode`: Un *React node* que tu quieras mostrar. Por lo general se trata de un fragmento o pieza de JSX `<App />`, pero también puedes pasar un elemento de React "React element" construido con [`createElement()`](/apis/react/createElement), una cadena de text "string", un número "number", `null`, or `undefined`.
 
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
+* `domNode`: Un [elemento del DOM.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React mostrará el `reactNode` que tú pases dentro de este elemento del DOM. Desde este momento, React administrará el DOM dentro de `domNode` y lo actualizará cuando tu árbol de React cambie.
 
-* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
+* **Opcional** `callback`: Una función. Si se pasa, React la llamará luego de que tu componente sea colocado dentro del DOM.
 
 
-#### Returns {/*returns*/}
+#### Retorno - Returns {/*returns*/}
 
-`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
+`render` Por lo general retorna `null`. Sin embargo, si el `reactNode` que pasas es de tipo *class component*, entonces este retornará una instancia de ese componente.
 
-#### Caveats {/*caveats*/}
+#### Advertencias {/*caveats*/}
 
-* In React 18, `render` was replaced by [`createRoot`.](/apis/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
+* En React 18, `render` fue reemplazado por [`createRoot`.](/apis/react-dom/client/createRoot) Por favor usa `createRoot` para React 18 y versiones posteriores.
 
-* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/apis/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
+* La primer ver que llamas a `render`, React limpiará todo el HTML contenido existente dentro del `domNode` antes de renderizar el componente de React dentro de este. Si tu `domNode` contiene HTML generado por React en el servidor o durante la construcción, usa [`hydrate()`](/apis/react-dom/hydrate) en lugar de, ya que este adjunta los manejadores de evento al HTML existente.
 
-* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/apis/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+* Si llamas a `render` en el mismo `domNode` mas de una vez, React actualizará el DOM según sea necesario para reflear el mas reciente JSX que hayas pasado. React decidirá que partes del DOM pueden ser reutilizadas y cuáles necesitan se recreadas ["emparejándolas"](/learn/preserving-and-resetting-state) con el árbol previamente renderizado. Llamar a `render` en el mismo `domNode` nuevamente es similar a llamar a la función [`set` ](/apis/react/useState#setstate) en el componente raíz "root": React evita actualizaciones innecesarias del DOM.
 
-* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/apis/react-dom/createPortal) instead of `render`.
+* Si tu aplicación está totalmente construida con React, es probable que sólo tengas un llamado a `render` en tu aplicación. (Si usas un framework, éste puede hacer el llamado por ti.) Cuando quieras renderizar un fragmento de JSX en un lugar diferente del árbol DOM que no sea hijo de tu componente (por ejemplo, una modal o un tooltip), usa [`createPortal`](/apis/react-dom/createPortal) en lugar de `render`.
 
 ---