Buradasın
React ve TypeScript ile Forward Ref ve Use Imperative Handle Eğitimi
youtube.com/watch?v=EtcHrkZ8s0EYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, eğitmen React ve TypeScript kullanarak forward ref ve use imperative handle konularını adım adım göstermektedir.
- Video, öncelikle forward ref kavramını örneklerle açıklamaktadır. Eğitmen, bir buton komponenti oluşturarak, bu komponentin referansını nasıl alabileceğimizi ve bu referansı kullanarak komponentin metodlarına nasıl erişebileceğimizi göstermektedir. Daha sonra use imperative handle konusuna geçerek, bu yöntemin özellikle tuhaf komponentler, modalar veya data table gibi bileşenler için nasıl faydalı olabileceğini anlatmaktadır. Video boyunca kod yazarak ve örnekler üzerinden konular somutlaştırılmaktadır.
- 00:01React ve TypeScript ile Forward Ref ve Use Imperative Handle
- Bu derste React ve TypeScript kullanarak forward ref ve use imperative handle konuları işlenecek.
- Öncelikle forward ref kavramı örnekle anlatılacak.
- 00:12Buton Komponenti Oluşturma
- src klasörüne "components" adında bir klasör oluşturulup "buton.tsx" dosyası ekleniyor.
- Buton komponenti props alarak oluşturuluyor ve "btn" sınıfı ile CSS stilleri uygulanıyor.
- Butona tıklandığında "alert('Butona tıklandı')" mesajı ekrana yazdırılıyor.
- 04:14Ref Kullanımı ve Sorunları
- React'te refler kullanılarak HTML elemanlarının referansına erişim sağlanabilir.
- Buton komponentinde useRef ile referans oluşturulduğunda, normal buton üzerinde ref'e erişim sağlanamıyor.
- Bu sorunlara çözüm için forward ref kullanılıyor.
- 06:12Forward Ref Kullanımı
- Buton komponenti "forwardRef" ile oluşturuluyor ve referans alınıyor.
- Forward ref sayesinde normal bir React komponenti oluşturulup, referans üzerinden erişilebiliyor.
- Butona tıklandığında referans üzerinden buton komponentinin "alert" metodu çalıştırılabiliyor.
- 10:20Use Imperative Handle Kullanımı
- Use imperative handle, component referansından metotlara erişim sağlama problemi için kullanılıyor.
- Use imperative handle ile referans ve callback fonksiyonu kullanılarak component metodlarına erişim sağlanabiliyor.
- Bu yöntem özellikle data table gibi componentlerde referans üzerinden metotlar çalıştırılabilir.