React Nedir ?
Bu Yazı Zafer Ayan’ın ReactJS ile Web ve Mobil Uygulamaları Geliştirme videosunun kendi izniyle bloga çevirilmiş halidir. Birebir çeviri değildir kendi örneklerim ve yorumlamalarım da mevcuttur.
React, kullanıcı arayüzleri oluşturmak için Facebook tarafından geliştirilen deklaratif ve bileşen tabanlı bir JavaScript kütüphanesidir. Web ve mobil gibi bir çok platform için arayüz oluşturmayı sağlar. React açık kaynak bir projedir ve MIT lisanslıdır.
Neden React
- Basit bir öğrenim eğrisine sahip. Bu sayede sıfırdan bir proje çıkarmanız daha kolay olacaktır.
- VDOM(Sanal DOM) gibi kullandığı tekniklerle performanslı bir uygulama geliştirmenizi sağlıyor.
- Bileşen tabanlı olduğu için bileşenlerinizi tekrar tekrar kullanabiliyorsunuz.
- React mimarisinde bileşenler arası veri tek yönde aktığı için bileşenlerinizin bağımlılığını azaltır.
- React DevTool sayesinde kodunuzu debug edebiliyor, bileşenlerinizin hiyerarşini görüyor ve performans analizi yapabiliyorsunuz.
- Web uygulaması geliştirirken mobil uygulamada geliştirebilir oluyorsunuz React Native sayesinde. Bu da sizin içi ekstra bir avantaj sağlar.
- Sektörde kullanımı daha yaygın.
React, Vue, Angular Popülerlik
- Google trendlerde diğer iki rakibine göre daha fazla arama yapılmış react hakkında bu da insanların React’i daha çok merak ettiğini gösteriyor.
- Npm paket indirmelerinde, react rakiplerine göre 5 kat daha fazla indirilmiş.
- Stackoverflow’un 2020 en çok istenen kütüphane anketinde 1. sırada.
JSX Nedir
JSX, JavaScript ve Html entegrasyonunu daha kolay yapabilmek için geliştirilen bir syntax eklentisidir. JSX sayesinde JavaScript kodu içerisinde Html yazabiliyorsunuz, bu da arayüz geliştirirken JavaScriptin tüm olanaklarını kullanabilmenizi sağlıyor.
React yazmak için JSX kullanmak zorunda değilsiniz. Tarayıcınızda JSX kullanamazsınız çünkü bu bir syntax eklentisidir valid bir javascript kodu değildir, babel gibi transcompiler kullanıp bunu valid bir javascript koduna çeviriyoruz. Eğer create-react-app gibi cli toollar ile projelerinizi oluşturursanız bunu cli sizin için projenize ekliyecektir.
JSX’de JavaScript kodu yazmak için kodunuzu süslü parantezler içine yazmalısınız yoksa normal bir text olarak algılar.
Örnek I
ORNEK II
ORNEK III
Component, props, state, hooks kavramları
Component (Bileşen) Nedir ?
Ekrandaki en küçük görsel arabirimi çizmek için gereken kod parçasıdır. Genelde bir HTML veya View ağacı döndürür. Bileşenler sayesinde uygulama daha modüler olur. React’te fonksiyon veya sınıf kullanarak bileşen oluşturabilirsiniz.
Fonksiyon Bileşen Örneği
Sınıf Bileşen Örneği
Sınıf yöntemini kullanırsanız React’in Component sınıfını extend etmelisiniz. Bu şekilde o sınıftan kalıttığınız metodlarla işlem yapabilirsiniz. İster nesne tabanlı programlama paradigmasıyla, ister fonksiyonel programlama paradigmasıyla bileşenlerinizi yazabilirsiniz. Son zamanlarda fonksiyon bileşenler hookslarla beraber çok daha popüler, seçim size kalmış.
Props Nedir ?
Properties(özellikler), kelimesinin kısaltılmasıdır. Bileşenin dinamik ve daha işlevsel olmasını sağlar.
Örnek I
State Nedir ?
Veri tutma mantığı açısından props’a benzer. Propslardan farklı olarak state bileşene özgüdür ve sadece o bileşen tarafından kontrol edilebilir. Değiştiğinde arayüzün de güncelleştirilmesini sağlar ve bu güncellemeler asenkron olarak gerçekleştirilir.
Önemli Not
React’te bileşen her render olduğunda, bileşen kodu baştan aşağı tekrar çalışır. Bu yüzden eğer state ve props yerine normal bir değişken oluşturup kullanırsak bu değişken her seferinde sıfırlanacaktır.
Yukarıdaki örnek uygulamada her saniyede bir counter’ı arttıran bir uygulama ve stop butonu ilede timer’ı durdurması lazım. Ancak bu kodu eğer denerseniz göreceksiniz ki stop butonu işe yaramıyor. Çünkü count değişkeni her değiştiğinde re-render işlemi gerçekleşiyor ve id değişkeni tekrardan undefined’a eşitleniyor.
Fonksiyon Bileşenler Neden Daha Popüler ?
- Propslar sınıflarda mutable’dır. Bu yüzden render işlemi tamamlanmadan önce props değiştiği taktirde beklenenin aksine bir sonuç verebilir. Props’u lokal bir değişkene atayıp bu sorunu çözebilirsiniz. Fonksiyon bileşenlerde ise bu otomatik olarak yapıldığı için böyle bir sorunla uğraşmak zorunda kalmazsınız.
Ornek I
2. JavaScript’te this diğer dillere göre daha farklı çalışmaktadır. This, yazıldığı yeri değil çağırıldığı yeri işaret eder. Örnek üzerinden gidelim.
Yukarıdaki örnekte butona basınca bize App sınıfının contextini print etmesi gerekirken undefined veya windows’u print eder. JSX ile yazdığımız bu kod pure JavaScript’e dönüştürülürken fonksiyon contextini kaybediyor.
Görüldüğü üzere render metodu içinde handleClick fonksiyonu onClick property’sine atanıyor ve contextini kaybediyor. Bu biraz kafa karıştırıcı bir durumdur. Bu sorunu arrow functionla veya özel fonksiyon olan bind ile çözebiliriz. Arrow function diğer fonksiyonlardan farklı olarak çağırıldığı yerin değil yazıldığı yerin contextini taşır.
Çözüm I (Bind)
Çözüm II (Arrow Function)
React Hooks
- Fonksiyonel bileşenlerde state ve lifecycle metotları bulunmadığı için, bu metotların yerine üretilen fonksiyonlardır. Fonksiyonel bileşenlerde state olmadığı için bu mekanizmayı sağlamak amacıyla useState hook’u üretilmiştir, daha önceki örneklerimizde bunu kullandık.
Diğer Hooklar
- useEffect: Bu hook ile bileşenin mount, unmount edildiği zamanları yakalayabiliyoruz. Side effect olan işlemler için kullanılır. Örneğin rest api çağrımı, timer oluşturma, loglama gibi. useState’in aksine render işleminden sonra gerçekleştirilir ui’ı bloklamaz.
- useRef: DOM’a direkt olarak erişim için kullanılır. Kullanım alanları: Focus, text selection ve ya play/pause işlemleri. Animated kullanımında Üçüncü parti DOM kütüphaneleri. Kalıcı değişken oluşturmak. (useRef ile tanımlanan değerler re-render’a rağmen değişmeyen persistent bir değer olur. Ancak bu kullanım tavsiye edilmez.)
React’in bizim burada anlattıklarımız dışında da hookları mevcut bunlara da göz atmanızı ve daha detaylı incelemenizi tavsiye ederim. Ve ayrıca custom hook yazıp projelerinizde kullanabilirsiniz ve ya google üzerinden aratıp başka insanların yazdığı hookları kullanabilirsiniz.
Örnek Kullanımlar
Burada useEffect hook’u ile bileşen render edildikten sonra backend tarafından kullanıcıların listesi alınıyor ve setUsers ile state değişiyor ve tekrar render işlemi gerçekleşiyor. useEffect hook’unun ikinci parametresinde bizden bağımlılıklar dizisini istiyor. Bu bağımlılıklar değiştiği taktirde hook’a verilen fonksiyon tekrar çalışır, eğer bunun sadece bir defa çalışmasını istiyorsak boş dizi vermeliyiz.
VDOM’a giriş, DOM ve VDOM Kavramları
DOM Nedir ?
DOM(Documenet Object Modal): XML veya HTML gibi dokümanın ağaç şeklinde tutulmasıdır. Burada ağaçtaki her düğüm dokümandaki bir elemanı göstermektedir. Dom bizim arayüzü daha kolay yönetmemizi sağlar deklaratifdir. Arka planda bizi ilgilendirmeyen noktaları soyutlar.
Virtual DOM Nedir ?
DOM’un bellekte ligthweight bir şekilde tutulmasına VDOM adı verilir. DOM, web arayüzünün sanallaştırılmış halidir. DOM’un sunduğu API sayesinde arayüzde yapılacak olan değişiklikleri kolaylıkla gerçekleştirebiliriz. VDOM ise DOM’un sanallaştırılmış hali gibi ele alınabilir.
Neden VDOM ?
DOM üzerinde direkt olarak değişiklik yapmak yavaştır. Sürekli DOM üzerine yazıp durma işlemi, uygulamanın performansını düşürmektedir. Bu nedenle React’te, ilgili değişiklikler için her render işleminden sonra bir VDOM oluşurur. VDOM tüm ağacın render edilmesi yerine sadece ilgili elemanın render edilmesini sağlar. React haricinde Vue, Preact, Inferno ve MithrilJS gibi diğer JavaScript framework’lerinde de VDOM kullanılmaktadır.
One-Way Data Flow
Bileşenler arasındaki veri akışı prop’lar aracılığıyla sağlanır. Prop’tan sadece okuma işlemi yapılabilir bu yüzden veri değişikliğinin tek bir noktadan(veri sahibinden) yönetilmesi sağlanır. İnner bir bileşenden props’un değişmesini, güncellenmesini istiyorsak bunu eventlerle parent bileşene bildiriyoruz.
Bu fotoğraf https://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660 adresinden alınmıştır.
Örnek I
Örnek II
Problem Var
Burada bir problem var bir bileşenden diğerine prop aktarılırken ara bileşenler var ise bunlara da bu propları geçirmek zorunda kalırız. Bu da daha fazla bileşen üzerinde değişiklik yapmanıza, oynamanıza sebeb olur.
Context API
Context API, propslarda bahsettiğimiz problemi gidermek için geliştirilmiştir. Context ile propsları iç içe aktarma yapmamıza gerek kalmadan istediğimiz bileşende kullanabiliyoruz.
React Pluginleri
React, basit ve genişlemeye açık yapısı sayesinde birçok kütüphaneyi bir araya getirerek uygulamanızı oluşturabilirsiniz.
Redux, Mobx
Context API’ye alternatif olarak, Redux ve Mobx gibi state management kütüphaneleriyle tüm veri işlemleri rahatça yönetilebilir.
SSR
ReactDOMServer kullanarak NodeJS üzerinden statik site yayımlayabilirsiniz. Next.JS veya Gastby gibi hazır SSR çözümlerle de kendi statik sitenizi oluşturabilirsiniz.
React Native
React Native ile IOS ve Android gibi mobil platformlara uygulama çıkarabilirsiniz. RN’nin genişletilebilir doğasından dolayı web, tvOS ve Windows gibi platformlara da uygulama üretebilirsiniz.
- Twitter web uygulaması React Native ile çalışıyor.
- Facebook’ta 750 ekran React Native ile çalışıyor.
- Birçok Microsoft uygulaması da Xamarin yerine React Native ile çalışıyor.
Debugging
React’in çok büyük bir komünitesi olduğu için aradığınız sorunlara kolaylıkla cevap bulabilirsiniz. Hata ayıklama işlemleri için React DevTools eklentisini tarayıcınızda kullanabilirsiniz.
Testing
Jest, React Testing Library
Jest, javascript testlerini çalıştıran bir araçtır ve jsdom sayesinde DOM’a erişim sağlar.
React bileşenlerini test ederken, bileşenlerin implementasyon detaylarına inmeden kolayca test etmenizi sağlayan helperların bulunduğu bir kütüphanedir.
