REACT NATIVEMobile Talks 2016Julia Vishnevsky
AGENDA➤ ReactJs➤ Intro to React Native➤ Native VS React➤ Pros & Cons➤ Demo➤ Android
REACT.JS➤ JavaScript library for creating user interfaces ➤ Open source➤ Maintained by Facebook, Instagram and the
community➤ Expresses the state of your data➤ Similar in concept to Angular.Js & Knockout.Js
REACT NATIVE➤ A framework ➤ Lets you build native iOS applications with JavaScript➤ "Learn once, write anywhere”➤ Wraps existing native UI controls➤ Implements the UI via JSX
JSX➤ Enhanced JS semantics➤ XML-like syntax➤ Requires a “Transpiler”➤ JSX is optional for using React
WHY NATIVE DEVELOPMENT IS HARDER THAN WEB➤ Learning curve➤ Slow development cycle➤ Slow deployment cycle➤ Harder to debug➤ Separate platform teams to build the same product
REACT COME UP WITH A SOLUTIONProblem Solution
Development cycle Instant reload No compilation
Deployment cycle Downloads updates OTA without resubmission
Learning Curve Consistant tooling & APIs
Separate platform teams Shared skill-set
Hard to debug Browser based debugging tools
PROS➤ Native experience & performance➤ Consistent with the platform➤ Complex gestures & animations➤ Leverage your existing skills➤ Code sharing➤ Extensible➤ Can work with existing applications
CONS & LIMITATIONS ➤ You need a Mac➤ Custom controls require implementation➤ CSS support➤ Abstraction
PREREQUISITES➤ Mac & Xcode➤ Js IDE➤ Homebrew➤ Watchman➤ React native CLI
Now you can init a new React project using the CLI
COMPONENTS➤ React Native components are wrappers around native
UI components
React Web
View Div
Text Span
Image Img
TextInput Input
COMPONENTSvar React = require('react-native');var { Image, Text View} = React;
var MyCell = React.createClass({ render: function() { return
( <View> <Image source={getImageSource()} /> <Text numberOfLines={2}> Some Text </Text></View>)
}});
DEMO➤ Compilation➤ Live reload trigger➤ Debug
RESOURCES➤ https://github.com/facebook/react-native.git➤ Example projects➤ Documentation➤ Tutorials
ANDROID➤ Up to 90% code reuse between iOS and Android➤ Fairly new