O que é um Elemento React

Elementos são os menores blocos de construção de aplicações React. Um elemento React pode ser definido como:

Uma representação virtual leve, sem estado, imutável de um elemento do DOM.

• representação leve: é apenas um simples objeto javascript.
• sem estado: não tem estado porque seu propósito é construir e renderizar elementos do DOM virtual.
• imutável: queremos que os elementos renderizem exatamente da mesma forma, dado que forneçamos os mesmos parâmetros.

Elementos React não são nós do DOM do browser, mas são uma representação de um potencial nó do DOM. Essa representação é conhecida como DOM Virtual.

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

const element = <h1>React: de Padawan a mestre Jedi</h1>;

Ao contrário dos nós do DOM, elementos React são simples objetos e são leves. O DOM do React (DOM Virtual) cuida de atualizar o DOM do browser de forma a coincidir com os elementos do React que estão nesse DOM Virtual.

Elementos React podem ser criados usando JSX ou Javascript. Nessa seção iremos usar somente Javascript. Não iremos usar JSX ainda. É importante que perceba como fazer sem JSX para que entenda melhor o JSX e o porque de o usarmos.

Você talvez esteja tentado a pular essa seção porque já conhece JSX e sabe que iremos usar a partir das próximas seções. Eu sugeriria ler essa seção para estar ciente do que o JSX está fazendo por você. Essa talvez seja uma das seções mais importantes.

Observação:

Alguns talvez confundam os Elementos com o conceito mais conhecido como Componente. Componentes são criados com elementos, basicamente. Nós vamos falar de componentes na próxima seção. Encorajamos que leia primeiro essa seção antes de partir logo para a seção que fala sobre os componentes.