Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native Intro

308 views

Published on

Intro to react-native for iOS.
A technology that allows you to develop mobile applications with a native feel, using only javascript.

Published in: Technology
  • Be the first to comment

React Native Intro

  1. 1. REACT NATIVEMobile Talks 2016 Julia Vishnevsky
  2. 2. AGENDA ➤ ReactJs ➤ Intro to React Native ➤ Native VS React ➤ Pros & Cons ➤ Demo ➤ Android
  3. 3. 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
  4. 4. 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
  5. 5. JSX ➤ Enhanced JS semantics ➤ XML-like syntax ➤ Requires a “Transpiler” ➤ JSX is optional for using React
  6. 6. 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
  7. 7. REACT COME UP WITH A SOLUTION Problem 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
  8. 8. PROS ➤ Native experience & performance ➤ Consistent with the platform ➤ Complex gestures & animations ➤ Leverage your existing skills ➤ Code sharing ➤ Extensible ➤ Can work with existing applications
  9. 9. CONS & LIMITATIONS ➤ You need a Mac ➤ Custom controls require implementation ➤ CSS support ➤ Abstraction
  10. 10. PREREQUISITES ➤ Mac & Xcode ➤ Js IDE ➤ Homebrew ➤ Watchman ➤ React native CLI Now you can init a new React project using the CLI
  11. 11. COMPONENTS ➤ React Native components are wrappers around native UI components React Web View Div Text Span Image Img TextInput Input
  12. 12. COMPONENTS var 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> ) }});
  13. 13. DEMO ➤ Compilation ➤ Live reload trigger ➤ Debug
  14. 14. RESOURCES ➤ https://github.com/facebook/react-native.git ➤ Example projects ➤ Documentation ➤ Tutorials
  15. 15. ANDROID ➤ Up to 90% code reuse between iOS and Android ➤ Fairly new

×