İki Prop

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

Bileşenler rutin olarak birden fazla prop alır. Hepsini ayrıştırmada (destructuring) listeleyin ve JSX içine karıştırın:

function Product({ name, price }) {
    return <p>{name} costs ${price}</p>;
}

<Product name="Laptop" price={999} />
// renders: Laptop costs $999

Tiplere dikkat edin: name bir string (tırnak işaretleri), price ise bir sayıdır (süslü parantezler). Sayıları sayı olarak tutmak, onlar üzerinde hesaplama yaptığınız anda önem kazanır.

Görev

Kolay

Mağaza için bir ürün satırı oluşturun.

Product bileşeninin name ve price prop'larını almasını ve paragrafı içinde {name} costs ${price} alanını render etmesini sağlayın.
App içinde, name değeri Laptop ve price değeri 999 (sayı olarak!) olan bir Product render edin. Sayfada Laptop costs $999 görünmelidir.

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>