giriiş
Günümüzde ön uç çerçeveleri ve kütüphaneleri, modern web geliştirme yığınının vazgeçilmez bir parçası haline geliyor. React.js, JavaScript topluluğunda modern web geliştirme için giderek tercih edilen bir çerçeve haline gelen bir ön uç kütüphanesidir.
React.js nedir?
React.js, etkileşimli kullanıcı arayüzleri oluşturmanın karmaşık sürecini basitleştirmeyi amaçlayan, Facebook tarafından özenle hazırlanmış açık kaynaklı bir JavaScript kütüphanesidir. React ile oluşturulmuş bir kullanıcı arayüzünü, her biri küçük ve yeniden kullanılabilir bir HTML kodu çıktısı almaktan sorumlu bileşenlerden oluşan bir koleksiyon olarak düşünün.
React'te, bağımsız Lego blokları olarak düşünebileceğiniz yeniden kullanılabilir bileşenler oluşturarak uygulamalarınızı geliştirirsiniz. Bu bileşenler, bir araya getirildiğinde uygulamanızın tüm kullanıcı arayüzünü oluşturan nihai arayüzün ayrı parçalarıdır.
React'in bir uygulamadaki temel rolü, Model-Görünüm-Denetleyici (MVC) modelindeki V'ye benzer şekilde, en iyi ve en verimli işleme uygulamasını sağlayarak uygulamanın görünüm katmanını yönetmektir. React.js, tüm kullanıcı arayüzünü tek bir birim olarak ele almak yerine, geliştiricileri bu karmaşık kullanıcı arayüzlerini, tüm kullanıcı arayüzünün yapı taşlarını oluşturan, yeniden kullanılabilir bileşenlere ayırmaya teşvik eder. Bunu yaparken, ReactJS çerçevesi, JavaScript'in hızını ve verimliliğini, web sayfalarını daha hızlı işlemek ve son derece dinamik ve duyarlı web uygulamaları oluşturmak için DOM'u daha verimli bir şekilde kullanma yöntemiyle birleştirir.
React.js'nin kısa bir tarihi
2011 yılında Facebook, geniş bir kullanıcı tabanına sahipti ve zorlu bir görevle karşı karşıyaydı. Daha dinamik ve duyarlı, daha hızlı ve daha verimli bir arayüz oluşturarak kullanıcılarına daha zengin bir kullanıcı deneyimi sunmak istiyordu.
Facebook'ta yazılım mühendisi olan Jordan Walk, React'ı tam da bu amaçla geliştirdi. React, yeniden kullanılabilir bileşenlerle dinamik ve etkileşimli kullanıcı arayüzleri oluşturmanın daha düzenli ve yapılandırılmış bir yolunu sunarak geliştirme sürecini basitleştirdi.
Facebook'un Haber Akışı, bu algoritmayı kullanan ilk platform oldu. DOM manipülasyonu ve kullanıcı arayüzlerine yönelik devrim niteliğindeki yaklaşımıyla React, Facebook'un web geliştirme yaklaşımını kökten değiştirdi ve açık kaynak topluluğuna sunulmasının ardından JavaScript ekosisteminde hızla popülerlik kazandı.
React.js ne işe yarar?
Genellikle, bir web sayfasının URL'sini web tarayıcınıza yazarak talep edersiniz. Tarayıcınız daha sonra bu web sayfası için bir istek gönderir ve bu istek tarayıcınız tarafından karşılanır. Web sitesindeki başka bir sayfaya gitmek için o web sayfasındaki bir bağlantıya tıklarsanız, sunucuya yeni sayfayı almak için yeni bir istek gönderilir.
Bu ileri geri yükleme düzeni, bir web sitesinde erişmeye çalıştığınız her yeni sayfa veya kaynak için tarayıcınız (istemci) ile sunucu arasında devam eder. Web sitelerini yüklemek için bu tipik yaklaşım işe yarar, ancak çok veri yoğun bir web sitesini düşünün. Tüm web sayfasını ileri geri yüklemek gereksiz olur ve kötü bir kullanıcı deneyimi yaratır.
Ayrıca, geleneksel bir JavaScript uygulamasında veriler değiştiğinde, bu değişiklikleri yansıtmak için DOM'un manuel olarak düzenlenmesi gerekir. Hangi verilerin değiştiğini belirlemeniz ve DOM'u bu değişiklikleri yansıtacak şekilde güncellemeniz gerekir; bu da sayfanın yeniden yüklenmesiyle sonuçlanır.
React, Tek Sayfalık Uygulama (SPA) olarak bilinen bir uygulama oluşturmanıza olanak tanıyarak farklı bir yaklaşım benimser. Tek Sayfalık Uygulama, ilk istekte tek bir HTML belgesi yükler. Ardından, güncellenmesi gereken web sayfasının belirli bölümünü, içeriğini veya gövdesini JavaScript kullanarak günceller.
Bu desen, istemci tarafı yönlendirme olarak bilinir çünkü kullanıcı yeni bir sayfa almak için her istekte bulunduğunda istemcinin tüm web sayfasını yeniden yüklemesi gerekmez. Bunun yerine, React isteği parçalara ayırır ve yalnızca değiştirilmesi gereken kısımları alır, böylece tüm sayfayı yeniden yüklemek zorunda kalmadan değişiklikleri yapar. Bu yaklaşım, daha iyi performans ve daha dinamik bir kullanıcı deneyimi sağlar.
React, gerçek DOM'un bir kopyası olan sanal bir DOM'a dayanır. Veri durumunda bir değişiklik olduğunda, React'in sanal DOM'u yeni değişikliği yansıtmak için hemen yeniden yüklenir. React daha sonra, tam olarak neyin değiştiğini anlamak için sanal DOM'u gerçek DOM ile karşılaştırır.
React, gerçek DOM'u işlemeden, bu güncellemeyle gerçek DOM'u yamamanın en ucuz yolunu bulur. Sonuç olarak, React bileşenleri ve kullanıcı arayüzleri değişiklikleri hızlı bir şekilde yansıtır çünkü her güncellemede tüm sayfayı yeniden yüklemeniz gerekmez.
React.js nasıl kullanılır
Angular gibi diğer framework'lerin aksine, React kod kuralları veya dosya düzenlemesi konusunda katı kurallar koymaz. Bu, geliştiricilerin ve ekiplerin kendileri için en uygun kuralları belirleyip React'i uygun gördükleri şekilde uygulamakta özgür oldukları anlamına gelir. Esnekliği sayesinde React'ı ihtiyacınız olduğu kadar çok veya az kullanabilirsiniz.
React kullanarak bir düğme, birkaç arayüz parçası veya uygulamanızın tüm kullanıcı arayüzünü oluşturabilirsiniz. Bunu aşamalı olarak benimseyip etkileşimli bir şekilde mevcut bir uygulamaya entegre edebilir veya daha da iyisi, ihtiyaçlarınıza bağlı olarak, güçlü React uygulamalarını sıfırdan oluşturmak için kullanabilirsiniz.
React'ı mevcut bir web sitesine entegre etme
Web sitenize dinamik etkileşim eklemek istiyorsanız, React harika bir seçimdir. React'ı entegre ederek, kenar çubukları veya widget'lar gibi sitenizin herhangi bir yerine yerleştirilebilen, yeniden kullanılabilir ve etkileşimli bileşenler oluşturabilirsiniz. İşte bunu başarmak için atmanız gereken adımların basit bir özeti.
Adım 1: CDN betiklerini HTML'ye ekleyin
- Öncelikle CDN'den React çekirdek kütüphane API'sini web sitenizin HTML dizin dosyasına ekleyin.
- Ardından, CDN'den React DOM'u içe aktarın. Bu, bileşenlerin Belge Nesne Modeli'ne (DOM) dönüştürülmesi için gereklidir.
- Ardından, tarayıcılar arasında uyumluluğu sağlamak için React kodunu çeviren CDN'den Babel'i ekleyin. Ayrıca, React bileşen dosyanızı yüklemeyi unutmayın.
İlk adım, web sitenizin HTML dizin dosyasına iki ana CDN betiği eklemektir. React'i CDN hizmeti aracılığıyla uygulamanıza yüklemek için bu betiklere ihtiyacınız olacak.
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
Adım 2: Web sitenizde render konumunu işaretleyin
HTML'nizde React bileşeninin oluşturulacağı konumu belirleyin. Bu, bir öğe ekleyerek yapılabilir. <div> Bunu, React kodumuzda referans alacağımız benzersiz bir tanımlayıcı ile yaptı.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
Adım 3: React bileşenini oluşturun
- Bu durumda like_widget.js adında bir React bileşeni oluşturun.
- Bu bileşen, “Merhaba Dünya” mesajını işleyen bir JSX ifadesi döndüren basit bir fonksiyona sahip olacak.
- ReactDOM'un yardımıyla bu bileşeni daha önce HTML'imizde belirlediğimiz benzersiz ID'yi hedef alarak DOM'a işliyoruz.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
Programı çalıştırdığınızda, aşağıdaki resimde işaretlediğiniz noktada tarayıcıya “Merhaba Dünya” yazısı gelecektir.
ActualWidget işlevi tarafından döndürülen JavaScript XML (JSX) adlı garip bir sözdizimini fark etmiş olabilirsiniz. HTML ve JavaScript'i kolayca birleştirmek için React ile JSX'i kullanabilirsiniz. Facebook, JSX'i doğrudan JavaScript koduna gömerek HTML'nin işlevselliğini genişletmek için JavaScript için bir sözdizimi uzantısı olarak geliştirdi. JSX ile HTML ve JS kodunu ayırmaya gerek kalmaz, çünkü React bildirimsel HTML'yi doğrudan JavaScript koduna yazmanıza olanak tanır.
Tam teşekküllü bir React Uygulaması Oluşturma
Mevcut bir web uygulamasına React'i kolayca ekleyerek küçük arayüz parçaları oluşturabilirsiniz, ancak eksiksiz web uygulamaları oluşturmak için React kullanmak daha pratiktir. Ancak React, yeni React uygulamaları oluştururken kurulumu genellikle göz korkutucu ve sıkıcı olan bazı ağır araç yapılandırma gereksinimlerine sahiptir.
Neyse ki, bu derleme ayarlarını öğrenmenize veya derleme araçlarını kendiniz yapılandırmanıza gerek yok. Facebook, React uygulaması derlemenize yardımcı olmak için cre-react-app adlı bir Node komut satırı aracı geliştirdi. Bu paket, bunu hemen yapmanıza yardımcı olur ve React projeleri arasında geçiş yaparken tanıyacağınız tutarlı bir React uygulamaları yapısı sağlar.
Yeni bir React projesi oluşturmak terminalinizde aşağıdaki komutları çalıştırmak kadar basittir:
npx create-react-app my-new-app
cd my-new-app
npm start
React.js örnekleri
React.js'nin doğuşu olan Facebook, kütüphanenin başarısının bir örneğidir. React, platformun beğeniler, yorumlar ve durum güncellemeleri gibi gerçek zamanlı özelliklerini basitleştirerek kusursuz ve dinamik bir kullanıcı deneyimi sağlar. React'ın modüler yapısı, Facebook'un sürekli gelişen arayüzünü kolaylaştırır ve aylık 2,8 milyardan fazla aktif kullanıcısının ihtiyaçlarına uyum sağlar.
Instagram Web, React.js destekli etkileşimli öğelerden oluşan bir platformdur. Hikaye görünümü ve doğrudan mesaj gibi her görsel, React'ın karmaşık kullanıcı etkileşimlerini hızlı bir şekilde yönetme becerisini vurgular. Platformun şık ve kullanıcı dostu arayüzü, React'ın yüksek performanslı etkileşimler sunma becerisinin bir kanıtıdır.
Netflix
Airbnb, React.js'nin karmaşık verileri sezgisel bir kullanıcı deneyimine nasıl dönüştürebileceğini gösteriyor. Her bir mülk ilanı, etkileşimli harita ve gerçek zamanlı rezervasyon, gezinmeden rezervasyona kadar kusursuz bir kullanıcı deneyimi oluşturmak için uyum içinde çalışan React bileşenlerinin bir senfonisidir.
