intro to react native
TRANSCRIPT
moduscreate.com @ModusCreate
Intro to React NativeJay Garcia
@ModusJesus@ModusCreate
04/30/2015
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
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
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
moduscreate.com @ModusCreate
• React Native wraps Existing native UI controls
• Implementation of UI via JSX
Many UI components to choose from
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
moduscreate.com @ModusCreate
Device APIs & PolyFills
AppState
AsyncStorage
Interaction Manager
LinkingIOS
NetInfo
Vibration
Flexbox
GeoLocation Timers
Network
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-nativenpm_installcd Examples/UIExplorer/open UIExplorer.xcodeproj
• Requirements:• Xcode• NodeJS• NPM
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
moduscreate.com @ModusCreate
React Native can work with existing appsNative App
React Native Library
JavaScript Engine
React JS
React Native JS Library
Your App Code
Your existing application
moduscreate.com @ModusCreate
React Native can work with existing appsNative App
React Native Library
JavaScript Engine
React JS
React Native JS Library
Your App Code
WebView / JS Engine
React JS
moduscreate.com @ModusCreate
React Native can work with other librariesNative 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
moduscreate.com @ModusCreate
React Native can work with other librariesNative App
React Native Library
JavaScript Engine
React JS
React Native JS Library
Your App Code
MCModPlayerInterface
LibOpenMPTMCModPlayerInterface.js
moduscreate.com @ModusCreate
React Native can work with other librariesNative App
React Native Library
JavaScript Engine
React JS
React Native JS Library
Your App Code
MCVgmPlayer
LibGMEMCVgmPlayer.js
moduscreate.com @ModusCreate
React Native can work with other librariesNative App
React Native Library
JavaScript Engine
React JS
React Native JS Library
Your App Code
MCEzAudioPlot
EZAudioPlot
MCEzAudioPlotJS
moduscreate.com @ModusCreate
● JSX● Flow● Node JS● NPM● Chrome Debugger● XCode
● React JS● React Native
Technologies to get familiar withhttps://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
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
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/
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
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
moduscreate.com @ModusCreate
*Github project is Experimental!
Getting started with React Native
• In terminal:npm install -g react-native-clireact-native init MyProjectcd MyProjectopen iOS/MyProject.xcodeproj
• Requirements:• Xcode• NodeJS• NPM
Quick Tour
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
