Parantezler İçinde Matematiksel İşlemler

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 7 / 42.

Süslü parantezler yalnızca değişkenleri tutmakla kalmaz: herhangi bir JavaScript ifadesi çalışır. Matematiksel işlemler, string metotları, fonksiyon çağrıları:

const price = 6;
const quantity = 5;

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

React ifadeyi değerlendirir ve sonucu render eder. Metin ve süslü parantezleri tek bir eleman içinde serbestçe birleştirebilirsiniz:

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

Süslü parantezlerin içine kesinlikle GİRMEYEN bir şey: deyimler (statements). if, for ve benzerleri ifade (expression) değildir. Bunların JSX uyumlu alternatifleriyle sonraki bir bölümde karşılaşacağız.

Görev

Başlangıç

Küçük bir fiş oluşturun. Bileşen price ve quantity değişkenlerini tanımlar.

id="total" id'li paragrafın Total: 30 render etmesini sağlayın, ancak sayıyı 30 olarak yazmayın, değişkenlerden * ile hesaplayın.

Kendin dene

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