Özet - Bileşen iskeleti

Tüm şablon teknikleriyle bir bileşen iskeleti yazarsın.

Şablon tekniklerini birleştir

Bu grupta beş tekniği öğrendin: sunucu ve istemci tarafı render'ın ortak hedefi HTML; partial'la tekrar eden parçalar; data-* ile davranış verisi; id ve data-* ile hydration hook'ları; <noscript> ile yedek içerik.

Şimdi bunları bir bileşen iskeletinde birleştirme sırası. Önce anlamsal bir kök etiket ve partial yapısı kur; sonra id ve data-* ile hook'ları ekle; son olarak <noscript> ile JavaScript'siz yedek koy. Bu sıra, hem sunucu tarafı hem istemci tarafı için sağlam bir temel verir.

Uygulama Bir bileşen iskeleti yaz

Body içine bir yorum kartı iskeleti yaz: data-id="12" özniteliğine sahip bir <article> partial; içinde dolu bir <h3>, dolu bir <p> ve data-action="reply" özniteliğine sahip, href'i dolu bir <a>. Article'dan sonra bir <noscript> etiketi ve içinde href'i dolu bir <a> bağlantısı (metin 'Yorumları başka yerden oku'). Bağlantılar /yazilar/12 yoluna gitsin.

Örnek çözümü göster

<body>
  <article data-id="12">
    <h3>Bahçe Notları</h3>
    <p>İlk domatesler olgunlaştı, bu hafta hasat zamanı.</p>
    <a href="/yazilar/12" data-action="reply">Yanıtla</a>
  </article>
  <noscript>
    <a href="/yazilar/12">Yorumları başka yerden oku</a>
  </noscript>
</body>

Kendini test et

Tekniği nerede yaşadığına göre eşleştir

partial

Tekrar eden kart kalıbı
data-*

Davranış verisi taşır
id

Tekil hook noktası seçer
noscript

JavaScript'siz yedek

Bileşen iskeletini tamamla

<article data-id="7">
  <h3>Başlık</h3>
  <p>Özet</p>
</article>
<____>
  <a href="/yazilar/7">Yazıyı oku</a>
</noscript>

Cevabı göster

<article data-id="7">
  <h3>Başlık</h3>
  <p>Özet</p>
</article>
<noscript>
  <a href="/yazilar/7">Yazıyı oku</a>
</noscript>

Hangi kombinasyon sağlam bir bileşen iskeleti verir?
- Yalnızca div ve span
- Yalnızca inline stiller
- Partial + id + data-* + noscript
- Yalnızca script etiketleri
Cevabı göster

Partial + id + data-* + noscript — Doğru. Partial yapı, id/data-* hook, noscript yedek birlikte sağlam bir iskelet verir.

Sıradaki ders: Proje: Dashboard widget

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler