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.