Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js'e Giriş

React.js'e Giriş

Facebook'un arayüz geliştirme kütüphanesi React.js ile ilgili JavaScriptAnkara grubunda yaptığım sunum

Üstün Özgür

February 12, 2015
Tweet

More Decks by Üstün Özgür

Other Decks in Programming

Transcript

  1. JavaScript Ankara
    javascriptankara.org
    Üstün Özgür
    @ustunozgur
    ustunozgur.com

    View full-size slide

  2. React.js
    Kullanıcı Arayüzü Kütüphanesi

    View full-size slide

  3. Tarihçe
    JSConf Mayıs 2013
    Açık Kaynak

    View full-size slide

  4. http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/

    View full-size slide

  5. Arayüz Geliştirmedeki
    Zorluklar
    Verinin zaman içerisinde
    değiştiği büyük uygulamaları
    basit ve hızlı bir şekilde
    geliştirmek

    View full-size slide

  6. Sunucu tabanlı arayüzler
    Veritabanı Taslak HTML
    f(veri) = html
    t=t0

    View full-size slide

  7. JavaScript
    • 10 gün içinde geliştirildi - Eich
    • "C giysili Lisp" - Crockford
    • Çok esnek, fonksiyonel ve nesne yönelimli
    • CoffeeScript, ES6, underscore...

    View full-size slide

  8. Daha Yeni
    Arayüz
    Daha Yeni Veri
    İstemci tabanlı arayüzler
    f(veri) ≠ html
    t0 t1 t2
    Yeni Arayüz
    Yeni Veri
    Arayüz ve
    Veri
    Zaman

    View full-size slide

  9. 10 kişi Çevrimiçi
    11 kişi Çevrimiçi
    Tek Veri Değişimi
    İki Görüntü Değişimi
    Örnek: Chat
    $('#insanlar').append(htmlYeniKisi)  
    $('#sayi').text($('#sayi').text  +  1)

    View full-size slide

  10. Görüntüyü sürekli
    yeniden oluşturalım
    re-render

    View full-size slide

  11. Daha Yeni
    Arayüz
    Yeni Arayüz
    Daha Yeni Veri
    Yeni Veriden Yeni Görüntü
    f(veri) = html
    t0 t1 t2
    Yeni Veri
    Arayüz
    Zaman

    Veri

    View full-size slide

  12. Sanal DOM (Virtual DOM)

    View full-size slide

  13. Temel Felsefe
    Kullanıcı arayüzün arkasındaki
    veri yapısına ve değişikliklerine
    odaklanmalı ve bu verinin nasıl
    görüntüleneceğini yalnızca bir
    kez tanımlamalı

    View full-size slide

  14. Bileşenler
    Components

    View full-size slide

  15. Basit Bir Bileşen:
    MerhabaDunya

    View full-size slide

  16. Basit Bir Bileşen:
    MerhabaDunya
    var  MerhabaDunya  =  React.createClass({  
       render:  function  ()  {  
           return  Merhaba  Dünya;  
       }  
    })
    React.createElement("div",  null,  "Merhaba  Dünya")
    JSX

    View full-size slide

  17. Sayfaya Monte Etmek
    React.render(,  document.body)
    Monte edileceği yer
    Monte edilecek bileşen

    View full-size slide

  18. Karmaşık Bir Bileşen:
    Selamlama

    View full-size slide

  19. Karmaşık Bir Bileşen:
    Selamlama
    var  Selamlama  =  React.createClass({  
       render:  function  ()  {  
           return  (  
                 
                     
                     
               )  
         }  
    })

    View full-size slide

  20. Parametreli Bileşenler

    View full-size slide

  21. Parametreli Bileşenler
    Çocuk Bileşen
    Merhaba Ustun
    isim=Ustun
    Çocuk Bileşen
    Merhaba Ozgur
    isim=Ozgur
    Çocuk Bileşen
    Merhaba Ali
    isim=Ali
    Ana (Tepe) Bileşen

    View full-size slide

  22. props kullanan
    MerhabaDunya
    var  MerhabaDunya  =  React.createClass({  
       render:  function  ()  {  
           return  Merhaba  {this.props.isim}  
       }  
    })
    JSX
    React.createElement("div",  null,    
               "Merhaba",this.props.isim)

    View full-size slide

  23. var  Selamlama  =  React.createClass({  
           render:  function  ()  {  
               return    
                       
                       
                   
             }  
    })

    View full-size slide

  24. Değişen Veri: state

    View full-size slide

  25. Değişen Veri: state

    View full-size slide

  26. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    render: function () {
    Sayaca {this.state.sayac} kez tıkladınız
    }
    })

    View full-size slide

  27. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    render: function () {
    return (
    Sayaca {this.state.sayac} kez tıkladınız
    Sayaç
    );
    }
    })

    View full-size slide

  28. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    artir: function () {
    // Buraya ne yazmalıyız?
    },
    render: function () {
    return (

    Sayaca {this.state.sayac} kez tıkladınız
    Sayaç
    ;
    }
    })

    View full-size slide

  29. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    artir: function () {
    var suAnkiSayac = this.state.sayac;
    this.setState({sayac: suAnkiSayac + 1});
    },
    render: function () {
    return (

    Sayaca {this.state.sayac} kez tıkladınız
    Sayaç
    )
    }
    })
    setState!

    View full-size slide

  30. Bütün state (veri) değişimleri
    açık seçik
    • AngularJS'te veri değişimi
    • Digest loop
    • Büyük uygulamalarda yavaşlık
    • Uygulamanın nasıl çalıştığının zor anlaşılması

    View full-size slide

  31. İleri ve geri sayan sayaç

    View full-size slide

  32. İleri ve geri sayan sayaç

    View full-size slide

  33. Kaynak veri vs. İşlenmiş veri
    • Tek sayaç değeri: tek bir state değişkeni
    • İki görüntü değeri: işlenmiş veri
    • render'da state değişkeni ile hesapla

    View full-size slide

  34. var Sayac = React.createClass({
    getInitialState: function () {
    return {sayac: 0};
    },
    artir: function () {
    var suAnkiSayac = this.state.sayac;
    this.setState({sayac: suAnkiSayac + 1});
    },
    render: function () {
    return (

    Sayaca {this.state.sayac} kez tıkladınız.
    {10 - this.state.sayac} kez daha tıklamalısınız.
    Sayaç

    );
    }
    Tek değişiklik

    View full-size slide

  35. Ana Bileşen-Çocuk Bileşen
    Haberleşmesi
    Çocuk Bileşen
    Sayı: 5
    sayi=5
    Ana (Tepe) Bileşen
    sayiyiArtir
    sayi=6
    Sayi=6
    Click
    state
    sayı=5
    props
    sayı=5
    props
    sayı=6
    state
    sayı=6

    View full-size slide

  36. Örnek: Çift Sayaç

    View full-size slide

  37. Örnek: Çift Sayaç

    View full-size slide

  38. State'i Nerede Tutalım?
    • Ana bileşende mi?
    • Çocuk bileşende mi?

    View full-size slide

  39. 10 kişi Çevrimiçi
    Örnek: Chat
    Sayı Bileşeni
    İnsan Listesi
    Bileşeni
    Chat Bileşeni

    View full-size slide

  40. Sayaç 1:
    3 kez tıkladın
    Sayaç 2:
    5 kez tıkladın
    Sayaçlar
    state:
    sayac1: 0
    sayac2: 5
    props:
    sayac: 0
    props:
    sayac: 5

    View full-size slide

  41. var Sayac = React.createClass({
    render: function () {
    return (

    Sayaca {this.props.sayac} kez tıkladınız.
    {10 - this.props.sayac} kez daha
    tıklamalısınız.
    Sayaç

    );
    }
    })
    var Sayaclar = React.createClass({
    getInitialState: function () {
    return {sayac1: 3, sayac2: 5};
    },
    sayac1Artir: function () {
    this.setState({sayac1: this.state.sayac1 + 1,
    sayac2: this.state.sayac2 - 1});
    },
    sayac2Artir: function () {
    this.setState({sayac1: this.state.sayac1 - 1,
    sayac2: this.state.sayac2 + 1});
    },
    render: function () {
    return (



    );
    }
    })

    View full-size slide

  42. var Sayaclar = React.createClass({
    getInitialState: function () {
    return {sayac1: 3, sayac2: 5};
    },
    sayac1Artir: function () {
    this.setState({sayac1: this.state.sayac1 + 1, sayac2: this.state.sayac2 - 1});
    },
    sayac2Artir: function () {
    this.setState({sayac1: this.state.sayac1 - 1, sayac2: this.state.sayac2 + 1});
    },
    render: function () {
    return (



    );
    }
    })

    View full-size slide

  43. Diğer Önemli Konular
    • React Native ile iPhone ve Android uygulamaları
    • node.js ile sunucu tabanlı çalıştırma
    • Geliştirme esnasında Chrome eklentisi DevTools
    • Büyük uygulamalar için Facebook'un Flux
    kütüphanesi

    View full-size slide

  44. Sonuç
    • Bütün veri değişiklikleri açık seçik
    • Uygulamalar bileşenlere ayrılmış durumda
    • Veri-görüntü senkronizasyon için sürekli yeniden
    görüntü oluşturma - Sanal DOM

    View full-size slide