Renderizando JSX no DOM
A função ReactDOM.render () pode ser usada para renderizar expressões JSX para o DOM. Na verdade, depois que Babel transforma o JSX, tudo o que está fazendo é renderizar elementos criados pelo React.createElement(). Mais uma vez, o JSX é apenas um suporte para evitarmos repetidas chamadas da função React.createElement().
No exemplo de código, estou representando um elemento <li> e um elemento <foo-bar> personalizado para o DOM usando expressões JSX.
Um vez renderizado no DOM, o HTML será o seguinte:
<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>
Basta lembrar que a Babel está pegando o JSX em seus arquivos JavaScript, transformando-o em elementos React (ou seja, chamadas de funções React.createElement ()), e em seguida, usando esses elementos criados pelo React (ou seja, o DOM virtual) como um modelo para criar um ramo real do DOM. A parte em que os elementos React são transformados em elementos reais do DOM e adicionados ao DOM em uma página HTML ocorre quando ReactDOM.render() é chamado.
Observações
- Todos os nós DOM dentro do elemento DOM em que você está renderizando serão removidos/substituídos.
ReactDOM.render()não modifica o nó do elemento DOM em que você está renderizando o React.- A renderização para um HTML DOM é apenas uma opção com React, [outras versões APi estão disponíveis] (https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring). Por exemplo, também é possível renderizar para uma string (isto é,
ReactDOMServer.renderToString()) no lado do servidor. - Re-renderizar para o mesmo elemento DOM só atualizará os nós filhos atuais se uma alteração (ou seja, diff) tenha ocorrido ou um novo nó filho tenha sido adicionado.
- Nunca invoque
this.render()você mesmo, deixe isso para o React