Mobile development with React Native

@ilavriv

About MeTwitter: @ilavriv

GitHub: lavriv92

Front - end Engineer, REMIT.ltd

PLLUG Community - Web branch leader

Speaker, Evangelist, Treveler

Mobile development with JavaScript Cordova

PhoneGap

....

Typical problems Web view

Bad patterns

AngularJS is new problem but not solution

How to resolve Native app

Native app on JavaScript

React Native

React by FacebookFirst Release 2013

Video by Peat Hunt

New revolution in JavaScript ecosystem

Facebook, Instagram, Meduza, ModnaKasta, etc.

React Shadow DOM

Smart Components

Single data flow (Flux, Redux, etc.)

Introduction to Reactimport { React } from ‘react’;

class HelloApp extends React.Component {

render() {

return <div>Hello, React Component</div>;

}

}

React NativeUse Native Components in JavaScript

Call events from JavaScript flow

JavaScript Flow

ComponentsImage

ListView

Text

TabBarIOS

ScrollView

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

var React = require(‘react-native’);

var { TabBarIOS, NavigatorIOS } = React;

Simple App

render() (

<TabBarIOS>

<TabBarIOS.Item title=”Some tab”>

<NavigatorIOS initialRoute={{ title: ‘Tab Title’ }}></NavigatorIOS>

<TabBarIOS.Item>

</TabBarIOS>

)

StylesFlexbox

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

WebpackIncremental builds

Watching files

easy configuration

...

Flux

Application structure/ app

/ components

/ actions

/ stores

/ constants

/ mixins

/ main.jsx

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’

},

};

module: {

loaders: [

{

test: /\.(jsx|js)$/,

loader: "babel-loader?optional=runtime"

},

]};

Linkshttps://react.parts/native

https://facebook.github.io/react-native/

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

Any Questions?