Renderizando Elementos no DOM
O React fornece a função ReactDOM.render() encontrada no arquivo react-dom.js que pode ser usada para renderizar elementos React no DOM. Nós até já vimos o uso da função render() nessa seção.
No código abaixo, usando o ReactDOM.render(), os elementos '<li>' e '<foo-bar>' são renderizados no DOM.
Uma vez renderizado no DOM, o HTML atualizado será:
<body>
<div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
<div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div>
</body>
A função ReactDOM.render() é inicialmente como obtemos os elementos React no DOM Virtual, então depois serão renderizados no DOM Real.
Observações
- Qualquer nó do DOM que exista dentro do elemento que estamos renderizando será substituido.
- Renderizar para o DOM é apenas um opção com React, existe outra API de renderização. Por exemplo, é possível renderizar para uma string (ou seja,
ReactDOMServer.renderToString()) no lado servidor. - Renderizar novamente o mesmo elemento do DOM irá somente atualizar os nós filhos se uma mudança for feita ou algum nó filho for adicionado.