Tradicionalmente, desenvolvedores separavam a marcação e a lógica em arquivos diferentes, usando HTML para estruturação, CSS para estilização e JavaScript para lidar com interações e manipulação de dados.

Mas e se houvesse uma forma de combinar essas tecnologias, simplificando o processo de desenvolvimento e facilitando a construção de interfaces de usuário complexas? É aqui que o JSX entra.

Neste artigo, você aprenderá o que é JSX, como funciona e por que é importante para construir interfaces de usuário dinâmicas no desenvolvimento web.

Vamos explorar essa tecnologia revolucionária em mais detalhes.

O que é JSX?

JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que permite aos desenvolvedores escrever código semelhante ao HTML dentro de um arquivo JavaScript. Foi desenvolvido pela Meta (anteriormente Facebook).

A sintaxe do JSX é semelhante à do HTML, com tags de abertura e fechamento, atributos e elementos aninhados.

Por exemplo, você pode escrever o seguinte código JSX para renderizar um simples elemento de título:

const heading = <h1>Hello, JSX!</h1>;

Esse código se parece com HTML, mas é JavaScript. A palavra-chave const cria uma nova variável chamada heading, e o valor dessa variável é o resultado da expressão JSX.

Como o JSX funciona?

Antes de ser executado no navegador, o JSX é transformado em JavaScript regular. Essa transformação é feita usando uma ferramenta chamada transpiler. O transpiler mais popular para JSX é o Babel.

O Babel transforma o código JSX em uma série de chamadas de função. Essas chamadas de função são equivalentes ao código semelhante ao HTML escrito em JSX. O navegador pode então executar o código JavaScript resultante.

Por exemplo, o seguinte código JSX:

const element = <h1>Hello, world!</h1>;

é transformado no seguinte código JavaScript:

const element = React.createElement("h1", null, "Hello, world!");

Essa transformação permite que os desenvolvedores escrevam código em uma sintaxe familiar e fácil de ler, sem deixar de aproveitar o poder e a flexibilidade do JavaScript.

JSX e React

O JSX é uma parte integral do React, permitindo aos desenvolvedores escrever a marcação e a lógica desses componentes em um único arquivo.

Aqui está um exemplo simples de código JSX em um componente React:

import React from 'react';

function Greet() {
  return <h1>Hello World!</h1>;
}

export default Greeting;

Neste exemplo, você tem um componente funcional chamado Greet que renderiza um elemento h1 com uma mensagem de saudação.

O compilador do React transformará esse código em código JavaScript otimizado que pode ser executado pelo navegador, permitindo que o componente seja renderizado na tela.

Aqui está o que o compilador do React transformaria no componente Greet:

import React from 'react'

function Greet() {
  return React.createElement("h1", {}, "Hello, World!")
}

Nesse código, o código JSX foi transformado em uma chamada React.createElement que cria a mesma estrutura e o mesmo conteúdo que o código JSX original.

Isso é o que acontece nos bastidores quando o React compila o código JSX, permitindo que ele seja executado pelo navegador. No entanto, o código transformado pode ser menos legível do que o código JSX original.

Na versão 17 do React, foi introduzido um novo recurso de transformação JSX, que importa automaticamente funções especiais dos novos pontos de entrada do pacote React, permitindo que os desenvolvedores usem JSX sem precisar importar o React no topo de seus arquivos.

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Uso de expressões JavaScript com JSX

No JSX, as expressões JavaScript podem ser incorporadas diretamente na marcação para gerar conteúdo dinamicamente. Isso permite que os desenvolvedores usem código JavaScript para calcular valores, executar operações e renderizar conteúdo condicionalmente em seus componentes JSX.

Este exemplo mostra como usar duas expressões JavaScript no JSX:

import React from 'react';

const MyComponent = () => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Next year, you will be {age + 1} years old.</p>
      {age >= 18 && <p>You are an adult.</p>}
    </div>
  );
};

export default MyComponent;

Neste exemplo, expressões JavaScript como {name}, {age}, {age + 1} e {age >= 18 && <p>You are an adult.</p>} são usadas para renderizar dinamicamente o conteúdo com base nos valores das variáveis de nome e idade.

Uso de CSS com JSX

O CSS pode ser aplicado aos componentes JSX de várias maneiras, como estilos em linha, arquivos CSS separados ou bibliotecas CSS-in-JS. Os estilos inline são definidos diretamente na marcação JSX usando objetos JavaScript, enquanto os arquivos CSS separados ou as bibliotecas CSS-in-JS permitem a estilização externa e modular dos componentes.

Este exemplo mostra como aplicar estilos em linha definidos por meio de um objeto JavaScript a elementos usando o atributo style no JSX:

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a component with inline styles.</p>
    </div>
  );
};

export default MyComponent;

Neste exemplo, as propriedades CSS como backgroundColor, color e padding são definidas como pares de valores-chave no objeto styles e seus valores são strings de caracteres que representam os valores CSS.

Observação: Embora os estilos inline ofereçam flexibilidade e simplicidade, é recomendado usar classes CSS ou bibliotecas CSS-in-JS para estilos mais complexos ou reutilizáveis em aplicativos maiores.

6 regras importantes do JSX

Ao escrever código JSX, existem certas regras que você deve seguir para garantir que ele seja válido e fácil de ler.

1. Sempre retorne um único elemento raiz

Em JSX, você deve sempre retornar um único elemento raiz. Isso significa que todo o seu código JSX deve estar contido em um único elemento mais externo. Por exemplo, este é um JSX válido:

return (
  <div>
    <h1>Hello World!</h1>
    <p>This is my first React component.</p>
  </div>
)

Mas este não é, porque retorna dois elementos em vez de um:

return (
  <h1>Hello World!</h1>
  <p>This is my first React component.</p>
)

É importante que você tenha isso em mente ao converter códigos HTML em JSX.

2. Use className em vez de class

Em HTML, você usaria o atributo class para especificar uma classe CSS para um elemento. No entanto, em JSX, você precisa usar o atributo className. Por exemplo:

// Good
<div className="my-class">This element has a CSS class.</div>

// Bad
<div class="my-class">This element has a CSS class.</div>

O uso de className em vez de class é importante e evita conflitos de nomes, pois class é uma palavra-chave reservada em JavaScript.

3. Use chaves para expressões JavaScript

Quando precisar incluir uma expressão JavaScript no código JSX, você deverá envolvê-la em chaves {}. Isso pode ser usado para qualquer coisa, desde a exibição de dados dinâmicos até a renderização condicional de componentes. Aqui está um exemplo:

// Good
<div>{myVariable}</div>

// Bad
<div>myVariable</div>

Você também pode executar operações matemáticas dentro das chaves, como, por exemplo:

<p>The total cost is {25*10}</p>

Além disso, dentro das chaves, você pode configurar instruções condicionais usando operadores ternários:

<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>

Aqui está um exemplo melhor com o componente React:

function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  );
}

Neste exemplo, definimos um componente Greeting. O componente usa o operador ternário para renderizar condicionalmente uma saudação com base no valor de isLoggedIn. Se isLoggedIn for true, o componente renderizará um elemento h1 com o texto “Welcome back!”. Se isLoggedIn for false, o componente renderizará um elemento h1 com o texto “Please log in.”.

4. Use camelCase para a maioria das coisas em JSX

No JSX, use camelCase para a maioria das coisas, inclusive atributos, manipuladores de eventos e nomes de variáveis. Essa convenção é coerente com as convenções de nomenclatura do JavaScript e ajuda a manter a legibilidade.

Por exemplo, use code>onClick em vez de onclick, e className em vez de class.

// Good
<button onClick={handleClick} className="btn">Click me!</button>

// Bad
<button onclick={handle_click} class="btn">Click me!</button>

5. Sempre feche as tags

Em JSX, você precisa sempre fechar as tags, mesmo que elas não tenham conteúdo. Por exemplo:

// Good
<div></div>

// Bad
<div/>

6. Use tags de fechamento automático para elementos vazios

Se você tiver um elemento que não tenha conteúdo, poderá usar uma tag de fechamento automático em vez de uma tag de abertura e fechamento. Por exemplo:

// Good
<img src="my-image.jpg" alt="My Image"/>

// Bad
<img src="my-image.jpg" alt="My Image"></img>

Por que o JSX é importante para o desenvolvimento da web?

O JSX é importante para o desenvolvimento da web porque:

  1. Ele permite que os desenvolvedores criem interfaces de usuário de uma forma mais intuitiva e familiar.
  1. Em vez de manipular o DOM diretamente, os desenvolvedores podem usar o JSX para descrever a estrutura da interface do usuário de uma forma mais parecida com a escrita em HTML.
  1. Isso permite um desenvolvimento mais eficiente e flexível. Como o JSX é apenas JavaScript, os desenvolvedores podem aproveitar todos os recursos do JavaScript para criar interfaces de usuário mais complexas e dinâmicas.
  1. Ele é uma parte importante da biblioteca React, que é uma das opções mais populares para a criação de interfaces de usuário no desenvolvimento moderno da web. Se quiser usar o React, você precisará aprender JSX.

Resumo

JSX é uma extensão de sintaxe para JavaScript que permite aos desenvolvedores escrever marcações semelhantes a HTML dentro de um arquivo JavaScript. Isso facilita a criação de interfaces de usuário dinâmicas e interativas para aplicativos da web.

Você aprendeu algumas regras a serem seguidas ao usar o JSX – seguindo essas regras, podemos escrever um código limpo, legível e de fácil manutenção que seja consistente com as convenções de nomenclatura do JavaScript.