![\"Ferramenta](\"/c158617ed7cc0eac8f58330e49e48224/granular-dom-updates.gif\")
Elementos são os menores blocos de construção de aplicativos React.
\nUm elemento descreve o que você quer ver na tela:
\nconst element = <h1>Hello, world</h1>;Diferente de elementos DOM do navegador, elementos React são objetos simples e utilizam menos recursos. O React DOM é o responsável por atualizar o DOM para exibir os elementos React.
\n\n\nNota:
\nPode-se confundir elementos com o conceito mais amplo de “componentes”. Nós apresentaremos os componentes na seção seguinte. Elementos compõem os componentes e nós recomendamos ler esta seção antes de prosseguir.
\n
Suponhamos que exista um <div> em algum lugar do seu código HTML:
<div id=\"root\"></div>Nós o chamamos de nó raiz do DOM porque tudo dentro dele será gerenciado pelo React DOM.
\nAplicações construídas apenas com React geralmente tem apenas um único nó raiz no DOM. Se deseja integrar o React a uma aplicação existente, você pode ter quantos nós raiz precisar.
\nPara renderizar um elemento React em um nó raiz, passe ambos para ReactDOM.render()`:
const element = <h1>Hello, world</h1>;\nReactDOM.render(element, document.getElementById('root'));Assim, é exibido “Hello, world” na página.
\nElementos React são imutáveis. Uma vez criados, você não pode alterar seus elementos filhos ou atributos.
\nCom o que aprendemos até agora, a única forma de atualizar a interface é criar um novo elemento e passá-lo para ReactDOM.render().
Veja o seguinte exemplo de um relógio:
\nfunction tick() {\n const element = (\n <div>\n <h1>Hello, world!</h1>\n <h2>It is {new Date().toLocaleTimeString()}.</h2>\n </div>\n );\n ReactDOM.render(element, document.getElementById('root'));}\n\nsetInterval(tick, 1000);Chama-se o ReactDOM.render() a cada segundo a partir de um callback do setInterval().
\n\nNota:
\nNa prática, a maioria dos aplicativos React usam o
\nReactDOM.render()apenas uma única vez. Nas seções seguintes, aprenderemos como esse código pode ser encapsulado em componentes com estado.Recomendamos que você não pule os tópicos porque eles se complementam.
\n
O React DOM compara o elemento novo e seus filhos com os anteriores e somente aplica as modificações necessárias no DOM para levá-lo ao estado desejado.
\nVocê pode observar isso inspecionando o último exemplo com as ferramentas do navegador:
\n
Embora nós criemos um elemento descrevendo toda a estrutura da interface a cada segundo, apenas o nó de texto cujo conteúdo foi alterado é atualizado pelo React DOM.
\nEm nossa experiência, pensar em como a interface do usuário deve ficar a qualquer momento, em vez de como alterá-la ao longo do tempo, elimina toda uma série de bugs.
","frontmatter":{"title":"Renderizando Elementos","next":"components-and-props.html","prev":"introducing-jsx.html"},"fields":{"path":"content/docs/rendering-elements.md","slug":"docs/rendering-elements.html"}}},"pageContext":{"slug":"docs/rendering-elements.html"}},"staticQueryHashes":[]}