![Native
UI (Main) Thread
Native
Modules Thread Bridge JS Thread
Event Queue Event Queue Event Queue
Separate threads for UI, layout and JavaScript
[funID, args]
[funID, args]](https://image.slidesharecdn.com/20180518qnapseminar-introductiontoreactnative-201112162606/85/20180518-QNAP-Seminar-Introduction-to-React-Native-9-320.jpg)
![Native
UI (Main) Thread
Native
Modules Thread Bridge JS Thread
Event Queue Event Queue Event Queue
E.g., touch, I/O, or networking event
Event
[funID, args]
[funID, args]](https://image.slidesharecdn.com/20180518qnapseminar-introductiontoreactnative-201112162606/85/20180518-QNAP-Seminar-Introduction-to-React-Native-10-320.jpg)
![Native
UI (Main) Thread
Native
Modules Thread Bridge JS Thread
Event Queue Event Queue Event Queue
Handler
JS thread calls your handler via the bridge
● Asynchronous (event loop are separated)
● Batched (to save overhead)
[funID, args]
[funID, args]
Event](https://image.slidesharecdn.com/20180518qnapseminar-introductiontoreactnative-201112162606/85/20180518-QNAP-Seminar-Introduction-to-React-Native-11-320.jpg)
![Native
UI (Main) Thread
Native
Modules Thread Bridge JS Thread
Event Queue Event Queue Event Queue
Event Handler
[funID, args]
[funID, args]
Layout
If UI changed in JS, module thread performs
layout first (e.g., measuring size of text)
Update UI
UI thread renders
components](https://image.slidesharecdn.com/20180518qnapseminar-introductiontoreactnative-201112162606/85/20180518-QNAP-Seminar-Introduction-to-React-Native-12-320.jpg)
20180518 QNAP Seminar - Introduction to React Native
- 1. From Web to Native Mobile App Eric Deng 2018/05/18 QNAP Seminar
- 2. Outline ● What is React Native? ● How does React Native work? ● Writing React Native ○ Expo ○ Components, props, and states ○ Component lifecycle ○ Declarative and imperative ○ Event handling ○ User input ○ Style ○ Layout ○ Data access ● Publishing your Project
- 3. What is React Native? ● A framework that let you build native mobile apps using JavaScript ● Relies on React core - A JavaScript library for building user interfaces ○ Component-based ○ High reusability ○ Learn once, write everywhere ● Supports iOS and Android
- 4. Why app written by JS is native?
- 5. Native App ● Different code and language for different OS
- 6. WebView App ● Write once, run everywhere ● Slow and not feeling native
- 7. React Native App ● JS components render as native ones ● Difference: JS Runtime, components for specific OS
- 8. How does React Native work?
- 9. Native UI (Main) Thread Native Modules Thread Bridge JS Thread Event Queue Event Queue Event Queue Separate threads for UI, layout and JavaScript [funID, args] [funID, args]
- 10. Native UI (Main) Thread Native Modules Thread Bridge JS Thread Event Queue Event Queue Event Queue E.g., touch, I/O, or networking event Event [funID, args] [funID, args]
- 11. Native UI (Main) Thread Native Modules Thread Bridge JS Thread Event Queue Event Queue Event Queue Handler JS thread calls your handler via the bridge ● Asynchronous (event loop are separated) ● Batched (to save overhead) [funID, args] [funID, args] Event
- 12. Native UI (Main) Thread Native Modules Thread Bridge JS Thread Event Queue Event Queue Event Queue Event Handler [funID, args] [funID, args] Layout If UI changed in JS, module thread performs layout first (e.g., measuring size of text) Update UI UI thread renders components
- 14. Expo Suite of tools to accelerate the React Native development process ● XDE - a GUI to serve, share, and publish your projects ● CLI - a command-line interface to serve, share, and publish your projects ● Client - runs your projects on your phone while developing ● SDK - bundles and exposes cross-platform libraries and APIs ● Snack - React Native online code editor
- 15. React Native Packager Device logs == Webpack
- 19. App.js - root component ES6+ features
- 20. React Native Components ● import {View, Text, Button} from ‘react-native’ ● <View> is like <div> in HTML ● <Text> → <span> ○ Text must be wrapped in <Text>...</Text> ● <Button> → <button> https://facebook.github.io/react-native/docs/components-and-apis.html ● Custom components JSX: XML-like syntax extension of JavaScript Compiled to normal objects by Babel: React.createElement(Text, {}, 'Hello React Native');
- 21. React.Component
- 22. render() accepts only a single root element
- 23. Two types of data that control a component ● props ● state
- 24. props
- 25. props ● Changes in props will cause re-renders ● Can be any JS value ● Never change props in a component! ○ So, React can efficiently detect whether a component should be re- rendered
- 26. state internally-managed configuration for a component
- 27. state ● Can only be updated by invoking `this.setState()` ○ Implemented in React.Component ○ `setState()` calls are batched and run asynchronously ○ Changes in state also cause re-renders
- 28. state Error! ES7 property initializer this.handleName = this.handleName.bind(this);
- 29. state ● If new state depends on previous one (or props) Less reliable
- 30. Lifting State Up
- 32. Component Lifecycle - Mounting 1. constructor() → Ext.Component.initComponent() ○ Initialize state or other class properties 2. render() → Ext.Component.render() ○ Return a node ○ Necessary! 3. componentDidMount() → Ext.Component.afterrender() ○ Do anything that isn’t needed for UI (async actions, network requests, timers, etc.)
- 33. Component Lifecycle - Updating 1. shouldComponentUpdate(nextProps, nextState) → Ext.Component.beforerender() ○ Compare changed values, return true if the component should rerender ○ If returned false, the update cycle terminates 2. render() → Ext.Component.render() 3. componentDidUpdate(prevProps, prevState) → Ext.Component.afterrender() ○ Do anything that isn’t needed for UI.
- 34. Component Lifecycle - Unmounting ● componentWillUnmount() → Ext.Component.destroy() ○ Clean up ■ Remove event listeners ■ Clear timeouts/intervals ■ Invalidate network requests ● Fetch API: AbortController.abort() ● socket.close()
- 35. 1 2 3 4 6 7 5
- 36. React is declarative ● Imperative vs Declarative Programming ● Debug-friendly
- 37. React is declarative ● Imperative vs Declarative Programming ● Debug-friendly When writing React, not to think of how you want to accomplish a result, but instead what the component should look like in its new state.
- 38. Event Handling ● <Button title=”” onPress={handle function} /> ● <TouchableHighlight> ● <TouchableOpacity> ● <TouchableWithoutFeedback> ● <TouachableNativeFeedback> (Android only)
- 39. User input Controlled component Uncontrolled component
- 40. Style ● Native design ● ex: <Button> import from react-native iOS Android
- 41. Style values have no unit pass an array of styles css properties are written using camel casing assign style prop to components
- 42. Style ● StyleSheet.create() ○ Additional optimization: Allows multiple native components to refer to same style object (by ID)
- 43. Layout ● Container component is default to Flexbox layout ○ flexDirection: ‘column’ ○ justifyContent: ‘flex-start’ (alignment along the main axis) ○ alignItems: ‘stretch’ (alignment along the cross axis) ● Contained component: ○ width/height: number ○ alignSelf: auto|stretch|center|flex-start|flex-end|baseline|initial ○ flex: number main axis cross axis flex: 1 flex: 2 flex: 3
- 44. Data access Fetch API HTML5 Web API Apps on Apple's App Store shall use HTTPS
- 45. Publishing your Project 1. Set metadata in app.json ○ https://docs.expo.io/versions/latest/workflow/configuration 2. Build the app using exp (Expo CLI) ○ Install with `npm install --global exp` ○ Build .apk with `exp build:ios` for Android ○ Build .ipa with `exp build:android` for iOS ○ Run `exp build:status` and paste the url in a browser to download 3. Upload to the appropriate store ○ https://docs.expo.io/versions/latest/distribution/building-standalone-apps ○ https://docs.expo.io/versions/latest/distribution/app-stores
- 46. Summary 1. Component-based 2. JS components render as native ones 3. Separate threads for UI, layout and JavaScript 4. Props are fixed throughout the lifetime of a component 5. setState() calls are batched and run asynchronously 6. Component lifecycle: Mounting, Updating, Unmounting 7. Declarative programming 8. Controlled component
- 47. More ● ScrollView ● Lists ○ FlatList ○ SectionList ● Persistent Storage - AsyncStorage ● React-navigation - routing and navigation for your React Native apps ● Redux - predictable state container for JavaScript apps ● ...
- 48. Reference React Native React Expo Mobile App Development with React Native
- 49. Q&A
- 50. Thank you!
- 52. Differences between React Native and React (Web) ● Base components ● Event Handling ● Style ● No browser APIs ○ Some have been polyfilled (fetch, timers, console, etc.) ● Navigation
- 53. Fast Re-rendering ● React keeps a virtual DOM in memory ○ Diffs the virtual DOM against the real DOM ○ Updates only changed elements in real ROM ● Reconciliation
Editor's Notes
- #30: state may be updated asynchronously and we should not rely on its values for calculating the next state
- #36: Component Lifecycle simple example
- #37: https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
- #38: https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
- #40: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/