Basit Anlatımla Öğrenin: React Nedir ve Ne İşe Yarar?

“React nedir?” sorusuna cevap ararken birçok yerde karşımıza teknik ve karmaşık açıklamalar içeren tanımlar çıkıyor. Bu yazıda sizlere elimden geldiğince React’i basit bir şekilde anlatmaya çalışacağım.

React nedir?

React kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Yani web sitelerinde/mobil uygulamalarda gördüğümüz içerik düzeni, butonlar, bannerlar, kutular vs. tasarlamak için React kullanırız. Peki front-end geliştirmede React neden daha çok tercih ediliyor? Aşağıda başlıklar halinde inceleyelim.

1. Dünya Genelinde Çok Fazla Kullanılması

React özellikle büyük şirketler tarafından çokça tercih edilen bir kütüphane. Bu da onu geliştiriciler arasında popüler hale getiriyor. Tesla, IMDB, PayPal, Netflix gibi dünya çapında ünlü firmalar React’i tercih ediyor. Ayrıca React’ın bu kadar popüler olması büyük bir geliştirici topluluğunun oluşmasını da beraberinde getiriyor. Yani React ile geliştirme yaparken bir sorun yaşadığınızda ya da üçüncü parti ek bir kaynağa ihtiyaç duyduğunuzda faydalanabileceğiniz kaynaklar oldukça fazla olacaktır.

React ayrıca Meta/Facebook gibi dev bir firma tarafından geliştirildi. Bu da geliştiricilere güven veren başka bir husustur.

2. Bileşen (Component) Tabanlı Olması

React, bileşen (component) dediğimiz parçalardan oluşur. Mesela veri giriş alanları (input field), arama kutuları, butonlar birer bileşen olarak oluşturulabilir ve kullanılabilir. React bu bileşenleri bir araya getirerek web sayfaların ve mobil uygulamaların arayüzlerini oluşturur. React sayesinde vanilla (Ek kütüphane olmayan) JavaScript ile yazılması zor olan karmaşık uygulamaları daha kolay bir şekilde yazabiliriz.

Bileşenleri birer lego parçası gibi düşünebiliriz. İstediğimiz zaman bu lego parçalarını bir araya getirerek arayüz inşa edebiliriz.

3. Bildirici (Declarative) Yapıda Olması

React bileşenleri lego parçaları gibidir demiştik. Bu bileşenleri belirli bir görevi yerine getirecek şekilde programlarız. Bunu da JSX dediğimiz özel bir sözdizimi (syntax) ile gerçekleştiririz. JSX, React’in sözdizimine verdiğimiz bir addır. JSX sayesinde HTML, CSS ve JavaScript kodlarını bir arada kullanabiliriz.

Peki bildirici-declarative dediğimiz şey tam olarak ne? Basitçe anlatmak gerekirse bu şey bileşene mevcut durumuna göre ne yapmamız gerektiğini söylememizden ibaret. Bileşene görevini söyleriz, o da yapar. Mesela bir buton oluşturmuşuzdur ve bu buton da mevcut web sayfasını karanlık moda alıyordur.

React’in declarative yapıda olması aynı zamanda DOM’a (Document Object Model) doğrudan müdahale değil de sanal (virtual) bir DOM oluşturarak ulaşmasını sağlar. Bu da web sayfamızın performansını artırır. DOM dediğimiz şey kısaca web sayfalarımızı kontrol etmemizi sağlayan bir araç. Mesela bir butona basıldığında bir ögenin renginin değiştirilmesini DOM sayesinde yaparız.

4. Durum Bazlı Olması

Madem React DOM’a doğrudan müdahale etmiyor nasıl oluyor da web sayfasının arayüzünü güncelleyebiliyor? İşte bu sorunun cevabı React’in durum bazlı olmasından kaynaklanıyor.

React’in amacı kullanıcı arayüzünü arka planda oluşturduğumuz verilerle senkronize bir şekilde çalıştırmaktır. Arka planda oluşturduğumuz verilere state (durum) diyebiliriz. Diyelim ki tropik meyveleri tutan bir dizimiz (array) var. Bu meyveleri tutan dizi, state’i (durumu) ifade eder. Tamam, state tropik meyveleri tutuyor ama bunları nasıl kullanıcıya göstereceğiz? Yani bunları arayüze nasıl yansıtacağız? İşte burada da daha önce sözünü ettiğimiz JSX devreye giriyor. JSX kullanarak bileşenlerimizi oluştururuz. Bileşenimiz meyveleri durumdan (state) çeker (render) ve kullanıcıya gösterir. React’in durum bazlı olması kısaca bundan ibarettir. Elbette farklı fonksiyonlar ekleyerek mevcut bileşenimizin davranışını değiştirebiliriz. (Bileşen güncelleme) Bunu ileride örneklerle göreceğiz. Şu anda React hakkında genel bir bilgi ediniyoruz.

5. JavaScript Kütüphanesi Olması

“React nedir?” sorusuyla ilgili bazı tanımlamalarda fark etmişsinizdir, React için JavaScript’in bir frameworküdür yazıyorlar. Aslında bu tam olarak doğru değil. React bir JavaScript kütüphanesidir, frameworkü değil. Framework dediğimiz şey tam paket bir yazılım aracıdır. Yani framework kullanırken ekstra bir kütüphaneye ihtiyaç duymazsınız. Ancak biz React ile proje geliştirirken farklı kütüphaneler kullanmaz zorundayız. Çünkü React tek başına bazı özellikleri bünyesinde barındırmıyor. Mesela React tek başına çoklu sayfalı bir web sitesi oluşturmayı desteklemez, bu yüzden bu tür bir proje için React Router DOM gibi ek kütüphanelere ihtiyaç duyarız. React bu özelliği tek başına desteklemediği için harici bir kütüphane olarak RRD kullanırız yani. Bu yüzden React için JavaScript frameworkü değil, JavaScript kütüphanesidir tabirini kullanmalıyız.

Popüler bir dil olan JavaScript kütüphanesi olması, geliştiricilerin React’i tercih etmesinin önemli sebeplerindendir.

---

ÖZET

React’in avantajlarının/özelliklerinin en önemlilerini kısaca belirtmek gerekirse:

• Mevcut duruma (state) göre bileşenlerin durumdan veriyi çekerek (render) kullanıcı arayüzüne yansıtması.
• Kullanıcı arayüzünü mevcut duruma ait bileşenin değişmesi halinde senkronize şekilde güncellemesi.

Bu yazının sonuna geldik. React ile ilgili diğer yazıları buradan ziyaret edebilirsiniz. Yeni yazılarda/rehberlerde görüşmek dileğiyle.