A Closer Look At React Native
Transcript of A Closer Look At React Native
1
A Closer Look AtReact Native
Ian Wang
Web Developer at Codementor.io
@ianwang36
2
What Is React Native
“ React Native enables you tobuild world-class application
experiences on nativeplatforms using a consistentdeveloper experience based
on JavaScript and React.- React Native Website
3
What Is React Native
“ React Native enables you tobuild world-class application
experiences on nativeplatforms using a consistentdeveloper experience based
on JavaScript and React.- React Native Website
4
No HTML
No Browser
No WebView
Completely powered by
JavaScript
5
How it Works
React.js JavaScript Core
ReactNative Bridge
NativeMethod
UI ThreadJS Thread
Native
Async &Batchedcommunication
7
How to Use It
Components Style &Layout
APIs
8
Components
<TouchableHighlight onPress={() => { onPress(user, chat); }}> <View> <Image source={require('./image/avatar.png')} /> <View> <View> <Text>{ user.name }</Text> <Text>{ chatDate }</Text> </View> <Text> { messageContent } </Text> </View> </TouchableHighlight>
TouchableHighlight, View, Image, Text
mockup
9
Components
getInitialState() { return { dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); }; }, componentWillReceiveProps(nextProps) { this.setState({ dataSource: this.state.dataSource.cloneWithRows( nextProps.myData ) }); }, render() { <ListView ref="scrollListView" dataSource={this.state.dataSource} renderRow={this._renderRow} onScroll={this._handleOnScroll} /> }
ListView
10
Components
renderScene(route, navigator) { if(route.component) { var props = route.passProps; return React.createElement(route.component, { ...props }); } }, render() { return ( <Navigator initialRoute={{ component: MainEntryPoint, title: 'Codementor' }} renderScene={this.renderScene} /> ) } /////////////// this.props.navigator.push({ component, title, passProps });
// pop(); // jumpBack();
Navigator
11
CSS in JS (inline css) problem with CSS at scale:
Style & Layout
Global NamespaceMinificationSharing ConstantsDependencies
https://speakerdeck.com/vjeux/react-css-in-js
12
Style & Layout
let styles = StyleSheet.create({ chatRowName: { flex: 1, color: "#333333", textAlign: 'left', }, chatRowTimeText:{ width: 60, color: '#b7b8b9', textAlign: 'right', fontSize: 12, }, });
<TouchableHighlight underlayColor="#f3f3f3"> <View> <Text style={styles.chatRowName}>{user.name}</Text> <Text style={styles.chatRowDate}>{chatDate}</Text> </View> </TouchableHighlight>
13
Style & Layout
How to reimplement CSS on native ???
CSS Box Model (margin, padding, border) CSS Visual Formatting Model (display, position, float)
TopLeft
WidthHeight
14
Extreme TDDStyle & Layout
from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
15
Extreme TDD
Fail. Fix. Iterate.
Style & Layout
from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
16
APIsAlert
Alert.alert( "Send message to Norman Kurry?", "We've just notified ...", [{ text: negativeText, onPress: negativeOnPress }, { text: positiveText, onPress: positiveOnPress }] );
17
APIsFetch
fetch('https://mywebsite.com/endpoint.php', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }) .then((response) => response.text()) .then((responseText) => { console.log(responseText); }) .catch((error) => { console.warn(error); });
18
APIsPush Notification
PushNotification.requestPermissions(); PushNotification.addEventListener( // get deviceToken "register", this._didRegistered ); PushNotification.addEventListener( // get notification's context "notification", this._handleNotification );
MobileLogin
StoreToken
PokeSNS
Send toDevice
mobile API API SNS
19
Debugging
20
Testingimport React, { View, Text, StyleSheet } from 'react-native'; import { shallow } from 'enzyme'; import { expect } from 'chai';const Test = React.createClass({ render() { return ( <View> <Text>enzyme</Text> <Text>rules</Text> </View> ) } }); describe('<Test />', () => { it('it should render 1 view component', () => { const wrapper = shallow(<Test/>); expect(wrapper.find(View)).to.have.length(1); }); it('it should render 2 text components', () => { const wrapper = shallow(<Test/>); expect(wrapper.find(Text)).to.have.length(2); }); });
21
“ Upgrading could be a pain inthe ass, but I guess it's worth it.
Ian Wang, 2016
22
TodosOver-the-air update (react-native-code-push)Tracking (react-native-mixpanel)Testing (Enzyme)Platform specific UIs??Redux in mind (Fluxxor bye)Routing management...
23
Q&AThanks