Slide 1
Slide 1 text
React Native
for mobile app development
JS
JakartaJS
Oct 21st 2015
Slide 2
Slide 2 text
Sonny Lazuardi
Frontend Engineer @
@sonnylazuardi
sonnylab.com
github.com/sonnylazuardi
Slide 3
Slide 3 text
BACKGROUND
Slide 4
Slide 4 text
MOBILE APP
DEVELOPMENT IS
HARD
No Code
Sharing
Low
Iteration
Speed
Hard To
Scale
https://speakerdeck.com/frantic/react-native-tutorial-nyc-15
Slide 5
Slide 5 text
WEB APP
DEVELOPMENT
IS EASY
R
Slide 6
Slide 6 text
HYBRID APP
Slide 7
Slide 7 text
Zuckerberg admits
fault in Facebook's
HTML5 focus, pledges
native Android app
2012
2015
Facebook Ads
Manager using
React Native
Slide 8
Slide 8 text
NATIVE APPS
WHY
ARE GREAT?
Complex
Gestures &
Smooth
Animations
Fast,
Responsive
Consistent
With the platform
https://speakerdeck.com/frantic/react-native-tutorial-nyc-15
Slide 9
Slide 9 text
REACT.JS
Slide 10
Slide 10 text
REACT.JS
JS LIBRARY FOR
BUILDING USER
INTERFACE
Slide 11
Slide 11 text
https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component
Slide 12
Slide 12 text
FEATURES
JUST THE UI
1
2
3
VIRTUAL DOM
DATA FLOW
Slide 13
Slide 13 text
JUST THE UI
1
LIBRARY != FRAMEWORK
COMPONENT BASED
Slide 14
Slide 14 text
https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component
2
Slide 15
Slide 15 text
JAVASCRIPT IS FAST
THE DOM IS SLOW
Slide 16
Slide 16 text
UNIDIRECTIONAL
DATA FLOW
PROPS VS STATE
3
Slide 17
Slide 17 text
REACT NATIVE
Slide 18
Slide 18 text
DOM
Slide 19
Slide 19 text
UIKIT
Slide 20
Slide 20 text
REACT NATIVE
WRITE ONCE
RUN ANYWHERE
Slide 21
Slide 21 text
REACT NATIVE
LEARN ONCE
WRITE ANYWHERE
Slide 22
Slide 22 text
REACT
NATIVE
COMPONENT
Browser
DOM
Native
Component
![]()
Slide 23
Slide 23 text
REACT
NATIVE
STYLING
Slide 24
Slide 24 text
REACT
NATIVE
SETUP
• Requirements
• OSX
• Node 4.0 or newer
• Watchman
• Installing React Native CLI
npm install –g react-native-cli
• Starting React Native Project
react-native init ProjectName
Slide 25
Slide 25 text
ANDROID
SETUP
• Install JDK
• Install Android SDK
brew install android-sdk
• Add Android SDK path to your
~/.bashrc, ~/.zshrc
export
ANDROID_HOME=/usr/local/opt/android-
sdk
Slide 26
Slide 26 text
LET’S CODE
https://github.com/sonnylazuardi/karejo-app