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

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