Support React P1

1
Certification Canadienne React Native
Yellow Belt Certification

International Consulting Canada
Formation
Devenir Développeur Mobile
REACT NATIVE
Formatrice : Intissar SELMI

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022
Consulting
Canada www.ic-canada.com #1, 1265 Graham Bvd, Montréal, H3P 2G5
2
Plan de la Formation
1 Introduction
2 Installation et configuration d’envirennement
3 Les composants de bases
4 Le Style d'un composant
5 State & Props
6 React Navigation
7 Manipulation et persistance de données

Consulting
3
Objectif de la Formation
Être capable de construire une application IOS et Android en respectant
les bonnes pratiques :
ü Savoir mettre en place un environnement de développement React
Native
ü Configuration d’un projet « React Native »
ü Développer des interfaces utilisateurs à base de composants
ü Maitriser l’affichage des listes de données
ü Mettre en place la navigation dans l’application
ü Savoir installer, configurer et manipuler des bibliothèques
ü Maitriser l’Implémentation des services d’accès aux serveurs de
données
Consulting
4
React Native
v Créé par Facebook.

v Commencez par publier la version iOS en Mars 2015 et version Android
en septembre 2015
v Framework JavaScript
v Basé sur le framework Web JavaScript populaire appelé React
v REACT Native vous aide à créer des applications mobiles réelles et
performantes
v Ne codez qu'une seule fois

Consulting
5
Pourquoi on a utilisé React Native?
Gratuit
Porté par Facebook
Flexible
Communauté
Rapide & Facile à développer

Consulting
6
Applications Mobiles développés par React Native

Consulting
7
1 Introduction
2 Installation et configuration d’environnement
3 les composants de bases
5 state & Props
6 React Navigation

Consulting
8
Installation et configuration d’envirennement
React Native
• Configuration pour Windows
• Remarque: vous ne pouvez pas développer d’applications
react native pour iOS sur Windows, mais uniquement des
applications Android .

Consulting
9
Outils / Environnement
• Outil de ligne de commande (par exemple, ligne de

commande Powershell ou Windows)
• Le JDK (version 8 ou plus)
• Android Studio (SDK)
• Node js (v 12 ou plus)
• Visual Code

Consulting
10
Installation
1) Configurez votre machine pour réagir au développement
natif
• Installation node js ,Jdk et SDK:

https://nodejs.org/dist/v12.22.8/node-v12.22.8-x64.msi
https://www.clubic.com/telecharger-fiche280710-android-sdk.html
https://www.oracle.com/java/technologies/javase/javase8-archive-
downloads.html
• Redémarrez la ligne de commande en tant qu'administrateur

pour pouvoir exécuter npm:
npm install -g react-native-cli

Consulting
11
Npm
• npm est le gestionnaire de paquets Node qui est fourni avec le logiciel et qui facilite tout
développement Node. Depuis des années, Node a été largement utilisé par les
développeurs JavaScript pour partager des outils, installer divers modules et gérer leurs
dépendances. Sachant cela, il est extrêmement important pour les personnes travaillant
avec Node.js de comprendre ce qu’est npm.
• Il fonctionne sur la base de ses deux rôles :

Ø Il s’agit d’un référentiel largement utilisé pour la publication de projets Node.js open-source.
Il s’agit donc d’une plateforme en ligne où chacun peut publier et partager des outils écrits
en JavaScript.
Ø npm est un outil en ligne de commande qui permet d’interagir avec les plateformes en ligne,
telles que les navigateurs et les serveurs. Cet utilitaire permet d’installer et de désinstaller
des paquets, de gérer les versions et les dépendances nécessaires à l’exécution d’un projet.

Consulting
12
Installation
2) Définissez vos variables d'environnement

• Ouvrez la fenêtre Variables d'environnement en naviguant
vers:
[Clic droit] Menu "Démarrer" -> Système -> Paramètres système
avancés -> Variables d'environnement
• ajoutez une nouvelle variable système
nommée « JAVA_HOME » et la valeur correspondant au
chemin d'accès à votre Jdk
• Dans la section inférieure, recherchez la variable système
"Path" et ajoutez l'emplacement d'installation de JDK/bin

Consulting
13
Installation
• Si vous n'avez pas ajouté de variable d'environnement ANDROID_HOME, vous
devrez également le faire ici.
• Dans la fenêtre "Variables d'environnement", ajoutez une nouvelle variable
système nommée "ANDROID_HOME" et la valeur correspondant au chemin
d'accès à votre SDK Android.
• Dans la section inférieure, recherchez la variable système "Path" et ajoutez
l'emplacement d'installation de ANDROID_HOME /plateform-tools
• Redémarrez ensuite la ligne de commande en tant qu'administrateur pour
pouvoir y exécuter des commandes réact native.
3) Créez votre projet
• En ligne de commande, accédez au dossier dans lequel vous
souhaitez placer votre projet et exécutez la commande suivante:
npx react-native init NomProjet –version 0.66.0

Consulting
14
Structure du projet
les fichiers nous seront utiles sont:
node_modules En parlant de fichier, on commence par un dossier. Si vous dépliez ce dossier, vous
devez voir une multitude de dossiers. Il s'agit de toutes les dépendances pour que
votre application fonctionne. Si vous êtes courageux au point de survoler cette liste,
vous verrez apparaître des librairies comme babel et react et react native, on a
installé tous les éléments nécessaires au développement sur React Native et même
React se présente sous forme de librairie.
On ne doit jamais toucher à ce dossier et à n'importe quel fichier qu'il contient. Dès
que vous réinstallez ou mettez à jour vos librairies, vos modifications seront écrasées.
app.json Ce fichier permet de configurer des informations liées à votre application.
package.json C'est ici que sont recensées toutes les dépendances de votre application. Si ce fichier
est bien configuré, une personne qui reprend votre travail n'aura qu'une commande à
taper avant de se lancer dans les développements.
Si vous ouvrez ce fichier, vous remarquerez qu'on définit également le nom de votre
application et la version de votre application.

Consulting
15
Comment exécuter l'application native React sur un appareil
réel Android ?
• Déboguer l'application dans un appareil Android réel à l'aide d'une connexion USB
• Après avoir développé l'application React native , c'est toujours une bonne idée de la tester
sur l'appareil réel car plusieurs fois, une application se comporte différemment dans
l'émulateur que l'appareil réel.
• Si vous êtes connecté via le câble, procédez de la manière suivante:
Ø 1. allez au > Paramètres > a Propos de l'Appareil
Ø 2. Puis Le Logiciel Info
Ø 3. Puis > le Numéro de Build
Ø 4. Maintenant, Appuyez sur (Cliquez sur) plusieurs fois sur Numéro de Build pour
Permettre Options pour les Développeurs
Ø 5. Ici, vous n'allez pas les Options pour les Développeurs seront visibles dans vos
Paramètres

Consulting
16
Comment exécuter l'application native React sur un appareil
réel Android ?
Ø 6. Maintenant, Aller à l'intérieur des Options pour les Développeurs et Activer le Mode
Débogage USB.
Ø 7. Ouvrez votre terminal sous votre projet:
Lancer la commande:
adb devices
Cela va vous montrer les appareils et simulateur/virtuel ,les périphériques que vous avez sur
votre ordinateur.
Ø 8. Exécuter
npx react-native run-android
L'application devrait apparaître sur votre appareil
• Guides :
– https://aboutreact.com/how-to-run-react-native-app-on-real-device-android/
– https://askcodez.com/comment-faire-pour-executer-reagir-application-native-sur-
telephone-android.html

Consulting
17
Hello Word
• Ouvrez App.js et supprimez tout le contenu pour le remplacer par:
import React, {Component} from 'react';
import {Text, View,} from 'react-native';
export default class App extends Component {

render() {
return (
<View
style={{
backgroundColor: 'white',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{color: 'white', fontSize: 16,
fontWeight: 'bold'}}>
Hello word
</Text>
</View>
);
}
}
• Vous devriez voir Hello World! écrit à l'écran!

Consulting
18
1 Introduction
2 Installation et configuration d’envirennement
3 Les composants de bases
5 State & Props
6 React Navigation

Consulting
19
Composants React Native
• View: est l'élément le plus courant dans React Native. Vous

pouvez le considérer comme un équivalent de l'élément div
utilisé dans le développement Web.
• Text
• Image :

Consulting
20
Composants React Native
• TextInput est un composant de base qui permet à l'utilisateur

de saisir du texte. Il a un accessoire onChangeText qui prend
une fonction à appeler chaque fois que le texte est modifié.

Consulting
21
Liste de données
• On se réfère à la documentation de React Native et on voit un

certain component FlatList qui permet justement d'afficher
une liste de données.
• on commence par importer le component React Native dans
notre fichier
• Puis on ajoute une FlatList dans notre component

Consulting
22
Liste de données
Une FlatList doit obligatoirement implémenter deux propriétés :

• data : qui correspond aux données affichées dans la liste. Ici,
on renseignera notre liste;
• renderItem : qui correspond au rendu des données de la liste.
Ici, on définira un template pour afficher notre liste.

Consulting

Support React P1

Transféré par

Droits d'auteur :

Formats disponibles

Support React P1

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

Support React P1

Transféré par

Droits d'auteur :

Formats disponibles

1

Certification Canadienne React Native

Yellow Belt Certification

Formatrice : Intissar SELMI

2 Installation et configuration d’envirennement

3 Les composants de bases

4 Le Style d'un composant

5 State & Props

7 Manipulation et persistance de données

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

v Créé par Facebook.

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

Pourquoi on a utilisé React Native?

Porté par Facebook

Rapide & Facile à développer

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

Applications Mobiles développés par React Native

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

2 Installation et configuration d’environnement

3 les composants de bases

4 Le Style d'un composant

5 state & Props

7 Manipulation et persistance de données

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

• Outil de ligne de commande (par exemple, ligne de

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

• Installation node js ,Jdk et SDK:

• Redémarrez la ligne de commande en tant qu'administrateur

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

• Il fonctionne sur la base de ses deux rôles :

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

2) Définissez vos variables d'environnement

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

export default class App extends Component {

• Vous devriez voir Hello World! écrit à l'écran!

2 Installation et configuration d’envirennement

3 Les composants de bases

4 Le Style d'un composant

5 State & Props

7 Manipulation et persistance de données

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

• View: est l'élément le plus courant dans React Native. Vous

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

• TextInput est un composant de base qui permet à l'utilisateur

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

• On se réfère à la documentation de React Native et on voit un

• Puis on ajoute une FlatList dans notre component

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

Une FlatList doit obligatoirement implémenter deux propriétés :

International www.karray-group.com ATB Building, Gremda Road Km 6, 3022

Vous aimerez peut-être aussi