Dando super poderes ao ReactJS com JSX

Sempre que vejo algum artigo ou tutorial sobre React é sempre utilizando JSX. Fica quase impossível não atrelar os dois. Acredito que para muitas pessoas é a mesma coisa. Mas a verdade é que não é bem assim.

React nada mais é do que um framework criado utilizando JavaScript. Com isso, é possível utilizá-lo apenas com JavaScript.

Mas, espera aí!! JSX não é JavaScript??

Bom, mais ou menos! JSX é uma sintaxe de extensão para JavaScript. Um syntactic sugar. JSX nos permite criar elementos escrevendo menos código e o deixando mais legível. E claro, tem uma pequena curva de aprendizado no início, mas após algumas horas escrever JSX tende a ficar mais natural.

Vamos ao exemplo do post anterior:

Sem JSX:

React.createElement(
  'button',
  { onClick: () => alert('Cliquei no botão') },
  'Meu botao React'
);

Com JSX:

<button onClick={() => alert('Cliquei no botão')}>
  Meu botão React
</button>

Reflita por 2 minutinhos e tire suas próprias conclusões. 🧘‍♂️

Por que JSX?

React abraça o fato de que lógica de renderização está inteiramente ligado com lógica de UI. Como os eventos são chamados, como o estado de um componente (ou página) muda e como os dados são preparados para serem mostrados.

Ao invés de artificialmente separar lógica e web markup, React em seu design, decidiu se valer dessa separação através de unidades chamadas Componentes e manter lógica e markup juntos. Nada melhor do que usar JSX para alcançar esse objetivo.

Você ainda pode escrever React sem JSX (como fizemos no post sobre como criar sua primeira aplicação React). No entanto, JSX te ajudar a trabalhar com as partes visuais junto ao código JavaScript. 👩‍🎨

Expressões JavaScript com JSX

Renderizar conteúdo dinâmico é algo extremamente comum e JSX sabe bem como fazê-lo. Veja o pedaço de código abaixo:

const name = 'Nelio';
const element = <h1>Hello, {name}</h1>;

React.DOM.render(element, document.getElementById('root'));

JSX me permitiu colocar a variável name diretamente dentro da tag h1. E isso é possível com qualquer expressão JavaScript:

const receita = 180;
const divida = 80;
const element = <p>Lucro: R${receita - divida}</p>;

React.DOM.render(element, document.getElementById('root'));

Nada mal, hein! 🤓

Adicionando atributos com JSX

Você pode simplesmente utilizar aspas duplas para atributos do tipo string:

const element = <div tabIndex="0"></div>

E chaves para atributos que são uma expressão:

const element = <img src={user.avatar} />

Lembrando que atributos devem ser adicionados utilizando camelCase!

Children com JSX

Definir children usando JSX é simples como escrever HTML.

Se a tag é vazia, não precisamos de uma tag de fechamento. Basta finalizar com />:

const foto = <img src={user.photo} />

Se não:

const element = (

  <div className="welcome">
    <h1>Seja bem vindo!</h1>
    <p>Estou feliz com a sua presença.</p>
  </div>
);

JSX previne ataques XSS (cross-site-scripting)

Quando dados dinâmicos são adicionados no HTML este pode ficar vulnerável a ataques de XSS. JSX por padrão previne que caracteres especiais que possam ser usados de forma maliciosa sejam executados na página. Uma preocupação a menos! 😅

Desvantagens

A primeira desvantagem e talvez a principal, é o fato de JSX não ser compreendido por navegadores web. É preciso utilizar um software terceiro responsável por compilar o que foi escrito utilizando JSX para JavaScript, já que a biblioteca React também não o faz.

Outra desvantagem é a imensa flexibilidade permitida pelo JSX. A facilidade de poder escrever “JavaScript com HTML” de uma maneira tão livre pode acabar transformando o código em algo extremamente difícil de ler. Felizmente existem técnicas que serão abordadas em outros posts para evitar tal feito.

Compilando JSX com Babel

Como disse anteriormente, JSX não é compreendido pelo browser e por isso precisamos de um compilador. Este será responsável por transformar JSX em JavaScript puro. Atualmente o mais utilizado (e também o que eu tenho utilizado em todos meus projetos) é o Babel.

Sua instalação exige pouco esforço. Basta copiarmos o seguinte trecho de código na nossa página HTML:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

Rescrevendo um componente utilizando JSX

No post anterior criei um componente botão utilizando apenas JavaScript (sem JSX). Agora vou reescrevê-lo utilizando JSX.

Como era o componente Button sem JSX:

const e = React.createElement;

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }

  render() {
    if (this.state.clicked) {
      return 'Voce clicou no botao.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Meu botao React'
    );

  }
}

const domContainer = document.querySelector('#react-container');
ReactDOM.render(e(Button), domContainer);

Com JSX:

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }

  render() {
    if (this.state.clicked) {
      return 'Voce clicou no botao.';
    }

    return (
      <button onClick={() => this.setState({ clicked: true })}>
        Meu botão React
      </button>
    );

  }
}

const domContainer = document.querySelector('#react-container');
ReactDOM.render(<Button />, domContainer);

Não parece tão diferente assim, certo!? Talvez não para um exemplo tão simples.

Vou agora colocar uma mensagem embaixo do botão e uma div em volta dos dois:

return (
  <div>
    <button onClick={() => this.setState({ clicked: true })}>
      Meu botão React
    </button>
    <p>Este botão ao ser clicado muda o estado da página</p>
  </div>
);

Essa similaridade com HTML deixa tudo muito mais compreensível e de fácil leitura. Criar componente por componente utilizando JavaScript puro não seria um trabalho muito prazeroso.

Concluindo

JSX e React andam de mãos dadas e apesar de apresentar algumas desvantagens, ainda é uma solução incrível para escrever componentes web com rapidez e boa legibilidade. Sua similaridade com HTML faz com que sua curva de aprendizado seja rápida e indolor 😂. No entanto, é importante deixar claro que JSX te dá uma liberdade enorme. Escrever componentes menores, mais objetivos e com apenas uma finalidade vai ajudar a deixar o código mais legível e de fácil manutenção.

Se gostou desse artigo, se inscreva e receba semanalmente este e outros conteúdos diretamente no seu email. Sem spam! 😎

Compartilhe este artigo no Twitter.