SlideShare une entreprise Scribd logo
1  sur  35
SKILLVALUE
REACT NATIVE MASTER CLASS
BENOIT FILLON
Deputy CEO / CTO SKILLVALUE FREELANCERS
12/10
2017
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
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
AGENDA
• PART I > Learn the basics
• PART II > Welcome to the real world
• Conclusion
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
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_
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
REACT NATIVE > Qui l’utilise ?
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
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
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
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
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
HELLO MASTER CLASS
DEMO #1
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
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()
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
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
La Navigation avec React Native
• www.reactnavigation.org
• Librairie officiellement sponsorisée par RN
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
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
MC NAVIGATION
DEMO #2
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
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/
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 !!!)
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
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
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Redux résout quel problème ?
Source : https://css-tricks.com/learning-react-redux/
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/
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
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
Firebase > Authentification
• Avec Google (mais pas que…)
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
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é
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
MC FIREBASE & REDUX
DEMO #3
VALUE YOUR SKILLS THE SMART WAYSKILLVALUE
POI : Real time update (Waouh effect )
SKILLVALUE VALUE YOUR SKILLS THE SMART WAY
REACT NATIVE MASTERCLASS
CONCLUSION
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
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
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
12/10
2017
MERCI
Benoit FILLON
Deputy CEO / CTO Skillvalue Freelancers
benoit.fillon@skillvalue.com
linkedin.com/in/benoit.fillon

Contenu connexe

Tendances

Tendances (20)

Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
Requêtes multi-critères avec Cassandra
Requêtes multi-critères avec CassandraRequêtes multi-critères avec Cassandra
Requêtes multi-critères avec Cassandra
 
Javascript pour les développeurs C#
Javascript pour les développeurs C#Javascript pour les développeurs C#
Javascript pour les développeurs C#
 
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
XebiCon'17 : La refonte d'applications natives from scratch, un pari gagnant ...
 
From Idea to the Cloud, a JHipster Story
From Idea to the Cloud, a JHipster StoryFrom Idea to the Cloud, a JHipster Story
From Idea to the Cloud, a JHipster Story
 
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
XebiCon'17 : FLUO, les choix déterminants pour une startup innovante et produ...
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
XebiCon'17 : Comment recréer AWS dans votre Data Center - Pablo Lopez et Aur...
 
JHipster Conf 2019 French keynote
JHipster Conf 2019 French keynoteJHipster Conf 2019 French keynote
JHipster Conf 2019 French keynote
 
Firebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiFirebase par nicolas lehovetzki
Firebase par nicolas lehovetzki
 
Le service workers
Le service workersLe service workers
Le service workers
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
 
Back day - REX vsct - Secrets de conception d’une application innovante au s...
Back day -  REX vsct - Secrets de conception d’une application innovante au s...Back day -  REX vsct - Secrets de conception d’une application innovante au s...
Back day - REX vsct - Secrets de conception d’une application innovante au s...
 
Entity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity FrameworkEntity Framework 7 : nouvelle version majeure d’Entity Framework
Entity Framework 7 : nouvelle version majeure d’Entity Framework
 
Google Cloud Composer
Google Cloud ComposerGoogle Cloud Composer
Google Cloud Composer
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
XebiConFr 15 - À la recherche du temps (perdu) entre le use case metier et s...
XebiConFr 15 - À la recherche du temps (perdu) entre le use case metier et s...XebiConFr 15 - À la recherche du temps (perdu) entre le use case metier et s...
XebiConFr 15 - À la recherche du temps (perdu) entre le use case metier et s...
 
DevOps et ALM : Application Lifecycle Management: Continuous Delivery avec Vi...
DevOps et ALM : Application Lifecycle Management: Continuous Delivery avec Vi...DevOps et ALM : Application Lifecycle Management: Continuous Delivery avec Vi...
DevOps et ALM : Application Lifecycle Management: Continuous Delivery avec Vi...
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle ère
 
20140227 - injection de dépendances - mug lyon
20140227 - injection de dépendances - mug lyon20140227 - injection de dépendances - mug lyon
20140227 - injection de dépendances - mug lyon
 

Similaire à SkillValue LesJeudis Master Class React Native

JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924
Gregory Boissinot
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyon
Clement Bouillier
 

Similaire à SkillValue LesJeudis Master Class React Native (20)

Chtijug springbatch 2011
Chtijug springbatch 2011Chtijug springbatch 2011
Chtijug springbatch 2011
 
REX react native
REX react nativeREX react native
REX react native
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 
Maven
MavenMaven
Maven
 
Gradle_LyonJUG
Gradle_LyonJUGGradle_LyonJUG
Gradle_LyonJUG
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
.Net pour le développeur Java - une source d'inspiration?
.Net pour le développeur Java - une source d'inspiration?.Net pour le développeur Java - une source d'inspiration?
.Net pour le développeur Java - une source d'inspiration?
 
gradle_nantesjug
gradle_nantesjuggradle_nantesjug
gradle_nantesjug
 
gradle_lavajug
gradle_lavajuggradle_lavajug
gradle_lavajug
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Pourquoi rails est génial? (version longue)
Pourquoi rails est génial? (version longue)Pourquoi rails est génial? (version longue)
Pourquoi rails est génial? (version longue)
 
What’s Next Replay! Lyon 2011 - G. Darmont
What’s Next Replay! Lyon 2011 - G. DarmontWhat’s Next Replay! Lyon 2011 - G. Darmont
What’s Next Replay! Lyon 2011 - G. Darmont
 
SLIDES-625.1.1-IDL-4-build tools maven.pdf
SLIDES-625.1.1-IDL-4-build tools maven.pdfSLIDES-625.1.1-IDL-4-build tools maven.pdf
SLIDES-625.1.1-IDL-4-build tools maven.pdf
 
Présentation de lancement SAE105
Présentation de lancement SAE105Présentation de lancement SAE105
Présentation de lancement SAE105
 
JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924JENKINS_OWF11_OSDC_PARIS20110924
JENKINS_OWF11_OSDC_PARIS20110924
 
Cedric leblond migrer jenkins AWS vers Azure Devops
Cedric leblond migrer jenkins AWS vers Azure DevopsCedric leblond migrer jenkins AWS vers Azure Devops
Cedric leblond migrer jenkins AWS vers Azure Devops
 
Cedric leblond migrer jenkins AWS vers Azure Devops
Cedric leblond migrer jenkins AWS vers Azure DevopsCedric leblond migrer jenkins AWS vers Azure Devops
Cedric leblond migrer jenkins AWS vers Azure Devops
 
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyon
 

SkillValue LesJeudis Master Class React Native

  • 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

Notes de l'éditeur

  1. https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html
  2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  3. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  4. https://facebook.github.io/react-native/docs/linking-libraries-ios.html
  5. https://facebook.github.io/react-native/docs/linking-libraries-ios.html
  6. https://facebook.github.io/react-native/docs/linking-libraries-ios.html
  7. https://facebook.github.io/react-native/docs/linking-libraries-ios.html