render

Atención

En React 18, render fue reemplazado por 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í.

render renderiza una pieza de JSX (“React node”) en un nodo del DOM del navegador.

render(reactNode, domNode, callback?)

Uso
Referencia
- render(reactNode, domNode, callback?)

Uso

Usa render para mostrar un componente de React dentro de un nodo DOM del navegador.

import {render} from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Renderiza el componente raíz “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”.

Fork

import './styles.css';
import {render} from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

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.

Renderlizando múltiples raices “roots”

Si tu página no está totalmente construida con React, debes llamar a render por cada pieza de nivel superior “top-leve” de la UI administrada por React.

Fork

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

Puedes destruir los árboles renderizados con unmountComponentAtNode().

Actualizando el árbol renderizado

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. 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.

Fork

import {render} from 'react-dom';
import './styles.css';
import App from './App.js';

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

No es muy común llamar a render varias veces. Por lo general actualizarás el estado dentro de uno de los componentes.

Referencia

`render(reactNode, domNode, callback?)`

Utiliza render para mostrar un componente de React dentro del navegador o elemento del DOM.

const domNode = document.getElementById('root');
render(<App />, domNode);

React mostrará <App /> en el domNode, y se encargará de gestionar el DOM dentro de él.

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.

Vea los ejemplos anteriores.

Parámetros

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(), una cadena de text “string”, un número “number”, null, or undefined.
domNode: Un elemento del DOM. 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.
Opcional callback: Una función. Si se pasa, React la llamará luego de que tu componente sea colocado dentro del DOM.

Retorno - Returns

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.

Advertencias

En React 18, render fue reemplazado por createRoot. Por favor usa createRoot para React 18 y versiones posteriores.
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() en lugar de, ya que este adjunta los manejadores de evento al HTML existente.
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” con el árbol previamente renderizado. Llamar a render en el mismo domNode nuevamente es similar a llamar a la función set en el componente raíz “root”: React evita actualizaciones innecesarias del DOM.
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 en lugar de render.

Previoushydrate NextunmountComponentAtNode