![Page 2: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/2.jpg)
![Page 3: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/3.jpg)
2 . 1
2 . 2
. W . . .
S W O R N
S W O R D
S W E D E
![Page 4: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/4.jpg)
3
DEMO TIME!Getting started
![Page 5: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/5.jpg)
4
BUT THERE'S...... Cordova/PhoneGap
HTML, JavaScript, CSSweb-app inside browser inside app
... Xamarin
C#includes Mono runtime
![Page 6: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/6.jpg)
5 . 1
INTERNALSStartupExecutionRuntime
![Page 7: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/7.jpg)
5 . 2
APPLICATION STARTUPApplication
Native Modules JavaScript VM JavaScript bundle
JSON configuration
Execute JavaScript
![Page 8: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/8.jpg)
5 . 3
JAVASCRIPT EXECUTION
JavaScriptCore from WebKit (Safari)Available on iOS, packaged on AndroidExcept when debugging in Chrome → V8
Parse Generate AST Generate Bytecode Run Bytecode
![Page 9: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/9.jpg)
5 . 4
PROGRAM FLOWBridge
Native Module
JavaScript execution
Shadow Views Layout Native Views
Render (screen)
UI Kit
User
![Page 10: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/10.jpg)
6 . 1
BUILDING YOUR APPReactStylingState / Redux
![Page 11: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/11.jpg)
6 . 2
REACTDeclarative UIComponent-based
![Page 12: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/12.jpg)
6 . 3
COMPONENTSclass 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"));
![Page 13: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/13.jpg)
6 . 4
ES6 & JSXclass 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); } });
![Page 14: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/14.jpg)
6 . 5
STYLING YOUR APPNo 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>; } }
![Page 15: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/15.jpg)
6 . 6
APPLICATION STATE
Item 1 Item 2 Item 3 Item ...
App
LoadingScreen
ListView
Should I pass my state down through all components?!
![Page 16: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/16.jpg)
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 :)
![Page 17: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/17.jpg)
6 . 8
DEMOconst 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());
![Page 18: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/18.jpg)
6 . 9
REACT-REDUX: REACT <3 REDUXProvide Redux' store to your app
import { Provider } from 'react-redux'; const store = createStore(reducer);
<Provider store={ store }> <LoadingScreen /> </Provider>
![Page 19: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/19.jpg)
6 . 10
REACT-REDUX: REACT <3 REDUXConnect 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);
![Page 21: BUILDING APPS WITH REACT NATIVE - Jfokus...BUILDING APPS WITH REACT NATIVE maartenm@infosupport.com @mthmulders 2 . 1 2 . 2. W . . . S W O R N S W O R D S W E D E 3 DEMO TIME! Getting](https://reader036.vdocuments.site/reader036/viewer/2022062414/5ed79a5c30ed446bab02c465/html5/thumbnails/21.jpg)
8
Q & A