React Native demos and highlights Samples are available on https://github.com/Benouzef/SledgeHammer Samples with Redux & Firebase & React Navigation Tips & Tricks French version

1. SKILLVALUE
REACT NATIVE MASTER CLASS
BENOIT FILLON
Deputy CEO / CTO SKILLVALUE FREELANCERS
12/10
2017

2. SKILLVALUE VALUE YOUR SKILLS THE SMART WAY
MASTERCLASS AGENDA
OBJECTIF
FAIRE UNE APPLICATION AVEC REACT NATIVE
Les concepts
Un cas pratique dont vous aurez le source sur GitHub

3. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
AGENDA
• PART I > Learn the basics
• PART II > Welcome to the real world
• Conclusion

4. SKILLVALUE VALUE YOUR SKILLS THE SMART WAY
REACT NATIVE MASTERCLASS
PART I
LEARN THE BASICS
React Native : quelques faits
Pour bien commencer
La Navigation avec React Native

5. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Cela vient d’où?
• Facebook (hackhathon interne en 2013)
• https://facebook.github.io/react-native/
• 1ere version publique « 0.0.0 » : 27/01/2015
• 1 release/mois : Current = 0.49.0 (Sept. 2017)
> Npm info react-native_

6. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Qui l’utilise ?

7. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Architecture
Source : https://www.logicroom.co/react-native-architecture-explained/
• iOS et
Android
• Routage
d’appels
natifs via
un bridge

8. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Pour bien commencer
• MUST READ https://facebook.github.io/react-
native/docs/getting-started.html
• Node JS
• Option 1 : CRNA
– https://github.com/react-community/create-react-
native-app
– Outil de scaffolding / simplicité et sans besoin
d’Android Studio ou XCode
– S’appuie sur Expo

9. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Pour bien commencer
• Option 2 : Expo
(https://expo.io/)
– Simplicité et facilité de
distribution
– Limites possibles :
création et utilisation de
code natif

10. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Pour bien commencer
• Option 3 : A la main
– Choix d’un éditeur de texte Atom.io ou Sublime
– Besoin des outils de développement natifs
• XCode (uniquement sur iOS)
• Android Studio
– Capacité à créer ses composants natifs si besoin

11. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
HELLO MASTER CLASS
DEMO #1

12. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI #1 : Quelques tips
• %ANDROID_HOME%platform-toolsadb
reverse tcp:8081 tcp:8081
• Hot Reloading
• Debugging avec React Native

13. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI #2 : Composants
• Chaque composant « est » un composant React
– https://reactjs.org/docs/react-component.html
• Le Cycle de vie d’un composant RN est
identique au cycle de vie d’un composant
Reactjs avec l’appel « classique » de :
– constructor()
– componentWillMount()
– render()
– componentDidMount()

14. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI #3 : Styles avec React Native
• Basé sur les mêmes principes
que le CSS
– Pas de notion prédéfinie de
feuille de style globale
• Flexbox
– Basé également sur CSS
– Gestion de l’alignement
– Gestion du remplissage
Source : https://facebook.github.io/react-
native/releases/next/docs/flexbox.html

15. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
La Navigation avec React Native
• www.reactnavigation.org
• Librairie officiellement sponsorisée par RN

16. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
La Navigation avec React Native
• 1 JS par écran
• 1 JS pour configurer
les ou les
navigateurs choisis
pour l’application

17. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
MC NAVIGATION
DEMO #2

18. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI #1 : Quelques tips
• WebView : facile de charger un site responsive
directement dans l’app
• Librairies UI RN
– Nativebase.io
– Shoutem

19. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI #2 : Quelques tips - suite
• react-native link
– Nécessaire pour les projets qui font appel à du code
natif (ex : react-native-vector-icons !!)
• Librairie d’icônes react-native-vector-icons
– https://oblador.github.io/react-native-vector-icons/

20. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI #3 : Un mot sur NPM
• Un projet RN « est » un projet NodeJS
– Fichier Package.json contient les dépendances
• Quelques règles
– Bien choisir ses
dépendances
– Gérer les montées
de version (au
moins une fois
par mois !!!)

21. SKILLVALUE VALUE YOUR SKILLS THE SMART WAY
REACT NATIVE MASTERCLASS
PART II
WELCOME TO THE REAL WORLD
Gestion d’état avec React Native
(Serverless) Backend

22. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Gestion d’état avec React Native
• Props
– Propriété statique et non modifiable définie
généralement par le composant parent
– Ex: <Tabs myProp="benoit" />
• State
– Initialisé dans le constructeur
– Modifiable via setState
– Chaque composant a son propre état :
• Synchroniser un état commun entre un composant et
plusieurs enfants se fait via les Pros
• Notifier un composant parent du changement d’état d’un
enfant se fait via les events
Source : https://reactjs.org/docs/state-and-lifecycle.html
https://facebook.github.io/react-vr/docs/components-props-and-state.html

23. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Redux résout quel problème ?
Source : https://css-tricks.com/learning-react-redux/

24. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
“Redux is a predictable state container for
JavaScript apps” - http://redux.js.org
• Store
– Single Source of trust
• Actions
– State is read-only:
only way to change it
is to emit an action
• Reducers
– Changes are made by
pure functions Takeaway : http://redux.js.org/docs/basics/

25. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Utilisation d’un Backend : exemple de Firebase
• Proposé par Google
• « Serverless »
• Hébergement
NoSQL et en temps
réel

26. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Firebase > Authentification
• Avec Google (mais pas que…)

27. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
NoSQL Firebase Database : Exemple simple
• Structure libre mais uniquement un seul arbre
• La structure des données influe sur la
complexité et la vitesse des requêtes

28. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Firebase > Evènements importants
• value
– Utile pour récupérer tous les changements sous un
nœud donné
– Récupère toutes les données
• child_added / child_changed / child_removed
– Utiles pour la gestion de listes
– Ne recupère que l’élément concerné

29. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
MC FIREBASE & REDUX
DEMO #3

30. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI : Real time update (Waouh effect )

31. SKILLVALUE VALUE YOUR SKILLS THE SMART WAY
REACT NATIVE MASTERCLASS
CONCLUSION

32. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Key learnings
• React Native a (seulement) 2 ans
• Besoin de tester sur Android et sur iOS
• Se tenir à jour est crucial
– Dépendances
– Compréhension
– Améliorations ou nouveaux composants

33. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Bibliographie
https://medium.com/react-native-development/a-brief-history-of-react-
native-aae11f4ca39
https://www.logicroom.co/react-native-architecture-explained/
https://facebook.github.io/react-native/blog/2016/03/24/introducing-
hot-reloading.html
https://js.coach/
https://medium.com/rumors/react-native-redux-and-firebase-for-
experts-by-dummies-6376becdd5c8
https://app.pluralsight.com/library/courses/build-react-native-exponent-
redux-apps/table-of-contents

34. VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Code GitHub des démos
https://github.com/Benouzef/SledgeHammer
• Démo 1 : masterclassapp
• Démo 2 : mcnavigationapp
• Démo 3 : mcfirebaseapp
N’hésitez pas à contribuer à « baretoolsapp »:
application « toolbox » pour les freelances

35. 12/10
2017
MERCI
Benoit FILLON
Deputy CEO / CTO Skillvalue Freelancers
benoit.fillon@skillvalue.com
linkedin.com/in/benoit.fillon