SlideShare une entreprise Scribd logo
1  sur  23
Télécharger pour lire hors ligne
Backelite – Digital Service Design by Capgemini
React Native
Développez vos applications native en JS
1
Backelite – Digital Service Design by Capgemini
Vos intervenants
Nicolas Fontaine
Backelite
iOS & Web developer
Yann Duval
Backelite
Web & Android developer
2
Backelite – Digital Service Design by Capgemini
Sommaire
1. Origine
2. Principes
3. React component
● Component APi
● Lifecycle API
4. Styling
5. Communautée
6. Démonstration
3
Backelite – Digital Service Design by Capgemini
Origine
● 2011 React
“Learn once, write everywhere”
Jordan Walke, software engineer at Facebook
● début 2015 React Native iOS
○ Utilisation de React pour créer une couche
d’abstraction pour faire du natif
○ L’expérience utilisateur du natif combiné à
l’expérience développeur du web
● septembre 2015 RN Android
● 2016 RN Universal Windows Platform
4
Backelite – Digital Service Design by Capgemini
Ils utilisent React Native
5
Principes
6
Backelite – Digital Service Design by Capgemini
À l’exécution, 3 threads coexistent :
● Thread JS
○ Logique métier
○ Asynchrone
○ Écouté une fois toutes les 1/60s par le UI
Thread
● Thread UI
○ Dimensionnement
○ Dessin des composants
● Native Modules Thread
○ Tous les composants graphiques,
services existent sous forme de module
appelable par le JS
Architecture
● Repose sur un moteur JS embarqué :
JavaScriptCore (Safari)*
● * Exception du debugging via Chrome, le
navigateur Chrome du PC exécute tout le JS
(Donc V8 est utilisé)
7
Backelite – Digital Service Design by Capgemini
Fonctionnement
Développement
● React Native Packager Server
○ Transforme la syntaxe du code source en
un seul fichier JS compatible avec le
moteur JS
○ Met à disposition les ressources. Ex :
images à la bonne densité
Production
● Encapsule dans un .ipa ou .apk :
○ Le code JS
○ Les ressources
○ Le JavaScriptCore
8
React Component
9
Backelite – Digital Service Design by Capgemini
import React from 'react';
import { Text, AppRegistry } from
'react-native';
class HelloWorldApp extends React.Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent(
'MyProject',
() => HelloWorldApp
);
Component
● Une app = un arbre de Component imbriqués
● Architecture React / Composants React
Native
● JavaScript Syntax Transformers
○ Babel pour utiliser les nouvelles
normes
○ ECMA 2015 (alias ES6)
■ import, export
■ class
■ () => {}
○ JSX
<Text>Michu</Text>
Devient
React.createElement(Text, {}, 'Michu');
○ Flow
10
Backelite – Digital Service Design by Capgemini
Component API
this.props
● Définit à l’instanciation par le parent
● Sert à définir une propriété variable d’un
composant à un autre
● Immuable
this.state
● Initialisé dans le constructeur
● Unique source de vérité de l’état d’un composant
● setState()
● Redux : défini un state partagé par plusieurs
composants
11
Backelite – Digital Service Design by Capgemini
Lifecycle API
Mounting Cycle
● constructor(object props)
● componentWillMount()
● render() -> React Element
● componentDidMount()
Updating Cycle
● componentWillReceiveProps(object nextProps)
● shouldComponentUpdate(
object nextProps,
object nextState
) -> boolean
● componentWillUpdate(object nextProps, object nextState)
● render() -> React Element
● componentDidUpdate(object prevProps, object prevState)
12
Styling
13
Backelite – Digital Service Design by Capgemini
class StepBubble extends React.Component {
render() {
return (
<View style={styles.container} >
<Text style={styles.stepNumber} >1</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#6aa84f',
width: 40,
height: 40,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center'
},
stepNumber : {
color: 'white',
fontSize: 20,
}
});
Styling
● StyleSheet : Similaire à CSS (abstraction)
● CamelCase keys
○ margin-top => marginTop
● Unité = point
● CSS enhancements
○ paddingHorizontal : 5
● Flexbox : Difficile à appréhender mais très
efficace pour composer ses écrans.
14
1
Backelite – Digital Service Design by Capgemini
Styling - Flexbox, les bases
15
● Flex: x (ex : 1)
● flexDirection:
● justifyContent: Alignement dans l’axe défini par ’flexDirection’
○ ’space-between’
○ ’space-around’
○ ’center’
○ …
● alignItems: Alignement dans l’axe secondaire
○ ’flex-start’
○ ’center’
○ ’flex-end’
○ ...
column row
Backelite – Digital Service Design by Capgemini
Styling
16
Flexbox, les bases :
Communauté
17
Backelite – Digital Service Design by Capgemini
Communauté
18
● Facebook met à jour react-native très régulièrement...
...de nombreuses pull-request sont ajoutées chaque jour.
● De très nombreuses librairies déjà disponibles
cf annexe de cette présentation
● Intérêt grandissant des développeurs et entreprises
● Support de nombreuses librairies JS non dédiées à React.Native
Backelite – Digital Service Design by Capgemini
Démonstration
19
https://github.com/Heidan34/react-native-cocoaheads
Backelite – Digital Service Design by Capgemini
Bon à savoir
● Live debug
● Hot reload
● Screen inspection
● Expo (pure-JS)
● Snack Expo
● Platform.OS === 'ios'
● Bridge iOS et bridge Android
● Flow
20
Questions ?
21
Souhaitez-vous une seconde partie ?
Quels sujets vous intéressent ?
● Déployez vos applications React.Native (de expo à xcode / android studio)
● Créer un composant React.Native avec du code natif.
● Ajouter du React.Native dans une application existante
● Architecturer un projet React.Native
● Redux
22
Backelite – Digital Service Design by Capgemini
Liens
● Site web officiel
● Liste de librairies RN avec évaluation de leur
qualité
● Expo : environnement de développement RN
● Flow : static type checker
● Applications qui utilisent RN
● Les Flexbox web
● Public Api -> Studio Ghibli
23

Contenu connexe

Tendances

Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindPhilippe Didiergeorges
 
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...Publicis Sapient Engineering
 
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 ...Publicis Sapient Engineering
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorArthurMaroulier
 
Firebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiFirebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiCocoaHeads France
 
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 FrameworkMicrosoft
 
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...Publicis Sapient Engineering
 
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...Publicis Sapient Engineering
 
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...Publicis Sapient Engineering
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentationCocoaHeads France
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreMicrosoft
 
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 CassandraJulien Dubois
 
JHipster Conf 2019 French keynote
JHipster Conf 2019 French keynoteJHipster Conf 2019 French keynote
JHipster Conf 2019 French keynoteJulien Dubois
 
Quoi de neuf dans ASP.NET MVC 4
Quoi de neuf dans ASP.NET MVC 4Quoi de neuf dans ASP.NET MVC 4
Quoi de neuf dans ASP.NET MVC 4Microsoft
 
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 lyonClement Bouillier
 
Développement : mettez le turbo ! - Liferay France Symposium 2017
Développement : mettez le turbo ! - Liferay France Symposium 2017Développement : mettez le turbo ! - Liferay France Symposium 2017
Développement : mettez le turbo ! - Liferay France Symposium 2017Sébastien Le Marchand
 
[Laws] Meetup - AWS Lambda
[Laws] Meetup - AWS  Lambda[Laws] Meetup - AWS  Lambda
[Laws] Meetup - AWS LambdaRobin Mizreh
 

Tendances (20)

Angular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium VersusmindAngular2 / Typescript symposium Versusmind
Angular2 / Typescript symposium Versusmind
 
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...
 
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 ...
 
Symposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme MeteorSymposium n°7 : Plateforme Meteor
Symposium n°7 : Plateforme Meteor
 
Firebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiFirebase par nicolas lehovetzki
Firebase par nicolas lehovetzki
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
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
 
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...
 
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...
 
JAMstack
JAMstackJAMstack
JAMstack
 
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...
 
Fastlane snapshot presentation
Fastlane snapshot presentationFastlane snapshot presentation
Fastlane snapshot presentation
 
Keynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle èreKeynote .NET 2015 : une nouvelle ère
Keynote .NET 2015 : une nouvelle ère
 
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
 
JHipster Conf 2019 French keynote
JHipster Conf 2019 French keynoteJHipster Conf 2019 French keynote
JHipster Conf 2019 French keynote
 
Quoi de neuf dans ASP.NET MVC 4
Quoi de neuf dans ASP.NET MVC 4Quoi de neuf dans ASP.NET MVC 4
Quoi de neuf dans ASP.NET MVC 4
 
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
 
Le service workers
Le service workersLe service workers
Le service workers
 
Développement : mettez le turbo ! - Liferay France Symposium 2017
Développement : mettez le turbo ! - Liferay France Symposium 2017Développement : mettez le turbo ! - Liferay France Symposium 2017
Développement : mettez le turbo ! - Liferay France Symposium 2017
 
[Laws] Meetup - AWS Lambda
[Laws] Meetup - AWS  Lambda[Laws] Meetup - AWS  Lambda
[Laws] Meetup - AWS Lambda
 

Similaire à React Native - Développez vos application native en JS

Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketmichael_bailly
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
DevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - SpinnakerDevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - SpinnakerStephan Lagraulet
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App RESONEO
 
Presentation Projet R&D Dynarchi
Presentation Projet R&D Dynarchi Presentation Projet R&D Dynarchi
Presentation Projet R&D Dynarchi Marc Bourhis
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...MSDEVMTL
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de JhipsterKokou Gaglo
 
20171122 01 - REX : Intégration et déploiement continu chez Engie
20171122 01 - REX : Intégration et déploiement continu chez Engie20171122 01 - REX : Intégration et déploiement continu chez Engie
20171122 01 - REX : Intégration et déploiement continu chez EngieLeClubQualiteLogicielle
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsChristophe Villeneuve
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfboulonvert
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidementHoracio Gonzalez
 
Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...
Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...
Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...Publicis Sapient Engineering
 
Qualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & AndroidQualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & AndroidThibaud CAVIN
 
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)Publicis Sapient Engineering
 

Similaire à React Native - Développez vos application native en JS (20)

React xp
React xpReact xp
React xp
 
Native script
Native scriptNative script
Native script
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
pfe book 2023 2024.pdf
pfe book 2023 2024.pdfpfe book 2023 2024.pdf
pfe book 2023 2024.pdf
 
DevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - SpinnakerDevFest Nantes 2016 - Spinnaker
DevFest Nantes 2016 - Spinnaker
 
Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App Améliorer l’expérience utilisateur en passant aux Progressive Web App
Améliorer l’expérience utilisateur en passant aux Progressive Web App
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 
Presentation Projet R&D Dynarchi
Presentation Projet R&D Dynarchi Presentation Projet R&D Dynarchi
Presentation Projet R&D Dynarchi
 
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
Sébastien Coutu: Copy this Meetup Devops - microservices - infrastructure imm...
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
 
REX react native
REX react nativeREX react native
REX react native
 
20171122 01 - REX : Intégration et déploiement continu chez Engie
20171122 01 - REX : Intégration et déploiement continu chez Engie20171122 01 - REX : Intégration et déploiement continu chez Engie
20171122 01 - REX : Intégration et déploiement continu chez Engie
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...
Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...
Open XKE - De l'intégration continue au déploiement continu sur iOS et Androi...
 
Qualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & AndroidQualité & Industrialisation des développements mobiles sur iOS & Android
Qualité & Industrialisation des développements mobiles sur iOS & Android
 
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)Paris Container Day 2016 : Cloudunit v2 (Treeptik)
Paris Container Day 2016 : Cloudunit v2 (Treeptik)
 

React Native - Développez vos application native en JS

  • 1. Backelite – Digital Service Design by Capgemini React Native Développez vos applications native en JS 1
  • 2. Backelite – Digital Service Design by Capgemini Vos intervenants Nicolas Fontaine Backelite iOS & Web developer Yann Duval Backelite Web & Android developer 2
  • 3. Backelite – Digital Service Design by Capgemini Sommaire 1. Origine 2. Principes 3. React component ● Component APi ● Lifecycle API 4. Styling 5. Communautée 6. Démonstration 3
  • 4. Backelite – Digital Service Design by Capgemini Origine ● 2011 React “Learn once, write everywhere” Jordan Walke, software engineer at Facebook ● début 2015 React Native iOS ○ Utilisation de React pour créer une couche d’abstraction pour faire du natif ○ L’expérience utilisateur du natif combiné à l’expérience développeur du web ● septembre 2015 RN Android ● 2016 RN Universal Windows Platform 4
  • 5. Backelite – Digital Service Design by Capgemini Ils utilisent React Native 5
  • 7. Backelite – Digital Service Design by Capgemini À l’exécution, 3 threads coexistent : ● Thread JS ○ Logique métier ○ Asynchrone ○ Écouté une fois toutes les 1/60s par le UI Thread ● Thread UI ○ Dimensionnement ○ Dessin des composants ● Native Modules Thread ○ Tous les composants graphiques, services existent sous forme de module appelable par le JS Architecture ● Repose sur un moteur JS embarqué : JavaScriptCore (Safari)* ● * Exception du debugging via Chrome, le navigateur Chrome du PC exécute tout le JS (Donc V8 est utilisé) 7
  • 8. Backelite – Digital Service Design by Capgemini Fonctionnement Développement ● React Native Packager Server ○ Transforme la syntaxe du code source en un seul fichier JS compatible avec le moteur JS ○ Met à disposition les ressources. Ex : images à la bonne densité Production ● Encapsule dans un .ipa ou .apk : ○ Le code JS ○ Les ressources ○ Le JavaScriptCore 8
  • 10. Backelite – Digital Service Design by Capgemini import React from 'react'; import { Text, AppRegistry } from 'react-native'; class HelloWorldApp extends React.Component { render() { return ( <Text>Hello world!</Text> ); } } AppRegistry.registerComponent( 'MyProject', () => HelloWorldApp ); Component ● Une app = un arbre de Component imbriqués ● Architecture React / Composants React Native ● JavaScript Syntax Transformers ○ Babel pour utiliser les nouvelles normes ○ ECMA 2015 (alias ES6) ■ import, export ■ class ■ () => {} ○ JSX <Text>Michu</Text> Devient React.createElement(Text, {}, 'Michu'); ○ Flow 10
  • 11. Backelite – Digital Service Design by Capgemini Component API this.props ● Définit à l’instanciation par le parent ● Sert à définir une propriété variable d’un composant à un autre ● Immuable this.state ● Initialisé dans le constructeur ● Unique source de vérité de l’état d’un composant ● setState() ● Redux : défini un state partagé par plusieurs composants 11
  • 12. Backelite – Digital Service Design by Capgemini Lifecycle API Mounting Cycle ● constructor(object props) ● componentWillMount() ● render() -> React Element ● componentDidMount() Updating Cycle ● componentWillReceiveProps(object nextProps) ● shouldComponentUpdate( object nextProps, object nextState ) -> boolean ● componentWillUpdate(object nextProps, object nextState) ● render() -> React Element ● componentDidUpdate(object prevProps, object prevState) 12
  • 14. Backelite – Digital Service Design by Capgemini class StepBubble extends React.Component { render() { return ( <View style={styles.container} > <Text style={styles.stepNumber} >1</Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: '#6aa84f', width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' }, stepNumber : { color: 'white', fontSize: 20, } }); Styling ● StyleSheet : Similaire à CSS (abstraction) ● CamelCase keys ○ margin-top => marginTop ● Unité = point ● CSS enhancements ○ paddingHorizontal : 5 ● Flexbox : Difficile à appréhender mais très efficace pour composer ses écrans. 14 1
  • 15. Backelite – Digital Service Design by Capgemini Styling - Flexbox, les bases 15 ● Flex: x (ex : 1) ● flexDirection: ● justifyContent: Alignement dans l’axe défini par ’flexDirection’ ○ ’space-between’ ○ ’space-around’ ○ ’center’ ○ … ● alignItems: Alignement dans l’axe secondaire ○ ’flex-start’ ○ ’center’ ○ ’flex-end’ ○ ... column row
  • 16. Backelite – Digital Service Design by Capgemini Styling 16 Flexbox, les bases :
  • 18. Backelite – Digital Service Design by Capgemini Communauté 18 ● Facebook met à jour react-native très régulièrement... ...de nombreuses pull-request sont ajoutées chaque jour. ● De très nombreuses librairies déjà disponibles cf annexe de cette présentation ● Intérêt grandissant des développeurs et entreprises ● Support de nombreuses librairies JS non dédiées à React.Native
  • 19. Backelite – Digital Service Design by Capgemini Démonstration 19 https://github.com/Heidan34/react-native-cocoaheads
  • 20. Backelite – Digital Service Design by Capgemini Bon à savoir ● Live debug ● Hot reload ● Screen inspection ● Expo (pure-JS) ● Snack Expo ● Platform.OS === 'ios' ● Bridge iOS et bridge Android ● Flow 20
  • 22. Souhaitez-vous une seconde partie ? Quels sujets vous intéressent ? ● Déployez vos applications React.Native (de expo à xcode / android studio) ● Créer un composant React.Native avec du code natif. ● Ajouter du React.Native dans une application existante ● Architecturer un projet React.Native ● Redux 22
  • 23. Backelite – Digital Service Design by Capgemini Liens ● Site web officiel ● Liste de librairies RN avec évaluation de leur qualité ● Expo : environnement de développement RN ● Flow : static type checker ● Applications qui utilisent RN ● Les Flexbox web ● Public Api -> Studio Ghibli 23