Interactive UI tasarımlarını acısız bir şekilde yapmanızı sağlar.
React’ın resmi sitesindeki tanımı bu.
Aslında hiç fena bir tanımlama değil. Herkes galiba Facebookun web sitesinden mesajlaşırken yaptığı refreshleri hatırlıyordur.
Bu mesaj niye hala gelmedi yaaa!!!Hala mesaj atmadımı bana o??? F5-F5-F5
Facebook’da sağ tarafta sürekli bir hareketlilik vardır. Birşeyleri beğenenler ve online arkadaşlar anında güncellenir sağ kısımda. Hatırlayın hoşlandığınız kız acaba ‘online oldumu’ diye merak ederken yaptığınız refreshleri.
Gerçek zamanlı güncellenen web siteleri geliştirmek bukadar zor olmamalı…
Bunlara çözüm olarak birçok javascript frameworkleri var. Angular, Ember gibi birçok gelişmiş faremwork var. .net icin durum biraz vahim.
Facebook’un ise bu problemleri cozmek için gelistirdigi sistem React.
İlginçde bir öyküsü var. Facebook şirketi React’ı geliştiriyor ve web sitesinde bolca kullanıyor. Sonra Zuckerberg iyi para dökerek instagramı satın alıyor. İnstagramı satan eleman şimdilerde köşe, keyfini sürüyor o paraların, ama İnstagram çalışanları için çok fazla birşey değişmiyor. Aynı işi yapmaya devam ediyorlar. O zamanlar instagramın mobil uygulamaları var ama Web sitesi yok. Zuckerberg bir web sitesi istiyor, bu arada İnstagram çalışanları Facebook çalışanları ile kaynaşmış kodları bile incelemiş.
Değişik bir yapı var Facebook’un kodlarında. Diyorlar bu nedir? Tabi ozamanlar yapıya henüz react ismi bile verilmemiş. İnstagramcılar diyorki, bu yapı güzelmiş, bu sistemi facebooktan bağımsız hale getirin, bizde web sitesini aynı yapı ile yapalım.
Oturuyorlar, sistemi bağımsız hale getiriyorlar, İnstagramın tamamını bu sistem ile yapıyorlar, birde yetmezmiş gibi, bunu babalarının hayrına bütün dünya ile paylaşıyorlar. Seviyorum bu insanları. Adına da React JS diyorlar.
React js kodları açılınca, herkes önceleri bir dalga geçiyor. Bu nedir aga diyorlar, kıs kıs gülüyorlar. Hiçbir best practice ile uyuşmadigi gibi, taban tabana zıt.
Javascript içinde html’mi yazılır diyenler, single page büyük uygulama zor olur diyenler, her taraftan bir darbe geliyor. Ama Airbnb… Bütün akışı değiştiriyor, bir çıkıyorlar, biz sistemi react ile yaptık diyorlar. sonra millet bi duruluyor, o saydıranların hepsi birer birer react kullanmaya başlıyor, öyleki, Google Angularjs den sonra Angular 2’yi yaparken React’ı ve redux’ı inceleyerek yapıyor.
Hadi ozaman bizde girişelim işe. Yanlız Bu makaleyi okuyorsanız hali hazırda biraz HTML ve Javascript bilginizin olması lazım. Gerçi olmayanlar şimdiye çıkmıştır bile 🙂
Html kodlarını bilirsiniz.
<h2> Murat </h2>
h2 burada bir bileşendir(element’de deniyor). Klasik bir html componentidir. Bu bileşeni, bütün browserlar tanır ve gördüğü anda,<h2> etiketlerinin içerisindeki yazının bir başlık olduğunu anlar.
Ancak klasik html’de bileşenler çok kısıtlı ve yetersiz, üstüne üstlük benzer işlemleri yapmak için her seferinde aynı kodları yazmanız gerekir. Kod tekrarı gereğinden fazla olur, okunulurluğu azalır, sayfadaki bir alanı değiştirmek için arar durursunuz.
Reactın birincı olayı, siz kendi componentinizi yazabilirsiniz. Tıpkı, <div> gibi, <table > gibi yeni componentler oluşturup, bunu istediğiniz yerde kullanabilirsiniz.
Örneğin bir alışveriş sitesinde ürünleri listelerken, yukaridaki gibi bir kart kullanmak istediniz. Html ve bootstrap ile şu tarz bir kod yazmanız gerekiyor.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Güzel, bu kodu yazdık, ancak, bunu her seferinde yazmanız gerekiyor. Eğer bir kod tekrarı yapmamak için bir ‘loop’ ile dönmek isteseniz bile, başka bir sayfada kullanmak için mecburen ‘aynı kodu’ tekrar yazacaksınız. Yahut Asp.net’in aslında string replace’den ibaret olan htmlHelperlarını kullanacaksınız, ki bu uzun zaman alacak ve performans sıkıntılarına neden olacak.
Eğer bunu React ile yapmak isteseydiniz, yapacağımız işlem sadece şu olacaktı.
Bir variable olusturacaktik, React.createClass metodunun icine, ayni neredeyse ayni htmli yazacaktik.
var Card = React.createClass({
render: function() {
return (
<div className="card" style={{width: '20rem’}}>
<img className="card-img" src="..." alt="Card image cap" />
<div className="card-block">
<h4 className="card-title">{this.props.title}</h4>
<p className="card-text">{this.props.content}</p>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
);
}
});
Artık sizin tıpkı <div></div> gibi bir componentiniz var.
Sıkı durun. Uygulamanızın her yerinde yanlızca
<Card title=”Kart Başlığı” content=”Kart İçeriği” />
Şeklinde bu componenti kullanabilirsiniz. Tek ihtiyacınız olan şey yeni compnentinize gereken propertyleri vermek.
Şimdi gelelim react’ın asıl olayına.
State
React ile bir uygulama geliştirirken, hemen hemen bütün dinamik değerleri State denen bir obje içerisinde tutarsınız. Ekranda göstereceğiniz zaman bu state içerisinden gösterirsiniz.
Daha sonra bu dinamik alan değiştiğinde, react o state’i çöpe atar, ve yenisini ekranda gösterir.
Yani State’leri bir nevi global değişken olarak düşünebilirsiniz. Ancak, React, bu objeler değiştiğinde, anında algılar, eskisini çöpe atar, ve yenisini ekranda gösterir.
Bir global değişken düşünün, değişiklik olduğunda, bunu tekrar, innerHtml’e vs. atama yapmanız gerekir.
var variable = 11; $(‘#myDiv’).innerText = variable;
//başka biryerde tekrar newVariable= 12; $(‘#myDiv’).innerText = newVariable;
Komplex bir uygulamada yapılan her değişiklikten sonra bu atamalarla uğraşmak acı verici olsa gerek. Hatta düşününki aynı değeri sayfada birkaç yerde gösteriyorsunuz. Ne yapacaksınız?
//Her tarafa tekrar tekrar atama yap.
newVariable= 12;
$(‘#myDiv’).innerText = newVariable; $(‘#yourDiv’).innerText = newVariable; $(‘#hisDiv’).innerText = newVariable; $(‘#herDiv’).innerText = newVariable; $(‘#ourDiv’).innerText = newVariable; $(‘#theirDiv’).innerText = newVariable;
// Divlerden birini unuttuk mu acaba? // Bu ney lannn!!!
Birde JQuery’e az kod çok iş derler. Bu olsa olsa çok laf az iş olur 🙂
Bu tarz kodlardaki hatalar yüzünden, Facebook’ta mesajlaşırken ikide bir sayfayı yeniliyordunuz.
React ile ‘variable’ nesnesini state objesinin içinde tutuyoruz, ve variable değiştiği anda, react eskisini çöpe atıyor, yenisini yerine koyuyor. Hemde hepsinin yerine!
Bir örnek ile daha iyi anlaşılacaktır.
Counter Örneği
Bir sayı göstergeci yaptığınızı düşünün. Jquey ile, Asp.net ile veya php ile.
2 tane buton olacak, bunlardan birisi artı ve diğeri eksi işaretli, ve aralarında bir sayı.
Klasik Yöntem JQuery
Buton’a tıklanma listener ataması Global değişken tanımı: counter Buton’a tıklandığında counter değerini değiştir Counter’ın ekranda gösterildiği alanı değiştir.
React ile
State içine counter nesnesini oluştur.
Butona tıklandığında counter’ı güncelle.
class App extends Component {
state = { counter: 0 }
render() {
return (
<div className=”App”>
<button onClick={() => {this.setState({ counter: this.state.counter + 1 })}}>
Artır
</button>
<h2>{this.state.counter}</h2>
<h1>{this.state.counter}</h1>
<div id=”myDiv”>{this.state.counter}</div>
<div id=”yourDiv”>{this.state.counter}</div>
<button onClick={() => {this.setState({ counter: this.state.counter – 1 })
}}>
Azalt
</button>
</div>
);
}
}
Evet Hepsi bu. Kodu biraz açıklayıp, makaleyi bitirelim.
Gördüğünüz gibi state aslında sadece bir objeden ibaret.
İçine istediğiniz herşeyi koyabilirsiniz. Arrayler, ve devasa objeleri bu state içerisine saklayabilirsiniz.
html kodları içerisinde gördüğünüz süslü parantezler, aslında o alanın bir javascript kodu olduğunu gösteriyor.
<button onClick={() => { this.setState({ counter: this.state.counter + 1 }) }}>
Artır
</button>
Burada tek yaptığımız onClick event’ı ile state içerisindeki counter’ı bir artırmak. Bunu yaptığınızda, Ekranda gördüğünüz counter değerleri güncellenecek. Hepsi yepyeni değeri alacak. Nasıl alacak? Eskisi çöpe gidecek, yerine yenisi gelecek.
Sonuç olarak, eğer bu makaleyi okuduysanız react öğrenmeye yeni başladınız ve kafanızda soru işaretleri var.
React’ı öğrenmeli miyim?
Benim buna cevabım, Eğer web programlama ile ilgineiyorsan, kesinlikle React öğrenmelisin. Eger web programlama yapiyorsan ve mobil yazmak istiyorsan yine ogrenmelisin cunku React Native var. Hemen hemen ayni yapi ile yine javascript yazarak mobil uygulama gelistirebilirsin. Airbnb ve İnstagram gibi devasa uygulamalar bile bu sekilde yapildi. Ayrıca Hele hele .net’ci isen, gelişen yazılım dünyasından uzak kalıyorsun, bırak artık aspx sayfalarını ve yeni denizlere açıl derim. Artık Microsoft’un bile firma olarak kendi teknolojileri ile web veya mobil projeler geliştirdiğini zannetmiyorum 🙂
Çok farklı bakış açıları kazanacaksınız, farklı dünyalara gireceksiniz, ama emin olun çok eğleneceksiniz.
Herkese mutlu kodlamalar 🙂