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.

Workshop 24: React Native Introduction

Workshop Apps with ReactNative I:
- What is React Native?
- Native Components
- Asynchronous execution
- Debugging
- Live Reload/Hot reload
- Flexbox and styling
- It’s just a JS framework!
- Native Components
- Native APIs
- Native modules
- Some Thoughts on Production Development

Presentado por ingeniero Jordi Serra

  • Login to see the comments

Workshop 24: React Native Introduction

  1. 1. Front End Workshops React Native Part I Jordi Serra
  3. 3. React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. Focuses on developer efficiency across all platforms. Learn once, write everywhere. What is React Native?
  4. 4. React Native uses the actual native components of each platform (currently iOS and Android). Native Components Android render() { return ( <DrawerLayoutAndroid renderNavigationView={ () => <Text> React Native </Text> }> <ProgressBarAndroid /> </DrawerLayoutAndroid> ); } iOS render() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); }
  5. 5. All operations between the javascript code and the native code are performed asynchronously - Decode images - Save to disk - Measure and compute Layouts - … All this results in naturally fluid and responsive apps. Asynchronous execution
  6. 6. Communication with native app is fully serializable, so we can leverage the usual debugging tools Debugging
  7. 7. The debug version of the code launches a node server responsible to serve the code changes to the app. When code changes, app can reload automatically. Live Reload/Hot reload
  8. 8. React Native implements a subset of flexbox components and syntax -Not .css! var styles = StyleSheet.create({ row: { flexDirection: 'row', margin: 40 }, image: { width: 40, height: 40, marginRight: 10 }, text: { flex: 1, justifyContent: 'center'}, title: { fontSize: 11, fontWeight: 'bold' }, subtitle: { fontSize: 10 }, }); Flexbox and styling
  9. 9. React Native only focuses on how the view code is written You can leverage all the JS world for any -not visual- library. React Native leverages from the open source community. When in trouble, just remember: $> npm install --save It’s just a JS framework!
  10. 10. Useful Native Components: Native Components Common View, Text, TextInput, Image, TouchableHighlight, ScrollView, MapView iOS TabBarIOS DatePickerIOS ProgressViewIOS Android DrawerLayoutAndroid ViewPagerAndroid ToolbarAndroid Two worlds Slider-SliderIOS, Picker-PickerIOS, Navigator-NavigatorIOS
  11. 11. Useful Native APIs: Alert-AlertIOS AppRegistry, StyleSheet, CameraRoll, ToastAndroid, … Para todo lo demás… GitHub + ReactParts Native APIs
  12. 12. Not included? Make your own! There is a lot already -use with caution! Native modules
  13. 13. - Set up your environment development carefully - Develop iOS & Android concurrently ASAP - Android first: less components over there - Use linter. It’ll avoid many problems - Use Redux. No hace falta decir nada más Some Thoughts on Poduction Development
  14. 14. Thanks for your time! Give your questions on the comments section