This document discusses mobile development using React Native, which allows building native mobile apps using JavaScript and React. It introduces React Native, how to get started with a simple app, and common React Native components. It also covers the development stack, including using Webpack, Babel, Flux architecture, and building/packaging the app for deployment. React Native enables building fully native mobile apps that can access native UI components and APIs using React and JavaScript.

1. Mobile development with
React Native
@ilavriv

2. About Me
Twitter: @ilavriv
GitHub: lavriv92
Front - end Engineer, REMIT.ltd
PLLUG Community - Web branch leader
Speaker, Evangelist, Treveler

3. Mobile development with JavaScript
Cordova
PhoneGap
....

4. Typical problems
Web view
Bad patterns
AngularJS is new problem but not solution

5. How to resolve
Native app
Native app on JavaScript
React Native

6. React by Facebook
First Release 2013
Video by Peat Hunt
New revolution in JavaScript ecosystem
Facebook, Instagram, Meduza, ModnaKasta, etc.

7. React
Shadow DOM
Smart Components
Single data flow (Flux, Redux, etc.)

8. Introduction to React
import { React } from ‘react’;
class HelloApp extends React.Component {
render() {
return <div>Hello, React Component</div>;
}
}

9. React Native
Use Native Components in JavaScript
Call events from JavaScript flow

10. JavaScript Flow

11. Components
Image
ListView
Text
TabBarIOS
ScrollView

12. Getting started
npm install react-native-cli
react-native init MyApplication
cd MyApplication
react-native run-android // for android
Open Project in Xcode and press run button

13. var React = require(‘react-native’);
var { TabBarIOS, NavigatorIOS } = React;

14. Simple App
render() (
<TabBarIOS>
<TabBarIOS.Item title=”Some tab”>
<NavigatorIOS initialRoute={{ title: ‘Tab Title’ }}></NavigatorIOS>
<TabBarIOS.Item>
</TabBarIOS>
)

15. Styles
Flexbox

16. Stylesheets
import { StyleSheet } from ‘react-native’ ;
const { StyleSheet } = React;
const styles = StyleSheet.create({
// your stylesheets
});

17. Development Stack
Build - Webpack
Transpiler - Babel
Packages - npm
Architecture - Flux, Redux
Data - Fetch, Promise pipes

18. Webpack
Incremental builds
Watching files
easy configuration
...

19. Flux

20. Application structure
/ app
/ components
/ actions
/ stores
/ constants
/ mixins
/ main.jsx

21. 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’
},
};

22. module: {
loaders: [
{
test: /.(jsx|js)$/,
loader: "babel-loader?optional=runtime"
},
]};

23. Links
https://react.parts/native
https://facebook.github.io/react-native/
https://facebook.github.io/react-native/showcase.html

24. Any Questions?