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