Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Workshop 24: React Native Introduction

743 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Login to see the comments

Workshop 24: React Native Introduction

  1. 1. Front End Workshops React Native Part I Jordi Serra jserra@naradarobotics.com
  2. 2. React Native A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT
  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

×