20180518 QNAP Seminar - Introduction to React Native

From Web to Native Mobile App
Eric Deng
2018/05/18 QNAP Seminar

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

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

Why app written by JS is native?

Native App
● Different code and language for different OS

WebView App
● Write once, run everywhere
● Slow and not feeling native

React Native App
● JS components render as native ones
● Difference: JS Runtime, components for specific OS

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]

Native
UI (Main) Thread
Native
E.g., touch, I/O, or networking event
Event
[funID, args]
[funID, args]

Native
UI (Main) Thread
Native
Handler
JS thread calls your handler via the bridge
● Asynchronous (event loop are separated)
● Batched (to save overhead)
[funID, args]
[funID, args]
Event

Native
UI (Main) Thread
Native
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

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

React Native Packager Device logs
== Webpack

20180518 QNAP Seminar - Introduction to React Native

App.js -
root component
ES6+ features

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');

render() accepts only a single root element

Two types of data that control a component
● props
● state

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

state
internally-managed configuration for a component

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

state
Error!
ES7 property initializer
this.handleName = this.handleName.bind(this);

state
● If new state depends on previous one (or props)
Less reliable

Component Lifecycle
https://github.com/wojtekmaj/react-lifecycle-methods-diagram
avoid!

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.)

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.

Component Lifecycle - Unmounting
● componentWillUnmount() → Ext.Component.destroy()
○ Clean up
■ Remove event listeners
■ Clear timeouts/intervals
■ Invalidate network requests
● Fetch API: AbortController.abort()
● socket.close()

React is declarative
● Imperative vs Declarative Programming
● Debug-friendly

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.

Event Handling
● <Button title=”” onPress={handle function} />
● <TouchableHighlight>
● <TouchableOpacity>
● <TouchableWithoutFeedback>
● <TouachableNativeFeedback> (Android only)

User input
Controlled component
Uncontrolled component

Style
● Native design
● ex: <Button> import from react-native
iOS Android

Style
values have no unit
pass an array of styles
css properties are written using camel casing
assign style prop to components

Style
● StyleSheet.create()
○ Additional optimization: Allows multiple native components to refer to same style object (by ID)

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

Data access
Fetch API
HTML5 Web API
Apps on Apple's App Store shall use HTTPS

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 èxp build:ios` for Android
○ Build .ipa with èxp build:android` for iOS
○ Run èxp 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

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

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
● ...

Reference
React Native
React
Expo
Mobile App Development with React Native

Differences between React Native and React (Web)
● Base components
● Event Handling
● Style
● No browser APIs
○ Some have been polyfilled (fetch, timers, console, etc.)
● Navigation

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

20180518 QNAP Seminar - Introduction to React Native

Recommended

More Related Content

What's hot (20)

Similar to 20180518 QNAP Seminar - Introduction to React Native (20)

Recently uploaded (20)

20180518 QNAP Seminar - Introduction to React Native

Editor's Notes