Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React Native
React Meetup 3 - February 11, 2016
-Rob Gietema @robgietema
Who am I?
Why React Native?
Native development
UIWebView
React
State > Components > DOM
React Native
State > Components > DOM, iOS Views, Android Views
Learn once write anywhere
What does React Native provide?
Touch Handling
Native Components
Style & Layout
How to install
Mac OS X
Homebrew
Node >= 4.0
How to install
npm install -g react-native-cli
Optional
npm install watchmen
npm install flow
iOS
Install Xcode
Android
Install JDK
Android
brew install android-sdk
export ANDROID_HOME=/usr/local/opt/android-sdk
Configure SDK
android
Configure SDK
Configure SDK
Create Android Virtual Device
android avd
Create Android Virtual Device
Getting started
react-native init ExampleApp
Run Android
react-native run-android
Run iOS
Components
View
Text
ListView
ScrollView
TextInput
Navigator
Image
...
Components
Native modules
Frameworks
TextInput
<TextInput
ref="title"
autoFocus={true}
placeholder={Untitled}
style={styles.title} />
<TextInput
ref="descripti...
Button
<TouchableOpacity onPress={() => console.log('pressed')}>
<View>
<Text>Button</Text>
</View>
</TouchableOpacity>
Styles and Layout
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',...
Navigator
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
// Return view b...
Navigator Methods
getCurrentRoutes() - returns the current list of routes
jumpBack() - Jump backward without unmounting th...
Fetch data
fetch(encodeURI('http://myendpoint'))
.then(response => {
// Handle data
});
AsyncStorage
async setMyValue(value) {
try {
await AsyncStorage.setItem(MY_KEY, value);
} catch (error) {
// Handle error
...
AsyncStorage
async loadMyValue() {
try {
let notes = await AsyncStorage.getItem(MY_KEY);
} catch (error) {
// Handle error...
AsyncStorage
async removeValue() {
try {
await AsyncStorage.removeItem(MY_KEY);
} catch (error) {
// Handle error
}
}
Questions?
slideshare.net/robgietema
React Native: React Meetup 3
React Native: React Meetup 3
React Native: React Meetup 3
Upcoming SlideShare
Loading in …5
×

React Native: React Meetup 3

687 views

Published on

Web and mobile development have always been separate worlds. Sure there have been tools like PhoneGap but it never matched the performance of native apps. React Native is here to change all that by using React to render native components for both iOS and Android. This talk will give an introduction to React Native though the eyes of a web developer.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

React Native: React Meetup 3

  1. 1. React Native React Meetup 3 - February 11, 2016 -Rob Gietema @robgietema
  2. 2. Who am I?
  3. 3. Why React Native?
  4. 4. Native development
  5. 5. UIWebView
  6. 6. React State > Components > DOM
  7. 7. React Native State > Components > DOM, iOS Views, Android Views
  8. 8. Learn once write anywhere
  9. 9. What does React Native provide? Touch Handling Native Components Style & Layout
  10. 10. How to install Mac OS X Homebrew Node >= 4.0
  11. 11. How to install npm install -g react-native-cli
  12. 12. Optional npm install watchmen npm install flow
  13. 13. iOS Install Xcode
  14. 14. Android Install JDK
  15. 15. Android brew install android-sdk export ANDROID_HOME=/usr/local/opt/android-sdk
  16. 16. Configure SDK android
  17. 17. Configure SDK
  18. 18. Configure SDK
  19. 19. Create Android Virtual Device android avd
  20. 20. Create Android Virtual Device
  21. 21. Getting started react-native init ExampleApp
  22. 22. Run Android react-native run-android
  23. 23. Run iOS
  24. 24. Components View Text ListView ScrollView TextInput Navigator Image ...
  25. 25. Components
  26. 26. Native modules
  27. 27. Frameworks
  28. 28. TextInput <TextInput ref="title" autoFocus={true} placeholder={Untitled} style={styles.title} /> <TextInput ref="description" multiline={true} placeholder={Description} style={styles.description} />
  29. 29. Button <TouchableOpacity onPress={() => console.log('pressed')}> <View> <Text>Button</Text> </View> </TouchableOpacity>
  30. 30. Styles and Layout const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', }, instructions: { textAlign: 'center', marginBottom: 5, }, });
  31. 31. Navigator <Navigator initialRoute={{name: 'My First Scene', index: 0}} renderScene={(route, navigator) => // Return view based on route } />
  32. 32. Navigator Methods getCurrentRoutes() - returns the current list of routes jumpBack() - Jump backward without unmounting the current scene jumpForward() - Jump forward to the next scene in the route stack jumpTo(route) - Transition to an existing scene without unmounting push(route) - Navigate forward to a new scene pop() - Transition back and unmount the current scene replace(route) - Replace the current scene with a new route replaceAtIndex(route, index) - Replace scene specified by index replacePrevious(route) - Replace the previous scene resetTo(route) - Navigate to a new scene and reset route stack immediatelyResetRouteStack(routeStack) - Reset scene with array popToRoute(route) - Pop to a particular scene popToTop() - Pop to the first scene in the stack
  33. 33. Fetch data fetch(encodeURI('http://myendpoint')) .then(response => { // Handle data });
  34. 34. AsyncStorage async setMyValue(value) { try { await AsyncStorage.setItem(MY_KEY, value); } catch (error) { // Handle error } }
  35. 35. AsyncStorage async loadMyValue() { try { let notes = await AsyncStorage.getItem(MY_KEY); } catch (error) { // Handle error } }
  36. 36. AsyncStorage async removeValue() { try { await AsyncStorage.removeItem(MY_KEY); } catch (error) { // Handle error } }
  37. 37. Questions? slideshare.net/robgietema

×