Junior Alves
Senior Developer
Foto: Unsplash
22 de agosto de 2020 • 4 minutos de leitura
Conhecendo o JSX
Você sabe o que é o JSX? Conhece o Babel.js? Então vamos descobrir!
Introdução
No último post, entendemos o básico do funcionamento do React, se ainda não viu, confere aqui.
Agora vamos continuar o exemplo para entender o que é o JSX do React.
Afinal, o que é JSX?
JSX é uma extensão de sintaxe para JavaScript. É semelhante a uma linguagem de template, mas com todo o poder do JavaScript
Acima, temos a definição de JSX da própria documentação do React.
Mas o que isso quer dizer?
Bom, vamos para um exemplo prático e depois retornamos para explicar melhor, ok?
const root = document.getElementById('root');
ReactDOM.render(<h1 id="title">Hello World</h1>, root);
O código acima é um exemplo de JSX, a segunda linha, fazemos um chamada ao render do ReactDOM, passando um elemento HTML diretamente.
Hein?! Como assim?! HTML dentro do Javascript?
Então... Na verdade isso não é HTML, é o JSX. (Vamos ver na prática porque não é HTML, calma ae.)
É a sintaxe HTML, mas dentro do Javascript com todos os poderes que ele nos permite!
Vamos escrever e ver na prática
Vamos usar o arquivo index.html do último artigo, vamos apenas utilizar o Javascript dentro da tag script, assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Start Learning</title>
</head>
<body>
<div id="root"></div>
<!-- Importa o React -->
<script
src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin
></script>
<!-- Importa o ReactDOM -->
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
crossorigin
></script>
<!-- Nosso script -->
<script>
const root = document.getElementById('root');
ReactDOM.render(<h1 id="title">Hello World</h1>, root);
</script>
</body>
</html>
Se a gente tentar executar esse código agora, nada será mostrado no browser. POR QUÊ? DEU ERRO?
Não, é por que os browsers não "entendem" JSX, daí precisamos de alguém que posso "traduzir" o JSX para Javascript que o browser entenda.
Chamamos esse "tradutor" de transpiler (tipo especial de compilador) de Javascript. O mais utilizado atualmente é o Babel.js.
Agora precisamos importa-lo para poder testar nosso código no browser:
<!-- Importa o Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Uma última coisa antes de testar: precisamos também informar na tag script, que vamos utilizar o Babel.js:
<script type="text/babel">
Pronto, salvando o arquivo e indo ao browser temos:
Mas o que o Babel.js fez?
Para entender melhor, vamos ao site do Babel.js e acessar o menu Try it out, na barra superior.
Agora escrevemos o seguinte código:
O que quer dizer esse código?
É simplesmente uma variável recebendo uma função anônima. Mas o importante aqui, é saber que funções anônimas foram inseridas na versão ES6 do Javascript e alguns browsers "entendem" somente até a versão ES5, daí a necessidade de utilizarmos o Babej.js.
Ele vai "traduzir" o nosso JSX para uma forma que o browser "entenda". (ES significa EcmaScript, em outro post eu explico sobre as diferentes versões do JS).
Melhorando nosso exemplo
Até aqui, entendemos o que é JSX e qual a função do Babel.js dentro do nosso código.
Agora, vamos ver o que acontece se copiarmos nosso script para dentro do site do Babel.js:
Veja que ele fez exatamente o que tínhamos feito no último post, criou o elemento h1 através do React.createElement.
Muito massa né?
Conclusão
Demos mais um passo rumo ao React, entendemos na prática o que é JSX e precisamos do Babel.js.
E agora sim, no próximo post, vamos começar finalmente a criar nosso primeiro projeto com o create-react-app.
Eu vou ficando por aqui.
Abraços e até a próxima!
Curtiu? Compartilhe esse post: