Bousmah - React Native Emsi

Développement des Applications Mobiles
Hybrides sous
React Native
Dr. Mohammed BOUSMAH

Avantages React Native App Installation Concepts Etude de cas
À la fin de ce cours, vous serez capable de :
Décrire les avantages de React Native
Expliquer l‘architecture d’une App React Native
Identifier les différents types d’installation de React Native
Utiliser les concepts de base de React Native:

styles, flexbox, props, state et redux
Développer une Application mobile Cross-platform
fonctionnelle avec React Native
Développement d’Applications Mobiles React Native

Copyright: bousmah@gmail.com
Pourquoi choisir React Native pour développer son application

React Native est un framework conçu en 2015 par Facebook pour accélérer
le développement de leurs applications mobiles. React Native est basé
sur React, une librairie Javascript développée deux ans auparavant par
un ingénieur Facebook (Jordan Walke).
Voici les 7 raisons qui vont justifier le choix de React Native.

1- React Native, un seul code pour iOS et Android
React Native permet de piloter facilement un projet, en développant une

seule fois pour les deux plateformes. React Native se positionne dans la
création d'applications cross-platforms, un seul langage à apprendre,
Javascript è 2 Livrables (apk, ipa).

2- React Native, un développement Rapide
Concrètement, en développant une seule fois pour les deux plateformes

c’est un gain de temps lors de la phase de réalisation.

3- React Native, un coût de réalisation minimal
Par conséquence, un gain de temps è un gain d’argent lors de la

phase de réalisation.

4- “Look and Feel” des applications natives
Il y a de nombreuses approches pour développer une application mobile

« multi-plateforme ». Dans la pratique, une application hybride
fonctionne autour d’un webview (un navigateur web embarqué) :
Cas d’Ionic par exemple.
A l’inverse React Native utilise les mêmes composants que

les applications natives et offre des performances équivalentes.
Ils ont le “look and feel” des applications natives.

5- React Native est gratuit

Depuis le début du développement à la livraison de l’application mobile,
it’s :

6- React Native est Open Source
Concrètement, une grande communauté s'est ainsi construite autour du

framework et elle a permis son accroissement.

7- Une communauté active

L’écosystème qui entoure React Native est très dynamique.
D’abord, grâce au soutient de Facebook mais également parceque des
entreprises comme Instagram, Skype, Uber et Tesla utilise React Native. Ce
qui donne une bonne impression du champ des possibilités de ce Framework.
La communauté de React Native met à disposition de nombreuses mises à
jour et modules complémentaires. Les mises à jour sont donc régulières,
avec des réponses aux problématiques pertinentes et extrêmement rapides.
https://reactnative.dev/showcase

Quelle est l’architecture d’une Application React Native

React Native est basé sur la notion de Composant ou “Component”
React Mobile App = ∑./ 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡𝑠 + ∑ 𝑅𝑒𝑠𝑜𝑢𝑟𝑐𝑒𝑠 + ∑ 𝐶𝑜𝑛𝑓𝑖𝑔 𝐹𝑖𝑙𝑒𝑠
Le component est le concept clé de React. Facebook a créé son framework

entièrement autour de ce concept, ce qui signifie que la notion de component
s'applique aussi bien pour React Native et React JS (développement web).
C’est quoi alors un Component ?

Component = 𝐽𝑎𝑣𝑎𝑆𝑐𝑟𝑖𝑝𝑡 𝐶𝑙𝑎𝑠𝑠 𝑤ℎ𝑖𝑐ℎ 𝑟𝑒𝑡𝑢𝑟𝑛𝑠 𝑎 𝑔𝑟𝑎𝑝ℎ𝑖𝑐𝑎𝑙 𝑒𝑙𝑒𝑚𝑒𝑛𝑡
𝑃𝑟𝑒𝑑𝑒𝑓𝑖𝑛𝑒𝑑 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡 Custom 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡
.
Simple 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡 like: M 𝑆𝑖𝑚𝑝𝑙𝑒 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡𝑠
View, TextInput, Button… /
C’est quoi alors un Component ?

Voici un Script JSX d’un Custom Component nommé Search.js .
JSX est une extension du langage Javascript créée par Facebook. Il facilite la
création de components avec une syntaxe très simple inspirée du HTML et du
XML. JSX convertit le rendu des components en éléments React

2 types d’installation

Concepts de base de React Native: les styles

StyleSheet est une API React Native permettant d'augmenter les performances
de vos styles dans une application.
On ne peut appliquer les styles que sur les “Predefined Components React
Native”.

Concepts de base de React Native: Flexbox
En React Native, tous les components utilisent Flexbox qui sont des
"boîtes flexibles” permettant de gérer dynamiquement les tailles et les
positions des éléments graphiques.
Par défaut, TOUS les components React Native ont un style flex 0.
flex 0: “ Adapte ta taille en fonction de ton contenu”.
flex 1 : “Adapte ta taille en fonction de ton component parent ”.

Ici, on a 2 components enfants à la vue jaune et on dit à

ces components de se partager l'écran. on découpe notre
espace en 2 (1 + 1 ) et on dit :
• vue rouge prend 1/2 de l'écran ;
• vue verte prend 1/2 de l'écran ;

Ici, on a 3 components enfants à la vue jaune et on dit à

ces components de se partager l'écran. on découpe notre
espace en 6 (1 + 2 + 3) et on dit :
• vue rouge prend 1/6 de l'écran ;
• vue verte prend 1/3 (2/6) de l'écran ;
• vue bleue prend 1/2 (3/6) de l'écran.


Concepts de base de React Native: props
En React Native, on appelle props tout simplement les propriétés d'un component .
Les props sont utilisées pour faire passer des informations d'un component à un autre.
Prenons l'exemple où j'ajoute une prop à un component :
Comment récupère-t-on cette prop une fois dans le component MonComponent ?
Les props d'un component sont toutes stockées dans un objet this.props.
La prop film est donc accessible depuis this.props.film

Concepts de base de React Native: state
Le state possède les données d'un component, il est créé dans ce dernier
lors de l’initialisation. Il permet de gérer et modifier ses données en
utilisant la fonction asynchrone non bloquante setState .
Si on souhaite modifier la donnée film du state de mon component, on doit

utiliser :

Concepts de base de React Native: Redux

Redux est une librairie Javascript basée sur Flux. Elle facilite la gestion
d’un state global.
Voici l’architecture utilisée par la librairie Redux :
Votre View crée et envoie une action. Cette action est récupérée par le store.
Le store modifie le state de votre application en fonction de l'action reçue.
Votre View détecte les changements du state global et se rafraîchit.

But: Etre capable de concevoir et réaliser une Application Mobile

Cross-platform avec React Native permettant de chercher et afficher
une liste de films en utilisantde l'API TMDB (The Movie DataBase)
comme back-end pour récupérer toutes sortes de films.
https://www.themoviedb.org/

Développement des Applications Mobiles
Hybrides sous
React Native
Merci de votre attention

Références :
Documentation officielle React Native: https://reactnative.dev/

Maxime Charruel: Développez une application mobile React Native
https://openclassrooms.com/fr/courses/4902061-developpez-une-
application-mobile-react-native
API Films: https://www.themoviedb.org/

Bousmah - React Native Emsi

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bousmah - React Native Emsi

Transféré par

Droits d'auteur :

Formats disponibles

Développement des Applications Mobiles

Dr. Mohammed BOUSMAH

À la fin de ce cours, vous serez capable de :

Décrire les avantages de React Native

Expliquer l‘architecture d’une App React Native

Identifier les différents types d’installation de React Native

Utiliser les concepts de base de React Native:

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

Voici les 7 raisons qui vont justifier le choix de React Native.

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

1- React Native, un seul code pour iOS et Android

React Native permet de piloter facilement un projet, en développant une

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

2- React Native, un développement Rapide

Concrètement, en développant une seule fois pour les deux plateformes

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

3- React Native, un coût de réalisation minimal

Par conséquence, un gain de temps è un gain d’argent lors de la

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

4- “Look and Feel” des applications natives

Il y a de nombreuses approches pour développer une application mobile

A l’inverse React Native utilise les mêmes composants que

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

5- React Native est gratuit

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

6- React Native est Open Source

Concrètement, une grande communauté s'est ainsi construite autour du

Développement d’Applications Mobiles React Native

Pourquoi choisir React Native pour développer son application

7- Une communauté active

Développement d’Applications Mobiles React Native

Quelle est l’architecture d’une Application React Native

React Mobile App = ∑./ 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡𝑠 + ∑ 𝑅𝑒𝑠𝑜𝑢𝑟𝑐𝑒𝑠 + ∑ 𝐶𝑜𝑛𝑓𝑖𝑔 𝐹𝑖𝑙𝑒𝑠

Le component est le concept clé de React. Facebook a créé son framework

C’est quoi alors un Component ?

𝑃𝑟𝑒𝑑𝑒𝑓𝑖𝑛𝑒𝑑 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡 Custom 𝐶𝑜𝑚𝑝𝑜𝑛𝑒𝑛𝑡

C’est quoi alors un Component ?

Développement d’Applications Mobiles React Native

Développement d’Applications Mobiles React Native

Concepts de base de React Native: les styles

Développement d’Applications Mobiles React Native

Concepts de base de React Native: Flexbox

Développement d’Applications Mobiles React Native

Concepts de base de React Native: Flexbox

Ici, on a 2 components enfants à la vue jaune et on dit à

Développement d’Applications Mobiles React Native

Concepts de base de React Native: Flexbox

Ici, on a 3 components enfants à la vue jaune et on dit à

Développement d’Applications Mobiles React Native

Concepts de base de React Native: Flexbox

Développement d’Applications Mobiles React Native

Concepts de base de React Native: props

Prenons l'exemple où j'ajoute une prop à un component :

Comment récupère-t-on cette prop une fois dans le component MonComponent ?

Développement d’Applications Mobiles React Native

Concepts de base de React Native: state