Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building cross-platform mobile apps with React Native (Jfokus 2017)

158 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Building cross-platform mobile apps with React Native (Jfokus 2017)

  1. 1. 1 BUILDING APPS WITH REACT NATIVE @mthmuldersmaartenm@infosupport.com
  2. 2.  
  3. 3. 2 . 1 2 . 2 . W . . . S W O R N S W O R D S W E D E
  4. 4. 3 DEMO TIME! Getting started
  5. 5. 4 BUT THERE'S... ... Cordova/PhoneGap HTML, JavaScript, CSS web-app inside browser inside app   ... Xamarin C# includes Mono runtime
  6. 6. 5 . 1 INTERNALS Startup Execution Runtime
  7. 7. 5 . 2 APPLICATION STARTUP Application Native Modules JavaScript VM JavaScript bundle JSON configuration Execute JavaScript
  8. 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. 9. 5 . 4 PROGRAM FLOW Bridge Native Module JavaScript execution Shadow Views Layout Native Views Render (screen) UI Kit User
  10. 10. 6 . 1 BUILDING YOUR APP React Styling State / Redux
  11. 11. 6 . 2 REACT Declarative UI Component-based
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. 7 DEMO TIME! https://git.io/vMEuW
  21. 21. 8 Q & A

×