Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan React Native projesinde refactor etme sürecini anlatan bir yazılım eğitim içeriğidir.
- Videoda, büyük projelerde tekrar eden kodları komponent haline getirerek toparlama süreci adım adım gösterilmektedir. İlk olarak app.js dosyası navigation ve tema ayarları gibi bölümlere ayrılır, ardından search sayfasındaki suggestion card ve flat list kodları komponent haline getirilir. Son olarak ana sayfadaki animasyonlu arama kutusu ve status bar'ı ayrı komponentlere dönüştürülerek, ana sayfanın 83 satıra indirgenmesi gösterilir.
- Eğitim, state yönetimi, prop kullanımı ve komponentler arasındaki iletişim konularını ele alarak, kod tekrarını önlemek için tüm parçaları komponent yapmanın önemini vurgulamaktadır. Ayrıca geliştirme sürecinde önce ilerleyip sonra refactor etmenin gerekliliği belirtilmektedir.
- 00:01Proje Refactorasyonu Giriş
- Büyük projelerde ara ara refactor ihtiyaçları olur, önceden düşünemediğimiz şeyleri hızlı yazıp çalıştırdıktan sonra arkayı toparlayarak ilerleriz.
- Bu projede büyük bir refactor durumu yok, sadece search sayfasında container'ın içine tekrar eden kodları komponent haline getirmek gerekiyor.
- Komponent haline getirildiğinde sayfa sadece container görevini görür ve servise gidip data alıp komponenti beslemek yeterlidir.
- 01:00Navigation Komponenti Oluşturma
- App.js dosyasında hem navigasyon hem de tema ayarları bulunuyor, bunları ayırarak navigation.js dosyası oluşturuyoruz.
- Top navigator kısmını navigation.js dosyasına taşıyoruz ve app.js'ten temizliyoruz.
- Navigation container kısmını da silerek navigation.js dosyasını sadece navigasyonlarla ilgili kodlarla dolduruyoruz.
- 03:29Suggested Card Komponenti Oluşturma
- Screen sayfasında birbirini tekrar eden kodlar var, özellikle kelime ve altındaki kart bir deyim ve altındaki kart birbirinin aynısı.
- Bu tekrar eden kodları bir komponent haline getirerek suggestion card.js dosyası oluşturuyoruz.
- Suggested card komponentine title, onPress ve data prop'larını alarak tekrar eden kodları temizliyoruz.
- 05:35Suggested Card'ı Ana Sayfaya Uygulama
- Oluşturulan suggestion card komponentini ana sayfaya çağırarak kod tekrarından kurtuluyoruz.
- Ana sayfadaki alt kartları düzenleyerek title, data ve onPress prop'larını propertilere dönüştürüyoruz.
- Suggested card'ı kopyalayıp detaya gidecek şekilde düzenleyerek kod bloğunu daha da temizliyoruz.
- 08:34Search History List Komponenti Oluşturma
- Flat list'in kendisi de refactor edilebilir, search'e tıkladığımızda gelen liste için search history list.js dosyası oluşturuyoruz.
- Search history list komponentine data prop'unu alarak listeyi gösteriyoruz.
- Ana sayfadaki flatlist'i search history list komponentiyle değiştirerek sayfayı daha temiz hale getiriyoruz.
- 11:53Home Search Komponenti Oluşturma
- Yukarıdaki kırmızı alanın tamamı search box ile beraber bir komponent olabilir.
- Home search.js dosyası oluşturarak bu alanı komponent haline getiriyoruz.
- Home search komponentine background, box, icons ve search prop'larını alarak karmaşık bir refactor işlemi başlatıyoruz.
- 14:06Komponent Oluşturma ve State Yönetimi
- Animasyonlu ana sayfadan arama kutusu ve ilgili state'ler (bg opacity, herohete) ayrı bir komponente taşınıyor.
- "is search focus" durumu ana sayfada kalması gerektiği için prop olarak gönderiliyor.
- Komponentler olabildiğince container'e haber verir, kendi içinde state tutmamaya çalışır; sadece kendi ile alakalı state'leri tutar.
- 16:51Komponent İletişiminin Test Edilmesi
- Home search komponenti ana sayfaya getiriliyor ve gerekli prop'lar (is search focus, on search focus) gönderiliyor.
- Sayfaya refresh atıldığında focus olduğunda status bar'ın siyah-beyaz değişimi kontrol ediliyor.
- Komponentler arasında iletişim mükemmel çalışıyor; bir komponent değişiklik yapınca yukarıya haber veriyor, yukarıda değişiklik yapınca arama kutusuna haber veriyor.
- 18:20Refactor İşlemi ve Sonuç
- Ana sayfada gereksiz kodlar kaldırılıyor ve toplamda 83 satıra düşürülmüş.
- Tüm parçalar komponent yapılarak kod tekrarı engelleniyor.
- Geliştirme sürecinde önce ilerleyip sonra refactor etmek, yanlış bir zeminin üzerine doğru kat çıkamamak için önemlidir.