JSX: extensão JavaScript e exemplos de uso

O que é JSX?

JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript, apresentada pela primeira vez no React em 2013. Permite que desenvolvedores descrevam a estrutura de uma interface de usuário de forma declarativa, combinando marcação e lógica em um único arquivo.

Antes do JSX, os desenvolvedores usavam templates de string (Mustache, Handlebars) ou criavam elementos DOM manualmente via document.createElement. Ambas as abordagens tinham desvantagens: templates de string não verificavam tipos, e a criação manual de DOM era complicada e propensa a erros.

React escolheu um caminho diferente — incorporar marcação diretamente no código. Essa decisão gerou debate na comunidade, mas com o tempo se tornou o padrão. Hoje JSX é usado não apenas no React, mas também em SolidJS, Preact, Qwik e até no Vue através de plugins.

Sintaxe básica do JSX

Um elemento JSX parece uma tag HTML, mas é incorporado diretamente em JavaScript. Cada elemento é transpilado em uma chamada React.createElement com três argumentos: tipo do elemento, objeto de props e filhos. Um elemento raiz é uma regra obrigatória: uma expressão JSX deve retornar um elemento pai ou fragmento.

import React from 'react';

// JSX básico: elemento raiz único
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Fragmentos para agrupamento

Quando nenhum nó DOM extra é necessário, use React.Fragment ou a sintaxe abreviada <></>. Fragmentos não criam um elemento DOM real, apenas agrupam nós filhos. Isso é especialmente útil em tabelas e listas onde um invólucro extra quebraria a estrutura HTML.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

Expressões e variáveis em JSX

Qualquer expressão JavaScript é incorporada em JSX via chaves { }. Dentro, você pode usar variáveis, chamadas de função, operadores ternários e métodos de array. Renderização condicional é feita via operador ternário ou AND lógico.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Uma limitação importante — apenas expressões podem ser usadas dentro de chaves, não instruções. Você não pode usar if/else, for, switch — apenas operador ternário, operadores lógicos e métodos de array. Chamadas de função são permitidas, incluindo funções seta.

Diferenças entre JSX e HTML

JSX se parece visualmente com HTML, mas tem diferenças fundamentais. Atributos são escritos em camelCase — className em vez de class, onClick em vez de onclick, tabIndex em vez de tabindex. Isso porque JSX transpila para JavaScript, onde hífens em nomes de propriedades não são permitidos.

Outra diferença importante — tags de auto-fechamento. Em HTML, algumas tags (br, hr, input) podem ficar sem fechamento. Em JSX, todas as tags de auto-fechamento devem ter uma barra de fechamento: <br />, <input />. Nomes de atributos SVG também são convertidos para camelCase: strokeWidth, fillOpacity.

Como JSX é transpilado para JavaScript

Navegadores não entendem JSX diretamente. Antes da execução, o código JSX passa por um transpilador — Babel, TypeScript ou esbuild. Cada elemento JSX é transformado em uma chamada createElement ou jsx/runtime.

Transformação via Babel

// JSX original
const element = <h1 className="title">Hello</h1>;

// Após a transpilação
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Com React 17, surgiu uma nova transformação JSX que não requer importação do React. A importação automática de jsx-runtime permite escrever componentes sem import React from ‘react’. Babel e TypeScript suportam essa transformação via configuração {"runtime": "automatic"}.

JSX além do React: Solid, Preact, Vue

Embora JSX seja associado ao React, outros frameworks também o usam. SolidJS usa JSX com compilação em nós DOM reais, sem Virtual DOM. Preact é uma alternativa leve ao React com suporte completo a JSX. Vue suporta JSX via @vue/babel-plugin-jsx, embora seu template principal seja template.

Uma diferença chave são as semânticas de expressão. No React, expressões JSX são executadas em cada renderização. No SolidJS, JSX compila uma vez e as atualizações são rastreadas via sinais. Isso afeta o desempenho: SolidJS não requer Virtual DOM e reconciliação, tornando a renderização JSX mais rápida.

No TypeScript, JSX é suportado no nível da linguagem. Arquivos com extensão .tsx lidam automaticamente com a sintaxe JSX. A tipagem de props é uma das principais vantagens do TypeScript + JSX: a IDE sugere atributos esperados, tipos de callbacks e obrigatoriedade de props.

Melhores práticas com JSX

Escreva código JSX fácil de ler e manter. Extraia expressões complexas em variáveis ou funções separadas — isso melhora a legibilidade e permite testar a lógica separadamente da marcação. Use fragmentos em vez de invólucros div desnecessários.

A regra de indentação — mantenha a indentação para elementos aninhados. Cada nível de aninhamento é um nível de indentação. A tag de fechamento deve estar no mesmo nível da tag de abertura. Para atributos longos, use quebras de linha.

Evite funções seta inline em props se forem criadas em cada renderização. Nesses casos, envolva o callback em useCallback ou mova a função para fora do componente. Divida componentes complexos em menores — cada componente deve lidar com uma unidade lógica da interface.