5

React.js Giriş

2. yazı : React.js Projesi Geliştirmek için Ortam Oluşturmak

Açık kaynak dünyasına katkı sağlayan Facebook tarafından geliştirilen React.js, JavaScript ile önyüz bileşenleri oluşturma kütüphanesidir. Şuan piyasada popülerliği yüksektir.

Bu yazı ile, React.js kütüphanesine giriş yapmayı amaçlıyoruz. Bu yazıyı oluşturmamda bana desteğini ve bilgilerini esirgemeyen Rahman Usta Hocama teşekkürü borç bilirim.

Şunu belirtmeden geçemeyeceğim React.js ile React Native’i karıştırmamalıyız. React Native mobil uygulama geliştirmeye yöneliktir.

React.js kaynak dosyalarına Github repository’si üzerinden ulaşabilirsiniz. Commit geçmişinde biraz geriye gidip ilk commite baktığımızda, 29 Mayıs 2013 tarihinde açık kaynaklı bir projeye dönüştürüldüğünü görebiliriz.

react_github

React Redux, Flux gibi diğer yardımcı kütüphaneler olmadan tek başına kullanıldığında MVC(Model-View-Controller) tasarım deseninin V kısmına karşılık gelir.

React yazarken html içine JavaScript yazmak yerine, JavaScript içine html yazıyoruz.

 

React ne yapar?
React, observer desing pattern’ını kullanır. Bu sayede, uygulamanızdaki state değişikliklerini sizin yönetmeniz gerekmez. React state değişikliklerini tespit ederek UI’ı tekrar oluşturur. Bu noktada akla şu soru gelebilir: Her değişiklik DOM nesnelerinin yeniden oluşturulmasıyla sonuçlanıyorsa, bu performans kaybına sebep olmaz mı? Bu sorunun cevabı hayırdır çünkü React, Virtual DOM olarak adlandırılan sanal bir DOM mekanizması kullanmaktadır.

 

Virtual DOM nedir?
İsminden de anlaşılacağı gibi Virtual DOM, gerçek DOM’a karşılık gelen sanal bir DOM nesnesidir, yani render edilen DOM’un bir kopyasıdır. React her state değişikliğinde render edilen gerçek DOM’u bütünüyle tekrar oluşturmak yerine, state değişikliğini Virtual DOM’a yansıtmaktadır. Bu sayede gerçek DOM ile ve yeni sanal(virtual) DOM arasındaki farklılıkları tespit ederek, gerçek DOM’da yapılacak değişikleri hesaplar ve tek seferde sadece gerçek DOM’da değişen elemanları yeniden render eder. Bu şekilde state her değiştiğinde ana DOM’un tüm elemanlarıyla yeniden oluşturulması maliyetinden korunulmuş ve azami performans iyileştirmesi sağlanmaktadır. Gerçek DOM render edildiğinde, virtual DOM ile eşittir. Virtual DOM’da bir değişiklik meydana geldiğinde, gerçek DOM’a sadece değişikliğe konu alanlar yansıtılır ve her iki DOM tekrar birbirine eşitlenmiş olur. Aşağıdaki grafikte, bu döngü anlatılmaya çalışılmaktadır.

 

JSX
React ile geliştirme yaparken JS yerine JSX syntax tercih etmek bir best practice’tir.

JSX kod yazımını kolaylaştırmak ve okunabilirliği arttırmak için geliştirilmiş bir JavaScript söz dizimidir. JSX söz dizimi kullanmadan React ile geliştirim yapmak zordur diyebiliriz. Bunun neden böyle olduğunu anlamak için bir html elemanının JS ve JSX’te nasıl oluşturulduğunu görelim.

 

Örnek HTML elemanımız:

<button class="btn btn-primary">Kodcu.com</button>

JS:

React.createElement(“button”, {className: “btn btn-primary”}, “Kodcu.com”);

JSX:

<button className=“btn btn-primary”>Kodcu.com</button>

Dikkat edilirse JSX söz dizimi neredeyse pür XHTML ile kodlama yapma rahatlığı sağlamaktadır.
JSX’te, XHTML’dekine benzer katı kurallar vardır. Açılan etiketler mutlaka kapatılmalıdır. Büyük küçük harfe dikkat edilmelidir.

<EtiketAdi/>
<EtiketAdi></EtiketAdi>

Bu ve benzer kurallar, yazım hatalarını minimize etmemize olanak sağlamaktadır. JSX, Transpiler ile yazdığınız kodu JS’ye çevrilir, pipeline basitçe şu şekilde: JSX → Transpiler → JS

Yukarıda JSX ile XHTML benzerliğine dikkat çektik ancak yinede bazı JSX attributeleri bir kaç farklılığa sahiptir.

Örneğin:
class → className
for → htmlFor

Buradan tüm tag ve attribute’lara erişip daha detaylı bilgi edinebilirsiniz.

 

React bileşeni
Bir React bileşeni bir DOM nesnesidir ve kendi içinde birden fazla bileşen barındırabilir. Bu kompozit yapı içinde bir React bileşeni kendi içinde ne kadar eleman barındırırsa barındırsın, tek bir bileşen olarak dönmelidir. Örneğin aşağıdaki örnekte, bir h3 ve p elemanı, bir div elemanıyla sarmalanıp tek bir bileşen olarak döndürülmektedir.

JS:

JSX:

örneğe buradan ulaşabilirsiniz

 

React bileşeninin yaşam döngüsü

biraz çeviri gibi olacak ama yinede yazmakta fayda var

componentWillMount()   →  bileşen oluşturulmadan önce

componentDidMount()  → bileşen oluşturulduktan sonra

componentWillReceiveProps(newProps)  → yeni props eklenmeden önce

shouldComponentUpdate(newProps, newState) → bileşenin güncellenip güncellenmeyeceği kararı verilir. (default olarak her zaman true döndürür)

componentWillUpdate(nextProps, nextState) → bileşen güncellenmeden önce

componentDidUpdate(prevProps, prevState) → bileşen güncellendikten sonra

componentWillUnmount() → bileşen DOM’dan silinmeden önce

render() → bileşenin render işlemi (return edilecek )

örneğe buradan ulaşabilirsiniz

 

React bileşen eventleri
ilk aklıma gelen onClick eventi üzerinden örnek vermeye çalışacağım diğer eventler için buradan bakabilirsiniz. Eventlere metodlar bağlanır (bind).

örneğe buradan ulaşabilirsiniz

 

React bileşenlerinin tekrar kullanılabilirliği, dinamikliği ve erişimi sağlamak için props, state refs adında 3 alana sahip.

 

Props: Nesneye yönelimli programlamada kurucu metoda verilen parametreler gibi düşünebiliriz. Sonradan değişmeyecek veriler React bileşeni oluşturulurken bileşene bağlanır(bind).

örneğe buradan ulaşabilirsiniz

 

Refs: DOM’daki React bileşenlerine erişmemiz için kullanılır. Küçük bir örnekle bileşen oluşturulduktan sonra içeriğini değiştirelim.

örneğe buradan ulaşabilirsiniz

 

State: Bileşen içinde değişecek veriler için kullanılır. Stateler değiştiğinde React ne yapar? başlığından öğrendiğimiz gibi React bu değişiklikleri algılar ve yeniden render işlemine gider.

örneğe buradan ulaşabilirsiniz

Göksel Pırnal

5 Comments

  1. Teşekkürler içerik gayet faydalı oldu.

  2. çok teşekkürler. Çok faydasını gördük. Biraz daha araştırıp eğer uygunsa bir projemizde uygulayacağız.

    Mobil ile uyum sorunu var deniyor. Bundan çekiniyoruz. Bu konuda tecrübeniz varsa paylaşır mısınız?

    Çok teşekkürler.

  3. Merhabalar, guzel bir yazi olmus kisa ve oz. eline saglik hocam.

Bir Cevap Yazın