React.js Nedir? (Kullanımlar, Örnekler ve Daha Fazlası)

Bugün, Front-end framework ve kitaplıklar, modern web geliştirme yığınının önemli bir parçası haline geliyor. React.js, JavaScript topluluğu içinde modern web geliştirme için giderek tercih edilen framework haline gelen bir Front-end kitaplığıdır.

Web geliştirmeye yeni başlayanlar veya tüm bu yaygaranın ne hakkında olduğunu anlamaya çalışanlar için, React’e, nasıl çalıştığına ve onu diğer JavaScript framework’ünden farklı kılan şeylere bakalım .

React.js nedir?

React.js framework, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript framework ve kitaplığıdır. Normal JavaScript ile yapacağınızdan çok daha az kodla hızlı ve verimli bir şekilde etkileşimli kullanıcı arayüzleri ve web uygulamaları oluşturmak için kullanılır.

React’te bağımsız Lego blokları gibi düşünebileceğiniz yeniden kullanılabilir bileşenler oluşturarak uygulamalarınızı geliştirirsiniz. Bu bileşenler, birleştirildiğinde uygulamanın tüm kullanıcı arabirimini oluşturan nihai arabirimin ayrı parçalarıdır.

React’in bir uygulamadaki birincil rolü, en iyi ve en verimli işleme yürütmeyi sağlayarak bir model-görünüm-denetleyici (MVC) modelindeki V gibi o uygulamanın görünüm katmanını yönetmektir. React.js, tüm kullanıcı arabirimiyle tek bir birim olarak ilgilenmek yerine, geliştiricileri bu karmaşık UI’leri tüm UI’nin yapı taşlarını oluşturan yeniden kullanılabilir ayrı bileşenlere ayırmaya teşvik eder. Bunu yaparken ReactJS framework, web sayfalarını daha hızlı hale getirmek ve son derece dinamik ve yanıt veren web uygulamaları oluşturmak için JavaScript’in hızını ve verimliliğini DOM‘u manipüle etmenin daha verimli bir yöntemiyle birleştirir.

React.js’nin Kısa Tarihi

2011’de Facebook çok büyük bir kullanıcı tabanına sahipti ve zorlu bir görevle karşı karşıyaydı. Hızlı ve yüksek performanslı, daha dinamik ve daha duyarlı bir kullanıcı arabirimi oluşturarak kullanıcılara daha zengin bir kullanıcı deneyimi sunmak istiyordu.

Facebook’un yazılım mühendislerinden biri olan Jordan Walke, React’i tam da bunu yapmak için geliştirdi. React, yeniden kullanılabilir bileşenlerle dinamik ve etkileşimli kullanıcı arayüzleri oluşturmanın daha organize ve yapılandırılmış bir yolunu sağlayarak geliştirme sürecini basitleştirdi.

Facebook’un haber akışı ilk önce kullandı. DOM manipülasyonuna ve kullanıcı arabirimlerine yönelik devrim niteliğindeki yaklaşımı nedeniyle React, Facebook’un web geliştirmeye yaklaşımını önemli ölçüde değiştirdi ve açık kaynak topluluğuna yayınlandıktan sonra JavaScript ekosisteminde hızla popüler oldu.

React.js ne yapar?

Tipik olarak, bir web sayfasının URL’sini web tarayıcınıza yazarak talep edersiniz. Ardından tarayıcınız, tarayıcınızın oluşturduğu o web sayfası için bir istek gönderir. Web sitesinde başka bir sayfaya gitmek için o web sayfasındaki bir bağlantıya tıklarsanız, o yeni sayfayı almak için sunucuya yeni bir istek gönderilir.

Tarayıcınız (istemci) ile sunucu arasındaki bu ileri geri yükleme modeli, bir web sitesinde erişmeye çalıştığınız her yeni sayfa veya kaynak için devam eder. Web sitelerini yüklemeye yönelik bu tipik yaklaşım gayet iyi çalışıyor, ancak çok veri odaklı bir web sitesi düşünün. Tam web sayfasının ileri geri yüklenmesi gereksiz olur ve kötü bir kullanıcı deneyimi oluşturur.

Ayrıca, geleneksel bir JavaScript uygulamasında veriler değiştiğinde, bu değişiklikleri yansıtmak için manuel DOM düzenlemesi gerekir. Hangi verilerin değiştiğini tanımlamanız ve DOM’u bu değişiklikleri yansıtacak şekilde güncellemeniz gerekir, bu da tam sayfanın yeniden yüklenmesini sağlar.

React, tek sayfalık uygulama (SPA) olarak bilinen şeyi oluşturmanıza izin vererek farklı bir yaklaşım benimsiyor. Tek sayfalık bir uygulama, ilk istekte yalnızca tek bir HTML belgesi yükler. Ardından, web sayfasının JavaScript kullanarak güncellenmesi gereken belirli bir bölümünü, içeriğini veya gövdesini günceller.

Bu kalıp, istemci tarafı yönlendirme olarak bilinir, çünkü bir kullanıcı her yeni istekte bulunduğunda istemcinin yeni bir sayfa almak için tüm web sayfasını yeniden yüklemesi gerekmez. Bunun yerine React, isteği yakalar ve tam sayfa yeniden yüklemesini tetiklemek zorunda kalmadan yalnızca değiştirilmesi gereken bölümleri getirir ve değiştirir. 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. React’in sanal DOM’u, veri durumunda bir değişiklik olduğunda bu yeni değişikliği yansıtmak için hemen yeniden yüklenir. Bundan sonra React, tam olarak neyin değiştiğini anlamak için sanal DOM’u gerçek DOM ile karşılaştırır.

Ardından React, gerçek DOM’u oluşturmadan bu güncellemeyle gerçek DOM’u düzeltmenin en ucuz yolunu bulur. Sonuç olarak, React’in bileşenleri ve kullanıcı arayüzleri değişiklikleri çok 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 frameworklerin aksine React, kod kuralları veya dosya organizasyonu için katı kurallar uygulamaz. Bu, geliştiricilerin ve ekiplerin kendilerine en uygun kuralları belirlemekte ve uygun gördükleri şekilde React’i uygulamakta özgür oldukları anlamına gelir. React ile esnekliği sayesinde ihtiyacınız kadar az veya çok kullanabilirsiniz.

React’i kullanarak tek bir düğme, birkaç arabirim parçası veya uygulamanızın tüm kullanıcı arabirimini oluşturabilirsiniz. Kademeli olarak benimseyebilir ve zaten var olan bir uygulamaya bir tutam etkileşimle entegre edebilir veya daha iyisi, ihtiyacınıza bağlı olarak sıfırdan tam teşekküllü güçlü React uygulamaları oluşturmak için kullanabilirsiniz.

React’i Bir Web Sitesine Bağlamak

HTML sayfasına biraz etkileşim eklemek için React’i bir içerik dağıtım ağı (CDN) üzerinden zaten var olan bir web uygulamasına bağlayabilirsiniz. Bunu yaparak React, o web sitesinin bir kenar çubuğu, widget veya tamamen başka bir şey gibi belirli bir bölümü üzerinde kontrol kazanır. Bunlar, bir tutam React işlevselliği ile yalnızca yeniden kullanılabilir ve etkileşimli React bileşenleridir.

Bunu üç basit adımda başarabilirsiniz.

İlk adım, iki ana CDN komut dosyasını web sitenizin HTML dizin dosyasına eklemektir. React’i bir CDN hizmeti üzerinden uygulamanıza yüklemek için bu komut dosyalarına ihtiyacınız var.

<!– The first link is that of the core React library API itself”. –>
<script src=”https://unpkg.com/react@17/umd/react.development.js” crossorigin></script>

<!– The second link is that of the React DOM needed to render to the DOM”. –>
<script src=”https://unpkg.com/react-dom@17/umd/react-dom.development.js” crossorigin></script>

<!– The 3rd link is that of Babel, which is needed to compile our React code so it is understood by all browsers”. –>
<script src=’https://unpkg.com/babel-standalone@6.26.0/babel.js’></script>

<!– Load the React component file. –>
<script type=”text/babel” src=”like_widget.js”></script>

İkinci olarak,  React bileşenini takmak ve işlemek istediğiniz kısmı işaretlemek için biçimlendirme dosyanızın herhangi bir yerinde bir <div> oluşturursunuz. Ayrıca, daha sonra JavaScript kodunda noktayı bulmak için kullanacağımız benzersiz bir kimlik de verirsiniz. Örneğin:

<!-- ... Your existing HTML markup ... -->

<div id="like_widget_container"></div>

<!-- ... Your existing HTML markup ... -->

Son adım, aşağıda gösterildiği gibi gerçek like_widget JavaScript dosyasını oluşturmaktır:

// Custom React component function that returns a JSX syntax

const ActualWidget = () => <h1>Hello World</h1>;

// Select the container

const container = document.getElementById(“like_widget_container”);

// Render the component to the DOM

ReactDOM.render(<ActualWidget />, container);

React.js Çıktısı

Uygulamayı çalıştırırsanız, aşağıda gösterildiği gibi tam olarak işaretlediğiniz noktada tarayıcıya “Merhaba Dünya” yazacaktır.

ActualWidget işlevi tarafından döndürülen JavaScript XML (JSX) adlı garip bir sözdizimini fark etmiş olabilirsiniz. HTML ve JavaScript’i kolaylıkla birleştirmek için JSX’i React ile kullanırsınız. Facebook, HTML işlevselliğini doğrudan JavaScript koduna gömerek genişletmek için JSX’i JavaScript için bir sözdizimi uzantısı olarak geliştirdi. JSX ile, HTML ve JS kodlarını ayırmaya gerek yoktur, çünkü React doğrudan JavaScript kodunda bildirime dayalı HTML yazmanıza izin verir.

Eksiksiz Bir React Uygulaması Oluşturma

Bir arabirimin küçük parçalarını oluşturmak için React’i kolayca mevcut bir web uygulamasına bırakabilseniz de, tam teşekküllü web uygulamaları oluşturmak için React’i kullanmak daha pratiktir. Bununla birlikte, React’in muhtemelen yeni React uygulamaları oluştururken kurulumu göz korkutucu ve sıkıcı olan ağır araç yapılandırma gereksinimleri vardır.

Neyse ki, bu yapı kurulumunu öğrenmeniz veya yapı araçlarını kendiniz yapılandırmanız gerekmiyor.  Facebook, bir React uygulamasının ortak bir sürümünü oluşturmanıza yardımcı olmak için create-react-app adlı bir Düğüm paketi komut satırı aracı oluşturmuştur. Bu paket, alışılmışın dışında çalışmanıza yardımcı olur ve React uygulamaları için React projeleri arasında hareket ederken tanıyacağınız tutarlı bir yapı 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

Hızlı, verimli ve ölçeklenebilir web uygulamaları oluşturma yeteneği nedeniyle React, kararlılık ve popülerlik kazandı. Bugün köklü şirketlerden yeni kurulan şirketlere kadar binlerce web uygulaması kullanıyor. Birkaç dikkate değer söz:

• Facebook
• instagram
• Netflix
• reddit
• uber
• Airbnb
• New York Times
• Khan Akademisi
• Codecademy
• SoundCloud
• Discord
• WhatsApp Web

React ayrıca daha güçlü hale geldi ve artık React Native kullanılarak yerel mobil uygulamalar ve Electron.js kullanılarak Masaüstü uygulamaları oluşturmak için kullanılabilir.

React.JS’ye Başlarken

Bu makale React.js’yi tanıttı, geçmişini sağladı ve React’in JavaScript’in yeteneklerini nasıl genişlettiğini gösterdi. Ayrıca, geliştiricilerin React.js’yi nasıl kullandıklarına ilişkin bazı örnek kullanım durumları ve geliştiricilerin neden yalnızca JavaScript kullanmak yerine React.js’yi kullanmayı seçtiklerini vurgulamak için React.js kodunu ve sözdizimini gösteren bazı kısa kod parçacıkları sağladı. Makale, React.js kullanılarak oluşturulan bazı popüler uygulama örnekleriyle sona erdi.

React, son teknoloji işlevsellik sağlar ve kullanımı kolay ve oldukça üretken bir JavaScript framework arayan geliştiriciler için mükemmel bir seçimdir. React’i kullanarak, JavaScript tabanlı sayfalarla rekor sürede sunucuyla iletişim kuran karmaşık kullanıcı arabirimi etkileşimleri oluşturabilirsiniz. Gereksiz tam sayfa yeniden yüklemelere elveda deyin ve React ile oluşturmaya başlayın.