JSX e JavaScript aplicado ao framework React

Sugar Syntax

Esse artigo didático é opinado, contendo as percepções de Diego C. O viés é inerente ao ser humano, portanto, avalie a informação com pensamento crítico, consulte as referências fornecidas e procure por mais fontes. Críticas e sugestões são bem-vindas.
Muito Obrigado!

De: JavaScript, Para: JSX

JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World Wide Web. Sob uma ótica técnica, esta linguagem pode apresentar a nomenclatura de EcmaScript, cujo a última publicação deste padrão remete ao ECMA-262, 14.0 de Junho/2023. Portanto, não estamos mais a falar do JavaScript desenvolvido pela Netscape ou JScript desenvolvido pela Microsoft na segunda metade da década de 90. Entretanto o termo JavaScript é histórico e até saudosista, e se mantém forte e presente nas discussões técnicas atuais para denominar ela linguagem.

JSX (JavaScript XML) é uma sugar syntax1 para JavaScript que permite escrever de maneira elegante e simplificada código fonte de aplicações. Ela reside somente no editor de código (ex. VSCode, Web Storm, etc), onde é escrita pelo desenvolvedor, transpilada2 para JavaScript convencional, a fim de ser interpretada e exibida no navegador. Alguns prós e contras são:

No contexto de desenvolvimento de aplicações front-end modernas com frameworks modernos como React e Next.js, JavaScript XML (JSX) e TypeScript (TSX) são implementadas como boas práticas de desenvolvimento, apesar de não serem obrigatórias. Algumas qualidades do JSX são:

  • Melhoria da experiência de desenvolvimento: O código é mais legível, por ser mais eloquente;
  • Melhores mensagens de erro: O React assume que você usa JSX e reporta mensagens de erro mais apuradas;
  • Rapidez no desenvolvimento: O transpilador optimiza seu código para um JavaScript mais limpo e enxuto, resultando em carregamento mais rápido;
  • Menos erros de sintaxe: Menos código para escrever, representa menos janelas de oportunidade para erros de digitação.

O emprego do JSX como uma boa prática moderna para codificação de interfaces - especialmente com o framework React/Next - foi disruptivo para o desenvolvimento frontend. Na década passada se priorizava a separação de responsabilidades através de arquivos distintos, segmentando CSS aqui e JavaScript acolá. Nos dias atuais - apesar de poder violar o princípio de separação de responsabilidades - há a prática de integrar JSX e CSS, criando componentes modulares (web components).

Comparação da sintaxe

React com JavaScript
import React from 'react';

default function Componente{
  render() {
    return React.createElement(
      'h1',
       null,
      'Hello ',
       React.createElement('em', null, 'world'),
      '!',
    );
  }
}
export default Componente;
React com JSX
import React from 'react';
default function Componente{
  return(
    <h1>Hello <em>World</em>!</h1>
)
}
export default Componente;

Atenção ao adotar JSX

Barra final para fechamento é mandatória para tags únicas.

JSX requer uma barra de fechamento ao final da Tag, caso você não tenha um elemento Children.
<img src="logotipo.png" alt="logotipo" />

O atributo style é um objeto

O atributo style funciona de maneira diferente no JSX. Você pode passar objetos JavaScript e propriedades CSS com algumas ressalvas. Para palavras compostas, retira-se o hífen a reescreve-se em camelCase.

Observe que os atributos em CSS/HTML convencional são: border-width, border-style, border-color.
<span style={{
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: 'red',
        }}>Hello world</span>
Ao acrescentar JavaScript um par de chaves é para o JSX e outro para o objeto literal JavaScript.
<input style={{ fontSize: '14pt'}} />

Ainda sobre atributos simples únicos (sem valor aplicado) e compostos

Seguindo o mesmo exemplo anterior, os atributos compostos e/ou com hífen devem ser rescritos para camelCase3, inclusive quando se utiliza SVG.

Exemplo antes vs. depois com camelCase.
clip-path ---> clipPath
fill-opacity ---> fillOpacity

Um pouco mais confuso é o caso de atributos comumente escritos em minúsculo no HTML, mas que com JSX precisam ser rescritos com camelCase.

Observe que os atributos em HTML convencional são: autoplay e allowfullscreen.
<video autoPlay allowFullscreen>
  ...
</video>

Alguns atributos tem nomes reservados.

Alguns atributos tem nome reservados e serão renomeados. Em casos de múltiplas palavras, utilizar camelCase. Dois casos notáveis são:

<img src="/logo.png" className="hidden">
<label htmlFor="logo">logo</label>

Resumo

  • JSX é apenas uma sintaxe doce (sugar syntax) para JavaScript;
  • Use className and htmlFor no lugar do atributo convencional do HTML;
  • Alguns atributos, especialmente os compostos e hifenizamos são rescritos em camelCase;
  • O atributo de estilo recebe objetos JavaScript, diferentemente do HTML convencional;
  • JSX deve ser transpirado para JavaScript antes de ser interpretado e exibido no navegador.

Referência bibliográfica

Rawat, Prateek, and Archana N. Mahajan. "ReactJS: A modern web development framework." International Journal of Innovative Science and Research Technology 5.11 (2020): 698-702. Bhalla, Archana, Shivangi Garg, and Priyangi Singh.

Aggarwal, Sanchit. "Modern web-development using reactjs." International Journal of Recent Research Aspects 5.1 (2018): 133-137. Gackenheimer, Cory, and Cory Gackenheimer. "Jsx fundamentals." Introduction to React (2015): 43-64.

Footnotes

  1. Mais fácil de digitar, como resultado funcional equivalente. ↩

  2. Diferentemente do termo compilar, transpilar não está presente no dicionário de português. Trata-se de traduzir de uma sintaxe (JSX) para outra (JavaScript). ↩

  3. camelCase é uma maneira de escrever valoresAssim. Outros exemplos são: PascalCasem snake_case e kebab-case. ↩