HTML para JSX

Descrição

Detalhamento técnico

Por que o JSX pareceu uma heresia e por que venceu mesmo assim

• Antes do JSX, criar UIs com React puro exigia chamadas aninhadas a `React.createElement('div', {className: 'container'}, React.createElement('h1', null, 'Título'))`. Era funcionalmente correto, mas completamente ilegível para qualquer coisa além de um componente trivial. O JSX foi criado como açúcar sintático que o Babel compila para essas chamadas — mas a DX (experiência do desenvolvedor) é radicalmente diferente.
• Vue, Angular e Svelte tomaram caminhos diferentes: Vue usa templates em HTML com diretivas (`v-if`, `v-for`), Angular usa templates com sintaxe própria e Svelte compila em JavaScript puro. JSX é a abordagem mais próxima de 'JavaScript puro com extensão sintática' — o que tanto atrai desenvolvedores JS quanto incomoda designers acostumados com HTML.
• A reinterpretação de 'separação de responsabilidades' foi o argumento que virou o debate. O princípio original (HTML/CSS/JS em arquivos separados) separava tecnologias, não preocupações de produto. Um componente de modal tem lógica, estilo e markup que mudam juntos — separá-los em arquivos diferentes só cria acoplamento à distância.
• JSX não é exclusivo do React. Solid.js usa JSX mas compila diferente (sem Virtual DOM). Preact é uma alternativa ao React com JSX compatível e 3 KB de tamanho. Qwik usa JSX com serialização de estado para hidratação parcial. Stencil.js usa JSX para web components nativos.
• O Babel transforma JSX em JavaScript antes de qualquer execução. O compilador moderno do React (React 17+) não requer mais o import explícito de React em cada arquivo JSX — o transform é automático. TypeScript também suporta JSX nativamente com arquivos `.tsx`.

As regras de conversão HTML → JSX: um mapeamento sistemático

• `class` → `className`: `class` é uma palavra reservada em JavaScript usada para definir classes ES6. Em JSX, o atributo correspondente é `className`. Esquecer essa conversão é o erro mais comum ao migrar templates.
• `for` → `htmlFor`: O atributo `for` em `<label>` também é palavra reservada (loop `for` do JavaScript). Em JSX é `htmlFor`. Da mesma forma, `<input type="text">` sem atributos problemáticos não muda.
• Atributos camelCase: `tabindex` → `tabIndex`, `maxlength` → `maxLength`, `readonly` → `readOnly`, `autofocus` → `autoFocus`, `crossorigin` → `crossOrigin`, `enctype` → `encType`. A regra é: se o atributo HTML tem hífen ou é multi-palavra com casing inconsistente, em JSX usa-se camelCase.
• Estilos inline: `style="color: red; font-size: 16px"` → `style={{ color: 'red', fontSize: '16px' }}`. Propriedades CSS com hífen viram camelCase. Os valores são strings (exceto números sem unidade, como `zIndex: 10`). Note as chaves duplas: a externa `{}` é a interpolação JSX, a interna `{}` é o objeto JavaScript.
• Tags void com fechamento explícito: `<img>`, `<input>`, `<br>`, `<hr>`, `<meta>`, `<link>` em HTML5 não precisam de fechamento. Em JSX, que segue regras de XML bem-formado, todas as tags devem ser fechadas: `<img />`, `<input />`, `<br />`. Sem isso, o Babel lança erro de parse.

Technical deep dive

Why JSX felt like a heresy and why it won anyway

• Before JSX, building UIs with pure React required nested calls to `React.createElement('div', {className: 'container'}, React.createElement('h1', null, 'Title'))`. Functionally correct, but completely unreadable for anything beyond a trivial component. JSX was created as syntactic sugar that Babel compiles into those calls — but the DX (developer experience) is radically different.
• Vue, Angular, and Svelte took different paths: Vue uses HTML-like templates with directives (`v-if`, `v-for`), Angular uses templates with its own syntax, and Svelte compiles to plain JavaScript. JSX is the approach closest to 'pure JavaScript with a syntactic extension' — which both attracts JS developers and unsettles designers accustomed to plain HTML.
• The reframing of 'separation of concerns' was the argument that turned the debate. The original principle (HTML/CSS/JS in separate files) separated technologies, not product concerns. A modal component has logic, style, and markup that change together — separating them into different files only creates long-distance coupling.
• JSX is not exclusive to React. Solid.js uses JSX but compiles differently (no Virtual DOM). Preact is a React alternative with compatible JSX at 3 KB in size. Qwik uses JSX with state serialization for partial hydration. Stencil.js uses JSX for native web components.
• Babel transforms JSX to JavaScript before any execution. The modern React compiler (React 17+) no longer requires an explicit React import in every JSX file — the transform is automatic. TypeScript also natively supports JSX with `.tsx` files.

The HTML → JSX conversion rules: a systematic mapping

• `class` → `className`: `class` is a reserved keyword in JavaScript used to define ES6 classes. In JSX, the corresponding attribute is `className`. Forgetting this conversion is the most common mistake when migrating templates.
• `for` → `htmlFor`: The `for` attribute in `<label>` is also a reserved word (JavaScript's `for` loop). In JSX it is `htmlFor`. Similarly, `<input type="text">` without problematic attributes does not change.
• camelCase attributes: `tabindex` → `tabIndex`, `maxlength` → `maxLength`, `readonly` → `readOnly`, `autofocus` → `autoFocus`, `crossorigin` → `crossOrigin`, `enctype` → `encType`. The rule: if the HTML attribute has a hyphen or is a multi-word attribute with inconsistent casing, JSX uses camelCase.
• Inline styles: `style="color: red; font-size: 16px"` → `style={{ color: 'red', fontSize: '16px' }}`. CSS properties with hyphens become camelCase. Values are strings (except unitless numbers, like `zIndex: 10`). Note the double braces: the outer `{}` is JSX interpolation, the inner `{}` is the JavaScript object.
• Void tags with explicit closing: `<img>`, `<input>`, `<br>`, `<hr>`, `<meta>`, `<link>` in HTML5 do not need closing. In JSX, which follows well-formed XML rules, all tags must be closed: `<img />`, `<input />`, `<br />`. Without this, Babel throws a parse error.

Detalle técnico

Por qué JSX pareció una herejía y por qué ganó de todas formas

• Antes de JSX, construir interfaces con React puro requería llamadas anidadas a `React.createElement('div', {className: 'container'}, React.createElement('h1', null, 'Título'))`. Funcionalmente correcto, pero completamente ilegible para cualquier cosa más allá de un componente trivial. JSX fue creado como azúcar sintáctico que Babel compila en esas llamadas, pero la DX (experiencia del desarrollador) es radicalmente diferente.
• Vue, Angular y Svelte tomaron caminos distintos: Vue usa plantillas similares a HTML con directivas (`v-if`, `v-for`), Angular usa plantillas con su propia sintaxis y Svelte compila a JavaScript puro. JSX es el enfoque más cercano a 'JavaScript puro con extensión sintáctica', lo que tanto atrae a los desarrolladores JS como incomoda a los diseñadores acostumbrados al HTML plano.
• La reinterpretación de la 'separación de responsabilidades' fue el argumento que cambió el debate. El principio original (HTML/CSS/JS en archivos separados) separaba tecnologías, no responsabilidades de producto. Un componente de modal tiene lógica, estilo y marcado que cambian juntos: separarlos en archivos distintos solo crea acoplamiento a distancia.
• JSX no es exclusivo de React. Solid.js usa JSX pero compila de forma diferente (sin Virtual DOM). Preact es una alternativa a React con JSX compatible y solo 3 KB de tamaño. Qwik usa JSX con serialización de estado para hidratación parcial. Stencil.js usa JSX para web components nativos.
• Babel transforma JSX a JavaScript antes de cualquier ejecución. El compilador moderno de React (React 17+) ya no requiere importar React explícitamente en cada archivo JSX: la transformación es automática. TypeScript también admite JSX de forma nativa con archivos `.tsx`.

Las reglas de conversión HTML → JSX: un mapeo sistemático

• `class` → `className`: `class` es una palabra reservada en JavaScript para definir clases ES6. En JSX el atributo correspondiente es `className`. Olvidar esta conversión es el error más común al migrar plantillas.
• `for` → `htmlFor`: El atributo `for` en `<label>` también es una palabra reservada (el bucle `for` de JavaScript). En JSX es `htmlFor`. Del mismo modo, `<input type="text">` sin atributos problemáticos no cambia.
• Atributos en camelCase: `tabindex` → `tabIndex`, `maxlength` → `maxLength`, `readonly` → `readOnly`, `autofocus` → `autoFocus`, `crossorigin` → `crossOrigin`, `enctype` → `encType`. La regla: si el atributo HTML tiene guion o es una palabra compuesta con casing inconsistente, en JSX se usa camelCase.
• Estilos inline: `style="color: red; font-size: 16px"` → `style={{ color: 'red', fontSize: '16px' }}`. Las propiedades CSS con guion pasan a camelCase. Los valores son cadenas (salvo los números sin unidad, como `zIndex: 10`). Nota las llaves dobles: la exterior `{}` es la interpolación JSX, la interior `{}` es el objeto JavaScript.
• Void tags con cierre explícito: `<img>`, `<input>`, `<br>`, `<hr>`, `<meta>`, `<link>` en HTML5 no necesitan cierre. En JSX, que sigue las reglas de XML bien formado, todas las etiquetas deben cerrarse: `<img />`, `<input />`, `<br />`. Sin esto, Babel lanza un error de parseo.