![AddButton.propTypes = {
buttonText: PropTypes.string,
onPress: PropTypes.func.isRequired,
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
PropTypes.number,
]),
}](https://image.slidesharecdn.com/whatsthisreactnativething-170313180807/85/What-s-This-React-Native-Thing-I-Keep-Hearing-About-55-320.jpg)
![fetchMessages() {
const url = 'http://localhost:3000/messages';
fetch(url, {
method: 'GET',
})
.then((response) => response.json())
.then((json) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(json)
});
})
.catch(error => {
console.log(error);
Alert.alert(
'Refresh Failed',
'An error occurred while retrieving messages.',
[
{text: 'OK'}
]
);
});
}](https://image.slidesharecdn.com/whatsthisreactnativething-170313180807/85/What-s-This-React-Native-Thing-I-Keep-Hearing-About-70-320.jpg)
![fetchMessages() {
const url = 'http://localhost:3000/messages';
fetch(url, {
method: 'GET',
})
.then((response) => response.json())
.then((json) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(json)
});
})
.catch(error => {
console.log(error);
Alert.alert(
'Refresh Failed',
'An error occurred while retrieving messages.',
[
{text: 'OK'}
]
);
});
}](https://image.slidesharecdn.com/whatsthisreactnativething-170313180807/85/What-s-This-React-Native-Thing-I-Keep-Hearing-About-71-320.jpg)
What's This React Native Thing I Keep Hearing About?
1 like703 views
The document provides an overview of React Native, a JavaScript-based framework for creating mobile applications, highlighting its advantages, disadvantages, and unique features. It clarifies that React Native is not a hybrid app or merely a wrapper around native components, and discusses the use of ES6 and CSS. Additionally, it includes examples of coding components, mentions the pace of React Native updates, and offers resources for further learning.
More Related Content
Similar to What's This React Native Thing I Keep Hearing About?(20)
What's This React Native Thing I Keep Hearing About?
- 1. What’s This ReactNa.ve Thing I Keep Hearing About? Evan K. Stone Senior iOS Developer Cloud City Development // San Francisco
- 2. An integrated designand so-ware consultancy specializing in web and mobile apps
- 3. iOS Dev BreakPodcast iOS Dev Break: 15 minutes of current events, 8ps, and advice for iOS Developers!
- 4.
- 5.
- 6. 1. A briefoverview of React Na.ve
- 7. 2. Good Stuff/BadStuff in React Na.ve
- 8. 3. Reasons whyyou may want to use React Na.ve…
- 9.
- 10. This talk isnot…
- 11. A tutorial aboutReact Na.ve
- 12. A deep-dive intoReact Na.ve
- 13. A mo.va.onal speechabout why everyone should drop everything and switch to Javascript and learn a totally new development paradigm for crea.ng mobile applica.ons
- 14.
- 15. I’m an iOS/SwiVdeveloper.
- 16. I run aniOS development podcast.
- 17.
- 19. OK, but seriously,what is it?
- 20. What is thisReact Na.ve thing I keep hearing about?
- 21. A Javascript-based development frameworkfor crea.ng mobile applica.ons
- 22. Not a hybridapp running inside a webview
- 23. Not (always) awrapper around na.ve components
- 24.
- 25. This was abig confusion point for me.
- 26. You can useES6
- 27.
- 28.
- 29. ES6 - Feelsa li`le more "SwiVy"
- 30.
- 31.
- 32.
- 33. <View style={styles.headerContainer}> <Text style={styles.headerMessage}>Messages</Text> <TextInput style={styles.textInput} onChangeText={(entryText)=> this.setState({entryText})} onSubmitEditing={(event) => this.onGoButtonPressed()} placeholder={'Enter Message'} value={this.state.entryText} returnKeyType="go" /> </View>
- 34.
- 35.
- 36.
- 37.
- 38. JavaScript CSS andFlexbox
- 40. The Good, TheBad, and The Amazing
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. <View style={Style.sceneContainer}> <View style={Style.subNav}> <Textstyle={Style.subNavText}></Text> </View> <View style={styles.loadingIndicatorContainer}> <View> <ActivityIndicator animating={this.state.animating} color={indicatorColor} size={indicatorSize} /> <Text style={styles.message}>{message}</Text> </View> </View> </View>
- 52. <View style={Style.sceneContainer}> <View style={Style.subNav}> <Textstyle={Style.subNavText}></Text> </View> <View style={styles.loadingIndicatorContainer}> <View> <ActivityIndicator animating={this.state.animating} color={indicatorColor} size={indicatorSize} /> <Text style={styles.message}>{message}</Text> </View> </View> </View>
- 53. <View style={Style.sceneContainer}> <View style={Style.subNav}> <Textstyle={Style.subNavText}></Text> </View> <View style={styles.loadingIndicatorContainer}> <LoadingIndicator containerStyle={styles.loadingIndicator} show={true} /> </View> </View>
- 54.
- 55. AddButton.propTypes = { buttonText:PropTypes.string, onPress: PropTypes.func.isRequired, style: PropTypes.oneOfType([ PropTypes.object, PropTypes.array, PropTypes.number, ]), }
- 56. <View style={styles.buttonAlign}> <AddButton style={styles.addButton} buttonText="Add aMessage" onPress={() => this.onAddMessageButtonPress()} /> </View>
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. Pace of ReactNa.ve Releases (But it’s geing be`er!!!)
- 67.
- 68.
- 69.
- 70. fetchMessages() { const url= 'http://localhost:3000/messages'; fetch(url, { method: 'GET', }) .then((response) => response.json()) .then((json) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(json) }); }) .catch(error => { console.log(error); Alert.alert( 'Refresh Failed', 'An error occurred while retrieving messages.', [ {text: 'OK'} ] ); }); }
- 71. fetchMessages() { const url= 'http://localhost:3000/messages'; fetch(url, { method: 'GET', }) .then((response) => response.json()) .then((json) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(json) }); }) .catch(error => { console.log(error); Alert.alert( 'Refresh Failed', 'An error occurred while retrieving messages.', [ {text: 'OK'} ] ); }); }
- 72.
- 73.
- 74. It is thething you want already.
- 75.
- 76.
- 77.
- 78. Refreshing app iniOS Simulator with CMD-R
- 79.
- 80.
- 82. The Elephant inthe Room
- 84.
- 85. Why should Icare?
- 86. Who is thisfor?
- 87. Should I useit?
- 89.
- 90. Who are yourusers?
- 91. Who are yourclients?
- 92. Who are theircustomers?
- 95.
- 97. Who are theircustomers?
- 99.
- 100. React Na.ve Docs h`ps://facebook.github.io/react-na.ve/docs/geing-started.html PaulHudson - Going Na.ve with React h`ps://forwardcourses.com/workshops/64 Tim Garcia - React Na.ve: Mobile Apps Without SwiV Free trial at Forward Courses!
- 102. Evan K. Stone web:h<p://www.cloudcity.io cloud city blog: h<p://blog.cloudcity.io blog: h<p://www.interac?velogic.net twi<er: @interac?vlogic
- 103. h`p://www.iosdevbreak.com iOS Dev BreakPodcast Twi`er: @iOSDevBreak Subscribe on iTunes/Overcast: iOS Dev Break