Building UWP apps with React-Native
23
-
Upload
maurice-beijer -
Category
Technology
-
view
342 -
download
0
Transcript of Building UWP apps with React-Native
Building UWP appswith React Native
Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter: @mauricedb & @React_TutorialWeb: http://www.TheProblemSolver.nlE-mail: [email protected]
What are we ging tocover?
What is React?What is React Native?What is the Universal Windows Platform (UWP)?Building React Native UWP apps
What is ReactReact is a JavaScript library for creating user interfacesRuns in the browserCompose components into the user interfaceDeclarativeUnidirectional data ຨow
25. ReactDOM.render( 26. <App/>, document.getElementById('root'));
14. export class App extends Component { 15. render() { 16. return ( 17. <div> 18. <Hello name={'Maurice'}/> 19. </div> 20. ); 21. } 22. } 23. 24.
27.
Use ReactDOM.render() to run the application
What is React NativeA framework for building native apps using ReactBuild on top of ReactTarget mobile devicesAndroidIOS
25. AppRegistry.registerComponent('Hello‐World', 26. () => App);
14. 15. export class App extends Component { 16. render() { 17. return ( 18. <View> 19. <Hello name={'Maurice'}/> 20. </View> 21. ); 22. } 23. } 24.
27.
Use AppRegistry.registerComponent() to run theapplication
Universal WindowsPlatform (UWP)
A common app platform for Windows applicationsTargets every Windows 10 deviceCreate a single app packageOne Windows Store targets all devices
React Native & UWPContributed as OSS by MicrosoftAnnounced at Facebooks F8 2016 conferenceWindows 10 (Mobile) and Xbox OneUses ChakraCore as the JavaScript engineExtensions for Visual Studio Code
5. react‐native run‐windows
1. npm install ‐‐save‐dev rnpm‐plugin‐windows 2. 3. react‐native windows 4.
Run the UWP Windows 10 app
What is added?Entry point for the RN app: index.windows.jsThe react-native-windows NPM packageVisual Studio 2015 Solution and ProjectVS2015 Community will work
53. AppRegistry.registerComponent('ReactNLMovies', 54. () => ReactNLMovies);
42. fontSize: 20, 43. textAlign: 'center', 44. margin: 10, 45. }, 46. instructions: { 47. textAlign: 'center', 48. color: '#333333', 49. marginBottom: 5,
50. }, 51. }); 52.
The same AppRegistry.registerComponent() to run
5. Uses header.windows.js or header.js on Windows
1. import {Header} from './header'; 2. 3. Uses header.android.js or header.js on Android 4.
On Windows
25. <ToolbarAndroid 26. title='ReactNL Movies' 27. navIconName={navIconName} 28. onIconClicked= 29. {this.props.navigator.pop}
30. style={styles.toolbar}> 31. </ToolbarAndroid>
18. let navIconName = null; 19. if (this.props.showBackButton) { 20. navIconName = 'md‐arrow‐back'; 21. } 22. 23. return ( 24. <View>
32. </View> 33. ); 34. } 35. }Using a native Android component
30. <View style={styles.toolbar}> 31. {navIcon} 32. <Text style={styles.header}> 33. ReactNL Movies 34. </Text> 35. </View>
24. onPress={this.props.navigator.pop}>ᾆ� 25. </Text> 26. } 27. 28. return ( 29. <View>
36. </View> 37. ); 38. 39. // 40. } 41. }Using a cross platfom component
22. BackAndroid.addEventListener('hardwareBackPress', () => { 23. let routs = theNavigator.getCurrentRoutes(); 24. 25. if (routes.length === 1) { 26. // Not handled by us 27. return false;
28. } 29. 30. theNavigator.pop(); 31. return true; 32. });
18. }); 19. 20. let theNavigator = null; 21.
33. 34. export class MainWindow extends Component { 35. static navigator 36. 37. renderScene(route, navigator) { 38. theNavigator = navigator;
Will be replaced by BackWindows!
Using the UWP SplitViewWindows
1. import React, {Component} from 'react'; 2. import { 3. StyleSheet, 4. View, 5. Text, 6. TouchableHighlight} from 'react‐native'; 7. import { 8. FlipViewWindows, 9. SplitViewWindows 10. } from 'react‐native‐windows'; 11. import {MoviesList} from './movies‐list';
Maurice de Beijer - @mauricedb
