Usando JSX com Babel
A criação de um Componente Mensagem e de um elemento <div> em uma página HTML logo abaixo está
sendo feito usando as funções React.createClass() e React.createElement(). Esse código deveria ser familiar
visto que é idêntico ao HTML da seção anterior. Esse HTML vai rodar sem erros em Browsers compatíveis com ES5
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var Mensagem = React.createClass({
displayName: 'Mensagem',
render: function render() {
return React.createElement('div', null, 'Olá ', this.props.name);
}
});
ReactDOM.render(React.createElement(Mensagem, { name: 'Valter' }), document.getElementById('app'));
</script>
</body>
</html>
Opcionalmente, usando JSX via Babel, é possível simplificar a criação de Elementos React por abstrair a chamada da função Javascript React.createElement().
Assim, esses Elementos podem ser escritos de uma maneira mais parecida com a sintaxe do HTML.
Ao invés de escrever dessa forma, que usa React.createElement():
return React.createElement('div',null,'Hello ',this.props.name);
Usando JSX, podemos escrever dessa forma:
return <div>Hello {this.props.name}</div>;
E então Babel irá convertê-lo de volta para o código que usa React.createElement () para que possa ser analisado por uma
uma engine do JavaScript.
Você pode considerar JSX uma forma de HTML que você pode escrever diretamente em JavaScript que requer um passo de transformação, feito por Babel, para código ECMAScript 5 que os navegadores podem executar.
Iremos ainda falar mais sobre essa sintaxe no capítulo sobre JSX. Por enquanto, basta perceber que o JSX é uma abstração opcional fornecido para sua conveniência ao criar elementos React e não será executado em navegadores ES5 sem primeiro ser transformado por Babel.
Transformando JSX via Babel no Browser
Normalmente, o Babel é configurado para processar automaticamente seus arquivos JavaScript durante o desenvolvimento usando a ferramenta Babel CLI (por exemplo, via algo como webpack). No entanto, é possível usar o Babel diretamente no navegador por meio da inserção de um script. Como estamos apenas começando, vamos evitar ferramentas CLI ou aprender um carregador de módulo para nos concentrarmos em aprender React. Observe que você nunca deve usar essa transformação do navegador em um ambiente de produção.
O projeto Babel infelizmente, a partir do Babel 6, já não fornece o arquivo de script necessário (ou seja, browser.js) para transformar o código JSX para o código ES5 no navegador. Assim, você terá que usar uma versão mais antiga do Babel (isto é, 5.8.23) que fornece o arquivo necessário (isto é, browser.js) para transformar o JSX / ES * no navegador.
Usando browser.js (Babel 5.8.23) para transformar JSX no Browser
No arquivo HTML abaixo, o código React que temos trabalhado para criar o Componente Mensagem foi atualizado para usarmos JSX. A transformação do código está ocorrendo porque nós incluímos o arquivo browser.js e dado que o Elemento <script> tem o tipo type="text/babel".
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var Mensagem = React.createClass({
render: function() {
return <div>Olá {this.props.name}</div>;
}
});
ReactDOM.render(<Mensagem name="Valter" />, document.getElementById('app'));
</script>
</body>
</html>
Embora a transformação do JSX no navegador seja conveniente e fácil de configurar, não é ideal porque o custo da transformação está ocorrendo em tempo de execução. Isso poderá causar problemas de memória. Portanto, usar o browser.js não é uma solução de produção .
Você deve estar ciente de que os exemplos de código usados neste material através de JSFiddle usarão o browser.js (Babel 5.8.23 para transformar JSX em código ES5. Em outras palavras, JSFiddle está praticamente fazendo o que você vê no arquivo HTML acima ao executar o código React.
Observações
- A ferramenta Babel é seleção subjetiva do time do React para transformar código ES* e JSX em código ES5. Aprenda mais sobre Babel por ler Babel handbook.
Por usar JSX:
- Mesmo pessoas com pouco conhecimento técnico ainda podem entender e modificar as partes requeridas. Desenvolvedores CSS e Designers irão achar o JSX mais familiar do que Javascript sozinho.
- Você pode aproveitar todo o poder do JavaScript no HTML e evitar aprender ou usar
template languages. JSX não é uma solução template. Tem uma sintaxe declarativa usada pra expressar a árvore de componentes de UI. - O compilador vai achar erros no seu
'html'que de outra maneira poderiam passar despercebidos. - JSX promove a idéia de
inline styles. O que pode ser bom. Veremos mais sobre isso nas seções a frente.
- Especificação do JSX.