Práticas recomendadas ao usar JSX

Olá, alunos! No tópico anterior, aprendemos sobre a incorporação de JavaScript em JSX.

Aqui, vamos aprender sobre algumas práticas recomendadas ao usar JSX.

Ao seguir essas práticas, você poderá escrever código JSX mais eficiente e legível.

Use tags JSX concisas

Use tags JSX concisas para tornar seu código mais legível.

Por exemplo, em vez de usar a seguinte tag:

<div style={{ color: "red" }}>
  Olá, mundo!
</div>

Use a seguinte tag:

<div style="color: red">Olá, mundo!</div>

Uso de variáveis

Use variáveis para armazenar valores que você precisa usar várias vezes em seu código JSX.

Isso tornará seu código mais legível e fácil de manter.

Por exemplo, o seguinte código é melhor do que o código abaixo:

<div>
  <h1>Olá, {nome}</h1>
  <p>Meu nome é {nome}</p>
</div>

const nome = "Fulano";

<div>
  <h1>Olá, {nome}</h1>
  <p>Meu nome é {nome}</p>
</div>

Uso de funções

Use funções para agrupar código JSX relacionado.

Isso tornará seu código mais modular e fácil de reutilizar.

Por exemplo, o seguinte código é melhor do que o código abaixo:

<div>
  <h1>Olá, {nome}</h1>
  <p>Meu nome é {nome}</p>
</div>

const renderNome = (nome) => (
  <div>
    <h1>Olá, {nome}</h1>
    <p>Meu nome é {nome}</p>
  </div>
);

renderNome("Fulano");

Use a sintaxe de blocos para incorporar JavaScript

A sintaxe de blocos é uma maneira mais concisa e legível de incorporar JavaScript em JSX.

Por exemplo, em vez de usar a seguinte tag:

<div>
  {
    // Incorporação de JavaScript
    const message = "Olá, mundo!";
  }
</div>

Use a seguinte tag:

<div>
  {(
    // Incorporação de JavaScript
    const message = "Olá, mundo!";
  ) => (
    // Renderização do código JavaScript
    <p>{message}</p>
  )}
</div>

Evite usar tags JSX vazias

Se você não precisa renderizar nada dentro de uma tag JSX, use o null em vez de uma tag vazia.

Por exemplo, o seguinte código é melhor do que o código abaixo:

<div>
  <h1></h1>
  <p></p>
</div>

<div>
  <h1>{null}</h1>
  <p>{null}</p>
</div>

Use TypeScript para tipar seu código JSX

TypeScript é uma linguagem de programação que fornece tipagem estática.

Usar TypeScript para tipar seu código JSX pode ajudar a evitar erros e tornar seu código mais legível.

Conclusão

Ao seguir essas práticas recomendadas, você poderá escrever código JSX mais eficiente e legível.

Espero que vocês tenham entendido as práticas recomendadas ao usar JSX.

No próximo módulo, vamos aprender com mais detalhes os componentes no React.

Componentes são blocos de construção fundamentais do React.

Com componentes, podemos criar interfaces do usuário reutilizáveis ​​e fáceis de manter.

Qualquer dúvida deixa o seu comentário.

Até lá, continuem estudando!