There's nothing more expensive than building the same thing twice. Yet that is what a lot of companies do when they publish a mobile app: they build one for Android and one for iOS. But wait, you don't have to! Using React Native, you can build one mobile app for both platforms from one code base using a language you're probably already familiar with - JavaScript. In this session, we'll discuss building a simple word game app for both iOS and Android. First, we'll dive into how React Native works and how to build a basic application. Then, we'll dive into the Redux framework, which helps us building predictable state and allows for great testability of our application. Finally, we look at how the two integrate and how the game is built.

1. 1
BUILDING APPS WITH
REACT NATIVE
@mthmuldersmaartenm@infosupport.com

3. 2 . 1
2 . 2
. W . . .
S W O R N
S W O R D
S W E D E

4. 3
DEMO TIME!
Getting started

5. 4
BUT THERE'S...
... Cordova/PhoneGap
HTML, JavaScript, CSS
web-app inside browser inside app
... Xamarin
C#
includes Mono runtime

6. 5 . 1
INTERNALS
Startup
Execution
Runtime

7. 5 . 2
APPLICATION STARTUP
Application
Native Modules JavaScript VM JavaScript bundle
JSON configuration
Execute JavaScript

8. 5 . 3
JAVASCRIPT EXECUTION
JavaScriptCore from WebKit (Safari)
Available on iOS, packaged on Android
Except when debugging in Chrome → V8
Parse Generate AST Generate Bytecode Run Bytecode

9. 5 . 4
PROGRAM FLOW
Bridge
Native Module
JavaScript execution
Shadow Views Layout Native Views
Render (screen)
UI Kit
User

10. 6 . 1
BUILDING YOUR APP
React
Styling
State / Redux

11. 6 . 2
REACT
Declarative UI
Component-based

12. 6 . 3
COMPONENTS
class HelloMessage extends React.Component {
render() {
return <div>Hello { this.props.name }</div>;
}
}
class App extends React.Component {
render() {
return <HelloMessage name={ 'Jfokus' } />;
}
}
ReactDOM.render(<App />, document.getElementById("app"));

13. 6 . 4
ES6 & JSX
class HelloMessage extends React.Component {
render() {
return <div>Hello { this.props.name }</div>;
}
}
var HelloMessage = React.createClass({
render: function() {
return <div>Hello, { this.props.name }</div>;
}
});
var HelloMessage = React.createClass({
render: function() {
return React.createElement('div', null,
'Hello ' + this.props.name);
}
});

14. 6 . 5
STYLING YOUR APP
No browser, no CSS, so...?
import { StyleSheet, Text } from "react-native";
const styles = StyleSheet.create({
red: {
color: "red" // or "#ff0000", or "rgb(255, 0, 0)"
}
});
class HelloMessage extends React.Component {
render() {
return <Text style={ styles.red }>...</Text>;
}
}

15. 6 . 6
APPLICATION STATE
Item 1 Item 2 Item 3 Item ...
App
LoadingScreen
ListView
Should I pass my state down through all components?!

16. 6 . 7
MEET REDUX!
Core ideas:
1. State is single source of truth
→ no copies
2. State is read-only
→ state is mutated by emitting actions
3. Changes are made with pure functions
→ reducers take current state and action (+ params)
→ always return new objects
BTW, pure functions are easy to test :)

17. 6 . 8
DEMO
const initialState = { todos: [] };
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'ADD_TODO':
const id = state.todos.length + 1;
const todo = { title: action.title, complete: false, id };
}
};
const store = createStore(reducer);
store.dispatch({ type: 'ADD_TODO', title: 'Speak at Jfokus' });
console.log(store.getState());

18. 6 . 9
REACT-REDUX: REACT <3 REDUX
Provide Redux' store to your app
import { Provider } from 'react-redux';
const store = createStore(reducer);
<Provider store={ store }>
<LoadingScreen />
</Provider>

19. 6 . 10
REACT-REDUX: REACT <3 REDUX
Connect components to Redux' store
import { Text } from 'react-native';
import { connect } from 'react-redux';
export const Counter = (props) => {
return (<Text>There are { props.count } tasks</Text>);
}
const mapStateToProps = (state) => {
return { count: state.todos.length };
}
const mapDispatchToProps = (dispatch) => {
return { };
}
export default connect(mapStateToProps, mapDispatchToProps)
(Counter);

20. 7
DEMO TIME!
https://git.io/vMEuW

21. 8
Q & A