React JS kullanıcı arayüzü geliştirmeyi kolaylaştırmak için tasarlanmış açık kaynak JavaScript kütüphanesidir. Facebook tarafından 2011 yılında geliştirilmiş ve daha sonra bir çok şirket ve geliştirici tarafından kullanılmaya başlanmıştır. Günümüzde tek sayfa uygulama (SPA) oluşturmak için en çok tercih edilen JavaScript kütüphanelerinden bir tanesidir.
Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi.
reactjs.org
React resmi websitesinde bu şekilde tanıtılıyor. Gerçekten de React ile arayüz oluşturmak oldukça kolaylaşıyor. Bileşen destekli yapısı ile bir arayüz elemanı oluşturmak ve onu istenilen yerde kullanmak oldukça kolay bir işlem.
Yine JSX formatı ile arayüz oluşturma işlemleri oldukça kolaylaşıyor. Çünkü JSX formatı JavaScript, HTML ve CSS kodlarını aynı ortamda oldukça kolay kullanılmasını sağlıyor.
Neden React JS Tercih Ediliyor
Açık kaynak (open source) olarak dağıtılan React kütüphanesinin çok kullanılması boşuna değil. Bir çok etken bu kütüphanenin kullanılmasını teşvik ediyor.
- Öncelikle öğrenilmesi kolay bir kütüphane. JavaScript bilgisi ve programlama geçmişi olan tasarımcılar çok hızlı bir şekilde öğrenip kullanmaya başlayabilir.
- JSX kullanımı sayesinde daha hızlı ve etkin tasarım yapma. JSX, HTML ve JavaScriptin aynı anda kullanılmasına izin verir ve bunu çok kolaylaştırır. JSX kullanırken HTML etiketleri ve JavaScript nesnelerini birlikte kullanmak işleri oldukça kolaylaştırır. Bu bize daha hızlı ve etkili sayfalar oluşturma olanağı tanır.
- React bileşen (component) yapısını destekler. Bu şekilde kendi bileşenimizi oluşturup, istediğimiz zaman kullanabiliriz. Bu şekilde modüler bir tasarımı adım adım geliştirebiliriz. Bir defa tasarla ve her zaman kullan. Kulağa da hoş geliyor.
- Virtual DOM, daha performanslı arayüz yönetimi. Tarayıcılar DOM (Document Object Model / Belge Nesne Modeli) üzerinden sayfayı görüntülerler. Bu işlem yapılırken, sayfa içerisinde bir yer değiştiğinde, tüm sayfanın yeniden render edilmesi gerekir. React burada Virtual DOM ile sayfayı takip eder ve sayfa içerisinde sadece değişen alanı güncelleyerek performansı üst seviyeye çıkarır.
- Tek yönlü veri iletişimine destek verir. Bu nedenle veri denetimi daha kolay bir şekilde sağlanır.
- Facebook desteğinde açık kaynak (open source) olarak geliştirilir. Oldukça geniş bir geliştirici ağı vardır. Yardıma ihtiyaç olduğunda bilgi alınacak çok sayıda kaynak bulunur.
React JS Nedir?
React Js arayüz tasarlanmaya odaklanmış, bileşen ( component ) tabanlı bir JavaScript kütüphanesidir. 2011 yılında Facebook tarafından geliştirilmeye başlanmış ve yıllar içerisinde geliştirilmeye devam etmektedir. SPA ( tek sayfa uygulama ) geliştirmek için kullanılmaktadır. JSX formatı ile JavaScripte oranla oldukça kolay bir tasarım imkanı tanır.
Geniş bir geliştirici topluluğuna sahip olan React JS bu sayede çok sayında yardımcı kütüphane ile birlikte gelmektedir. Geliştirme aşamasında hemen hemen istediğiniz her konuda bir kütüphane bulabilirsiniz.
React kullanıcı arayüzü oluşturmaya yarayan açık kaynak kodlu bir javascript kütüphanesidir. Facebook önderliğinde bir geliştirici grubu tarafından geliştirilmekte olan React, Model-View-Controller prensibine uygun olarak oluşturulmuştur.
Wikipedia
JSX Nedir?
JSX bir JavaScript söz dizimi uzantısıdır. JavaScript, HTML, CSS bileşenleri aynı ortamda etkin bir şekilde kullanmak için tasarlanmıştır. JSX ile birlikte bir bileşen oluşturulurken, HTML ve CSS dosyalarının ayrı olarak oluşturulmasına gerek kalmaz. Kolaylıkla JavaScript içerisinde HTML etiketlerini kullanılabilir.
const baslik = <h1>Merhaba Dünya!</h1>
Örnekte görüldüğü gibi, kolaylıkla JavaScript nesneleri ile HTML etiketleri birlikte kullanılmaktadır. Buda bize JavaScript nesnelerinin HTML etiketleri ile etkin bir şekilde kullanılmasını sağlar. Bir Etiketin içine bir JavaScript değişkenini kolayca koyabilirsiniz. Değişkenin değeri değiştiğinde otomatik bir güncelleme olacaktır.
<h2>Müşeri: { musteriAdi }</h2>
Müşteri adının bir başlık içerisinde kullanılması bu kadar kolay. Burada { musteriAdi} yazan yerdeki musteriAdi bir JavaScript değişkenidir.
React ile JSX kullanmak zorunda değilsiniz. Fakak çoğu geliştirici gibi JSX sizinde hayatınızı kolaylaştıracaktır.
Bileşen (Component) Nedir?
React JS ile geliştirme yaparken özel bir işlem veya bir arayüz bölümünü oluşturduğumuz eklentilere component ( bileşen ) adı veriyoruz. Bileşenler ile arayüz üzerinde istediğimiz gibi özel bir bölüm oluşturabilir ve onu istediğimiz her yerde kullanabiliriz. Mesela, müşteri bilgilerinin tutulduğu bir bileşen oluşturabilir ve ona kendi sitillerini verebiliriz.
Bu bileşen üzerinden müşteri adı, müşteri resmi, müşteri talepleri gibi istediğimiz bilgileri sunabiliriz. Sonrasında müşteri bilgilerini kullanacağımız her yerde bu bileşeni çağırarak kullanabiliriz. HTML etiketleri gibi düşünebilirsiniz. Bir defa oluşturulup sonra her istendiğinde kullanılabilir.
Kod tekrarı yapmamak ve birbiri ile tutarlı bir arayüz oluştururken bileşenler bizim için vazgeçilmezdir.
Virtual DOM Nedir? Ne İşe Yarar?
Facebook ve Instagram gibi sayfalarda sürekli yeni bilgiler gelir ve bu bilgilerin ekrana yansıtılması gerekir. Mesela bir gönderiye yeni bir yorum gelmiş olabilir veya yeni bir beğeni almış olabilir. Yeni bir beğeni geldiğinde o gönderinin beğeni sayısı hemen artacaktır. Bu işlem yapılırken sayfanın diğer bölümleri değişmeden kalır.
React JS virtual DOM kullanarak bu işlemin performans açısından bir sorun oluşturmamasına yardım eder. Bir sayfa yüklendiğinde tarayıcı bir DOM (document object model) oluşturur. Tarayıcı DOM üzerinde bir değişiklik olduğunda bunu ekrana basarak bize gösterecektir.
React JS ayrıca sanal bir DOM oluşturur. Sonra gerçek DOM ile sanal (virtual) DOMu kıyaslar ( karşılaştırır ) ve bir değişiklik varsa değişiklik olan bölümün güncellenmesini sağlar.
Buda tarayıcıya daha az bir yük yüklenmesi anlamına gelir.
React JS Öğrenmek Gerekir mi?
Aslında bu ne şekilde çalışacağınızın bir kararıdır. Günümüzde frontend tasarım için çok sayıda JavaScript kütüphanesi vardır. Bunlardan herhangi birini tercih edebilirsiniz. Diğer kütüphaneler arasından React,
- Geniş bir geliştirici topluluğunun olması.
- Kolayca öğrenilebilir olması.
- Arayüz tasarımındaki performansı.
- Çok kullanılması.
gibi nedenlerden dolayı tercih edilmektedir. Sizde kendinizi frontend tarafında geliştirecekseniz, React JS iyi bir seçenek olacaktır. Günümüzde React JS ile geliştirme yapabiliyorsanız, iş bulma olasığınız da artacaktır.
React JS Nasıl Kurulur?
React JS bir JavaScript kütüphanesi (library) olduğu için bilgisarınızda Node Js kurulu ise kolayca kullanmaya başlayabilirsiniz. Eğer bilgisayarınızda Node JS kurulu değilse web sayfasından sisteminize uygun olanı indirerek hemen kurabilirsiniz. Node JS.
Şuandan itibaren bilgisayarınıza NodeJS kurulu varsayarak yazıya devam ediyoruz. Eğer bilgisayarınıza Node JS kurulu mu bilmiyorsanız komut satırına aşağıdaki kodu yazarak sonuca bakabilirsiniz.
node -v
Eğer bilgisayarınızda Node JS kurulu ilse versiyon numarasını dönecektir.
v16.15.1
Bilgisayarınızda Node JS olduğuna göre npm paket yöneticisi de kuruludur. Şimdi React JS ile bir uygulama başlatmanın kolay bir yolu olan create-react-app kütüphanesini kuracağız. React JS geliştiricilerinin bize sunuduğu bu kütüphane ile bir React uygulama çatısını kolayca oluşturabiliyoruz.
Öncelikle creacte-react-app kütüphanesini sistemimize kuralım. Bunun için komut satırından şu ifadeleri giriyoruz.
npm install -g create-react-app
Sonrasında gerekli tüm kütüphaneler ile birlikte create-react-app kütüphanesi sistemimize kurulacaktır. Artık ilk React uygulamamızı oluşturma zamanı geldi. Bu paket ile birlikte bir React uygulama çatısı geliştirmek oldukça kolaydır. Yapmanız bir terminal ( komut satırı penceresi ) açmak ve uygulamayı oluşturacağınız klasöre gitmek, mesela Belgelerim sonrasında aşağıdaki kodu çalıştırmak.
npx create-react-app merhaba-app
Kodu girdikten sonra bulunduğunuz dizinde yeni bir dizin oluşturulur, bu dizin uygulama adı ile aynıdır, bu örneğimizde merhaba-app şeklindedir. Uygulama ismini kendi isteğinize göre değiştirebilirsiniz. Yeni uygulanın kurulumu, sisteminize ve bağlantı hızınıza göre değişiklik gösterecektir. create-react-app ile bir uygulama çatısı oluşturmak için vermeniz gereken kod yapısı
npx create-react-app uygulama-ismi
şeklindedir. Uygulama kurulduktan sonra komut satırından
cd merhaba-app
komutudunu girerek oluşturulan yeni klasöre görelim. Burada uygulamaya başka isim verdiyseniz kendi verdiğiniz ismi girmeniz gerekiyor. Artık oluşturduğumuz uygulamayı çalıştırma zamanı geldi. Uygulama klasörümüze girdikten sonra komut satırından
npm start
komutunu verirseniz artık uygulama çalışacak ve ön tanımlı tarayıcı açılarak yeni yaptığımız uygulama sayfasını çalıştıracaktır. Eğer tarayıcı kendiliğinden açılmazsa bir tarayıcı sayfası açarak adres çubuğuna
http://localhost:3000
adresini girerek, bu sayfaya gitmemiz yeterli olacaktır. Artık karşımıza ilk React uygulamamız çıkacaktır.
Ve bir kaç kod ile bir React uygulaması hazırlamış olduk. Bundan sonra
src/App.js
dosyasını düzenleyerek uygulamamızı geliştirebiliriz.
Ücretsiz React Dersleri
React JS öğrenmek istiyorsanız React resmi web sitesinden başlayabilirsiniz. Kapsamlı olarak React ile tek sayfa uygulama (SPA) geliştirmeyi öğrenmeniz için iyi bir başlangıç olacaktır. Farklı seviyeler ve farklı öğrenme tarzları için faydalı içerikleri burada bulabilirsiniz. Sonrasında farklı kaynaklardan da faydalanabilirsiniz. React Dersleri için tıklayın.
React JS Üzerine Sonsözler
Günümüz frontend geliştiricileri için çok sayıda JavaScript kütüphanesi bulunmaktadır. Bunlar arasında bazıları daha ön plandadır. Ön planda olan kütüphanelerden bir tanesi React JS kütüphanesidir. React JS öğrenilmesi kolay olan, bileşen tabanlı bir kütüphanedir.
Facebook tarafından geliştirilen React, açık kaynak olarak dağıtılmaktadır ve çok geniş bir geliştirici topluluğu bulunmaktadır. Yine React ile çalışan çok sayıda kütüphane, geliştirme yapmayı oldukça kolaylaştırmaktadır. Geniş geliştirici topluluğu yardım alma açısından da büyük rahatlık sağlamaktadır.
Performans odaklı yapısı ile daha etkin sayfalar oluşturmayı kolaylaştırmaktadır. Virtual DOM ile sadece sayfa içerisinde değişen yerlerin yeniden render edilmesini sağlar. Buda tarayıcıya fazladan yük binmesini önler. Facebook gibi içeriği hızlı değişen sayfalarda performans artırıcı etki gösterir.
Vue, Angular diğer seçeneklerde düşünülebilir. Yapılacak projeye göre farklı bir kütüphane tercih edilebilir. Bununla birlikte React ile frontend geliştirme günümüzde çok popülerdir ve bu konuda kendini geliştirenlerin iş bulma olasıkları da yüksektir.
Siz de konu hakkında soracaklarınızı veya fikirlerinizi yorumlar bölümünde belirtebilirsiniz.