Introdução ao React - Elementos React - parte 2


O que são Elementos React e como os usar?

Data: 09/03/2020
Categoria: dev

Indice

Conteúdo

Elementos React

Para se criar interfaces no React, basicamente, ao invés de usar o HTML e o javascript (para criar elementos HTML dinâmicamente), você cria tudo com o próprio React.

Para se criar um elemento React, você usa a função React.createElement(), que tem 3 parâmetros:

Exemplos de diferentes elementos React:

Como criar elementos dentro de outros elementos

É claro, no React você pode ter um elemento dentro de outro elemento, por exemplo, em HTML, para se ter um h1 dentro de um div basta:

1
2
3
<div>
<h1>Título</h1>
</div>

Já no React, para se fazer isso é, você criar um elemento React dentro de uma variável e dizer que o conteúdo de outro elemento é o sua variável. Mais fácil entender como código:

1
2
3
4
5
6
let titulo = React.createElement("h1", null, "Título");

ReactDOM.render(
React.createElement("div", null, titulo),
document.querySelector("#app")
)

O resultado final no HTML será o mesmo que se você fizesse com HTML originalmente.
Resultado

className

Algo muito importante em relação ao React: devido a keyword class ser usada no Javascript ES2015+, você não pode a usar dentro do React, use no lugar o className, por exemplo: React.createElement("h1", { className: "mandioca" }, "mandioca")

Finalizando

E isso é o básico do React, é claro, o que vimos até agora é apenas a ponta do Iceberg, nas próximas partes veremos mais partes do React que nos ajudarão a criar interfaces incríveis!

Próxima parte