Reagir Render HTML
O objetivo do React é, de várias maneiras, renderizar HTML em uma página da web.
React renderiza HTML para a página da web usando uma função chamada
ReactDOM.render().
A função de renderização
A ReactDOM.render()função recebe dois argumentos, código HTML e um elemento HTML.
A finalidade da função é exibir o código HTML especificado dentro do elemento HTML especificado.
Mas renderizar onde?
Existe outra pasta no diretório raiz do seu projeto React, chamada "public". Nesta pasta, há um index.htmlarquivo.
Você notará um single <div>
no corpo deste arquivo. É aqui que nosso aplicativo React será renderizado.
Exemplo
Exiba um parágrafo dentro de um elemento com o id de "root":
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));O resultado é exibido no <div id="root">elemento:
<body>
<div id="root"></div>
</body>
Observe que o id do elemento não precisa ser chamado de "root", mas essa é a convenção padrão.
Obter certificação!
$ 95 INSCRIÇÃO
O código HTML
O código HTML neste tutorial usa JSX, que permite escrever tags HTML dentro do código JavaScript:
Não se preocupe se a sintaxe não for familiar, você aprenderá mais sobre JSX no próximo capítulo.
Exemplo
Crie uma variável que contenha código HTML e exiba-a no nó "raiz":
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
O nó raiz
O nó raiz é o elemento HTML onde você deseja exibir o resultado.
É como um container para conteúdo gerenciado pelo React.
NÃO precisa ser um <div>elemento e NÃO precisa ter o id='root':
Exemplo
O nó raiz pode ser chamado como você quiser:
<body>
<header id="sandy"></header>
</body>
Exiba o resultado no <header id="sandy">elemento:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));