React & apps MAKE WEB NOT WAR
Jul 16, 2015
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 Stylingvar styles = StyleSheet.create({
base: { width: 38, height: 38 },
background: { backgroundColor: '#222222' },
active: { borderWidth: 2, borderColor: '#00ff00' },
});
…
<Text style={styles.base} />
<View style={styles.background} />
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:'Additem',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:'Edititem',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");
ES6export default class Robot {
constructor(name) {
this.name = name;
}
}
...
import Robot from './robot';
var myRobot = new Robotics.Robot("Sam");