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.
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
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>