2 of 27

John Ptacek

Skyline Technologies

@jptacek / www.jptacek.com

jptacek@skylineTechnologies.com

3 of 27

Agenda

What is React
What is React Native
Demos

4 of 27

React Native Is The Future of Mobile

But it is not

Native mobile will always be best

But is kinda is….

Mobile app penetration is high
Enterprises move to mobile TCO becomes issue
Use skills you have

5 of 27

What is React

JavaScript library for user interfaces
“View” layer
Started by Facebook and Instagram
Built upon components
JSX, shadow DOM, fast screen updates
Open Source

6 of 27

What is React Native

JavaScript library for NATIVE mobile user interfaces
“View” layer
Built upon components
JSX, fast screen updates
Open Source

7 of 27

What is React Native

JavaScript library for native mobile user interfaces
Binds JSX to iOS Cocoa Touch and Android UI

8 of 27

What is React Native

Default React Components for mobile - View, Text, Image, etc
Style Sheets support including Flexbox
Animations
Navigators

9 of 27

What is React Native

10 of 27

Why React Native

Leverage existing skills to write a native app
Single logical code base
Components, Components, Components
Skillset costs is less than native

11 of 27

Why React Native

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

12 of 27

Getting started

Npm install -g create-react-native-app / yarn global add create-react-native-app
create-react-native-app react-native-present
Cd react-native-present
Npm install/yarn install
Npm start/yarn start

13 of 27

Expo

Expo creator of Create App
XDE - Developer tool for projects

Create Projects
Logs
Device Publishing

Client for device testing

Build without iOS or Android Studio
Publish to iPhone without Mac!

Out of the box Push Notifications

14 of 27

Demo - App the First

Expo functionality
console.log
Git checkout step0

15 of 27

React Components

export default class Home extends React.Component {� render() {� return (� <View> � <Text>Home</Text> � </View>� );� }�}��

16 of 27

Demo - Components

Heart of React is components
Git checkout step1

17 of 27

React Components

export default class Home extends React.Component {� render() {� return (� <View> � <Text>Home</Text> � </View>� );� }�}��

18 of 27

Demo - More Components

Heart of React is components
Git checkout step2

19 of 27

React Props

App.js

Header.js

<Text>Screen - {this.props.screenName}</Text>

��

20 of 27

React State

export default class Home extends React.Component {

state = {location: 'Appleton', name: 'John' }

updateName() {this.setState({name: 'John Ptacek'})\}

render() { return (

<View>

<Text onPress={() => this.updateName()}> Click Me!</Text>

<Text>Hello from Home {this.state.name}</Text>

</View> ); }

��

21 of 27

Demo - Props and State

Git checkout step3

22 of 27

Styling

CSS like.. Replace - with camel notation
Flexbox “support”

Based on W3C Flexbox specification
Nice job alignment
http://flexboxfroggy.com/

23 of 27

Styling

const styles = StyleSheet.create({

heading: { fontWeight: 'bold', fontSize: 32, },

red: { color: 'red', },

blue: { color: 'blue', }

});

24 of 27

Styling

const styles = StyleSheet.create({

heading: { fontWeight: 'bold', fontSize: 32, },

red: { color: 'red', },

blue: { color: 'blue', }

});

25 of 27

Demo - Styling

Git checkout step4

26 of 27

Real Demos!

27 of 27

Questions

Skyline Technologies

@jptacek / www.jptacek.com

jptacek@skylineTechnologies.com