![STYLESHEET
• Definisce lo stile in modo simile al CSS
• Si usa nello “style” di un componente
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 22,
backgroundColor: 'white',
},
titleView: {
padding: 20,
backgroundColor: '#F59C00',
},
...
});
render() {
const composedStyle = [
styles.titleView,
styles.debug,
];
return (
<View style={styles.container}>
<View style={composedStyle}>
...
</View>
</View>
);
}
Si possono definire stili inline](https://image.slidesharecdn.com/slides-workshop-react-native-170223111848/85/Introduzione-a-React-Native-Alessandro-Giannini-15-320.jpg)
Introduzione a React Native - Alessandro Giannini
- 1. INTRODUZIONE A REACT NATIVE 22 FEBBRAIO 2017
- 2. • ~4 miliardi di utenti internet (~50% in Asia) • ~1 miliardo di siti • Nel 2015 è avvenuto il sorpasso del mobile su desktop • Volume di dollari globale e-commerce stimato per il 2017: ~2 triliardi e mezzo • ~50% generato da mobile • ~90% del tempo mobile si spende sulle app • Il trend si è consolidato PERCHE’?
- 3. DOVE?
- 4. SI MA DOVE? Android >= 4.1 iOS >= 8
- 5. COME? • App nativa (ovviamente Android e iOS) • App nativa Android (Java) • App nativa iOS (Swift / Objective-C) • App ibride • Si utilizza un framework • Una parte nativa (esposta dal framework alla parte cross-platform) • Un pezzo scritto in un linguaggio comune alle piattaforme target
- 6. QUALE IBRIDO? • HTML5 Hybrid • Web view che esegue una web app • Accesso alle API native • PhoneGap, Cordova, Ionic • Native Hybrid • UI nativa • Logica cross-platform • Xamarin, Native Script, React Native
- 7. REACT-NATIVE • Mobile framework per la realizzazione di app Android e iOS • Sviluppato da Facebook e reso opensource su Github nel 2015 • Basato sul paradigma di React (vedremo le basi velocemente) • OS supportati: Android >= 4.1 e iOS >= 8 • Linguaggio comune: Javascript/JSX • Parte di Facebook, Facebook ADS, Instagram, Airbnb…
- 8. REACT-NATIVE
- 10. REACT-NATIVE MODE 2 CHROME APP
- 13. COMPONENTI • Un’applicazione React Native è strutturata a componenti (grafici) • Nel caso generale, un’app è un albero di componenti • Parliamo di componenti React Native • Ogni componente deve definire un metodo “render” in cui “si disegna” import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default HomePage extends Component { render() { return ( <View> <Text>Hello Home!</Text> </View> ); } }
- 14. FLEXBOX • Layout mode introdotto in CSS3 (specifica finale del 2012) • Supportato in tutti i browser (http://caniuse.com/#feat=flexbox) • Usato in React Native dal giorno zero (con qualche default diverso) • https://facebook.github.io/react-native/docs/flexbox.html • https://css-tricks.com/snippets/css/a-guide-to-flexbox • http://flexboxfroggy.com
- 15. STYLESHEET • Definisce lo stile in modo simile al CSS • Si usa nello “style” di un componente const styles = StyleSheet.create({ container: { flex: 1, marginTop: 22, backgroundColor: 'white', }, titleView: { padding: 20, backgroundColor: '#F59C00', }, ... }); render() { const composedStyle = [ styles.titleView, styles.debug, ]; return ( <View style={styles.container}> <View style={composedStyle}> ... </View> </View> ); } Si possono definire stili inline
- 16. REACT-NATIVE E REACT • I componenti React Native sono componenti React • Un’app React Native è basata su React • E’ necessario conoscere a grandi linee come funziona React • Virtual DOM • State • Props
- 17. VIRTUAL DOM • Il DOM è la struttura dati alla base delle web app • Manipolare dinamicamente il DOM è un’operazione dispendiosa • Il re-rendering del DOM ha impatto sulle performance • Idea: calcoliamo il “delta” dei cambiamenti rispetto al DOM attuale in modo da: • Minimizzare le operazioni sull’albero • Massimizzare le prestazioni • Serve un “Virtual DOM” in base al quale calcolare il “delta”
- 18. VIRTUAL DOM • Il Virtual DOM è alla base di React • Il metodo “render” di un componente produce un elemento del Virtual DOM • Semplificando, la radice dell’albero dei componenti produce il Virtual DOM State Change Diff DOM Update
- 19. STATE E PROPS • Oltre alla “render” ogni componente ha: • Un set di proprietà read-only, passate dall’esterno: le props • Uno stato interno read/write: lo state • La “render” disegna il componente leggendo lo state e le props correnti • Ogni cambiamento (esterno) di una prop causa il re-rendering del componente • Ogni cambiamento (interno) dello state causa il re-rendering del componente
- 20. STATE E PROPS import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default HomePage extends Component { constructor(props) { super(props); this.state = { counter: 0 }; } render() { const { counter } = this.state; return ( <View> <Text onPress={() => this.setState({ counter: counter + 1})}> Hello {counter}! </Text> </View> ); } }
- 21. RENDER TARGET • React: • Input: Virtual DOM • Render target: Browser DOM • Rendering: HTML/CSS • React-Native: • Input: Virtual DOM • Render target: UI nativa (device o simulatore) • Rendering: Android Java SDK o iOS Objective-C/Swift SDK
- 22. ESTENSIONI • Wrapping di API native non ancora supportate • Wrapping di componenti nativi • In generale si può comunicare con lo strato nativo tramite un API custom • Possibilità di avere parte dell’app nativa e parte in React Native • Migrazione incrementale di un’app da nativo a React Native (es. Facebook)
- 23. IN SHORT • Approccio Native Hybrid che supporta gli OS mobile di interesse: vittoria • App Android e iOS con stessa grafica e interazione: vittoria • App Android e iOS con grafica e interazione nativa: vittoria o sconfitta? • Conoscenza richiesta (best case): poca • Conoscenza richiesta (worst case): tutto • Javascript, React e componenti RN • Android SDK, iOS SDK • Ecosistema delle piattaforme di interesse
- 25. COME SVILUPPARE • Nessun vincolo sull’ambiente di sviluppo • vim + terminale • Visual Studio Code offre un ambiente integrato (con plugin) • Atom • Nuclide • Deco (https://github.com/decosoftware/deco-ide)
- 26. RNPLAY.ORG
- 27. LINK • https://github.com/facebook/react-native • https://github.com/jondot/awesome-react-native • https://facebook.github.io/react-native/blog/ • https://github.com/develersrl/lilt • https://www.develer.com/blog/
- 29. SESSIONE PRATICA • Semplice lista contatti in React Native per Android e iOS • https://github.com/develersrl/workshop-introduction-to-react-native • La sessione sarà divisa in vari step • Ogni step dovrebbe richiedere più o meno 20 minuti • Finito il tempo passiamo allo step successivo • Chi rimane indietro può allinearsi: • facendo “fast-forward” con git checkout seguito dal nome del branch • andando a vedere la “soluzione” dello step corrente su github
- 30. PER PARTIRE • Tutti sulla Wifi develer (laptop e device) (password: cammellino987) • git@github.com:develersrl/workshop-introduction-to-react-native.git • Sicuramente avrete tutti un cavo per collegare il portatile al cellulare/tablet • Sicuramente avrete seguito tutti la guida e quindi avete l’hello world di React Native perfettamente funzionante • Lanciate il comando: • react-native run-ios oppure • react-native run-android