Nedir bu React.js?

Mehmet Ali FIRAT
Nov 1 · 6 min read

React Facebook tarafından geliştirilmiş bir `JavaScript` kütüphanesidir. Geliştiricilerin React için tanımı ise:

Kullanıcı arayüzleri geliştirebileceğiniz bir JavaScript kütüphanesi

şeklindedir. Ama aslında bu daha önce

“İnteraktif UI tasarımlarını acısız bir şekilde yapmanızı sağlar.”

şeklinde iddialı bir sözdü. Buradan anlaşılan şudur ki artık eskiye göre biraz daha acılı ve sancılı bir şekil almış durumda. Çünkü sürekli gelişen yapısı, eklenen yardımcı modüller, versiyonlar arası farklılıklar ya da uyumsuzluklar, eklenen ya da kaldırılan özellikler falan derken çok daha kafa karıştırıcı bir hal aldı. Ama bu demek değildir ki `React` kullanmayalım aksine çok daha kullanışlı bir hal aldı, sadece biraz daha uğraşmak gerekiyor yine de işimizi çok ama çok kolaylaştırıyor; tüm mesele mantığını anlamakta.

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

React’ın çalışma mantığına geçmeden önce bilmemiz gereken, biliyorsak da hatırlamamız gereken bir kaç konu var. HTML sayfalar render edildiklerinde tarayıcı tarafından bir nesne ağacı oluşturulur ki buna DOM adı verilir. Örneğin aşağıdaki tablo temsili bir HTML sayfası için oluşacak DOM yapısı gösterilmiştir.

Örnek bir HTML sayfası(sağda) için oluşan DOM(solda)

Saf JavaScript ya da JQuery gibi yardımcı kütüphaneler ile bu HTML sayfalara müdahale ederken bir elemente ulaşmak(id,class...) için tüm DOM taranır ilgili nesne bulununca yapılacak işlem yapılır ve sayfa yeniden render edilirdi. React ise bu işlemi Sanal DOM (Virtual DOM) adını verdiği ikinci bir DOM yapısı oluşturarak daha efektif bir hale getirmekte. Şöyle ki; React aktif DOM yapısının birebir aynısı oluştururken nesneleri “key-value” ikilileri şeklinde indexliyor ve bir nesne(bileşen)de bir değişiklik olduğunda önceki ve şimdiki DOM yapısını kıyaslayarak sadece farklılık olan nesneyi değiştiyor ve son halini bizlere sunuyor. Bu sayede hem DOM tarama, değişiklik sonrası DOM’u yeniden render etme gibi işlemlerde kolaylık sağlıyor. Akılda kalıcı olması için aşağıdaki görseli inceleyiniz.

React virtual DOM yapısı

Şimdi bu anlatılanların havada kalmaması adına basit bir Geri sayım sayfası yapalım. İlk olarak boş bir html sayfası oluşturalım.

<!DOCTYPE html>
<html lang="tr">
<head>
<title>Geri Sayım</title>
</head>
<body class="container">
<div id="rootJS"></div>
</body>
</html>

şimdi body elementi altına geri sayım işlemini yaptıracağımız JavaScript kodunu yazalım.

<script>
//Geri sayımın yapılacağı tarihi girelim. Ben 2020 Yılbaşını seçtim
var countDownDate = new Date("Jan 1, 2020 00:00:00").getTime();
//setInterval ile x değişkenine interval ataması yapıldı ve
//1000ms sürelik periyotlarda çalışacak fonksiyon bloğumuzu yazdık.
var x = setInterval(function () {
var now = new Date().getTime();
var distance = countDownDate - now;

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById("rootJS").innerHTML = "<p>" + days +" Gün</p>&middot;<p>"
+ hours + " Saat</p>&middot;<p>"
+ minutes + " Dakika</p>&middot;<p>"
+ seconds +" Saniye</p>";

if (distance < 0) {
clearInterval(x);
document.getElementById("rootJS").innerHTML = "Sayım Bitti";
}
}, 1000);
</script>

Ve son olarak da görsel olarak biraz daha derli toplu olması adına bir kaç css kodunu html dosyasımızın head alanına ekleyelim.

body{
background-color: #006064;
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: xx-large;
font-weight: 500;
}
.container{
text-align: center;
padding: 25px;
margin: auto;
width: 60%;
}
p{
text-transform: uppercase;
}

Ne yaptığımdan kısaca bahsetmek gerekirse, geri sayımın başlayacağı zamanı 2020 1 Ocak gecesi olarak belirledikten sonra her 1 saniye de hedef zaman bilgisi ile mevcut tarih ve zaman bilgisinin farkını alıp gün, saat, dakika ve saniye olarak hesaplattırıp ekranda <p> tagları içerisinde gösteriyorum. Burada dikkat edilmesi gereken kısım document.getElementById() fonksiyonu ile dom üzerinde “rootJS” id bilgisine sahip nesneyi arıyor ve .innerHtml içerisine her seferinde güncel bilgiler için <p> taglarını oluşturup kaydediyorum. Burada değişikliğe bakılmaksızın rootJS nesnesinin içi her seferinde sıfırdan yeniden oluşturulmaktadır.

JavaScript ile yapılmış geri sayım ekranı

Bir hata yapılmaması durumunda, oluşturduğumuz html sayfasını trayıcıda açtığımızda yukarıdaki gibi bir ekran göreceğiz. Klavyeden F12 tuşuna basarak ya da sayaca sağ tıklayıp incele butonuna tıklayarak güncellenen alanları aşağıdaki gibi görebilirsiniz.

JavaScript tarafından her bir saniyede güncellenen alanlar.

Şimdi ise aynı işlemi React ile yapalım. Öncelikle React’ı kullanmanın en hızlı yolu olan React CDN bağlantılarını kullanmak için React CDN bağlantıları sayfasından React ve React-Dom kütüphanelerinin linklerini ve “JSX” kullanacağımız için bir Babel.Js compiler’ına ihtiyacımız olacak. Babel’in tarayıcı versiyonuna da bu sayfadan ulaşabiliriz(ya da siz hemen aşağıdan kopyalayabilirsiniz). Bu linkleri html dosyamızın head alanına ekleyelim.

<head>
...
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
...
</head>

Şimdi de body içerisinde React bileşenlerimizi render edeceğimiz div oluşturalım ve id bilgisini root yapalım. Bu isteğe bağlı bir alan oldğunu hatırlatayım, root olmak zorunda değil. Tabi karışıklık olmaması için küçük eklemeler de yapalım.

...
<span>JavaScript</span>
<div id="rootJS"></div>
<hr>
<span>React</span>
<div id="root"></div>
...

Son olarak da React kodumuzu yazalım. Burada React’ı anlamaya çalışmayıp sadece <p> taglarını nasıl oluşturduğumuza, değişkenleri nasıl kullandığımıza dikkat etmeniz yeterli. Daha önce yazdığımız scriptin hemen altına yeni bir script alanı oluşturalım. Burada script tag’inin type niteliğinin “text/babel” olduğundan emin olalım.

<script type="text/babel">
var countDownDate = new Date("Jan 1, 2020 00:00:00").getTime();
var m = setInterval(() => {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
var html = (
<div>
<p>{days} Gün</p>&middot;
<p>{hours} Saat</p>&middot;
<p>{minutes} Dakika</p>&middot;
<p>{seconds} Saniye</p>
</div>
)
if (distance < 0) {
clearInterval(m);
html = "Sayım Bitti"
}
ReactDOM.render(html, document.getElementById('root'));
}, 1000);
</script>

Görüldüğü gibi bir önceki ile benzer yapıya sahip. Burada dikkat etmemiz gereken kısım ilkinden farklı olarak <p> taglerini oluştururken string içerisinde yazıp, string birleştirme yapmadan HTML tagi gibi javascript içerisinde yazabiliyor olmamız ve tarih bilgilerini tuttuğumuz dinamik yapıları (days, minutes, hours, seconds) kullanmak istediğimiz yerde süslüparentez ({}) içerisinde çağırabiliyor olmamız. Bir hata olmaması durumunda HTML sayfamızı görüntülediğimizde aşağıdaki gibi bir sayfa ile karşılaşacağız.

JavaScript ve React ile yapılan gerisayım ekranları

Yine tarayıcımızın Geliştirici ekranını açarak güncelleme işlemi yapılan yerleri gözlemleyebiliriz.

React ve JS ile hazırlanmış gerisayım ekranlarının güncelleme farklılığı

Dikkatli incelenince de anlaşılacağı üzere her ne kadar root div gövdeleri sonradan eklenip render ediliyor olsa da React tarafında sadece değerde değişiklik olan saniye ve saniye sıfırlanınca dakika bilgisi güncellenirken JavaScript tarafında root içeriği her seferinde bir bütün olarak güncellenmekte. Temel olarak React’ın arkaplanda yaptığı iş, çalışma şekli budur.

Peki farklı tarihler için birden fazla gerisayım oluşturmak isteseydik o zaman ne olurdu? Bunun cevabı da React’ın bir diğer güzel özelliği olan Component(Bileşen) yapısı ile kolaylık kazanmış durumda ama bu bir sonraki yazının konusu olsun. Tabi bir sonraki yazıyı beklemeyip daha fazlasını öğrenmek istiyorsanız youtube kanalımdan hazırlamış olduğum React & Redux Eğitim Serisi videolarını izleyebilirsiniz.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade