intro to react native
TRANSCRIPT
![Page 1: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/1.jpg)
moduscreate.com @ModusCreate
Intro to React NativeJay Garcia
@ModusJesus@ModusCreate
04/30/2015
![Page 2: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/2.jpg)
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
![Page 3: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/3.jpg)
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
![Page 4: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/4.jpg)
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
![Page 5: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/5.jpg)
moduscreate.com @ModusCreate
• React Native wraps Existing native UI controls
• Implementation of UI via JSX
Many UI components to choose from
![Page 6: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/6.jpg)
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
![Page 7: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/7.jpg)
moduscreate.com @ModusCreate
Device APIs & PolyFills
AppState
AsyncStorage
Interaction Manager
LinkingIOS
NetInfo
Vibration
Flexbox
GeoLocation Timers
Network
![Page 8: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/8.jpg)
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
![Page 9: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/9.jpg)
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
![Page 10: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/10.jpg)
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
![Page 11: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/11.jpg)
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
![Page 12: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/12.jpg)
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
![Page 13: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/13.jpg)
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
![Page 14: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/14.jpg)
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
![Page 15: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/15.jpg)
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
![Page 16: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/16.jpg)
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
![Page 17: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/17.jpg)
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
![Page 18: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/18.jpg)
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/
![Page 19: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/19.jpg)
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
![Page 20: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/20.jpg)
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
![Page 21: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/21.jpg)
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
![Page 22: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/22.jpg)
Quick Tour
![Page 23: Intro to react native](https://reader034.vdocuments.mx/reader034/viewer/2022050802/55ad5cb61a28ab641b8b46c8/html5/thumbnails/23.jpg)
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