Introduzione base al funzionamento ed all'utilizzo di React Native presentata durante Mokapp 2017 (www.mokapp.com)

2. Introduzione a
React Native

3. Fabrizio Bernabei
bernabei@gmail.com
@bernabei

4. Cross Platform... chi è costui?
• Sviluppo nativo (swift-xcode/kotlin-android studio)
+ performance
- linguaggi sviluppo ed ambienti diversi
• Sviluppo ibrido (ionic/cordova/phonegap)
Scrittura con tecnologie WEB (html + css + js) ed esecuzione in
webview all’interno di una app nativa
+ riutilizzo conoscenze web e stesso codice più piattaforme
- prestazioni limitate, specialmente UI (non nativa)
- in alcuni casi non possibile sfruttare completamente l’hw
• Sviluppo «ibrido nativo» (xamarin/react native/nativescript)
+ Stesso codice su più piattaforme
+ Output binari compilati in codice nativo (completament o in parte)
- ?

5. React Native… ma cos’è?
• Libreria open source per sviluppo di applicazioni
cross platform
• Rilasciata da Facebook durante il 2015
• Basata su React JS…
• Javascript (ES6+) - react
• È usata? Facebook, Instagram, Airbnb, Skype, ecc..

6. Cosa ha di diverso da altre soluzioni?
• Learn once, write anywhere (React)
• Compilazione UI nativa, no WebView!
Look & Feel ed esperienza d’uso OS
• Codice js sfrutta motore nativo OS su un thread
diverso da quello della UI- true multi-thread
• Integraione codice nativo per ulteriori performance
o funzioni con native modules
• Styling UI semplificata -> CSS FlexBox

7. Cosa serve?
• java SDK (JAVA_HOME + PATH)
node js
python 2.7.12 *
android studio
MAC e Xcode per iOS
• SETUP (installazione CLI)
npm install -g react-native-cli
• Hello Word da riga di comando (expo o ejected)
react-native init helloworld
react-native run-android

8. DEMO
https://github.com/bernabei/mokapp2017-react-native-demo

9. Come funziona React?
• UI=f(data)
• A JavaScript library for building user interfaces
• Component based
• Virtual DOM
• js + markup -> JSX
• props (immutabile), state (modificabile)

10. Hello World React JS?
class HelloWorld extends React.Component {
render() {
return (
<div>
Hello World!
</div>
);
}
}

11. Hello World React JS?
class HelloWorldApp extends Component {
render() {
return (
<Text>
Hello world!
</Text>
);
}
}

12. Componenti base?
• Lista completa: https://facebook.github.io/react-
native/docs/components-and-apis.html

13. Utilizzo dei componenti - Props
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center’}}>
<Greeting name='Rexxar’ />
<Greeting name='Jaina’ />
<Greeting name='Valeera’ />
</View>
);
}
}

14. Utilizzo dei componenti - State
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState(previousState => {
return { showText: !previousState.showText };
});
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ‘;
return (
<Text>{display}</Text>
);
}
}
…

15. Stilizzazione dei componenti
export default class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={styles.bigblue}>just bigblue</Text>
<Text style={[styles.bigblue, styles.red]}>
bigblue, then red</Text>
<Text style={[styles.red, styles.bigblue]}>
red, then bigblue</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue’,
fontWeight: 'bold’,
fontSize: 30,
},
red: {
color: 'red’,
},
});

16. DEMO
https://github.com/bernabei/mokapp2017-react-native-demo

17. Ma non finisce qui…
• Utilizzo librerie javascript
• Utilizzo Redux/Flux
• Import moduli/component per piattaforma
nomefile.ios.js
nomefile.android.js
• Supporto ufficiale Microsoft per UWP
https://github.com/Microsoft/react-native-windows
• Community estesa e in continua espansione, come quella del
“fratello” React

18. Risorse
• https://facebook.github.io/react-native/
• https://reactjs.org/
• http://www.awesome-react-native.com/
• https://github.com/bernabei/mokapp2017-react-native-demo
• https://nativebase.io/
Essential cross-platform UI components for React Native
• http://getpepperoni.com/
A free and open-source blueprint to kickstart your mobile product
development for Android and iOS, powered by React Native.

19. GRAZIE!
Domande?