Web dünyasının geliştirme alanında geliştirme işini kolaylaştıracak ve daha komplike Web sayfaları yapmaya olanak tanıyacak pek çok teknoloji bulunmakta. Bunlar arasında en çok kullanılanları JavaScript dilini temel almakta olsa da, buna ek olarak PHP, ASP.NET ve Django gibi Web geliştirme alanında kendini kanıtlamış teknolojiler de bulunmakta. Ancak bu yazının konusu JavaScript bazlı bir Web teknolojisi olan React.
React, veya React JS, genelde frontend alanında ön plana çıkan bir JavaScript frameworkü olarak karşımıza çıkmaktadır. Bir Web sayfasının ön yüzünü bileşenler aracılığıyla oluşturmaya ve bu bileşenler arasında bilgi aktarımına olanak tanıyan React, günümüzde Angular ve Vue.js ile birlikte en popüler JavaScript ön yüz frameworkleri arasında yer almaktadır. Hal böyle olunca da React konusunda anlatacak çok şey var.
React Tarihçesi
Son derece popüler bir JavaScript frameworkü olan React, Facebook tarafından geliştirilmiştir ve ilk defa 2011 yılında Facebook’un Haber Kaynağı uygulamasında hayat bulmuştur. Popüler sosyal medya sitesi Instagram’da kullanılarak bir nevi standart haline gelen React, 2013 yılı itibariyle açık kaynaklı bir proje durumuna geçmiştir ve bir geliştirici topluluğu tarafından günümüzde düzenli olarak geliştirilmektedir. Esasen bir Web frameworku olan React’in mobil uygulama geliştirmek için tasarlanmış React Native isimli bir kardeşi de bulunmaktadır.
React Temel Özellikleri
ReactJS frameworkü, geliştirici açısından Web geliştirme işlemini kolaylaştıracak ve geliştirilen uygulamaları daha sağlam ve işlevsel hale getirecek pek çok özelliğe sahiptir.
- React frameworkü kullanarak oluşturacağınız bir Web uygulaması en temelinde bileşenlerden oluşur. Her bir bileşen ayrı bir kod dosyasında tanımlanır, yazılır, davranışları tanımlanır ve farklı kod dosyalarında kullanılır, bu sayede son derece kolay bir şekilde bir sayfanın ön yüzü oluşturulur. Bu açıdan bir nevi interaktif (etkileşimli) kullanıcı arayüzlerinin geliştirilmesini de kolaylaştırmaktadır.
- React üzerinde oluşturacağınız her bileşen JSX denilen, XML ile benzer bir söz dizimine sahip HTML kullanılarak yazılır.
- React, DOM güncellemelerini hızlandırmak ve sayfanın performansını arttırmak amacıyla “Sanal DOM” denilen bir özellik kullanır. Bununla bağlantılı olarak React, veri değişikliklerinde sadece gerekli bileşenleri güncelleyerek uygulamanızın performansını mümkün olan en üst seviyeye çıkarır.
- ReactJS, “Model-View-Controller” olarak denilen MVC katmanının bir parçasıdır ve bir Web sayfasının “View” katmanına odaklanır.
- Bir React uygulaması oluşturacağınız zaman kaynak kod olarak JavaScript veya TypeScript kullanma şansınız bulunmaktadır. TypeScript kullanmanız dahilinde tip güvenli kod yazma şansı elde edersiniz.
- ReactJS, karmaşıklık açısından diğer iki popüler JavaScript frameworkü Angular ve js arasında kalmaktadır.
- ReactJS sayesinde ön yüz geliştirmenin yanında durum yönetimi (React Redux) ve rotalama (React Router) gibi işlevleri de yapabilirsiniz.
- NPM (NodeJS Package Manager) ile çalıştırılmaya ve test edilmeye uyumlu şekilde gerçekleştirilen ön yükleme sayesinde uygulamanız üzerinde her türlü gerekli denemeleri ve testleri gerçekleştirebilirsiniz.
Bunlar ve bunun gibi pek çok fantastik özelliği sayesinde ReactJS, günümüzde son derece popüler bir web geliştirme frameworkü olarak yazılım dünyasındaki yerini korumakta.
React’te Veriler ve Durum
React uygulamanız içinde geliştireceğiniz her bir değişken kendine özgü bir “state”e (yani durum) sahiptir. Durumlar bileşenin ihtiyaç duyabileceği bilgileri tutar ve sayfanın çalışması esnasında bu bilgiler üzerinden işlem yapma olanağı sunar. Üstelik bileşenler arasında durum aktarımı da yapabilirsiniz, bunun için React dünyasında kabul görmüş iki yöntem vardır:
- “Geleneksel” yöntem olarak bilinen yöntem, bir üst bileşenden bir alt bileşene durum aktarma işlemiyle yapılır. Bunun için bir bileşenin kod dosyası içerisinde kullanılan başka bir bileşene (yani alt bileşene) JSX kuralları içerisinde o ana bileşendeki durum değişkeni aktarılır. Aktarılan değişken o alt değişkenin prop’u olur.
- React Redux durum yönetim kütüphanesi. Bu kütüphaneyle yazılan React uygulamalarında bir global durum ve aksiyonlar ve reducerlar aracılığıyla global durum üzerinde gerekli işlemler yapacak olan fonksiyonlar tanımlanır. Bileşenler içerisine yazılacak dispatch fonksiyonları aracılığıyla da aracısız veri aktarımı gerçekleştirilir.
React’te Rotalama
React genel olarak bir SPA (Single Page Application, Türkçesi “Tek Sayfa Uygulaması”) geliştirme frameworkü olsa da, o sayfanın alan adı içerisindeki farklı linklerde farklı içerikler göstermenizi sağlayacak bir yapıyla birlikte kullanılır. Bu rotalama yapısı “React Router”, ya da “react-router-dom” olarak geçer. Bu sayede uygulamanızın hangi link içerisinde hangi bileşenleri göstereceğinizi kod dosyalarınız içerisinde belirtebilirsiniz. Bu tarz bir rotalama gerçekleştirmek için uygulamanızda bir Routes bileşeni ve bu bileşenin içinde Route bileşenleri tanımlamanız gerekecektir.
Sınıf veya Fonksiyon Bileşenleri
React uygulamanız içerisinde yazacağınız bileşenler genel olarak ikiye ayrılır: Sınıf bileşenleri ve fonksiyon bileşenleri. Sınıf bileşenleri Component sınıfının bir uzantısı olarak üretilirler, ancak fonksiyon bileşenleri sabit fonksiyonlar olarak yazılabilir. Kod editörünüzde oluşturduğunuz bir JavaScript veya TypeScript dosyasının içinde rcc (React Class Component) veya rfc (React Function Component) kısayolunu girerek bir sınıf bileşeni veya fonksiyon bileşeni oluşturabilirsiniz.
Sınıf bileşenleri ve fonksiyon bileşenleri, işleyiş konusunda genel olarak aynı olsalar da, kullanılabilir fonksiyonlar açısından farklılık gösterirler. Örneğin bir sınıf bileşeni tamamen yüklendiğinde componentDidMount() fonksiyonu çalışırken, bir fonksiyon bileşeninde useEffect() fonksiyonu kullanılır.
React Kancaları (Hook)
Fonksiyonel bileşenlerde sınıf bileşenlerinin sahip olduğu özellikleri kullanabilmek için React Hooks denilen bir yapı kullanılır. React’in 16.8 sürümüyle birlikte yazılım dünyasına giren React Hooks, fonksiyonel bileşenlerde durum yönetimini iyileştirmek ve sınıf bileşenlerinin düzeyine getirmek için geliştirilmiştir. React içerisinde en çok kullanılan hook’lar yerleşik olan useEffect ve useState hook’larıdır. React içerisindeki yerleşik hook’lara ek olarak kendi hook’larınızı da yazabiliyorsunuz, ancak bu hook’ların “use” kelimesiyle başlama ve en az bir React hook’unu kullanma şartı bulunmakta.
React Memo ile Bileşenleri Ezberletin
React uygulamanızın bileşen güncelleme işlemi zaman alabilmektedir, haliyle onlarca veya yüzlerce bileşeni bulunan bir sayfada işler karmaşıklaşabilir. Bunun için ReactJS frameworkünün fantastik özelliklerinden biri olan React Memo sayesinde uygulamanızın bazı bileşenleri ezberlemesi ve sadece tuttuğu değerlerde değişiklik olduğunda güncellenerek sayfanızın perfomansının arttırılması sağlanabilir. Ancak bu özellik tuttuğu değerleri (props) sürekli olarak değişen bileşenlerde kullanılmamalıdır.
React’in Avantajları ve Dezavantajları
ReactJS frameworkünün, hem JavaScript ve TypeScript dünyasında, hem de genel olarak yazılım dünyasında tutulmasını sağlayan çok faydalı özellikleri vardır. Bunlardan bazıları şu şekildedir:
- Bileşen tabanlı bir mimariye sahip olması sayesinde modüler bileşenlerden oluşan bir Web sayfası inşa edilebilir.
- Sayfanın performansını yüksek tutmak için farklı yerleşik çözümler bulundurur.
- JSX sözdizimiyle bileşenlerin ön yüzünü HTML kolaylığıyla oluşturmanızı sağlar.
- Basit düzeyde bir React uygulaması geliştirecek kadar React öğrenmek son derece kolaydır, bu da hızlı bir başlangıç yapılmasını sağlar.
- JavaScript ve/veya TypeScript dillerine aşina olan kullanıcılar kolaylıkla React ile uygulama yazabilir. Web alanında temel HTML ve CSS bilgisi görsel olarak çekici React uygulamaları yapmak için yeterlidir.
- React Native ile ReactJS’in Web alanındaki gücünü mobil uygulama geliştirme alanına taşıyarak son derece gelişmiş mobil uygulamalar geliştirmek mümkündür.
Ancak bunların yanında React frameworkünün geride kaldığı ya da yeterince iyi olmadığı bazı alanlar bulunmaktadır.
- Durum yönetim kütüphanesi olan React Redux oldukça zor bir öğrenme eğrisine sahiptir.
- React frameworkünün etkinliği genel olarak ön yüz (frontend) alanıyla sınırlıdır, bu da arka plan (backend) için farklı kütüphanelere (js veya Next.JS) ihtiyaç bulunacaktır.
Sonuç olarak React, günümüzün son derece güçlü Web geliştirme teknolojileri arasında yerini sabitlemiş bulunmaktadır. Son on yılın en çok tercih edilen frontend kütüphaneleri arasında bulunan ReactJS, sürekli güncelleniyor oluşu, yeni özellikler geliyor olması ile yakın gelecekte de oldukça popüler bir yazılım geliştirme teknolojisi olarak hayatımızda yerini koruyacak gibi duruyor.
React Uygulaması Oluşturma
Bir React uygulaması oluşturmak için bilgisayarınızda öncelikle NodeJS yüklü olmalı. NodeJS’in kurulu olduğundan emin olduktan sonra kod editörünüzde veya Powershell’de bir dizine gidin ve aşağıdaki kod satırını girin:
npx create-react-app uygulama-adi (–template typescript)
Bu kod satırı ile React uygulamanızı o dizin içerisinde oluşturabilirsiniz. Bu işlem tabii ki birkaç dakika sürecektir. İşlem bittikten sonra uygulamanızı yerel sunucuda yayına almak için:
npm start
kod satırını çalıştırdığınızda uygulamanız localhost:3000’de yayına geçecektir. İyi kodlamalar.
