a closer look at react native
TRANSCRIPT
![Page 1: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/1.jpg)
1
A Closer Look AtReact Native
Ian Wang
Web Developer at Codementor.io
@ianwang36
![Page 2: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/2.jpg)
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
![Page 3: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/3.jpg)
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
![Page 4: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/4.jpg)
4
No HTML
No Browser
No WebView
Completely powered by
JavaScript
![Page 5: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/5.jpg)
5
How it Works
React.js JavaScript Core
ReactNative Bridge
NativeMethod
![Page 6: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/6.jpg)
UI ThreadJS Thread
Native
Async &Batchedcommunication
![Page 7: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/7.jpg)
7
How to Use It
Components Style &Layout
APIs
![Page 8: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/8.jpg)
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
![Page 9: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/9.jpg)
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
![Page 10: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/10.jpg)
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
![Page 11: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/11.jpg)
11
CSS in JS (inline css) problem with CSS at scale:
Style & Layout
Global NamespaceMinificationSharing ConstantsDependencies
https://speakerdeck.com/vjeux/react-css-in-js
![Page 12: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/12.jpg)
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>
![Page 13: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/13.jpg)
13
Style & Layout
How to reimplement CSS on native ???
CSS Box Model (margin, padding, border) CSS Visual Formatting Model (display, position, float)
TopLeft
WidthHeight
![Page 14: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/14.jpg)
14
Extreme TDDStyle & Layout
from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
![Page 15: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/15.jpg)
15
Extreme TDD
Fail. Fix. Iterate.
Style & Layout
from React.js Conf 2015 Keynote 2 - A Deep Dive into React Native
![Page 16: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/16.jpg)
16
APIsAlert
Alert.alert( "Send message to Norman Kurry?", "We've just notified ...", [{ text: negativeText, onPress: negativeOnPress }, { text: positiveText, onPress: positiveOnPress }] );
![Page 17: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/17.jpg)
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); });
![Page 18: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/18.jpg)
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
![Page 19: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/19.jpg)
19
Debugging
![Page 20: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/20.jpg)
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); }); });
![Page 21: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/21.jpg)
21
“ Upgrading could be a pain inthe ass, but I guess it's worth it.
Ian Wang, 2016
![Page 22: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/22.jpg)
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...
![Page 23: A Closer Look At React Native](https://reader031.vdocument.in/reader031/viewer/2022022412/58f107d51a28abcf098b4583/html5/thumbnails/23.jpg)
23
Q&AThanks