jslab. Ингвар Степанян. "react в разработке нативных...
TRANSCRIPT
![Page 1: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/1.jpg)
React & appsMAKE WEB NOT WAR
![Page 2: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/2.jpg)
React in Web
![Page 3: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/3.jpg)
JSX / Virtual DOM
![Page 4: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/4.jpg)
React in Web
![Page 5: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/5.jpg)
React Native
![Page 6: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/6.jpg)
React Native (iOS + Android)
![Page 7: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/7.jpg)
React Native
![Page 8: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/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: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/9.jpg)
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} />
![Page 10: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/10.jpg)
JS apps: “native” vs native
![Page 11: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/11.jpg)
![Page 12: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/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:'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>
![Page 13: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/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: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/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: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/15.jpg)
ES6export default class Robot {
constructor(name) {
this.name = name;
}
}
...
import Robot from './robot';
var myRobot = new Robotics.Robot("Sam");
![Page 16: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/16.jpg)
Hot reload (Webpack+React)
![Page 17: JSLab. Ингвар Степанян. "React в разработке нативных WinRT/Windows Phone приложений"](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a68e031a28abc57d8b47a4/html5/thumbnails/17.jpg)
Showtime