O que é JSX? - MundoJS

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: