React için bilinmesi gereken JavaScript

Photo by Benjamin Voros

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.

MDN: Template Literals

Shorthand property names

Bu çok yaygın ve kullanışlı ki bu olmadan n’apardım bilmiyorum.

MDN: Object initializer New notations in ECMAScript 2015

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.

MDN: Arrow Functions

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

MDN: Destructuring assignment

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.

MDN: Default parameters

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.

MDN: Spread syntax

MDN: Rest parameters

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.

MDN: import

MDN: export

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.

MDN: Conditional (ternary) operator

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:

MDN: Array

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.

MDN: Promise

MDN: async function

MDN: await

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.

Game Developer — Continuous Learner

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store