Renderizando elementos

Elementos são os menores blocos de construção de aplicação React.

Um elemento descreve o que você quer ver na tela:

const element = <h1>Hello, world</h1>;

Ao contrário dos elementos DOM do broswer, elementos React são objetos puros, e são baratos para serem criados. React DOM cuida da atualização do DOM para corresponder aos elementos React.

Nota:

Pode ser confundido elementos com um conceito amplamente conhecido de "componentes". Nós iremos introduzir componentes na próxima seção. Elementos são do que componentes "são feitos", e nós encorajamos você a ler esta seção antes de seguir adiante.

Renderizando um elemtno no DOM #

Vamos dizer que existe uma <div> em algum lugar do seu arquivo HTML:

<div id="root"></div>

Nós chamamos este de nó "root" por que tudo dentro dele será gerenciado pelo React DOM.

Aplicações contruídas apenas com React usualmente tem um único nó DOM raiz. Se você está integrando o React em uma aplicação existente, você poderá ter tantos nós raiz DOM quanto quiser

Para renderizar um elemento React dentro de um nó DOM raiz, passe ambos para ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Teste este código no CodePen.

Exibe "Hello World" na página.

Atualizando os elementos renderizados #

Elementos React são imutáveis. Uma vez que você cria um elemento, você não pode alterar suas propriedades ou seus filhos. Um elemento é como um único quadro de um filme: ele representa a interface de usuário até um certo ponto.

Como nosso conhecimento até agora, a única maneira de atualizar a interface de usuário é criar um novo elemento, e passar ele para ReactDOM.render().

Considere este exemplo de relógio tique-taque:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

Teste este código no CodePen.

É chamado o método ReactDOM.render() a cada segundo do através do callback setInterval().

Nota:

Em prática, a maioria da aplicações React só chama o ReactDOM.render() uma vez. Nas próximas seções nós aprenderemos como esse código é encapsulado em estados do componentes.

Nós recomendamos que você não ignore tópicos porque eles complemento um ao outro.

React somente atualizar o que é necessário #

React DOM compara o elemento e seus filhos com o anterior, e somente aplica as atualizações necessários no DOM para levar o DOM ao estado desejado.

Você pode verificar inspecionando o último exemplo com as ferramentas do browser:

Embora criemos um elemento descrevendo toda a árvore da interface do usuário em cada momento, somente o nó de texto cujo conteúdo foi alterado é atualizado pelo React DOM.

Em nossa experiência, pensar em como a interface de usuário deve ser em cada momento ao invés de como alterá-la ao longo do tempo elimina uma classe inteira de bugs.