Menu
Coddy logo textTech
ÖĞRENMEYE BAŞLA
flag Tr iconTürkçedown icon

Özet: Koşullar ve Listeler

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

challenge icon

Görev

Orta

Bölüm özeti: Bu bölümdeki her şeyi kullanarak verilerden bir görev panosu oluşturun.

  1. Bileşen bir tasks dizisi tanımlar. <ul id="done-list"> içinde, tamamlanmış her görev için bir <li> oluşturun: önce filter, ardından map.
  2. Her <li>, görevin text değerini gösterir ve id değerini key olarak kullanır.
  3. Listenin üzerinde, id="badge" değerine sahip bir <span> öğesini 2 done metniyle oluşturmak için && kullanın (sayıyı filtrelenmiş dizinin length değerinden oluşturun!), ancak yalnızca en az bir görev tamamlandığında.

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>

Temeller bölümündeki tüm dersler

1React ile Tanışın

React Nedir?İlk BileşeninizTek Ebeveyn KuralıJSX, HTML DeğildirÖzet: React ile Tanışın

4Props

Props Nedir?Props Aktarmaİki PropAynı Bileşen, Yeni VeriChildren Prop'uÖzet: Props

7Koşullar ve Listeler

Üçlü İşleç ile Ekrana Basma&& ile GöstermeListe Ekrana BasmaAnahtarların ÖnemiFiltrele, Sonra Eşle (Map)Özet: Koşullar ve Listeler

2JSX İfadeleri

Süslü ParantezlerParantezler İçinde Matematiksel İşlemlerÖzniteliklerde Süslü Parantez KullanımıJSX İçinde Fonksiyon ÇağırmaÖzet: JSX İfadeleri

5Durum ve Olaylar

Durum (State) Nedir?Tıklama SayacıAdımlarla SaymaDurum ile DeğiştirmeBağımsız DurumÖzet: Durum ve Olaylar

8Proje: Profil Kartı

1. Adım: Kart Yapısı2. Adım: Props ile Kart3. Adım: Beğen Butonu4. Adım: Takip Et Durumu

3Bileşenler

Yapı Taşlarıİkinci BileşeninizBileşenleri Yeniden KullanmaSayfa OluşturmaÖzet: Bileşenler

6Formlar ve Girdiler

Kontrollü GirdilerGirdiyi YansıtmaKarakter SayacıTemizle ButonuÖzet: Formlar ve Girdiler