1.
React Native
for Web Developers
JS MVC Meetup #15 - March 16, 2016
-Rob Gietema @robgietema

2.
Who am I?

3.
Why React Native?

4.
Native development

5.
UIWebView

6.
React

7.
Hello World Example
import React from 'react';
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
export default HelloWorld;

8.
Hello World Example
import React from 'react';
import HelloWorld from './hello-world';
React.render(
<HelloWorld />,
document.body
);

9.
Props
import React from 'react';
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>Hello from {this.props.author}</h1>
</div>
);
}
}
React.render(
<HelloWorld author="John Doe" />,
document.body
);

10.
State
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
increase() {
this.setState('counter', this.state.counter + 1);
}
...
}

11.
Nesting
import React from 'react';
import NavBar from './navbar';
import Footer from './footer';
class HelloWorld extends React.Component {
render() {
return (
<div>
<NavBar title="Example App" />
<h1>Hello World!</h1>
<Footer />
</div>
);
}
}

12.
Event Handlers
class HelloWorld extends React.Component {
handleClick(event) {
alert(this.refs.myInput);
}
render() {
return (
<div>
<h1>Hello from {this.props.author}</h1>
<input type="text" ref="myInput" />
<button onClick={this.handleClick} />
</div>
);
}
}

13.
Lifecycle Methods
class HelloWorld extends React.Component {
componentWillMount() {
// Fetch some data
}
render() {
return (
<h1>Hello from {this.props.author}</h1>
);
}
}

14.
React
State > Components > DOM

15.
React Native
State > Components > DOM, iOS Views, Android Views

16.
Learn once write anywhere

17.
What does React Native provide?
Touch Handling
Native Components
Style & Layout

18.
How to install
Mac OS X
Homebrew
Node >= 4.0

19.
How to install
npm install -g react-native-cli

20.
Optional
npm install watchmen
npm install flow

21.
iOS
Install Xcode

22.
Android
Install Android Studio

23.
Getting started
react-native init ExampleApp

24.
Run Android
react-native run-android

25.
Run iOS

26.
Components
View
Text
ListView
ScrollView
TextInput
Navigator
Image
...

27.
Components

28.
Native modules

29.
Frameworks

30.
TextInput
<TextInput
ref="title"
autoFocus={true}
placeholder={Untitled}
style={styles.title} />
<TextInput
ref="description"
multiline={true}
placeholder={Description}
style={styles.description} />

31.
Button
<TouchableOpacity onPress={() => console.log('pressed')}>
<View>
<Text>Button</Text>
</View>
</TouchableOpacity>

32.
Styles and Layout
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
},
instructions: {
textAlign: 'center',
marginBottom: 5,
},
});

33.
Navigator
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
// Return view based on route
} />

34.
Navigator Methods
getCurrentRoutes() - returns the current list of routes
jumpBack() - Jump backward without unmounting the current scene
jumpForward() - Jump forward to the next scene in the route stack
jumpTo(route) - Transition to an existing scene without unmounting
push(route) - Navigate forward to a new scene
pop() - Transition back and unmount the current scene
replace(route) - Replace the current scene with a new route
replaceAtIndex(route, index) - Replace scene specified by index
replacePrevious(route) - Replace the previous scene
resetTo(route) - Navigate to a new scene and reset route stack
immediatelyResetRouteStack(routeStack) - Reset scene with array
popToRoute(route) - Pop to a particular scene
popToTop() - Pop to the first scene in the stack

35.
Fetch data
fetch(encodeURI('http://myendpoint'))
.then(response => {
// Handle data
});

36.
AsyncStorage
async setMyValue(value) {
try {
await AsyncStorage.setItem(MY_KEY, value);
} catch (error) {
// Handle error
}
}

37.
AsyncStorage
async loadMyValue() {
try {
let notes = await AsyncStorage.getItem(MY_KEY);
} catch (error) {
// Handle error
}
}

38.
AsyncStorage
async removeValue() {
try {
await AsyncStorage.removeItem(MY_KEY);
} catch (error) {
// Handle error
}
}

39.
Questions?
slideshare.net/robgietema