Olá pessoal, neste artigo, aprenderemos o que é o JSX e quais são as suas aplicações. O JSX significa JavaScript XML e nos permite escrever HTML no React, tornando fácil a sua adição. Com o JSX, podemos escrever os elementos HTML dentro do JavaScript e adicioná-los ao DOM sem utilizar métodos como createElement() ou appendChild(). o JSX é uma alternativa para escrevermos nosso código que mescla a estrutura do DOM com a lógica da aplicação.
São necessários transpiladores (pré-processadores) como o Babel. Basicamente, com o JSX você escreve estruturas HTML/XML do mesmo modo que escreve o código JavaScript, então, o transpilador transformará essas expressões em código JavaScript. Ou seja, ao invés de colocar o JavaScript no HTML, colocamos o HTML no JavaScript.
O JSX fornece uma sintaxe concisa e familiar para definir uma estrutura de árvore com atributos que não requerem o aprendizado de uma linguagem de templates ou abandonar o JavaScript e o JSX é fácil de ler e escrever. Vejamos um exemplo:
const element = <h1>Olá Mundo!</h1> ReactDOM.render{ element, document.getElementById('root') };
Neste exemplo, declaramos a variável element e a usamos dentro do JSX, renderizando-a com ReactDOM.render().
Se fosse escrever o mesmo exemplo anterior sem o JSX, seria algo como:
const element = React.createElement('h1, {}, 'Olá Mundo!'); ReactDOM.render(element, document.getElementById('root'));
Veja, se não utilizamos JSX, precisamos do método createElement para criarmos o nosso elemento <h1> utiliando o React. Com o JSX, eliminamos a necessidade de utilizar este método, simplificando a sintaxe do nosso código.
O JSX também é uma expressão!
Podemos utilizar expressões em JSX, transformando-se em chamadas normais de funções que retornam objetos JavaScript. Por exemplo:
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Nome', lastName: 'Sobrenome' }; function greeting(user){ if (user) { return <h1>Olá, {formatName(user)}!</h1>; } return <h1>Olá, anônimo!</h1>; }
Ou seja, você pode utilizar o JSX dentro de estruturas condicionais e laços de repetição, atribuí-los a variáveis, aceitá-los como argumentos e retorná-los de funções!
Gostou deste artigo? Comente abaixo!
Referências:
- https://pt-br.reactjs.org/docs/introducing-jsx.html#:~:text=%C3%89%20chamada%20JSX%20e%20%C3%A9,todo%20o%20poder%20do%20JavaScript.
- https://medium.com/reactbrasil/jsx-de6f43b06f41
- https://www.reactenlightenment.com/react-jsx/5.1.html
- https://www.w3schools.com/react/react_jsx.asp#:~:text=JSX%20stands%20for%20JavaScript%20XML,and%20add%20HTML%20in%20React.