Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan React programlama dili eğitim içeriğidir. Eğitmen, React'te compound component (bileşik bileşen) kavramını ve popover komponentlerinin nasıl oluşturulacağını adım adım göstermektedir.
- Video, compound component'in ne olduğunu ve avantajlarını açıklayarak başlıyor, ardından Tailwind CSS ile popover komponentlerinin nasıl oluşturulacağını gösteriyor. Eğitmen, kendi popover komponentini yazarak context kullanarak yönetilebilen bir popover oluşturmayı, kutu içine ve dışına tıklama kontrolünü, useEffect hook'unun yan etkilerini temizleme ve conditional class'ların nasıl kullanılacağını kod örnekleriyle açıklıyor.
- Eğitim içeriğinde ayrıca ref kullanımı, close event'i çağırmak için gerekli kod değişiklikleri, class name'lerin yönetimi ve Tailwind CSS ile basit CSS kullanımı da gösterilmektedir. Video sonunda, izleyicilere popover'ın daha genel bir fonksiyon içinde nasıl kullanılacağı konusunda ödev verilmektedir.
- React'te Compound Component Nedir?
- Bu derste React'te compound component (bileşik bileşen) kavramı ve callback'ler hakkında bilgi verilecek.
- Compound component, işlevselliği olan ancak stili olmayan komponentler sunan bir yapıdır.
- Bu yapı, kodun okunabilirliğini artırır ve yazarken işi kolaylaştırır.
- 01:25Popover Örneği
- Popover, bir yere basıldığında açılıp, dış bir yere basıldığında kapanan bir komponenttir.
- Popover, tek bir komponentten birden fazla çıldırını yönetmeyi sağlar.
- Bu yapı, context oluşturup paylaşılabilir ve kodun daha düzenli olmasını sağlar.
- 03:48Compound Component Oluşturma
- Örnek için popover komponenti oluşturulacak ve bu komponentin altında buton ve panel fonksiyonları yer alacak.
- Popover komponentinin iki çıldırını vardır: buton ve panel.
- Buton ve panel fonksiyonları, popover komponentinin çıldırlarını temsil eder.
- 06:49Buton ve Panel Fonksiyonları
- Buton fonksiyonu, props ve çıldırını alarak bir buton oluşturur.
- Buton fonksiyonuna class veya stil gibi propslar verilebilir.
- Panel fonksiyonu, open state'ine göre çıldırının birinci elemanını döndürür.
- 09:15Context Kullanımı
- Popover komponentinde open ve set open state'leri tanımlanır.
- Context kullanılarak toggle metodu oluşturulur ve buton fonksiyonuna eklenir.
- Butona tıklandığında toggle metodu çalışarak open state'i true veya false yapar.
- 10:56JavaScript'te Kompozisyon Yolu Kullanımı
- JavaScript'te bir kutucuğun içinde mi yoksa dışına mı tıklandığını anlamak için kompozisyon yolu kullanılır.
- Dokümana click event'i yazıp, kompozisyon yolu içinde includes ile elemanın olup olmadığını kontrol edebiliriz.
- Bu kontrol, close event'i çağırmak için kullanılır ve komponent ilk kez çalıştığında document add event listener'a click handle metodu eklenir.
- 12:20Ref Kullanımı ve Tıklama Kontrolü
- Elemana erişmek için ref eklenir ve panel ref kullanılarak panelin içine tıklanıp tıklanmadığı kontrol edilir.
- Konsolda test edildiğinde, dışına tıklandığında "dışına tıkladım", içine tıklandığında "içine tıkladım" mesajı görüntülenir.
- Dışa tıklandığında close event'i çalıştırılacak ve bu için butona da ref verilerek kontrol koşulları oluşturulur.
- 14:43React'te Clean-up İşlemleri
- React'te useEffect fonksiyonunda yan etkileri temizlemek için clean-up işlemleri yapılması gerekiyor.
- Komponent gizlendiğinde click event'i ile birlikte temizlenmesi, performans sorunlarını önler.
- Clean-up işlemleri, useEffect'te return edilen fonksiyon içinde yapılmalıdır.
- 16:18Callback Fonksiyonları Kullanımı
- Callback fonksiyonları, komponentin dışından erişim sağlamak için kullanılır.
- Type-op ile kontrol edilerek fonksiyonun tipi belirlenir ve uygun şekilde çalıştırılır.
- Callback fonksiyonları, komponentin dışından close gibi metodlara erişim sağlar.
- 18:18Open/Close Durumları ve Class Name Kullanımı
- Panelde open/close durumlarını kontrol etmek için callback fonksiyonları kullanılabilir.
- Class name göndererek, open durumunda ek class name eklenebilir.
- Type-op ile kontrol edilerek class name'in fonksiyon olup olmadığı belirlenir ve uygun şekilde çalıştırılır.
- 21:03Type Kontrolü ve Tailwind Kullanımı
- Komponentlerin sıralamasını değiştirirken type kontrolü yapılmalıdır.
- Filter ve find fonksiyonları kullanılarak type'a göre eşleştirme yapılabilir.
- Tailwind CSS kullanılarak basit CSS ile kullanım gösterilebilir.
- 23:24Tailwind ve Class Names Kullanımı
- Tailwind kullanılarak CSS dosyasına değişiklikler yapıldı ve sunucu yeniden başlatıldı.
- Class Names paketi koşullu class eklemeyi sağlıyor ve bu örnekte buton için kullanıldı.
- Butona "h1 rounded bg-blue-500px 4 text-m font-medium text-white" gibi CSS özellikleri eklendi.
- 25:14Popover Oluşturma
- Popover için fragment oluşturuldu ve create element ile eklendi.
- Popover için "relative" class name eklendi ve absolute konumlandırma için "top: full", "translate-y: 1m", "200px", "bg-white", "border: blue-500", "rounded" özellikleri kullanıldı.
- İki popover oluşturuldu ve her birinin çalışması birbirinden bağımsız olarak gerçekleşti.
- 27:30Ödev ve Kapanış
- Bu yapı bir compound component (bileşik bileşen) olarak tanımlandı.
- Öğrencilere "open", "close" gibi fonksiyonları daha genel bir fonksiyona nasıl entegre edeceklerini ödev olarak verildi.
- Kanal sahibi 77.92 aboneye sahip olduğunu ve senenin sonuna kadar 100 bin aboneye ulaşmayı hedeflediğini belirtti.