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

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

4c57e6248d5f8fda1982aa0443e0adce?s=128

Üstün Özgür

April 16, 2015
Tweet

Transcript

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

  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
  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
  4. Web'de React: Bileşenler Bilesen = React.createClass({ render: function () {

    return <div> <span>Merhaba</span> </div> }});
  5. React Native'de Bileşenler Bilesen = React.createClass({ render: function () {

    return <View> <Text>Merhaba</Text> </View> }});
  6. Web'de Olaylar Bilesen = React.createClass({ onClick: function () { alert("Tıkladınız")},

    render: function () { return <div> <span onClick={this.onClick}>Merhaba</span> </div> }});
  7. Mobilde Olaylar Bilesen = React.createClass({ onPress: function () { console.log("Tuşa

    bastın");}, render: function () { return <View> <TouchableHighlight onPress={this.onPress}> <Text>Merhaba</Text> </TouchableHighlight> </View> }});
  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
  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'} });
  10. Stilleri Kullanma React.createClass({ render: function () { return <View style={styles.container}>

    <Text style={styles.myStyle}>Merhaba</Text> </View> }});
  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ş
  12. Flexbox

  13. Demo

  14. Sorular? Üstün Özgür @ustunozgur ustun@ustunozgur.com