React Native is an open source framework by Facebook that enables software engineers to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. I'll talk about what React Native actually is (and what it isn't), how it works under the hood, and why it was designed like that.

1. A TOUR OF
React Native
@tadeuzagallo

2. ABOUT Me
@tadeuzagallo

3. @tadeuzagallo

4. TADEUZAGALLO.COM/BLOG
@tadeuzagallo

5. TADEUZAGALLO.COM/VERVE-LANG
@tadeuzagallo

6. Context
What is React Native?
Why did we build React Native?
@tadeuzagallo

7. WHAT IS React Native?
@tadeuzagallo

8. WHAT IS REACT NATIVE?
React Native lets you build mobile apps using only JavaScript. It uses
the same design as React, letting you compose a rich mobile UI from
declarative components.
— facebook.github.io/react-native
@tadeuzagallo

9. WHY DID WE BUILD
React Native?
@tadeuzagallo

10. WHY DID WE BUILD
React?
@tadeuzagallo

11. IMPERATIVE vs DECLARATIVE
@tadeuzagallo

12. IMPERATIVE UI: DEFINE Transitions
DECLARATIVE UI: DEFINE States
@tadeuzagallo

13. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

14. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

15. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

16. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

17. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

18. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

19. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

20. IMPERATIVE UI: DEFINE TRANSITIONS
@tadeuzagallo

21. 3 STATES
9 TRANSITIONS
@tadeuzagallo

22. O(N2
)
@tadeuzagallo

23. if (count > 99) { // branch 1
if (!hasFire()) { // branch 2
addFire();
}
} else {
if (hasFire()) { // branch 3
removeFire();
}
}
if (count === 0) { // branch 4
if (hasBadge()) { // branch 5
removeBadge();
}
return;
}
if (!hasBadge()) { // branch 6
addBadge();
}
var countText = count > 99 ? '99+' : count.toString(); // branch 7
getBadge().setText(countText);
@tadeuzagallo

24. DECLARATIVE UI: DEFINE STATES
@tadeuzagallo

25. DECLARATIVE UI: DEFINE STATES
if (count === 0) { // state 1
return <Bell/>;
}
@tadeuzagallo

26. DECLARATIVE UI: DEFINE STATES
if (count === 0) { // state 1
return <Bell/>;
} else if(count <= 99) { // state 2
return (
<Bell>
<Badge count={count}/>
</Bell>
);
}
@tadeuzagallo

27. DECLARATIVE UI: DEFINE STATES
if (count === 0) { // state 1
return <Bell/>;
} else if(count <= 99) { // state 2
return (
<Bell>
<Badge count={count}></Badge>
</Bell>
);
} else { // state 3
return (
<Bell style={styles.onFire}>
<Badge count="99+"/>
</Bell>
);
}
@tadeuzagallo

28. WHY DID WE BUILD
React Native?
@tadeuzagallo

29. @tadeuzagallo

30. @tadeuzagallo

31. WEB ➡ NATIVE
Open Standards ➡ Proprietary Platforms
Instant Distribution ➡ Distributing Binaries
Reload and Run ➡ Compile and Wait
Product Teams ➡ Platform-aware Teams
@tadeuzagallo

32. ➡ NATIVE ➡ REACT NATIVE
➡ Proprietary Platforms ➡ Open Source
➡ Distributing Binaries ➡ Instant Distribution
➡ Compile and Wait ➡ Reload and Run
➡ Platform-aware Teams ➡ Unified Teams
@tadeuzagallo

33. ➡ NATIVE ➡ REACT NATIVE
➡ Proprietary Platforms ➡ Open Source
➡ Distributing Binaries ➡ Instant Distribution
➡ Compile and Wait ➡ Reload and Run
➡ Platform-aware Teams ➡ Unified Teams
➡ Imperative APIs ➡ Declarative APIs
@tadeuzagallo

34. HOW DOES
React Native
WORK?
@tadeuzagallo

35. import React, {
Component,
} from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
class SampleApp extends Component {
render() {
return (
<Text style={{ margin: 40 }}>
Hello, World!
</Text>
);
}
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);
@tadeuzagallo

36. @tadeuzagallo

37. @tadeuzagallo

38. FAQ
▸ No WebView
▸ No HTML
▸ No CSS
▸ No compilation to Objective-C/Java/...
@tadeuzagallo

39. @tadeuzagallo

40. @tadeuzagallo

41. @tadeuzagallo

42. @tadeuzagallo

43. @tadeuzagallo

44. @implementation MyNativeModule
RCT_EXPORT_MODULE()
@end
@tadeuzagallo

45. @implementation MyNativeModule
+ (NSString *)moduleName { return @""; }
+ (void)load { RCTRegisterModule(self); }
@end
@tadeuzagallo

46. @tadeuzagallo

47. @tadeuzagallo

48. {
"remoteModuleConfig":[
// [
// $moduleName : string,
// $exportedConstants? : { [key: string]: string },
// $methods? : [string],
// $asyncIndexes? : [number]
// ]
["RCTSourceCode",{"scriptURL":"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]],
["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]],
["RCTAlertManager",["alertWithArgs"]],
["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]],
// ...
]
}
@tadeuzagallo

49. @tadeuzagallo

50. VM
Basics
@tadeuzagallo

51. @tadeuzagallo

52. @tadeuzagallo

53. @tadeuzagallo

54. @tadeuzagallo

55. @tadeuzagallo

56. // import React, {
// Component,
// } from 'react';
//
// import {
// AppRegistry,
// Text,
TouchableHighlight,
// } from 'react-native';
//
// class SampleApp extends Component {
onPress() {
alert('Hello, World!');
}
// render() {
// return (
<TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}>
<Text>
Button
<⁄Text>
</TouchableHighlight>;
// );
// }
// }
//
// AppRegistry.registerComponent('SampleApp', () => SampleApp);
@tadeuzagallo

57. @tadeuzagallo

58. @tadeuzagallo

59. @tadeuzagallo

60. @tadeuzagallo

61. @tadeuzagallo

62. class SampleApp extends Component {
onPress() {
-> alert('Hello, World!');
}
...
}
@tadeuzagallo

63. if (Platform.OS === 'ios') {
AlertIOS.alert(title, message, buttons);
} else if (Platform.OS === 'android') {
AlertAndroid.alert(title, message, buttons);
}
@tadeuzagallo

64. @tadeuzagallo

65. @tadeuzagallo

66. @tadeuzagallo

67. @tadeuzagallo

68. WHERE IS
React Native
RIGHT NOW?
@tadeuzagallo

69. @tadeuzagallo

70. First React Native App:
MOBILE ADS MANAGER
@tadeuzagallo

71. @tadeuzagallo

72. @tadeuzagallo

73. Same Team
85%OF CODE SHARED
3 months
@tadeuzagallo

74. React Native in the
FACEBOOK APP
@tadeuzagallo

75. @tadeuzagallo

76. @tadeuzagallo

77. @tadeuzagallo

78. @tadeuzagallo

79. @tadeuzagallo

80. @tadeuzagallo

81. React Native is
Open Source
GITHUB.COM/FACEBOOK/REACT-NATIVE
@tadeuzagallo

82. 35,900+ 900+
STARS CONTRIBUTORS
@tadeuzagallo

83. We Use The
EXACT SAME VERSION
Internally
@tadeuzagallo

84. @tadeuzagallo

85. @tadeuzagallo

86. @tadeuzagallo

87. @tadeuzagallo

88. @tadeuzagallo

89. What Next?
@tadeuzagallo

90. Evolving the JS Platform
@tadeuzagallo

91. Evolving the JS Platform
@tadeuzagallo

92. Evolving the JS Platform
@tadeuzagallo

93. Evolving the JS Platform
@tadeuzagallo

94. Evolving the JS Platform
@tadeuzagallo

95. REACT: the horizontal platform
@tadeuzagallo

96. @tadeuzagallo

97. Thanks!
FACEBOOK.GITHUB.IO/REACT-NATIVE
GITHUB.COM/FACEBOOK/REACT-NATIVE
@tadeuzagallo