Download as PDF, PPTX
![Styles example
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
bckg: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
12
<Text style={styles.base} />
<View style={styles.bckg} />
<View style={[styles.base, styles.bckg]} />
<View style={[styles.base,
this.state.active && styles.active]} />](https://image.slidesharecdn.com/reactnativeintroduction-150923094424-lva1-app6892/85/Introduction-to-React-Native-12-320.jpg)
![Styles example
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
bckg: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});
12
<Text style={styles.base} />
<View style={styles.bckg} />
<View style={[styles.base, styles.bckg]} />
<View style={[styles.base,
this.state.active && styles.active]} />](https://image.slidesharecdn.com/reactnativeintroduction-150923094424-lva1-app6892/75/Introduction-to-React-Native-12-2048.jpg)
Uploaded byPolidea
Introduction to React Native
React Native is a JavaScript library for building user interfaces that allows developers to build mobile apps using React and write native code for iOS and Android. It allows building native UI components with JavaScript and rendering them using the native platform, avoiding cross-platform issues. While not a hybrid framework, it allows fully integrating with native APIs and using native components while writing application logic in JavaScript.
More Related Content
Introduction to React Native
- 1.
- 2. About the author ●CTO @ Polidea ● Founder of Mobile Warsaw ● Founder and organizer of mceconf.com 2
- 3. ● not aHybrid App framework ● no HTML/DOM, CSS* ● no cross-platform app tool ● no application architecture framework ● no, you cannot use jquery plugins with it* What RN is not 3
- 4. A JAVASCRIPT LIBRARY FORBUILDING USER INTERFACES What RN is Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript. 4
- 5. ● native UIcomponents ● fully asynchronous UI ● no two-way data-binding ● no application architecture lock-in ● great for modern patterns ○ CQRS (Domain Driven Design and Event Sourcing) ○ Flux (Facebook pattern) No architecture lock-in 5
- 6. Components - fundamentalbuilding blocks ● state machine ● properties ● render method (JSX) ● flexbox css-like style ● composable 6
- 7.
- 8. Rethink established bestpracticesTM Component Example 8
- 9. Everything* is javascript ● codeis javascript ● styles are … javascript ● views are … javascript ● layout calculation is … javascript 9
- 10. We all loveJavascript 10
- 11. JSX example var app= <Nav color="blue"> <Profile>click</Profile> </Nav> var Nav, Profile; var app = React.createElement( Nav, {color:"blue"}, React.createElement(Profile, null, "click") ); 11
- 12. Styles example var styles= StyleSheet.create({ base: { width: 38, height: 38, }, bckg: { backgroundColor: '#222222', }, active: { borderWidth: 2, borderColor: '#00ff00', }, }); 12 <Text style={styles.base} /> <View style={styles.bckg} /> <View style={[styles.base, styles.bckg]} /> <View style={[styles.base, this.state.active && styles.active]} />
- 13. Not your grand-father’sjavascript ● use ‘strict’ ● Runtime: JavascriptCore/V8 ● Node 4.0.0 : Node.js + io.js converged ● (some) ES6 + ES7: Babel transpiler ● @flow - compile time - static type check 13
- 14. Why react isdifferent? 14
- 15.
- 16. States and VirtualView Hierarchy Component State Your code Render (in javascript) View Virtual View Hierarchy Javascript objects Image Image Text React Build native views (native code) 16
- 17. State changes Component State: {} Component State:{workshops: {...} } Update State Reconciliation Incremental changes Animations Javascript Native code 17
- 18. Incremental updates /animations Update Create 18
- 19. Is react fast(enough)? 19
- 20. Native/Javascript bridge ● Javascriptruns in non-UI thread ● Asynchronous, serializable communication ● Batching requests ● Lots of optimisations ● More potential optimisations in the future ● Flexible threading model 20
- 21. Animations ● LayoutAnimations -simple ● Animated - fine grained control ○ Value animations still in javascript ○ Will be native soon ○ Declarative 21
- 22.
- 23.
- 24. Integration with nativecode ● Native APIs: iOS/Android ● Native UI components: iOS/Android ● Direct Properties access: iOS/Android (?) ● Embed RN view in Native app: iOS for now 24
- 25. ● Intellij Idea/Webstormwith JSX Harmony ● Live Reloads ● Support for debugging via Chrome tools ● React Chrome extension ● Modify code in debugger Developer’s toolchain - web-developer’s like 25
- 26. Developer’s toolchain goodies ●Fast packager ● Verbose error diagnostic ● Element Inspections ● Profiling ● JS Tests ● Integration tests and Snapshot tests (iOS for now) ● UIExplorer 26
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. Live AppStore applicationupdate - AppHub.io (iOS for now) 33
- 34. Facebook goals (whatthey told) ● Learn once - write anywhere ● No “cross-platform app framework” ● Less complex apps with React 34
- 35. ● A lotof common code shared ● Reuse of existing libraries ● Built-in cross-platform support (soon) ● Dynamic app updates (A/B testing) Facebook achievements 35
- 36. Is it readyyet? ● Still changing fast ● Some small issues with performance ● Needs verification with big application ● (but Facebook made AdsManager) ● Some components are beta ● A number of community components ● Slowly growing community ● “Distributed” documentation 36
- 37.