Criando elementos React com JSX
Trabalhando com o conhecimento fornecido no capítulo anterior, você deve estar familiarizado com a criação de elementos React utilizando a função React.createElement (). Por exemplo, usando esta função, pode-se criar elementos que representam elementos HTML e elementos personalizados. Abaixo, uso esta função familiar para criar dois elementos React:
//Elemento React que representa um elemento HTML: <li></li>
var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');
//Elemento React que representa um elemento HTML customizado: <foo-bar></foo-bar>
var HTMLCustom = React.createElement('foo-bar', {className:'bar'}, 'foo');
Para usar o JSX (assumindo que você tenha a configuração do Babel) ao invés do React.createElement () para criar esses elementos React, basta substituir as chamadas de função React.createElement () pelas tags HTML / XML que representam o HTML que você gostaria que o DOM virtual mostrasse. O código acima pode ser escrito no JSX dessa forma:
//Elemento React que representa um elemento HTML: <li></li>
var HTMLLi = <li className="bar">foo</li>;
//Elemento React que representa um elemento HTML customizado: <foo-bar></foo-bar>
var HTMLCustom = <foo-bar className="bar" >foo</foo-bar>;
Observe que o JSX não está em um formato de string JavaScript e pode apenas estar escrevendo como se você o escrevesse dentro de um arquivo .html. Conforme mencionado muitas vezes, JSX então é transformado novamente nas chamadas de funções " React.createElement () por Babel. Você pode ver a transformação ocorrendo no seguinte JSFiddle (ou seja, Babel está transformando JSX para JavaScript, então o React está criando nós DOM).
Se você examinasse o HTML real produzido no JSfiddle acima, seria assim:
<body>
<div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
<div id="app2"><foo-bar class="bar" data-reactid=".1">foo</foo-bar></div>
</body>
Criar elementos do React usando o JSX é tão simples quanto escrever código HTML como seu código em seus arquivos JavaScript.
Observações
- As tags JSX suportam a sintaxe XML auto-fechada para que você possa, opcionalmente, não usar a tag de fechamento quando nenhum nó filho é usado.
- Se você passar propriedades/atributos para elementos HTML nativos que não existem na especificação HTML, React não os renderizará para o DOM real. No entanto, se você usar um elemento personalizado (ou seja, não um elemento HTML de suporte), os atributos arbitrários/personalizados serão adicionados a elementos personalizados (por exemplo,
<x-my-component custom-attribute =" foo "/>). - O atributo
classdeve ser escritoclassName - O atributo
fordeve ser escritohtmlFor - O atributo
stylepossui um objeto de [propriedades de estilo com camel-cased] (https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties) - Todos os atributos são camel-cased (por exemplo,
accept-charseté escrito comoacceptCharset) - Para representar elementos HTML, assegure-se de que a tag HTML seja lower-cased
- Os seguintes são os atributos HTML que o React suporta (mostrado em camel-case):
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrap