Ö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.