Web and mobile development have always been separate worlds. Sure there have been tools like PhoneGap but it never matched the performance of native apps. React Native is here to change all that by using React to render native components for both iOS and Android. This talk will give an introduction to React Native through the eyes of a web developer.

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