React for WinRT apps

React & appsMAKE WEB NOT WAR

React in Web

JSX / Virtual DOM

React in Web

React Native

React Native (iOS + Android)

React Native

React Native Components (iOS)ActivityIndicatorIOS

DatePickerIOS

Image

ListView

MapView

Navigator

NavigatorIOS

PickerIOS

ScrollView

SliderIOS

SwitchIOS

TabBarIOS

Text

TextInput

TouchableHighlight

TouchableOpacity

TouchableWithoutFeedback

View

WebView

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

JS apps: “native” vs native

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>

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>

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

ES6 export default class Robot {

constructor(name) {

this.name = name;

}

}

...

import Robot from './robot';

var myRobot = new Robotics.Robot("Sam");

Hot reload (Webpack+React)

Showtime