React Eğitim Serisi – 2: createClass, Render
Daha önce anlattığım React ile proje açmak ve kurulum konusunu tamamladıktan sonra artık yavaş yavaş React’ın felsefesine giriş yapabiliriz.
React nedir? Neden React?
Hepinizin bildiği gibi React’ın çıkış amacı Facebook’un veri değişimlerindeki senkronizasyon olaylarını kolaylaştırmak. Facebook kendi içerisinde kullandğı bu kullanıcı arayüz kütüphanesini Mayıs 2013 tarihinde open source hale getirmiştir. Facebook Instagram’ı satın aldığında Instagram’ın bir web sitesi yoktu. Facebook Instagram’ın web sitesini tamamen React ile kodladı. Netflix, instagram, whatsapp, flipboard, airbnb, facebook, atlassian gibi birçok dev marka sayfalarını kodlarken React’ı tercih ettiler.
React’in son zamanlarda bu kadar konuşuluyor ve kullanılıyor olmasının nedeni çok basit olan felsefesi. Diğer artıları ise component mantığının çok okunaklı ve anlaşılır olması. Bu da veri değişimindeki senkronizasyonu kolaylaştırıyor. Oluşturduğunuz her component veri değiştiğinde React tarafından tekrar F5’e basılmış etkisi gerçekleşiyor ve tekrar render oluyor. Böylece yeni veriniz gerekli tüm alanlara uygulanmış oluyor. Html baştan oluşuyor ve en güncel datayı gösteriyor. Burada çok ince bir nüans var. Eğer React diğer rakipleri gibi (Angular vb..) tüm DOM’u sürekli dinleseydi ya da veri değiştiğinde tüm DOM’u baştan yaratsaydı çok yavaş olurdu. Ancak React bu işi Virtual DOM (Sanal DOM) ile çözerek gerekli yerleri güncelliyor. Component (modül) felsefesi tasarımcıların Atomic Design mantığına çok benziyor. Aynı lego parçalarını birleştirir gibi modüller birleşip organizmaları (sayfaları) oluşturuyor.
Gelelim React ile yeni bir sınıf yaratıp sayfaya Render etmeye. Bu örnek C:ProjectReactEgitimsrccreateClass-Render klasörü içerisinde bulunmakta.
İlk olarak bir src ve build klasorü yaratıyoruz. src klasörümüzün içerisinde bizim yazacağımız main.js kodları olacak. Build klasöründe ise bu main.js dosyamızın JSX compiler‘dan geçmiş hali ve render edeceğimiz index.html‘imiz bulunacak.
Kod yazmaya başlamadan önce React’ın sınıflarına göz atalım.
React.Component
Tekrar tekrar kullanabileceğiniz bileşenleri yazarken kullanılır. React’te her componentiniz ayrı bir js olarak yazılmalıdır ve bir componenti birden fazla yerde çağıracaksanız bu şekilde yazıp daha sonra başka bir js dosyasına extend edebilirsiniz. Şöyle
React.createClass
En çok kullanacağımız standart bileşen yaratma sınıfıdır. Bu bileşenler sadece bu class scope’unda geçerlidir.
React.createElement
Div, title gibi yeni bir tag yaratmak için kullanılır.
React.render
Yine en çok kullanacağımız sınıflardan biridir. Bileşenlerimizi html içerisine render etmemizi sağlar.
Evet artık kodlamaya girebiliriz. Öncelikle bir tane htmlimiz olsun
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Eğitim Serisi - 2: createClass, Render</title> <script src="../react.min.js"></script> </head> <body> <script src="main.js"></script> </body> </html>
Gördüğünüz gibi önce react.min.js‘i çağırıyoruz ondan sonra sayfanın en altında bizim yazdığımız main.js‘in JSX formatına çevrilmiş hali (JSX’e çevirme olayına birazdan değineceğim) yani build klasöründeki halini çağırıyoruz. Bu html çalıştığında bileşenimizi render edeceğiz. Bu alan için de tasarımcınızdan şöyle bir html yapısı geldi diyelim,
<!-- Hello world --> <div class="awesome" style="border: 1px solid red"> <label for="name">İsim: </label> <input type="text" id="name" /> </div> <p>İsminizi girin</p>
Bu kısmı React’a uygun hale getirmek için HTML to JSX toolundan geçirmemiz gerekiyor. Adres ŞU. Sol tarafa htmli kopyalayın sağ tarafta size çıktısını verecektir.
Bize verdiği çıktı şöyle olacak,
var YeniBilesen = React.createClass({
render: function() {
return (
<div>
{/* Hello world */}
<div className="awesome" style={{border: '1px solid red'}}>
<label htmlFor="name">İsim: </label>
<input type="text" id="name" />
</div>
<p>İsminizi girin</p>
</div>
);
}
});Gördüğünüz gibi for’u htmlFor’a, class’ı da className gibi farklı şeylere çevirdi. Bunun nedeni class rezerve bir komut olduğundan className yazmamızı istiyor.
*Bileşen ismine dikkat edin büyük harfle başlıyor.
Evet main.js’de “YeniBilesen” adında bir bileşen oluşturduk fakat bunu sayfada henüz bir yere render etmiyoruz. Şimdi gelelim bu bileşeni bir yere render etmeye.
React.render( <YeniBilesen />, document.body );
Yukarıdaki kodu main.js in hemen sonuna yani bileşeni oluşturduktan sonraya ekliyoruz. Bu YeniBilesen modülünü BODY‘e render et demek.
Böylece kodumuz bitti şimdi daha önceki anlatımda öğrendiğimiz JSX compiler’ı çalıştırıyoruz. Hatırlayalım,
Kısacası src klasöründeki javascriptleri build klasörüne JSX’e çevirerek at diyoruz. Tabii build klasörümüzde daha önceden oluşturduğumuz htmlimiz mevcut. Böylelikle son olarak html’imize baktığımızda aşağıdaki görüntüyü elde etmiş oluyoruz.
Bir sonraki React anlatımında görüşmek üzere hoşça kalın..
elinize sağlık çok güzel ve anlaşılır olmuş.