React Nedir? Nasıl Çalışır?

React, kullanıcı arayüzü (UI) oluşturmak için kullanılan en popüler JavaScript kütüphanesidir. Web siteleri işlemek için kullanıcı çıktısına harika yanıt sunan bir yöntemi kullanır.

Bu aracın bileşenleri Facebook tarafından geliştirilmiştir. 2013’de açık kaynaklı bir JavaScript olarak piyasaya sürülmüştür. Şu anda, çok satan listesinin en üstünde yer alan Angular ve Bootstrap gibi ana rakiplerinin önündedir.

Bu makalede React nedir ve bir front-end geliştiricisi olarak işinize nasıl yarar anlamanıza yardımcı olacağız.

Neden React’i Kullanmalısınız?

React Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, ve Instagram dahil olmak üzere yüzlerce büyük şirket tarafından kullanılmıştır. Bu, bu aracın rakip sağladığı avantajların rakipsiz olduğunun kanıtıdır.

İşte React nedir sorusuna olan cevabı daha da kapsamlı olarak anlamanıza yardımcı olacak React’i kullanmanızı gerektiren bazı sebepler:

1. Kullanımı kolay

Açık kaynaklı bir JavaScript GUI kütüphanesi olan React’in en büyük odak noktası vardır; UI görevlerini verimli bir şekilde tamamlamaktır. MVC kalıbındaki (Model-View-Controller – Model Görünüm Kontrolcüsü) “V” olarak sınıflandırılabilir.

Bir JavaScript geliştiricisi olarak React’in temellerini anlamakta zorluk çekmeyeceksiniz. Hatta birkaç günlük kullanım ile web bazlı uygulamalar geliştirmeye bile başlayabilirsiniz.

Bilginizi artırmak için React hakkında birçok makale okuyabilirsiniz. Bu aracı kullanmaya dair pek çok bilgi içermektedirler: kavrayışınızı zenginleştirecek videolar, rehberler ve veriler.

2. Java’da Yeniden Kullanılabilir Bileşenleri Destekler

React aynı fonksiyonu kullanan başka uygulamalara geliştirilen bileşenleri yeniden kullanmanıza izin verir. Bileşen yeniden kullanabilme özelliği geliştiriciler için sıradışı bir özelliktir.

3. Daha Kolay Bileşen Yazma

React bileşeni, HTML ile JavaScript’i birleştirmenizi sağlayan tercihe bağlı bir sözdizimi uzantısı olan JSX kullandığından yazması daha kolaydır.

JSX JavaScript ile HTML‘in mükemmel bir karışımıdır. Bütün web site yapı yazma sürecini açıklar. Ek olarak, kullanılan uzantı birden çok fonksiyonu işlemeyi daha kolay hale getirir.

JSX en popüler sözdizimi uzantısı olmasa da özel bileşenler veya yüksek hacimli uygulamalar geliştirmekte oldukça verimli olduğunu kanıtlamıştır.

4. Sanal DOM ile Daha İyi Performans

React DOM (Document Object Model – Belge Nesne Modeli) işlemini verimli biçimde güncelleyecektir. Tahmin edebileceğiniz gibi bu işlem web bazlı uygulamalarda birçok sorun çıkartabilir. Şanslısınız ki React sanal DOM’lar kullanır, böylece bu sorunu yaşamanıza gerek kalmaz.

Bu araç sanal DOM’lar oluşturmanıza ve onları bir hafıza barındırmanıza izin verir. Sonuç olarak, gerçek DOM’da her değişiklik olduğunda sanal olanı da anında değişir.

Sistem gerçek DOM’un devamlı güncellemeleri zorlamasını önleyecektir. Böylece uygulamanızın hızı aksamayacaktır.

5. SEO Dostu

React çeşitli arama motorlarında erişilebilen bir kullanıcı arayüzü oluşturmanıza izin verir. Bu özellik çok avantajlıdır çünkü bütün JavaScript frameworkleri SEO dostu değildir.

Üstelik, React’in uygulama sürecini hızlandırabileceğinden SEO sıralamalarınızı da yükseltebilir. Ne de olsa SEO optimizasyonunda web site hızının rolü çok önemlidir.

Ancak React’in sadece bir JavaScript kütüphanesi olduğunu unutmayın. Bu demektir ki her şeyi kendi başına yapamaz. Ek kütüphanelerin kullanımı durum kontrolü, yönlendirme ve etkileşim için gerekebilir.

React Nasıl Çalışır?

React nedir öğrendiğinize göre sırada React’in nasıl çalıştığı var. HTML kodlarını JavaScript’te yazabileceğinizi öğrendiğinize şaşırabilirsiniz. Ancak React de tam olarak böyle çalışır.

Bir DOM node’unun temcilsini oluşturmak React’de Element fonksiyonunu oluşturmakla yapılabilir. İşte bunun bir örneği:

React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });

Fark ettiyseniz yukarıdaki HTML kodundaki sözdizimi XML bileşenlerine oldukça benzerdir. Ancaki geleneksel DOM sınıfını kullanmak yerine React className‘i kullanır.

JSX etiketleri bir etiket adına, çocuklara ve niteliklere sahiptir. JSX niteliklerindeki tırnak işaretleri dizileri temsil eder. Bu element JavaScript’e benzerdir.

Ek olarak sayısal değerler ve ifadeler küme parantezleri içinde yazılmalıdır.

Yukarıdaki örnek, JSX uzantısı kullanıldığından React’deki sözdizimini muhteşem biçimde tasvir etmektedir. Basitçe, HTML ve JavaScript’in karışımıdır.

İşte JSX kullanılarak yazılmış bir React örneği:

<div className="red">Children Text</div>;
<MyCounter count={3 + 5} />;
var GameScores = {player1: 2,player2: 5};
<DashboardUnit data-index="2">
<h1>Scores</h1><Scoreboard className="results" scores={GameScores} />
</DashboardUnit>;

Özetlemek gerekirse işte yukarıdaki HTML etiketine dair bazı notlar:

• <MyCounter> değeri olarak, bu durumda rakamsal bir değer gösteren bir sayıdır “count”.
• GameScores iki adet prop değeri çiftine sahip bir nesne gerçeğidir.
• <DashboardUnit> sayfada işlenen XML bloğudur.
• scores={GameScores}: scores niteliği GameScores’dan daha önce de tanımlanmış bir değer alır.

Genellikle React standart JavaScript (JS) yerine JSX (JavaScript XML) kullanılarak yazılır. Ancak bunun amacının React bileşenlerini daha kolay oluşturmak için olduğunu unutmayın.

Standart JavaScript bileşeni ile React bileşeni oluşturabilirsiniz ancak çok dağınık olacağından neredeyse yüzde yüz eminiz.

Üstelik React’de JSX kullanımının arkasındaki fikirse Facebook’un geliştiriciler için temiz ve açık yapılandırmalı tek türden bir sözdizimi uzantısı sağlamak istemesidir.

Sonuç

Son olarak, umut ediyoruz ki size bu makalede react nedir ve nasıl çalışır öğretebilmişizdir. Makalemizi bitirmek için işte konuyla alakalı bazı notlar:

1. React aslında Facebook tarafından tanıtılmıştır.
2. Dünya çapında birçok büyük marka ve şirketler tarafından kullanılmıştır.
3. React bir JavaScript kütüphanesi olarak işlev görür. Ancak ayrıca bir framework olarak da sınıflandırabilir.
4. Bu framework tek başına çalışamaz. Yönlendirme ve yönetim gibi çeşitli amaçlar için ek elementlere ihtiyaç duyarsınız.
5. React, daha iyi sayfa optimizasyonu için sanal DOM kullanır.
6. Bu framework’ü kullanması kolaydır ve SEO dostudur.
7. Bileşen yeniden kullanılabilirliğini destekler.
8. Basitçe HTML ve JavaScript’in muhteşem bir karışımı olan JSX uzantısını kullanır.
9. React JSX’i daha iyi performans verdiği için değil yazmayı kolaylaştırdığı için kullanır.