React Native
John Machahuay Giraldo
About Me
- UI developer at Belatrix
- Originally a Web developer, now doing both web and mobile development
- Now building an app for IOS and android with React Native
Overview
- Hybrid Apps
- What is React Native
- Debugging
- Demo
- Resources
Hybrid Apps
Hybrid Apps Are
- "mobile web app", an "HTML5 app"
- A web view run the web app
- Access to native APIs
- Write once, deploy everywhere
- UI Components are html with css link
React Native Is An
Extension of Hybrid
React Native
- UI native componentes link
- Open sourced and maintained by Facebook
- Apps written in Javascript
- Learn once, write anywhere
- 80% - 90% code reuse
- Compiles to real native mobile applications
React Native
- Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.
- No HTML
- No CSS directly - Flexbox
- No WebView
<div> == <View>
<p> || <span> == <Text>
<button> == <TouchableHighlight>
<img /> == <Image />
<input /> == <TextInput />
React Native vs React
import React, { Component } from 'react';
class SomeComponent extends Component {
render () {
return (
<div>
<p>Hello World</p>
</div>
)
}
}
React (web)
React Native vs React
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class SomeComponent extends Component {
render () {
return (
<View>
<Text>Hello World</Text>
</View>
)
}
}
React Native (mobile)
React Native - Production
Getting Started
- Install Node
- brew install watchman
- brew install flow (optional)
- npm install -g react-native-cli
- react-native init DemoApp
- react-native run-ios
- react-native run-android
Show me the Code
Components
class MyComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
Styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Network
fetch('https://myapi.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
});
Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3148739/Screen_Shot_2016-10-22_at_9.58.46_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/17285/images/3148740/Screen_Shot_2016-10-22_at_9.59.09_AM.png)
Demo!
Why use it?
Native look and feel
Performance
Developer Efficiency
React Native is extensible
Learn Once, Write Anywhere
Resources
- https://www.toptal.com/mobile/comparing-react-native-to-cordova
- https://developers.soundcloud.com/blog/react-native-at-soundcloud
- http://mrn.js.org/
- https://facebook.github.io/react-native/releases/next/docs/getting-started.html#content
Thank You
John Machahuay
React Native
By johnprog
React Native
- 1,439