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 Kullanan Siteler
React Kullanan Siteler

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.

Tüm sınıflar

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,

jsx-compiler-react

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.

react-ornek-anlatim

 

Bir sonraki React anlatımında görüşmek üzere hoşça kalın..

Bir Frontendci

Frontendci.com, sektörde çalışan ve gelecekte bu sektörde çalışmak isteyen tüm frontend geliştiriciler için türkçe html, css ve javascript eğitim, anlatım kaynaklarını derlemek amacıyla kurulmuştur. Türkçe eğitim videoları, anlatımlar, makaleler ve sunumların toplandığı bir mecradır.

Tüm içerikleri göster

1 yorum

Bir Cevap Yazın