Operazioni matematiche tra parentesi graffe

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 7 di 42.

Le parentesi graffe non contengono solo variabili: funziona qualsiasi espressione JavaScript. Operazioni matematiche, metodi delle stringhe, chiamate di funzione:

const price = 6;
const quantity = 5;

return <p>Total: {price * quantity}</p>;
// mostra: Total: 30

React valuta l'espressione e visualizza il risultato. Puoi combinare liberamente testo e parentesi graffe in un elemento:

<p>{quantity} items at {price} each</p>

Una cosa che NON va racchiusa tra parentesi graffe: le istruzioni. if, for e simili non sono espressioni. Incontreremo i loro sostituti compatibili con JSX in un capitolo successivo.

Sfida

Principiante

Crea una piccola ricevuta. Il componente definisce price e quantity.

Fai in modo che il paragrafo con id="total" visualizzi Total: 30, ma calcola il numero a partire dalle variabili con *, non scrivere 30.

Provalo tu

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>