Introdução ao React - JSX - parte 3


O que é o JSX e como o usar?

Data: 09/03/2020
Categoria: dev

Indice

Conteúdo

O que é JSX

“Então, React faz umas coisas bem legais e permite fazer um site rápido e tudo, mas não gostei de como se constrói interfaces com ele” - Alguém, provavelmente

Quanto a isso eu tenho uma resposta! JSX!

JSX (Javascript XML) é uma forma alternativa de se escrever elementos React, usando algo que torna sua criação muito parecido com o HTML, mas é claro, com alguns benefícios.

O que você precisa para o usar

Para usar o JSX precisamos do Babel, o Babel é um compilador Javascript, ele basicamente pega o seu código javascript e o compila para algo diferente. Por exemplo ele pode pegar um código Javascript ES2015 (que tem um monte de recursos legais, mas nem todo navegador suporta) e o compila para ES5 (que não tem todos os recursos, mas roda em tudo), com o seu código funcionando do mesmo jeito.

Normalmente usamos o Babel indiretamente por meio de um bundler de código como o Webpack para projetos devido a seus inúmeros recursos, mas para aprender não precisamos dele, tudo o que precisamos é de um script do Babel que podemos usar direito de um CDN!

Nota: Caso esteja usando o Codepen que passei na parte 1, você não precisa realizar esse passo

Vamos importar o Babel e adicionar a propriedade type="text/babel" na tag script onde importamos o nosso app.js:

1
2
3
4
5
<body>
<!-- Depois das tags de importação do React e ReactDOM -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js'></script>
<script src='app.js' type='text/babel'></script>
</body>

NOTA: para o babel standalone funcionar, é necessário você estar usando um servidor na sua página HTML, rodar localmente NÃO IRÁ FUNCIONAR! Recomendo usar o live-server ou o http-server baixados pelo Node.js.

Usando o JSX

Agora você pode escrever o JSX, veja como era o nosso código antes:

1
2
3
4
ReactDOM.render(
React.createElement('h1', null, 'Oilá'),
document.querySelector('#app')
)

E agora com o JSX:

1
2
3
4
ReactDOM.render(
<h1>Oilá</h1>,
document.querySelector('#app')
)

Bem melhor né? Então, agora isso no permite fazer coisas que antes eram bem difíceis como adicionar propriedades de maneira bem mais fácil:

1
2
3
4
ReactDOM.render(
React.createElement('h1', { className: 'titulo' }, 'Oilá'),
document.querySelector('#app')
)

Depois:

1
2
3
4
ReactDOM.render(
<h1 className='titulo'>Oilá</h1>,
document.querySelector('#app')
)

Ou ainda, colocando elementos um dentro do outro:

1
2
3
4
5
const titulo = React.createElement('h1', null, 'oi')
ReactDOM.render(
React.createElement('div', null, titulo),
document.querySelector('#app')
)

E depois:

1
2
3
4
5
6
ReactDOM.render(
<div>
<h1>Oilá</h1>
</div>,
document.querySelector('#app')
)

Executando código dentro do JSX

Algo muito legal do JSX é que ele lhe permite executar código dentro dele de maneira muito fácil e legal, por exemplo:

1
2
3
4
5
<h1>{1 + 1}</h1> // No html aparecerá 2
<h1>{Math.sqrt((3 + 3) * 42)}</h1> // No html aparecerá 15.874507866387544
<h1>{Math.pow(variavel, 2)}</h1> // Sim, pode-se usar variáveis dentro do JSX, se variavel = 3, no html aparecerá 9
<h1>{console.log("mandioca")}</h1> // No console aparecerá mandioca
<h1>{alert("mandioca")}</h1> // Aparecerá um alerta com o texto mandioca

Eventos

Outra coisa legal é que você pode facilmente executar código a partir de um evento, por exemplo:

1
2
3
<button onClick={() => alert("Você me clicou")}>Me clique</button>
<input onChange={(e) => console.log(e.target.value)} />
<input onPaste={() => alert("Tá colando coisa aqui né")} />

Finalizando

Antes de ir para a próxima parte, tente fazer uma interface simples com o poder do JSX!

E na próxima parte nós iremos ver como criar componentes

Próxima parte