Henrique Sosa - Gorgeous apps with React Motion and Animations
React for WinRT apps
-
Upload
victor-iatco -
Category
Documents
-
view
26 -
download
0
description
Transcript of React for WinRT apps
![Page 1: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/1.jpg)
React & appsMAKE WEB NOT WAR
![Page 2: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/2.jpg)
React in Web
![Page 3: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/3.jpg)
JSX / Virtual DOM
![Page 4: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/4.jpg)
React in Web
![Page 5: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/5.jpg)
React Native
![Page 6: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/6.jpg)
React Native (iOS + Android)
![Page 7: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/7.jpg)
React Native
![Page 8: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/8.jpg)
React Native Components (iOS)ActivityIndicatorIOS
DatePickerIOS
Image
ListView
MapView
Navigator
NavigatorIOS
PickerIOS
ScrollView
SliderIOS
SwitchIOS
TabBarIOS
Text
TextInput
TouchableHighlight
TouchableOpacity
TouchableWithoutFeedback
View
WebView
![Page 9: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/9.jpg)
React Native Styling var styles = StyleSheet.create({
base: { width: 38, height: 38 },
background: { backgroundColor: '#222222' },
active: { borderWidth: 2, borderColor: '#00ff00' },
});
…
<Text style={styles.base} />
<View style={styles.background} />
![Page 10: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/10.jpg)
JS apps: “native” vs native
![Page 11: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/11.jpg)
![Page 12: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/12.jpg)
WinJS <div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}"></button>
</div>
![Page 13: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/13.jpg)
JSX+WinJS<AppBar id="createAppBar" placement="bottom">{
['Add', 'Remove', 'Edit'].map(name => <AppBarCommand
id={'cmd' + name}
label={name}
icon={name.toLowerCase()}
tooltip={name + ' item'}
section="primary"
onclick={Sample.outputCommand}
/>)
</AppBar>
![Page 14: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/14.jpg)
WinJS (function () {
var Robot = WinJS.Class.define(function (name) {
this.name = name;
});
WinJS.Namespace.define("Robotics", { Robot: Robot });
})();
…
<script src="./robot.js"></script>
…
var myRobot = new Robotics.Robot("Sam");
![Page 15: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/15.jpg)
ES6 export default class Robot {
constructor(name) {
this.name = name;
}
}
...
import Robot from './robot';
var myRobot = new Robotics.Robot("Sam");
![Page 16: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/16.jpg)
Hot reload (Webpack+React)
![Page 17: React for WinRT apps](https://reader034.fdocuments.net/reader034/viewer/2022051017/55cf905f550346703ba55672/html5/thumbnails/17.jpg)
Showtime