You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: beta/src/content/apis/react-dom/render.md
+35-35
Original file line number
Diff line number
Diff line change
@@ -4,14 +4,14 @@ title: render
4
4
5
5
<Pitfall>
6
6
7
-
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)
7
+
En React 18, `render`fue reemplazado por[`createRoot`.](/apis/react-dom/client/createRoot)Al usar `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)
8
8
9
9
</Pitfall>
10
10
11
11
12
12
<Intro>
13
13
14
-
`render`renders a piece of[JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
14
+
`render`renderiza una pieza de[JSX](/learn/writing-markup-with-jsx) ("nodo de React") en un nodo del DOM del navegador.
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)
59
+
Generalmente no necesitas llamar a `render`de nuevo o llamarlo en otros lugares. En este punto, React manejará el DOMde tu aplicación. Si quieres actualizar la UI, tu componente puede hacerlo [con el uso de estado.](/apis/react/useState)
If your page [isn't fully built withReact](/learn/add-react-to-a-website), call `render`for each top-level piece ofUImanaged by React.
65
+
Si tu página [no está totalmente construida con React](/learn/add-react-to-a-website), llama a `render`por cada pieza de UIde nivel superior que esté administrada por React.
66
66
67
67
<Sandpack>
68
68
69
69
```html public/index.html
70
70
<nav id="navigation"></nav>
71
71
<main>
72
-
<p>This paragraph is not rendered by React (open index.html to verify).</p>
72
+
<p>Este párrafo no está renderizado por React (abre el archivo index.html para verificarlo).</p>
73
73
<section id="comments"></section>
74
74
</main>
75
75
```
@@ -112,8 +112,8 @@ export function Comments() {
112
112
return (
113
113
<>
114
114
<h2>Comments</h2>
115
-
<Comment text="Hello!" author="Sophie" />
116
-
<Comment text="How are you?" author="Sunil" />
115
+
<Comment text="¡Hola!" author="Sophie" />
116
+
<Comment text="¿Cómo estás?" author="Sunil" />
117
117
</>
118
118
);
119
119
}
@@ -132,13 +132,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
132
132
133
133
</Sandpack>
134
134
135
-
You can destroy the rendered trees with [`unmountComponentAtNode()`.](/apis/react-dom/unmountComponentAtNode)
135
+
Puedes destruir los árboles renderizados con [`unmountComponentAtNode()`.](/apis/react-dom/unmountComponentAtNode)
136
136
137
137
---
138
138
139
-
### Updating the rendered tree {/*updating-the-rendered-tree*/}
139
+
### Actualizar el árbol renderizado {/*updating-the-rendered-tree*/}
140
140
141
-
You can call`render`more than once on the same DOMnode. 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 inthis example are not destructive:
141
+
Puedes llamar a`render`más de una vez en el mismo nodo del DOM. Siempre y cuando la estructura del árbol del componente 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 las repetidas llamadas a `render`cada segundo en este ejemplo no son destructivas:
142
142
143
143
<Sandpack>
144
144
@@ -161,57 +161,57 @@ setInterval(() => {
161
161
export default function App({counter}) {
162
162
return (
163
163
<>
164
-
<h1>Hello, world! {counter}</h1>
165
-
<input placeholder="Type something here" />
164
+
<h1>¡Hola, mundo! {counter}</h1>
165
+
<input placeholder="Escribe algo aquí" />
166
166
</>
167
167
);
168
168
}
169
169
```
170
170
171
171
</Sandpack>
172
172
173
-
It is uncommon to call `render`multiple times. Usually, you'll [update state](/apis/react/useState) inside one of the components instead.
173
+
No es muy común llamar a `render`varias veces. Por lo general lo que debes hacer es [actualizar el estado](/apis/react/useState) dentro de uno de los componentes.
Call `render` to display a React component inside a browser DOM element.
181
+
Utiliza`render`para mostrar un componente de React dentro de un elemento del DOMdel navegador.
182
182
183
183
```js
184
184
const domNode = document.getElementById('root');
185
185
render(<App />, domNode);
186
186
```
187
187
188
-
React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
188
+
React mostrará `<App />` en el `domNode`, y se encargará de gestionar el DOMdentro de él.
189
189
190
-
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.
190
+
Una aplicación totalmente construida con React tendrá usualmente una sola llamada a `render`con su componente raíz. Una página que utiliza React para partes de la página puede tener tantas llamadas a `render`como sean necesarias.
191
191
192
-
[See examples above.](#usage)
192
+
[Mira los ejemplos anteriores.](#usage)
193
193
194
-
#### Parameters {/*parameters*/}
194
+
#### Parámetros {/*parameters*/}
195
195
196
-
* `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`.
196
+
*`reactNode`:Un *nodo de React* que quieras mostrar. Por lo general se trata de una pieza deJSXcomo`<App />`, pero también puedes pasar un elemento de React construido con [`createElement()`](/apis/react/createElement), un _string_, un número, `null`, o`undefined`.
197
197
198
-
* `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.
198
+
*`domNode`:Un [elemento del DOM.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React mostrará el `reactNode` que 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.
199
199
200
-
* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
200
+
*`callback`**opcional**: Una función. Si se pasa, React la llamará luego de que tu componente sea colocado dentro delDOM.
201
201
202
202
203
-
#### Returns {/*returns*/}
203
+
#### Retorno {/*returns*/}
204
204
205
-
`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
205
+
`render`Por lo general retorna `null`. Sin embargo, si el`reactNode`que pasas es un *component de clase*, entonces retornará una instancia de ese componente.
206
206
207
-
#### Caveats {/*caveats*/}
207
+
#### Advertencias {/*caveats*/}
208
208
209
-
* In React 18, `render` was replaced by [`createRoot`.](/apis/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
209
+
*En React 18, `render`fue reemplazado por [`createRoot`.](/apis/react-dom/client/createRoot) Por favor usa `createRoot`para React 18y versiones posteriores.
210
210
211
-
* 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.
211
+
*La primera vez que llamas a `render`, React limpiará todo el contenido HTMLexistente dentro del`domNode`antes de renderizar el componente de React dentro de este. Si tu`domNode`contieneHTMLgenerado por React en el servidor o durante la compilación, usa en su lugar [`hydrate()`](/apis/react-dom/hydrate), ya que este adjunta los manejadores de eventos al HTML existente.
212
212
213
-
* 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.
213
+
*Si llamas a`render`en el mismo`domNode`más de una vez, React actualizará el DOMsegún sea necesario para reflejar elJSXmás reciente que hayas pasado. React decidirá qué partes del DOMse pueden reutilizar y cuáles necesitan ser recreadas ["haciendo una comparación"](/learn/preserving-and-resetting-state) con el árbol previamente renderizado. Llamar de nuevo a `render`en el mismo`domNode`es similar a llamar a la función [`set` ](/apis/react/useState#setstate) en el componente raíz: React evita actualizaciones innecesarias del DOM.
214
214
215
-
* 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 dothis call for you.) When you want to render a piece ofJSXin a different part of the DOMtree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/apis/react-dom/createPortal) instead of `render`.
215
+
*Si tu aplicación está totalmente construida con React, es probable que tengas una sola llamada a `render`en tu aplicación. (Si usas un framework, puede que haga esta llamada por ti.) Cuando quieras renderizar un fragmento de JSXen un lugar diferente del árbol del DOMque no sea hijo de tu componente (por ejemplo, un modal o un _tooltip_), usa [`createPortal`](/apis/react-dom/createPortal) en lugar de`render`.
0 commit comments