Scribd
Upload
33 views17 pages

React For WinRT Apps

This document summarizes React Native components that can be used to build mobile apps for iOS and Android. It discusses how React Native uses JavaScript and JSX to create native mobile user interfaces and how styles can be defined using StyleSheet.create. It also compares building "native" apps using frameworks like WinJS to truly native mobile development and discusses how tools like Webpack and hot reloading can improve the development workflow.

Uploaded by

Victor Iatco
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views17 pages

React For WinRT Apps

This document summarizes React Native components that can be used to build mobile apps for iOS and Android. It discusses how React Native uses JavaScript and JSX to create native mobile user interfaces and how styles can be defined using StyleSheet.create. It also compares building "native" apps using frameworks like WinJS to truly native mobile development and discusses how tools like Webpack and hot reloading can improve the development workflow.

Uploaded by

Victor Iatco
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

React & apps

MAKE 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-winoptions="{placement:'bottom'}">
<button data-win-control="WinJS.UI.AppBarCommand" data-winoptions="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add
item',section:'primary',type:'flyout',flyout:select('#addFlyout'),onc
lick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-winoptions="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove
item',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-winoptions="{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

You might also like