Le document présente React Native, une technologie permettant de développer des applications mobiles en utilisant JavaScript. Il aborde son historique, son architecture, la structure des composants, le cycle de vie des composants, ainsi que des ressources et outils disponibles pour les développeurs. Une attention particulière est également portée aux principes du développement, à la stylisation avec Flexbox, et à l'importance de la communauté autour de React Native.

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

6. Principes
6

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

9. React Component
9

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

13. Styling
13

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 :

17. Communauté
17

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

21. Questions ?
21

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