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