React Night
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Intro to React Native
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1710194/logo-ex.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1710185/1525675_10152128594964647_620970358_n.jpg)
Chi sono
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1692526/giorgio.jpg)
Giorgio Mandolini
Intro to React Native
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538410/logo_react.png)
React Native
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
"A framework for building native apps using react"
Why React Native?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Get the best from web & native
Learn once - Write anywhere
Native iOS Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Native iOS Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
ActivityIndicatorIOS
DatePickerIOS
Image
ListView
MapView
Navigator
Modal
NavigatorIOS
PickerIOS
ProgressViewIOS
ScrollView
SegmentedControlIOS
SliderIOS
SwitchIOS
TabBarIOS
TabBarIOS.Item
Text
TextInput
TouchableHighlight
TouchableOpacity
TouchableWithoutFeedback
View
WebView
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var { AppRegistry, StyleSheet, Text, View } = React;
var ReactNight = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Night!
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('ReactNight', () => ReactNight);
Composite Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
render() {
return (
<View>
<Text style={styles.title}>
React Native Todo-List
</Text>
<Form/>
<List/>
</View>
);
}
Touch Handling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Native, not webview
Styling
Layout impacts a lot
learn once - write everywhere
JSX
JSX
like the web
<View>
<Text>
<TextInput>
<Image>
<div>
<span>
<input>
<img>
Web
Native
Inline styles!?
render() {
return (
<View style={styles.row}>
<TextInput
placeholder="Add a ToDo..."
style={styles.input}
value={this.state.todoText}/>
<TouchableHighlight
style={styles.button}>
<Text style={{textAlign:'center'}}>Save</Text>
</TouchableHighlight>
</View>
);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1708539/The_Scream.jpg)
<TextInput style={styles.input} />
Wait!
Style are objects!
var styles = StyleSheet.create({
row: {
flexDirection: 'row',
},
input:{
flex:9,
borderWidth:1,
borderColor:'black',
margin:10
},
button:{
flex:3,
borderWidth:1,
borderColor:'black',
margin:10
}
});
Style are objects
No more LESS or SASS
it's JavaScript!
Flexbox in React
https://github.com/facebook/css-layout
- Subset of CSS
- Written in JS
- Transpiled in C & Java
Many Approaches
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Native
Webview (Cordova, ionic ...)
Compiling to native (xamarin ...)
JS Bridge (Ti, NTS, React Native)
How React Native works?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Javascript
Native
How React Native works?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
- View operations in the main thread
- Other operations in a different thread
- A diff algorithm
JS & Native are Asynch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
You can use all your native code you want but...
remember it!
Asynch: on Flexbox
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Layout needs measures, asynch doesn't help
Transpiled to Native
Running & Debugging
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1708654/Schermata_2015-09-10_alle_04.33.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1708662/meme.jpg)
Chrome & React
developers tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/370423/images/1708671/Schermata_2015-09-10_alle_04.40.02.png)
Android?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
http://www.reactnativeandroid.com/
Demo time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Discussion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
Thank you!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/141283/images/1538392/logo-ex-small.png)
React Night: Mobile
By Giorgio Mandolini
React Night: Mobile
- 1,770