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.
1
BUILDING APPS WITH
REACT NATIVE
@mthmuldersmaartenm@infosupport.com
 
2 . 1
2 . 2
. W . . .
S W O R N
S W O R D
S W E D E
3
DEMO TIME!
Getting started
4
BUT THERE'S...
... Cordova/PhoneGap
HTML, JavaScript, CSS
web-app inside browser inside app
 
... Xamarin
C#
includes Mo...
5 . 1
INTERNALS
Startup
Execution
Runtime
5 . 2
APPLICATION STARTUP
Application
Native Modules JavaScript VM JavaScript bundle
JSON configuration
Execute JavaScript
5 . 3
JAVASCRIPT EXECUTION
JavaScriptCore from WebKit (Safari)
Available on iOS, packaged on Android
Except when debugging...
5 . 4
PROGRAM FLOW
Bridge
Native Module
JavaScript execution
Shadow Views Layout Native Views
Render (screen)
UI Kit
User
6 . 1
BUILDING YOUR APP
React
Styling
State / Redux
6 . 2
REACT
Declarative UI
Component-based
6 . 3
COMPONENTS
class HelloMessage extends React.Component {
render() {
return <div>Hello { this.props.name }</div>;
}
}
...
6 . 4
ES6 & JSX
class HelloMessage extends React.Component {
render() {
return <div>Hello { this.props.name }</div>;
}
}
v...
6 . 5
STYLING YOUR APP
No browser, no CSS, so...?
import { StyleSheet, Text } from "react-native";
const styles = StyleShe...
6 . 6
APPLICATION STATE
Item 1 Item 2 Item 3 Item ...
App
LoadingScreen
ListView
Should I pass my state down through all c...
6 . 7
MEET REDUX!
Core ideas:
1. State is single source of truth
→ no copies
2. State is read-only
→ state is mutated by e...
6 . 8
DEMO
const initialState = { todos: [] };
const reducer = (state = initialState, action) => {
switch (action.type) {
...
6 . 9
REACT-REDUX: REACT <3 REDUX
Provide Redux' store to your app
import { Provider } from 'react-redux';
const store = c...
6 . 10
REACT-REDUX: REACT <3 REDUX
Connect components to Redux' store
import { Text } from 'react-native';
import { connec...
7
DEMO TIME!
https://git.io/vMEuW
8
Q & A
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Вестник фокуса Февраль 2017
Next
Upcoming SlideShare
Вестник фокуса Февраль 2017
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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.

Views

Total views

258

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×