lviv md day 2015 Іван Лаврів "mobile development with react native"
TRANSCRIPT
About MeTwitter: @ilavriv
GitHub: lavriv92
Front - end Engineer, REMIT.ltd
PLLUG Community - Web branch leader
Speaker, Evangelist, Treveler
React by FacebookFirst Release 2013
Video by Peat Hunt
New revolution in JavaScript ecosystem
Facebook, Instagram, Meduza, ModnaKasta, etc.
Introduction to Reactimport { React } from ‘react’;
class HelloApp extends React.Component {
render() {
return <div>Hello, React Component</div>;
}
}
Getting startednpm install react-native-cli
react-native init MyApplication
cd MyApplication
react-native run-android // for android
Open Project in Xcode and press run button
Simple App
render() (
<TabBarIOS>
<TabBarIOS.Item title=”Some tab”>
<NavigatorIOS initialRoute={{ title: ‘Tab Title’ }}></NavigatorIOS>
<TabBarIOS.Item>
</TabBarIOS>
)
Stylesheetsimport { StyleSheet } from ‘react-native’;
const { StyleSheet } = React;
const styles = StyleSheet.create({
// your stylesheets
});
Development Stack Build - Webpack
Transpiler - Babel
Packages - npm
Architecture - Flux, Redux
Data - Fetch, Promise pipes
Build process// webpack.config.js
var path = require(‘path’);
module.exports = {
entry: path.join(__dirname, ‘app/main.jsx’),
output: {
path: path.join(__dirname, ‘/’),
filename: ‘index.ios.js’
},
};
Linkshttps://react.parts/native
https://facebook.github.io/react-native/
https://facebook.github.io/react-native/showcase.html