React için bilinmesi gereken JavaScript
React’i öğrenirken ve kullanırken hangı JavaScript özelliklerini biliyor olmalısınız
Makalenin İngilizce aslı: JavaScript to Know for React
Kullandığım diğer framework’lere (geliştirme kütüphaneleri) nazaran React’de sevdiğim şey JavaScript ile ne kadar çok uğraştığınız. Bir şablon dili yok (JSX anlaşılır JavaScript koduna çevriliyor). Bileşen/komponent (component) API(Application Programming Interface = Uygulama Geliştirme Arayüzü) Reack Hooks ıle daha da basitleşti. Ve framework, temel UI (Kullanıcı arayüzü) işleri dışında size çok az soyutlaştırma sunuyor. (Yani ortaya çıkması beklenen iş için yazılımcıya dert olabilecek pek çok detay framework tarafından hallediliyor)
Bunun yüzden, React ile uygulama geliştirmek için JavaScrıpt özelliklerini/yeniliklerini öğrenmek oldukça muhim. Şimdi size öğrenmek için üzerinde biraz zaman harcamanızı tabsiye edeceğim bir kaç özellikten bahsedeceğimç Bu sayede React ile çalışırken mümkün olduğunca verimli olabilirsiniz.
Template Literals
Template Literal’ı özel güçleri olan string olarak düşünebiliriz.
Shorthand property names
Bu çok yaygın ve kullanışlı ki bu olmadan n’apardım bilmiyorum.
Arrow functions
Arrow functions fonksiyon tanımlamanın bir başka yolu. Fakat bazı anlamsal farklılıkları var. Ne mutlu bize ki, eğer (sınıfların(class) yerine) hooks kullanıyorsak, bunlar için endişelenmemize gerek yok. Fakat arrow functions bizim zahmetsizce verı döndürmemize izin verir bu yüzden sıkça kullanmak isteriz.
Yukarıdaki örnekte bir şeye, parantezlere, dikkat etmemiz gerekiyor. Bu arrow functions’ın, JSX ile çalışırken bize sağladıgı güzel yeteneklerinden birisi.
Destructuring
Destructurıng benim muhtemelen en sevdiğim JavaScrıpt özelliklerinden birisi. Obje’leri ve dizileri her zaman parçalarına bölerim (ve eğer useState kullanıyorsanız muhtemelen siz de yapıyorsunuz).
Kesinlikle yukarıdaki makaleyi okuyun. Kesin yeni bir şey öğrenirsiniz. Bitirdiğinizde aşağıdaki kodu tek satır destructuring ile yeniden düzenlemeye çalışın.
Parameter defaults
Bu benim sürekli kullandığım başka bir özellik. Fonksiyonlarınızın varsayılan değerlerini bildirmenin oldukça güçlü bir yolu.
Rest/Spread
“… “ söz dizimi koleksiyonlar üzerinde çalışıyormuş gibi düşünülebilir. Ben sürekli kullanıyorum ve size de nasıl ve nerede kullanılacağını öğrenmenizi şiddetle tavsiye ediyorum. Farklı durumlarda farklı anlamlar alabiliyor. Farklılıkları öğrenmeniz yararınıza.
ESModules
Modern araçlarla uygulama geliştiriyorsanız, modülleri desteklediğini varsayıyorum, söz diziminin nasıl çalıştığını bilmek iyi bir fikirdirç. Çünkü çoğu uygulama, önemsiz boyutlardakiler bile, kodun yeniden kullanımı ve organizasyonu için modülleri kullanmalıdır.
Bir başka kaynak olarak bu konudaki bir konuşmamı buradan izleyebilirsiniz.
Ternaries
Bunları seviyorum. Oldukça açıklayıcılar, özellikle JSX içinde.
Prettier’den önce kodunu temizlemek için ternarry kullanmak zorunda kalan insanlarınö ternarry’den tiksindiklerini farkettim. Hala prettier kullanmıyorsanız eğer size kullanmanızı şiddetle tavsiye ederim. Ternarry’leri daha anlaşılır hale getiriyor.
Array Methods
Diziler muhteşemler ve ben dizi metotlarını sürekli kullanıyorum. Muhtemelen en çok kullandıklarım şunlar:
- find
- some
- every
- includes
- map
- filter
- reduce
Bir kaç örneğe gözatalım:
Promises and async/await
Bu büyük bir konu. Bu konuda iyi hale gelmek için üzerinde biraz çalışmak gerekiyor. JavaScript ve React içinde Promise’ler her yerdeler. Promise asenkron çalışan (DOM’dan ya da üçüncü parti bir yazılımdan gelen) kodu yönetmenize yardım eder. Async/await ise Promise’lerle daha kolay başetmemizi saülayan özel bir söz dizimi.
Sonuç
Elbette, React uygulamaları geliştirirken yardımcı olan daha pek çok özellik mevcut. Fakat bunlar benim favorilerim. Umarım siz bunları faydalı bulursunuz.
Eğer bu konularda daha derine inmeyi düşünürseniz, size yararlı olabileceğini düşündüğüm, PayPal’da çalışırken gerçekleştirdiğim ve kaydettiğim bir JavaScript Çalışma Atölyesi var.
Başarılar.
