1. Adım: Kart Yapısı

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

Görev

Kolay

Kart iskeletini App.jsx dosyasında oluşturun:

className="card" olan bir <div>.
İçinde: id="profile-name" olan bir <h2> ve Ada Lovelace metni.
İsmin altında: id="profile-bio" olan bir <p> ve First programmer metni.

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şeniniz Tek Ebeveyn Kuralı JSX, HTML Değildir Özet: React ile Tanışın

4Props

Props Nedir?Props Aktarma İki Prop Aynı Bileşen, Yeni Veri Children Prop'u Özet: Props

7Koşullar ve Listeler

Üçlü İşleç ile Ekrana Basma && ile Gösterme Liste Ekrana Basma Anahtarların Önemi Filtrele, Sonra Eşle (Map)Özet: Koşullar ve Listeler

2JSX İfadeleri

Süslü Parantezler Parantezler İç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 Sayma Durum ile Değiştirme Bağımsız Durum Özet: Durum ve Olaylar

8Proje: Profil Kartı

1. Adım: Kart Yapısı2. Adım: Props ile Kart 3. Adım: Beğen Butonu 4. Adım: Takip Et Durumu

3Bileşenler

Yapı Taşları İkinci Bileşeniniz Bileşenleri Yeniden Kullanma Sayfa Oluşturma Özet: Bileşenler

6Formlar ve Girdiler

Kontrollü Girdiler Girdiyi Yansıtma Karakter Sayacı Temizle Butonu Özet: Formlar ve Girdiler