Intro to react native

1. moduscreate.com @ModusCreate
Intro to React Native
Jay Garcia
@ModusJesus
@ModusCreate
04/30/2015

2. moduscreate.com @ModusCreate
• Introduction
• What is React Native
• Problems it solves
• What technologies does it comprise of?
• Getting started
• Example of extending React Native
• Overall thoughts
• Q&A
Agenda

3. moduscreate.com @ModusCreate
•A Library
•Binds JSX to
•iOS Cocoa Touch
•(soon) Android UI
•Custom Layout system
•Comprises a suite of technologies
•Applications run at near full speed*
•Architecture is scalable
•Library is extensible
•BSD Licensed
What is react Native?
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
*Business logic in JavaScript is fast, but still interpreted

4. moduscreate.com @ModusCreate
• Leverage existing skill sets to write apps with native
feel
• Gets you out of the “HTML5 Sandbox”
• Writing cross-platform high performance apps using
single business logic codebase
Problems React Native Solves

5. moduscreate.com @ModusCreate
• React Native wraps Existing
native UI controls
• Implementation of UI via JSX
Many UI components to choose from

6. moduscreate.com @ModusCreate
UI Component Library
Activity Indicator
Date Picker
Image
ListView
MapView
Navigator
Picker
ScrollView
Slider
TabBar
Text
TextInput
Touchable
TouchableOpacity
Touchable
Highlight
Touchable
WithoutFeedback
View
WebView
Alert
Border
StatusBarIOS
StatusBarIOS
ActionSheet
CameraRoll

7. moduscreate.com @ModusCreate
Device APIs & PolyFills
AppState
AsyncStorage
Interaction
Manager
LinkingIOS
NetInfo
Vibration
Flexbox
GeoLocation Timers
Network

8. moduscreate.com @ModusCreate
*Github project is Experimental!
Check it out for yourself
• Clone the React Native Repo
• *https://github.com/facebook/react-native.git
• In terminal:
cd react-native
npm_install
cd Examples/UIExplorer/
open UIExplorer.xcodeproj
• Requirements:
• Xcode
• NodeJS
• NPM

9. moduscreate.com @ModusCreate
• *Creating custom modules is not difficult
•Example patterns already exists in the library
•Patterns are well documented!
React Native is Extensible
https://facebook.github.io/react-native/docs/
*Objective C or Swift experience may be required

10. moduscreate.com @ModusCreate
React Native can work with existing apps
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
Your existing
application

11. moduscreate.com @ModusCreate
React Native can work with existing apps
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
WebView / JS Engine
React JS

12. moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
Custom Library
Must conform to
the module or
view specs
Custom Library JS

13. moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
MCModPlayerInterface
LibOpenMPT
MCModPlayerInterface.js

14. moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
MCVgmPlayer
LibGME
MCVgmPlayer.js

15. moduscreate.com @ModusCreate
React Native can work with other libraries
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
MCEzAudioPlot
EZAudioPlot
MCEzAudioPlotJS

16. moduscreate.com @ModusCreate
● JSX
● Flow
● Node JS
● NPM
● Chrome Debugger
● XCode
● React JS
● React Native
Technologies to get familiar with
https://facebook.github.io/react/docs/jsx-in-depth.html
http://flowtype.org/
https://facebook.github.io/react/index.html
https://facebook.github.io/react-native/index.html

17. moduscreate.com @ModusCreate
● Merger of ES and HTML
● Enhances JavaScript semantics
● Forward-leaning ES6 syntax
● Requires a “Transpiler” (comes packaged with React Native projects)
● Really easy to learn
JSX

18. moduscreate.com @ModusCreate
● Static type checker for JavaScript
● Extremely easy to use
● Is optional for your apps
● Comes for free with React Native
Flow
http://flowtype.org/

19. moduscreate.com @ModusCreate
•Implements JSX
•Leverages the Web Component paradigm
•Syntax easy to learn
•Some design patterns can take getting used to
•Required to use React Native
React JS
http://facebook.github.io/react/docs/getting-started.html

20. moduscreate.com @ModusCreate
•Custom CSS implementation
•Very lightweight and easy to learn
•Takes some getting used to coming from the browser CSS
•Only two types of layouts
•Flexbox
•Absolute
React Native CSS
https://facebook.github.io/react-native/docs/style.html#content

21. moduscreate.com @ModusCreate
*Github project is Experimental!
Getting started with React Native
• In terminal:
npm install -g react-native-cli
react-native init MyProject
cd MyProject
open iOS/MyProject.xcodeproj
• Requirements:
• Xcode
• NodeJS
• NPM

22. Quick Tour

23. moduscreate.com @ModusCreate
Thoughts on developing with React Native
•Community is *vibrant*
•JSX is really easy to master
•Getting outside of the HTML5 sandbox is liberating
•The Facebook developers are very responsive
•Some exchanges have occurred nights & weekends
•Technology is still new
•Has some evolving to do
•More UI goodness to come from the FB React Native Team

24. moduscreate.com @ModusCreate
Thank you!
Jay Garcia
@ModusJesus
@ModusCreate