Matematika dalam Kurung Kurawal

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 7 dari 42.

Kurung kurawal tidak hanya menampung variabel: semua ekspresi JavaScript bisa digunakan. Matematika, method string, pemanggilan fungsi:

const price = 6;
const quantity = 5;

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

React mengevaluasi ekspresi dan menampilkan hasilnya. Kamu dapat menggabungkan teks dan kurung kurawal dengan bebas dalam satu elemen:

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

Satu hal yang TIDAK termasuk di dalam kurung kurawal: pernyataan. if, for, dan yang sejenisnya bukan ekspresi. Kita akan membahas penggantinya yang kompatibel dengan JSX di bab berikutnya.

Tantangan

Pemula

Buat tanda terima kecil. Komponen ini mendefinisikan price dan quantity.

Buat paragraf dengan id="total" menampilkan Total: 30, tetapi hitung angkanya dari variabel menggunakan *, jangan ketik 30.

Coba sendiri

<!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>