Abstract: So many platforms, so little time. How do we write an app for the web, Android, iOS, and other OS without spending all our time and money? Cross-platform can be your answer! You probably heard about React Native before, a framework that allows you to create native Android and iOS apps using React. But how do you get started with the framework? Whether you are an advanced iOS developer or a beginner React dev, this talk will help you get started with React Native. In this session, we explore React Native and its main concepts. Then, we will build a demo app from scratch for Android and iOS to show the power of cross-platform that the framework brings to the table! Link: https://dvinnik.dev/talks/mobile/hands-on-react-native/

1. Hands-on React Native:
From Zero to Hero
@DmitryVinnik 1

2. What do I do?
@DmitryVinnik 2

3. About Me
@DmitryVinnik
3

4. About Me
Open Source Developer Advocate
@DmitryVinnik
4

5. @DmitryVinnik
5

6. About Me
Open Source Developer Advocate
Mobile Focus: Android, iOS, Hybrid
@DmitryVinnik
6

7. @DmitryVinnik
7

8. @DmitryVinnik
8

9. @DmitryVinnik
9

10. @DmitryVinnik
10

11. About Me
Open Source Developer Advocate
Mobile Focus: Android, iOS, Hybrid
Passionate about Open Source
@DmitryVinnik
11

12. Facebook Open Source
@DmitryVinnik 12

13. What are our goals
for today?
@DmitryVinnik 13

14. Goals
Basics of React Native

15. Goals
Basics of React Native
Essential Tools for React Native

16. Goals
Basics of React Native
Essential Tools for React Native
Learn Once, Write Anywhere

17. Agenda
RN 101

18. Agenda
RN 101

19. Agenda
RN 101
Developing
w RN

20. Agenda
RN 101
Developing
w RN

21. Agenda
RN 101
Developing
w RN
Debugging

22. Agenda
RN 101
Developing
w RN
Debugging

23. Agenda
RN 101
Developing
w RN
Testing
Debugging

24. Agenda
RN 101
Developing
w RN
Testing
Debugging

25. React Native
@DmitryVinnik 25

26. What is
React Native?
@DmitryVinnik 26

27. Framework for building
native applications with React
@DmitryVinnik 27

28. Framework for building
native applications with React
@DmitryVinnik 28

29. What are
Native Apps?
@DmitryVinnik 29

30. Native apps are written in the
code preliminarily used for the
device and its OS.
@DmitryVinnik 30

31. @DmitryVinnik 31

32. @DmitryVinnik 32

33. @DmitryVinnik 33

34. @DmitryVinnik 34

35. @DmitryVinnik 35

36. Framework for building
native applications with React
@DmitryVinnik 36

37. Framework for building
native applications with React
@DmitryVinnik 37

38. What is a history of
React Native?
@DmitryVinnik 38

39. It all started with React
@DmitryVinnik 39

40. React
@DmitryVinnik 40

41. JavaScript library for building
user interfaces
@DmitryVinnik 41

42. React
42
@DmitryVinnik

43. React
43
Declarative
@DmitryVinnik

44. React
44
Declarative
Component
Based
@DmitryVinnik

45. React
45
Learn Once,
Write Anywhere
Declarative
Component
Based
@DmitryVinnik

46. React Demo
@DmitryVinnik 46

47. 47
React
@DmitryVinnik

48. Learn Once,
Write Anywhere
@DmitryVinnik 48

49. 49
React
@DmitryVinnik

50. 50
React
@DmitryVinnik

51. 51
React React Native
@DmitryVinnik

52. Now we know what
React Native is
@DmitryVinnik 52

53. But why is it important?
@DmitryVinnik 53

54. Why + React Native
54
@DmitryVinnik

55. Why + React Native
55
Declarative
@DmitryVinnik

56. Why + React Native
56
Declarative
Component
Based
@DmitryVinnik

57. Why + React Native
57
Increased
Velocity
Declarative
Component
Based
@DmitryVinnik

58. Why + React Native
58
Increased
Velocity
Portability
Declarative
Component
Based
@DmitryVinnik

59. More practically?
@DmitryVinnik 59

60. @DmitryVinnik 60
Source: https://reactnative.dev/showcase

61. @DmitryVinnik 61
Source: https://reactnative.dev/showcase

62. @DmitryVinnik 62
Source: https://bit.ly/3awN3bP

63. @DmitryVinnik 63
Source: https://tabsoft.co/3iZJAH7

64. @DmitryVinnik 64
Source: https://bit.ly/3oXlKj5

65. @DmitryVinnik 65
Source: https://bit.ly/2Xa32cB

66. Now we know why
React Native
@DmitryVinnik 66

67. Let’s see it in action!
@DmitryVinnik 67

68. Agenda
RN 101
Developing
w RN
Testing
Debugging

69. Agenda
RN 101
Developing
w RN
Testing
Debugging

70. Agenda
RN 101
Developing
w RN
Testing
Debugging

71. React Native Demo
@DmitryVinnik 71

72. Let’s step back
@DmitryVinnik 72

73. How do we work with
React Native?
@DmitryVinnik 73

74. Dev Environments
74
@DmitryVinnik

75. Dev Environments
75
Expo CLI
@DmitryVinnik

76. Dev Environments
76
React Native
CLI
Expo CLI
@DmitryVinnik

77. Dev Environments
77
React Native
CLI
Expo CLI
@DmitryVinnik

78. Expo CLI
78
@DmitryVinnik

79. Expo CLI
79
Better for New
Mobile Devs
@DmitryVinnik

80. Expo CLI
80
Better for New
Mobile Devs
Quickstart
@DmitryVinnik

81. Expo CLI
81
No extra
OS IDEs
Better for New
Mobile Devs
Quickstart
@DmitryVinnik

82. Expo CLI
82
No extra
OS IDEs
Limited in using
Custom NM
Better for New
Mobile Devs
Quickstart
@DmitryVinnik

83. Showcase of Expo
@DmitryVinnik 83

84. Dev Environments
84
React Native
CLI
Expo CLI
@DmitryVinnik

85. Dev Environments
85
React Native
CLI
Expo CLI
@DmitryVinnik

86. Now we have our dev
environment ready
@DmitryVinnik 86

87. What’s next?
@DmitryVinnik 87

88. More React Native!
@DmitryVinnik 88

89. First
@DmitryVinnik 89

90. Important concept
to understand
@DmitryVinnik 90

91. Native Components vs
RN Core Components
@DmitryVinnik 91

92. @DmitryVinnik 92
Source: https://reactnative.dev/docs/intro-react-native-components

93. @DmitryVinnik 93
Source: https://reactnative.dev/docs/intro-react-native-components

94. RN Built-in Components
94
@DmitryVinnik

95. RN Built-in Components
95
Core
Components
@DmitryVinnik

96. RN Built-in Components
96
Core
Components
Properties
@DmitryVinnik

97. RN Built-in Components
97
Objects
Core
Components
Properties
@DmitryVinnik

98. RN Built-in Components
98
Objects
Core
Components
Properties
@DmitryVinnik

99. Core Components
99
@DmitryVinnik

100. Core Components
100
Basic
@DmitryVinnik

101. Core Components
101
Basic User Interface
@DmitryVinnik

102. Core Components
102
List Views
Basic User Interface
@DmitryVinnik

103. Core Components
103
List Views OS-Specific
Basic User Interface
@DmitryVinnik

104. Components’
Showcase
@DmitryVinnik 104

105. RN Built-in Components
105
Objects
Core
Components
Properties
@DmitryVinnik

106. RN Built-in Components
106
Objects
Core
Components
Properties
@DmitryVinnik

107. Properties
107
@DmitryVinnik

108. Properties
108
Image Style
and Layout
@DmitryVinnik

109. Properties
109
Image Style
and Layout
Shadow
@DmitryVinnik

110. Properties
110
Text
Image Style
and Layout
Shadow
@DmitryVinnik

111. Properties
111
Text View
Image Style
and Layout
Shadow
@DmitryVinnik

112. Properties’
Showcase
@DmitryVinnik 112

113. RN Built-in Components
113
Objects
Core
Components
Properties
@DmitryVinnik

114. RN Built-in Components
114
Objects
Core
Components
Properties
@DmitryVinnik

115. Object Types
115
@DmitryVinnik

116. Object Types
116
LayoutEvent
& PressEvent
@DmitryVinnik

117. Object Types
117
LayoutEvent
& PressEvent
React Node
@DmitryVinnik

118. Object Types
118
Rect
LayoutEvent
& PressEvent
React Node
@DmitryVinnik

119. Object Types
119
Rect ViewToken
LayoutEvent
& PressEvent
React Node
@DmitryVinnik

120. Object Types’
Showcase
@DmitryVinnik 120

121. RN Built-in Components
121
Objects
Core
Components
Properties
@DmitryVinnik

122. RN Built-in Components
122
Objects
Core
Components
Properties
@DmitryVinnik

123. Bringing it all together
@DmitryVinnik 123

124. @DmitryVinnik 124
Source: https://github.com/expo/create-react-native-app

125. @DmitryVinnik 125
Source: https://github.com/expo/create-react-native-app

126. React Native Demo
@DmitryVinnik 126

127. What do apps do after
they are developed?
@DmitryVinnik 127

128. They break!
@DmitryVinnik 128

129. Debugging to the rescue!
@DmitryVinnik 129

130. Agenda
RN 101
Developing
w RN
Testing
Debugging

131. Agenda
RN 101
Developing
w RN
Testing
Debugging

132. Agenda
RN 101
Developing
w RN
Testing
Debugging

133. Flipper
@DmitryVinnik 133

134. Extensible Mobile App Debugger:
visualize, inspect, and control
your apps from a simple desktop
interface
@DmitryVinnik 134

135. Flipper Demo
@DmitryVinnik 135

136. @DmitryVinnik 136
Source: https://youtu.be/tvqZQVI7gKw

137. Even more on debugging
@DmitryVinnik 137

138. @DmitryVinnik 138
Source: https://reactnative.dev/docs/debugging

139. So we’re done debugging
@DmitryVinnik 139

140. How do we catch
future breaks?
@DmitryVinnik 140

141. Testing, of course!
@DmitryVinnik 141

142. Agenda
RN 101
Developing
w RN
Testing
Debugging

143. Agenda
RN 101
Developing
w RN
Testing
Debugging

144. Agenda
RN 101
Developing
w RN
Testing
Debugging

145. @DmitryVinnik 145
Source: https://reactnative.dev/docs/testing-overview

146. Jest
@DmitryVinnik 146

147. JavaScript Testing Framework
with a focus on simplicity.
@DmitryVinnik 147

148. @DmitryVinnik 148
Source: https://jestjs.io/

149. @DmitryVinnik 149
Source: https://jestjs.io/

150. @DmitryVinnik 150
Source: https://jestjs.io/

151. Let’s take a closer look
@DmitryVinnik 151

152. @DmitryVinnik 152

153. @DmitryVinnik 153

154. @DmitryVinnik 154

155. @DmitryVinnik 155

156. @DmitryVinnik 156

157. @DmitryVinnik 157

158. @DmitryVinnik 158

159. @DmitryVinnik 159

160. @DmitryVinnik 160

161. @DmitryVinnik 161
Source: https://youtu.be/SyHzgcFefBk

162. Agenda
RN 101
Developing
w RN
Testing
Debugging

163. We covered everything
on the agenda
@DmitryVinnik 163

164. What’s next?
@DmitryVinnik 164

165. RN Many Platform Vision
165
@DmitryVinnik

166. RN Many Platform Vision
166
Respecting
the Platform
@DmitryVinnik

167. RN Many Platform Vision
167
Respecting
the Platform
Expanding to
New Platforms
@DmitryVinnik

168. Read more here:
@DmitryVinnik 168

169. @DmitryVinnik 169
Source: https://bit.ly/3oYTqwQ

170. What about
React Native
Community?
@DmitryVinnik 170

171. Join them,
they are great!
@DmitryVinnik 171

172. React Native
Community
172
@DmitryVinnik

173. RN Community
173
@DmitryVinnik

174. RN Community
174
Getting Help
@DmitryVinnik

175. @DmitryVinnik 175
Source: https://github.com/facebook/react-native/issues

176. @DmitryVinnik 176
Source: https://bit.ly/3lETxeW

177. RN Community
177
Getting Help
@DmitryVinnik

178. RN Community
178
Getting Help
Staying
Updated
@DmitryVinnik

179. @DmitryVinnik 179
Source: https://twitter.com/reactjs

180. @DmitryVinnik 180
Source: https://twitter.com/reactnative

181. RN Community
181
Getting Help
Staying
Updated
@DmitryVinnik

182. RN Community
182
Community
Spaces
Getting Help
Staying
Updated
@DmitryVinnik

183. @DmitryVinnik 183
Source: https://www.reactiflux.com/

184. @DmitryVinnik 184
Source: https://bit.ly/3AyxFWU

185. RN Community
185
Community
Spaces
Getting Help
Staying
Updated
@DmitryVinnik

186. RN Community
186
Community
Spaces
Contributing
Getting Help
Staying
Updated
@DmitryVinnik

187. @DmitryVinnik 187
Source: https://bit.ly/2YQsHYI

188. @DmitryVinnik 188
Source: https://reactnative.dev/help

189. Let’s summarize
@DmitryVinnik 189

190. Call to Action
@DmitryVinnik 190

191. Call to Action
Visit RN
Website
@DmitryVinnik 191

192. Call to Action
Visit RN
Website
Join RN
Community
@DmitryVinnik 192

193. Call to Action
Visit RN
Website
Join RN
Community
Continue
Learning
@DmitryVinnik 193

194. @DmitryVinnik 194
Source: https://youtu.be/wUDeLT6WXnQ

195. About Speaker
Twitter: @DmitryVinnik
Blog: dvinnik.dev
LinkedIn: in/dmitry-vinnik/
Email: dmitry@dvinnik.dev
195