Incorporação de JavaScript em JSX

Olá, alunos! No tópico anterior, aprendemos sobre a sintaxe e os benefícios do JSX.

Nessa aula, vamos aprender sobre a incorporação de JavaScript em JSX.

Com a incorporação de JavaScript em JSX, podemos escrever código JavaScript dentro de tags JSX.

Isso nos permite criar componentes React mais poderosos e flexíveis.

Incorporação de JavaScript básico

A incorporação de JavaScript básico é feita usando a sintaxe { e }.

Por exemplo, o seguinte código incorpora um trecho de código JavaScript em uma tag <div>:

<div>
  {
    // Código JavaScript
    const message = "Olá, mundo!";
  }
</div>

Este código renderiza a seguinte saída:

Olá, mundo!

Incorporação de JavaScript avançado

Também podemos incorporar JavaScript avançado em JSX usando a sintaxe de blocos.

Por exemplo, o seguinte código incorpora um trecho de código JavaScript em uma tag <div> usando a sintaxe de blocos:

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

Este código renderiza a seguinte saída:

Olá, mundo!

Exemplo de incorporação de JavaScript

Vamos ver um exemplo de como usar a incorporação de JavaScript para renderizar uma lista de produtos:

const products = [
  {
    name: "Produto 1",
    price: 100,
  },
  {
    name: "Produto 2",
    price: 200,
  },
];

const MyComponent = () => {
  return (
    <div>
      <ul>
        {products.map((product) => (
          {
            // Incorporação de JavaScript
            const productPrice = product.price * 1.1;

            // Renderização do código JavaScript
            <li key={product.id}>{product.name} - R$ {productPrice}</li>
          })}
      </ul>
    </div>
  );
};

Este código renderiza uma lista de produtos com os preços aumentados em 10%.

O código usa a incorporação de JavaScript para calcular o preço aumentado do produto e renderizá-lo na lista.

Conclusão

No tópico de hoje, aprendemos sobre a incorporação de JavaScript em JSX.

Com a incorporação de JavaScript, podemos escrever código JavaScript dentro de tags JSX.

Isso nos permite criar componentes React mais poderosos e flexíveis.

Espero que vocês tenham entendido a incorporação de JavaScript em JSX, caso fique com dúvida deixe um comentário.