Slide 1
Slide 1 text
REACT NATIVE
BUILD NATIVE MOBILE APPS WITH JAVASCRIPT
Slide 2
Slide 2 text
BRENDAN NEE
@BRENDANNEE
Slide 3
Slide 3 text
A way to make phone apps
with Javascript and React
REACT NATIVE IS…
Slide 4
Slide 4 text
Supports iOS and Android
REACT NATIVE IS…
Slide 5
Slide 5 text
Real native apps, not a web
view
REACT NATIVE IS…
Slide 6
Slide 6 text
An open source* framework
created by Facebook
REACT NATIVE IS…
* with a revocable patent license
Slide 7
Slide 7 text
Used by Airbnb, Facebook,
Tesla, Baidu, Uber
REACT NATIVE IS…
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
WHAT IS REACT?
Declarative
Component-based
Javascript
Library for building user interfaces
Slide 10
Slide 10 text
WHAT IS REACT?
Slide 11
Slide 11 text
WHAT IS REACT?
class MyComponent extends React.Component {
render() {
return
Hello World
;
}
}
const mountNode = document.getElementById('root');
ReactDOM.render(, mountNode);
REACT EXAMPLE
Slide 12
Slide 12 text
WHAT IS REACT?
REACT EXAMPLE
Slide 13
Slide 13 text
const element =
Hello World
;
WHAT IS REACT?
JSX
Syntax extension to Javascript
HTML inside of Javascript
Template Language
Optional (but suggested)
Slide 14
Slide 14 text
class MyComponent extends React.Component {
render() {
return
Hello {this.props.name}
;
}
}
const mountNode = document.getElementById('root');
ReactDOM.render(, mountNode);
WHAT IS REACT?
REACT EXAMPLE - PROPS
Slide 15
Slide 15 text
WHAT IS REACT?
REACT EXAMPLE - PROPS
Slide 16
Slide 16 text
ReactDOM.render(, mountNode);
WHAT IS REACT?
REACTDOM
Library for working with the DOM
DOM-specific methods
Slide 18
Slide 18 text
WHAT IS REACT NATIVE?
Slide 19
Slide 19 text
WHAT IS REACT NATIVE?
ReactNative instead of ReactDOM
![]()
instead of
Supports stylesheets
Slide 20
Slide 20 text
WHAT IS REACT NATIVE?
import React from 'react';
import {AppRegistry, View, Text, Button} from 'react-native';
class MyComponent extends React.Component {
render() {
return (
Hello world!
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
REACT NATIVE EXAMPLE
Slide 21
Slide 21 text
WHAT IS REACT NATIVE?
REACT NATIVE EXAMPLE
Slide 22
Slide 22 text
WHAT IS REACT NATIVE?
REACT NATIVE EXAMPLE
import React from 'react';
import { AppRegistry, View, Text, Image } from 'react-native';
class MyComponent extends React.Component {
render() {
const picture = {
uri: 'https://i.imgur.com/b3iDL1u.png'
};
return (
Hello world!
![]()
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
Slide 23
Slide 23 text
WHAT IS REACT NATIVE?
REACT NATIVE EXAMPLE
Slide 24
Slide 24 text
STYLING REACT NATIVE
import React from 'react';
import { AppRegistry, StyleSheet, View, Text } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'red',
},
});
class MyComponent extends React.Component {
render() {
return (
Hello world!
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
Slide 25
Slide 25 text
STYLING REACT NATIVE
Slide 26
Slide 26 text
MORE NATIVE COMPONENTS
class MyComponent extends React.Component {
render() {
return (
Name
);
}
}
AppRegistry.registerComponent('MyComponent', () => MyComponent);
Slide 27
Slide 27 text
MORE NATIVE COMPONENTS
Slide 28
Slide 28 text
REACT NATIVE COMPONENTS
ActivityIndicatorIOS
DatePickerIOS
DrawerLayoutAndroid
Image
ListView
MapView
Modal
Navigator
NavigatorIOS
PickerIOS
Picker
ProgressBarAndroid
ProgressViewIOS
RefreshControl
ScrollView
SegmentedControlIOS
SliderIOS
StatusBar
Switch
TabBarIOS
TabBarIOS.Item
Text
TextInput
ToolbarAndroid
TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback
View
ViewPagerAndroid
WebView
Slide 29
Slide 29 text
ACTIVITY INDICATOR
Slide 30
Slide 30 text
DATE PICKER
Slide 31
Slide 31 text
LIST VIEW - GRID
Slide 32
Slide 32 text
MAP VIEW
Slide 33
Slide 33 text
MODALS
Slide 34
Slide 34 text
PICKER
Slide 35
Slide 35 text
PROGRESS VIEW
Slide 36
Slide 36 text
SCROLL VIEW
Slide 37
Slide 37 text
SEGMENTED CONTROL
Slide 38
Slide 38 text
STATUS BAR
Slide 39
Slide 39 text
SWIPEABLE LIST VIEW
Slide 40
Slide 40 text
WEB VIEW
Slide 41
Slide 41 text
WRITE ONCE, RUN ANYWHERE
Slide 42
Slide 42 text
WRITE ONCE, RUN ANYWHERE
LEARN ONCE, RUN ANYWHERE
Slide 43
Slide 43 text
REACT NATIVE PROJECT STRUCTURE
Slide 44
Slide 44 text
SHARE COMPONENTS
Slide 45
Slide 45 text
PLATFORM SPECIFIC CODE
ActivityIndicatorIOS
DatePickerIOS
NavigatorIOS
PickerIOS
ProgressViewIOS
SegmentedControlIOS
SliderIOS
TabBarIOS
ProgressBarAndroid
DrawerLayoutAndroid
ViewPagerAndroid
Slide 46
Slide 46 text
NETWORKING
fetch('https://mywebsite.com/mydata.json');
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
Slide 47
Slide 47 text
COMPONENT LIBRARIES
https://github.com/react-native-training/react-native-elements
REACT NATIVE ELEMENTS
Slide 48
Slide 48 text
COMPONENT LIBRARIES
https://github.com/react-native-material-design/react-native-material-design
REACT NATIVE MATERIAL DESIGN
Slide 49
Slide 49 text
COMPONENT LIBRARIES
https://nativebase.io/
NATIVE BASE
Slide 50
Slide 50 text
GETTING STARTED
npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
Slide 51
Slide 51 text
GETTING STARTED
> create-react-native-app AwesomeProject
To run your app on iOS:
cd /Users/brendannee/Sites/AwesomeProject
react-native run-ios
- or -
Open ios/AwesomeProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/brendannee/Sites/AwesomeProject
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
Slide 52
Slide 52 text
DEVELOPING IN REACT NATIVE
⌘D
Slide 53
Slide 53 text
DEBUGGING IN REACT NATIVE
Slide 54
Slide 54 text
APPLE TV
React Native iOS applications "just work" on tvOS
Slide 55
Slide 55 text
THE END
Brendan Nee
@BRENDANNEE