React için bilinmesi gereken JavaScript

ismail simsek
Aug 24 · 3 min read
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.

ismail simsek

Written by

Game Developer — Continuous Learner

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade