React Native, lo bueno, lo malo y lo feo.

1. REACT
NATIVE
GUSTAVO MACHADO (@MACHADOGJ)

2. A JAVASCRIPT
LIBRARY FOR
BUILDING USER
INTERFACES
https://facebook.github.io/react/
ANTES QUE NADA, QUE ES REACT?

3. REACT
var HelloMessage = React.createClass({
//… more code here
render: function() {
var suffix = this.state.greeted ? “again.” : “”;
return <div>Hello {this.props.name} {suffix}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

4. REACT
var HelloMessage = React.createClass({
//… more code here
render: function() {
var suffix = this.state.greeted ? “again.” : “”;
return <div>Hello {this.props.name} {suffix}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

5. REACT
var HelloMessage = React.createClass({
//… more code here
render: function() {
var suffix = this.state.greeted ? “again.” : “”;
return <div>Hello {this.props.name} {suffix}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

6. REACT
render: function render() {
var suffix = this.state.greeted ? “again.” : “”;
return React.createElement(
"div",
null,
"Hello ",
this.props.name,
“ “,
suffix
);
}

7. REACT
var React = require('react');
var ReactDOM = require('react-dom');
var HelloMessage = React.createClass({
//… more code here
render: function() {
var suffix = this.state.greeted ? “again.” : “”;
return <div>Hello {this.props.name} {suffix}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

8. A FRAMEWORK
FOR BUILDING
NATIVE APPS
USING REACT
https://facebook.github.io/react-
native/
QUE ES REACT NATIVE?

9. REACT NATIVE
COMO QUE NATIVAS?
▸UIKit, Android SDK
▸60 fps
▸JavaScript

10. REACT NATIVE
COMO QUE NATIVAS?
JavaScript
Thread
UI
Thread
NATIVE MODULES
EVENTS

11. REACT NATIVE
import React from ‘react-native';
var { AppRegistry, View, Text } = React;
var SuperTimer = React.createClass({
render: function() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
});
AppRegistry.registerComponent('SuperTimer', () => SuperTimer);

12. REACT NATIVE
COMO FUNCIONA?

13. REACT NATIVE
COMO FUNCIONA?
+ “cmd + r” =

14. LO BUENO, LO
MALO Y LO FEO
REACT NATIVE

15. REACT NATIVE
PORQUE RN?

16. REACT NATIVE
COMO FUNCIONA?

17. REACT NATIVE
PLATFORM SPECIFIC
▸CROSS PLATFORM (ie: ListView, Image, etc…)
▸POLYFILLS (ie: navigator.geolocation, etc…)
▸iOS (ie: ActivityIndicatorIOS, PushNotificationsIOS, etc…)
▸Android (ie: DrawerLayoutAndroid, ToastAndroid, etc…)
▸index.ios.js & index.android.js

18. REACT NATIVE
STYLES
▸CSS-LIKE
▸FLEXBOX SUBSET
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
http://browniefed.com/blog/2015/12/23/react-native-flexboxfroggy/

19. REACT NATIVE
NAVIGATOR
▸Navigator
▸NavigatorIOS
▸ExNavigator
▸NavigationExperimental

20. REACT NATIVE
ANIMATIONS
▸Animated
▸LayoutAnimation
▸Navigator (Scene transitions)
▸ANIMATABLE

21. REACT NATIVE
PERFORMANCE
▸JavaScript frame rate
▸UI frame rate
▸InteractionManager
▸ListView

22. REACT NATIVE
USEFUL RESOURCES/TIPS
▸react-native upgrade
▸rnpm
▸https://productpains.com/post/react-native
▸Exponent.js
▸https://github.com/Microsoft/code-push

23. GRACIAS!GUSTAVO MACHADO (@MACHADOGJ)