Criando Elementos React

Na maioria dos casos, desenvolvedores React irão preferir usar JSX para criar elementos. O próprio facebook incentiva essa abordagem. Apesar disso, nessa seção iremos examinar como os elementos podem ser criados sem usar o JSX, usando apenas Javascript. Na próxima seção iremos analisar como criar elementos usando o JSX.

Criar elementos React usando Javascript envolve simplesmente a chamada da função React.createElement(type, props, children) passando para ela um conjunto de argumentos que definem o elemento do DOM (por exemplo, type= a uma tag html por exemplo, <li> ou um elemento customizado como <meu-elemento>)

Os argumetos da função React.createElement() são explicados abaixo:

  • type (string | React.createClass()):

    Pode ser uma string que representa um elemento HTML (ou um elemento HTML customizado) ou uma instância de um componente React (isto é, uma instância do React.createClass())

  • props (null | object):

    Pode ser null ou um objeto contendo atributos/propriedadese valores

  • children (null | string | React.createClass() | React.createElement()):

    Children pode ser null, uma string que se torna um texto a renderizar, uma instância de React.createClass() ou React.createElement()

Abaixo podemos ver o uso da função React.createElement() para criar uma representação do DOM Virtual do elemento <li> contendo um nó com o texto React: Padawan a mestre Jedi (React text) e um id com valor padawan.

var primeiroElemento = React.createElement('li', {id:'padawan'}, 'React: Padawan a mestre Jedi');

Note que o primeiro argumento define o elmemento HTML que gostaríamos de representar. O segundo argumento define os atributos e propriedades na tag <li>. E o terceiro argumento define o que aparecerá dentro do elemento recém criado, qual vai ser o elemento filho, por assim dizer. Nesse caso estamos apenas adicionando um texto (i.e., 'React: Padawan a mestre Jedi') como nó filho de nosso elemento <li>. O último argumento que se torna nó filho daquele elemento criado pode ser:

  • Um texto
  • Um elemento React, ou
  • Uma instância de um componente React

Até este ponto tudo o que fizemos foi criar um elemento React contendo um texto que está armazenado na variável primeiroElemento. Para criar o DOM virtual temos de renderizar o elemento React para o DOM real. Para fazer isso, usamos a função ReactDOM.render().

ReactDOM.render(primeiroElemento, document.getElementById('app'));

O código acima resulta no seguinte:

  1. Cria o DOM virtual construido a partir do elemento passado(primeiroElemento)
  2. Usa o DOM virtual para reconstruir o DOM real
  3. Insere no DOM real o elemento <li id="li1">React: Padawan a mestre Jedi</li> como filho do nó <div id="app"></div>.

Em outras palavras, o HTML muda disso:

<div id="app"></div>

passa isso:

<div id="app">
    //note que o React adiciona um atributo chamado data-reactid
    <li id="li1" data-reactid=".0">React: Padawan a mestre Jedi</li>
</div>

Esse foi um exemplo bem simples. Usando o React.createElement() um estrutura complexa pode ser criada. por exemplo, abaixo estamos usando essa função para criar vários elementos React que representam um lista não ordenada:

// Cria elementos <li>
var elemento1 = React.createElement('li', {id:'li1'}, 'elemento1'),
    elemento2 = React.createElement('li', {id:'li2'}, 'elemento2'),
    elemento3 = React.createElement('li', {id:'li3'}, 'elemento3');

// Cria elemento <ul> e adiciona os elementos li como filhos
var list = React.createElement('ul', {className:'minha-lista'}, elemento1, elemento2, elemento3);

Antes de renderizar uma lista não ordenada no DOM, acredito que vale a pena mostrar uma outra maneira de escrever o código acima. O código abaixo mostra como criar um elemento usando o React.createElement() no lugar de variáveis:

var reactElementUl = React.createElement(
    'ul', {
        className: 'minha-lista'
    },
    React.createElement('li', {id: 'li1'}, 'elemento1'),
    React.createElement('li', {id: 'li2'}, 'elemento2'),
    React.createElement('li', {id: 'li3'}, 'elemento3')
);

Quando o código acima é renderizado no DOM o resultado é esse:

<ul class="minha-lista" data-reactid=".0">
    <li id="li1" data-reactid=".0.0">elemento1</li>
    <li id="li2" data-reactid=".0.1">elemento2</li>
    <li id="li3" data-reactid=".0.2">elemento3</li>
</ul>

Você pode conferir isso usando o JSFiddle abaixo:

source code

Deveria estar claro que os elementos React são somente objetos Javascript em uma árvore que representa os nós do DOM dentro do DOM virtual. O DOM virtual é usado então para construir o DOM atual na página HTML.

Observações

  • O argumento type passado para React.createElement(type, props, children) pode ser
    • Uma string indicando um elemento HTML padrão (por exemplo, 'li' = <li></li>), ou
    • Um elemento customizado (por exemplo, 'foo-bar' = <foo-bar></foo-bar>, ou uma instância de um componente React (por exemplo, uma instância de React.createClass().
  • Existem alguns elementos HTML padrão que o React suporta (ou seja, esses elementos passadps como string type para createElement()). Eles criam o elemento HTML no DOM real):
a abbr address area article aside audio b base bdi bdo big blockquote body br
button canvas caption cite code col colgroup data datalist dd del details dfn
dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li
link main map mark menu menuitem meta meter nav noscript object ol optgroup
option output p param picture pre progress q rp rt ruby s samp script section
select small source span strong style sub summary sup table tbody td textarea
tfoot th thead time title tr track u ul var video wbr

results matching ""

    No results matching ""