Presentation from JS Lab: React for WinRT and WinPhone applications

1. React & apps
MAKE WEB NOT WAR

2. React in Web

3. JSX / Virtual DOM

4. React in Web

5. React Native

6. React Native (iOS + Android)

7. React Native

8. React Native Components (iOS)
 ActivityIndicatorIOS
 DatePickerIOS
 Image
 ListView
 MapView
 Navigator
 NavigatorIOS
 PickerIOS
 ScrollView
 SliderIOS
 SwitchIOS
 TabBarIOS
 Text
 TextInput
 TouchableHighlight
 TouchableOpacity
 TouchableWithoutFeedback
 View
 WebView

9. 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} />

10. JS apps: “native” vs native

12. 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'),on
click:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-
options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remov
e 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>

13. 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>

14. 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");

15. ES6
export default class Robot {
constructor(name) {
this.name = name;
}
}
...
import Robot from './robot';
var myRobot = new Robotics.Robot("Sam");

16. Hot reload (Webpack+React)

17. Showtime