Meydan okuma: Hava durumu kartı
- React kursu
- Başlangıç
- Ders 81/84
- 6 dk
Bir şehir adı prop alıp sıcaklık ve durum gösteren bileşeni yazarsın.
Meydan okuma: Hava durumu kartı
Bu meydan okuma, WeatherCard bileşenini yazmanı istiyor. city, temp ve condition olmak üzere üç prop alsın. Hava çok soğuksa (temp < 0) kart arka planı mavi, değilse türüncü olsun.
className'i ternary ile belirle: temp < 0 ? "cold" : "warm". İçerikte <h2>{ '{ city }' }</h2>, <p>{ '{ temp }' }°C</p> ve <p>{ '{ condition }' }</p> göster.
Props destructuring ve koşullu render'ı birleştirme zamanı. İpucu az; öğrendiklerini uygula.
Uygulama WeatherCard yaz
Aşağıdaki iskeleti tamamla. WeatherCard bileşeni yaz. ({ '{ city, temp, condition }' }) parametresi alsın. <div className={ '{ temp < 0 ? "cold" : "warm" }' }> ile kök div'i oluştur. İçinde <h2>{ '{ city }' }</h2>, <p>{ '{ temp }' }°C</p> ve <p>{ '{ condition }' }</p> olsun. Dışa aktar.
Başlangıç kodu
// WeatherCard bileşenini buraya yazÖrnek çözüm
function WeatherCard({ city, temp, condition }) {
return (
<div className={temp < 0 ? "cold" : "warm"}>
<h2>{city}</h2>
<p>{temp}°C</p>
<p>{condition}</p>
</div>
);
}
export default WeatherCard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sıcaklık 0'dan küçükse hangi sınıf?
- hot
- warm
- cold Doğru cevap
- cool
Açıklama: temp < 0 ise "cold" sınıfı seçilir.
2 Hava durumu parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
city |
Şehir |
temp |
Sıcaklık |
condition |
Durum |
cold |
Düşük sıcaklık |