React.js'e Giriş - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Sanal DOM (Virtual DOM)

Slide 18

Slide 18 text

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ı

Slide 19

Slide 19 text

Bileşenler Components

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Basit Bir Bileşen: MerhabaDunya

Slide 24

Slide 24 text

Basit Bir Bileşen: MerhabaDunya var MerhabaDunya = React.createClass({ render: function () { return

Merhaba Dünya

; } }) React.createElement("div", null, "Merhaba Dünya") JSX

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Karmaşık Bir Bileşen: Selamlama

Slide 27

Slide 27 text

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

) } })

Slide 28

Slide 28 text

Parametreli Bileşenler

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

props kullanan MerhabaDunya var MerhabaDunya = React.createClass({ render: function () { return

Merhaba {this.props.isim}

} }) JSX React.createElement("div", null, "Merhaba",this.props.isim)

Slide 31

Slide 31 text

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

} })

Slide 32

Slide 32 text

Değişen Veri: state

Slide 33

Slide 33 text

Değişen Veri: state

Slide 34

Slide 34 text

var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, render: function () {

Sayaca {this.state.sayac} kez tıkladınız

} })

Slide 35

Slide 35 text

var Sayac = React.createClass({ getInitialState: function () { return {sayac: 0}; }, render: function () { return (

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

); } })

Slide 36

Slide 36 text

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ç

; } })

Slide 37

Slide 37 text

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

) } }) setState!

Slide 38

Slide 38 text

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ı

Slide 39

Slide 39 text

İleri ve geri sayan sayaç

Slide 40

Slide 40 text

İleri ve geri sayan sayaç

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Örnek: Çift Sayaç

Slide 45

Slide 45 text

Örnek: Çift Sayaç

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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 (

); } })

Slide 50

Slide 50 text

); } })

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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