$30 off During Our Annual Pro Sale. View Details »

React Native Türkçe Sunum

React Native Türkçe Sunum

React Native hakkında 14 Nisan 2015'te JavaScript Ankara'da yaptığım sunum

Video adresi: https://www.youtube.com/watch?v=kNO_rgpGH9M

Üstün Özgür

April 16, 2015
Tweet

More Decks by Üstün Özgür

Other Decks in Programming

Transcript

  1. React Native
    Üstün Özgür
    @ustunozgur

    View Slide

  2. Ana Noktalar: 1/2
    • JavaScript ile native (yerli) uygulamalar
    • Yerli iOS Bileşenleri
    • UITabBar, UINavigationController, UIView
    • UITableView yok; ama ListView var
    • PhoneGap, ionic gibi melez web değil
    • Chrome Dev Tools ile debug edilebilir

    View Slide

  3. Ana Noktalar: 2/2
    • Yerli dokunma sistem (yerli uygulama hissi için çok
    önemli)
    • Flexbox ve stillendirme
    • Uzatılabilme: Yerli (Obj gibi) kod ile
    zenginleştirilebilir
    • npm kütüphaneleri kullanılabilir
    • underscore, momentjs gibi

    View Slide

  4. Web'de React: Bileşenler
    Bilesen = React.createClass({
    render: function () {
    return
    Merhaba

    }});

    View Slide

  5. React Native'de Bileşenler
    Bilesen = React.createClass({
    render: function () {
    return
    Merhaba

    }});

    View Slide

  6. Web'de Olaylar
    Bilesen = React.createClass({
    onClick: function () { alert("Tıkladınız")},
    render: function () {
    return
    Merhaba

    }});

    View Slide

  7. Mobilde Olaylar
    Bilesen = React.createClass({
    onPress: function () { console.log("Tuşa bastın");},
    render: function () {
    return

    Merhaba


    }});

    View Slide

  8. Stillendirme
    • JavaScript içinde stil sayfaları
    • Yerleştirme ve konumlandırma için flexbox'ın
    altkümesinin gerçekleştirimi
    • CSS'teki gibi class'lar yok, stil sayfalarındaki stiller
    kullanılmakta

    View Slide

  9. Stilleri Tanımlamak
    var styles = StyleSheet.create({
    myStyle: { color: 'red', fontSize: 12},
    anotherStyle: { color: 'yellow', padding: 10, marginTop: 5}
    container: {flex: 1, flexDirection: 'row',
    justifyContent: 'center'}
    });

    View Slide

  10. Stilleri Kullanma
    React.createClass({
    render: function () {
    return
    Merhaba

    }});

    View Slide

  11. Flexbox
    • Esnek Kutu Sistemi
    • Modern tarayıcılar tarafından desteklenir
    • CSS'in konumlandırma sorunlarını çözer
    • Satır ve sütun
    • Kutular büyüyüp küçülebilir (flex: 1, flex: 2)
    • Kutu dağılımı: flex-start, flex-end, center ...
    • React Native'de bir alt kümesi gerçekleştirilmiş

    View Slide

  12. Flexbox

    View Slide

  13. Demo

    View Slide

  14. Sorular?
    Üstün Özgür
    @ustunozgur
    [email protected]

    View Slide