Débuter avec React Native : Création d'une application simple avec Expo et React Native

Dans le monde numérique d'aujourd'hui, la maîtrise du développement web et mobile est devenue une compétence essentielle pour tout aspirant développeur.


Pour beaucoup, le voyage commence avec JavaScript, le langage de programmation omniprésent du web, avant de se plonger dans le monde passionnant de React Native pour le développement d'applications mobiles.

De JavaScript à React Native

Le JavaScript est souvent la première étape pour de nombreux développeurs.


Non seulement c'est le langage de script de base pour le web, mais il a également évolué pour prendre en charge le développement côté serveur avec Node.js, et maintenant, le développement d'applications mobiles avec React Native.


React Native est un framework qui permet de créer des applications mobiles en utilisant uniquement JavaScript.


Il utilise le même modèle de conception que React, vous permettant de composer une interface utilisateur riche à partir de composants JavaScript déclaratifs.


Mais avant de plonger dans React Native, il est essentiel de comprendre les bases de JavaScript.

Apprendre les bases de JavaScript

Aujourd'hui, nous allons explorer les bases du langage de programmation le plus utilisé sur le web : JavaScript.


Que vous soyez un débutant complet ou que vous ayez déjà une certaine expérience avec d'autres langages de programmation, cette introduction à JavaScript devrait vous aider à comprendre ses principes fondamentaux et à vous lancer dans le développement web.

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation à usage général qui est principalement utilisé pour rendre les sites web interactifs.


Il permet d'ajouter des fonctionnalités complexes à des sites web et de gérer l'interaction avec l'utilisateur.

Variables

En JavaScript, nous utilisons des variables pour stocker des données. Vous pouvez déclarer une variable avec le mot-clé `let`, `const` ou `var`.


let name = "Alice";
const age = 25;
var city = "Paris";

Types de données

JavaScript possède plusieurs types de données, notamment :

  • Les nombres (Number)
  • Les chaînes de caractères (String)
  • Les booléens (Boolean)
  • Les objets (Object)
  • Les tableaux (Array)
  • Null et Undefined

let num = 10; // Number
let str = "Hello"; // String
let bool = true; // Boolean
let obj = {name: "Alice", age: 25}; // Object
let arr = [1, 2, 3, 4, 5]; // Array
let n = null; // Null

Opérateurs

Les opérateurs JavaScript vous permettent d'effectuer des opérations sur des valeurs. Les plus courants sont :

  • Les opérateurs arithmétiques (`+`, `-`, `*`, `/`, `%`)
  • Les opérateurs d'assignation (`=`, `+=`, `-=`, `*=`, `/=`, `%=`)
  • Les opérateurs de comparaison (`==`, `===`, `!=`, `!==`, `<`, `>`, `<=`, `>=`)
  • Les opérateurs logiques (`&&`, `||`, `!`)

// Opérateurs arithmétiques
let a = 10;
let b = 5;
let addition = a + b; // Addition
let soustraction = a - b; // Soustraction
let multiplication = a * b; // Multiplication
let division = a / b; // Division
let modulo = a % b; // Modulo

console.log(addition); // Affiche 15
console.log(soustraction); // Affiche 5
console.log(multiplication); // Affiche 50
console.log(division); // Affiche 2
console.log(modulo); // Affiche 0

// Opérateurs d'assignation
let x = 10;
x += 5; // Équivaut à x = x + 5
console.log(x); // Affiche 15

let y = 10;
y -= 3; // Équivaut à y = y - 3
console.log(y); // Affiche 7

// Opérateurs de comparaison
let num1 = 10;
let num2 = 5;

console.log(num1 == num2); // Affiche false (vérifie l'égalité sans vérifier le type)
console.log(num1 === num2); // Affiche false (vérifie l'égalité en vérifiant le type)
console.log(num1 != num2); // Affiche true (vérifie la différence sans vérifier le type)
console.log(num1 !== num2); // Affiche true (vérifie la différence en vérifiant le type)
console.log(num1 < num2); // Affiche false
console.log(num1 > num2); // Affiche true
console.log(num1 <= num2); // Affiche false
console.log(num1 >= num2); // Affiche true

// Opérateurs logiques
let condition1 = true;
let condition2 = false;

console.log(condition1 && condition2); // Affiche false (ET logique)
console.log(condition1 || condition2); // Affiche true (OU logique)
console.log(!condition1); // Affiche false (NON logique)

Contrôle du flux d'exécution

JavaScript vous permet de contrôler le flux d'exécution de votre programme en utilisant des structures de contrôle comme les boucles et les conditions.


// condition
if (age >= 18) {
    console.log("Vous êtes majeur.");
} else {
    console.log("Vous êtes mineur.");
}

// boucle
for (let i = 0; i < 10; i++) {
    console.log(i);
}

Fonctions

Les fonctions sont un moyen de regrouper un ensemble d'instructions que vous pouvez exécuter à plusieurs reprises.


function greet(name) {
    console.log("Bonjour " + name + " !");
}

greet("Alice");

Conclusion

Voilà une brève introduction aux bases de JavaScript. Évidemment, JavaScript est un langage riche et complexe, et il y a beaucoup plus à apprendre.


Une fois que vous avez acquis une bonne compréhension de JavaScript, vous pouvez alors vous aventurer dans le monde de React Native.

Qu'est-ce que React Native ?

React Native est un framework open-source créé par Facebook qui permet de développer des applications mobiles en utilisant JavaScript et React.


Il offre la possibilité de créer des applications pour iOS et Android tout en partageant une base de code commune, ce qui permet de gagner beaucoup de temps et d'efforts.

Pourquoi utiliser React Native ?

React Native offre plusieurs avantages :

  • Réutilisation du code: Vous pouvez utiliser le même code pour iOS et Android, ce qui permet de gagner du temps et d'éviter la duplication de code.
  • Performance : Les applications React Native sont compilées en code natif, ce qui les rend aussi rapides que les applications natives.
  • Hot Reloading : Cette fonctionnalité vous permet de voir les changements que vous apportez à votre code en temps réel, sans avoir à recompiler l'application.
  • Communauté: React Native dispose d'une grande communauté de développeurs, ce qui signifie que vous pouvez facilement trouver de l'aide et des ressources en ligne.

Approfondissement

Maintenant que nous avons une base solide avec JavaScript et une compréhension de base de React Native, nous allons explorer plus en détail comment nous pouvons construire des applications avec React Native.

L'installation d'Expo

Pour développer des applications en React Native, nous avons besoin d'un environnement de développement configuré correctement.


C'est ici qu'intervient Expo.


Expo est un ensemble d'outils construit autour de React Native qui nous aide à démarrer rapidement sans gérer la complexité de la configuration native.


Pour installer Expo, vous aurez besoin de Node.js et npm (qui est installé avec Node.js) sur votre machine.


https://nodejs.org/fr


Une fois que vous avez Node.js, vous pouvez installer Expo à l'aide de la commande suivante dans votre terminal :


npm install -g expo-cli

Une fois Expo installé, vous pouvez créer un nouveau projet React Native à l'aide de la commande suivante :


expo init monProjet

Expo vous demandera alors de choisir un modèle pour votre projet.


Pour cette démonstration, nous allons sélectionner le modèle "blank" qui est un modèle minimal avec les stricts éléments de base nécessaires pour commencer.

Exploration du projet

Lorsque vous initialisez un nouveau projet avec Expo, plusieurs fichiers et dossiers sont créés automatiquement.


Voici une brève description de ce que chacun d'eux fait :

  • `node_modules/` : Ce dossier contient tous les packages que votre projet utilise. Ils sont installés via npm ou yarn.
  • `package.json` : Ce fichier est un manifeste pour votre projet. Il contient des informations sur le projet et la liste des dépendances.
  • `app.json` : Ce fichier contient des informations spécifiques à Expo et à la configuration de votre application.
  • `App.js` : C'est le point d'entrée de votre application. C'est ici que vous commencez à écrire votre code React Native.

Ouvrez le fichier `App.js`

Ceci est un exemple simple d'un composant React Native.


Le composant `View` est un conteneur, et le composant `Text` est utilisé pour afficher du texte.


Les styles sont appliqués en utilisant `StyleSheet.create`, une API fournie par React Native.

Créer des composants en React Native

React Native utilise le même modèle de composants que React, ce qui signifie que vous créez votre interface utilisateur en assemblant différents composants.


Chaque composant est une unité autonome de code qui peut être réutilisée à travers votre application.


Prenons un exemple simple.


Disons que vous voulez créer une page d'accueil pour votre application.


Vous pouvez commencer par créer un nouveau fichier `Home.js`, puis définir un nouveau composant `Home` comme ceci :

Dans cet exemple, `Home` est un composant fonctionnel qui renvoie un élément JSX.


JSX ressemble beaucoup à HTML, mais il est en fait du JavaScript.


Le composant `View` est utilisé comme conteneur, tandis que le composant `Text` est utilisé pour afficher du texte à l'écran.


Enfin, notez l'objet `styles`.


En React Native, le style est généralement défini en utilisant JavaScript, pas CSS.


Vous pouvez créer vos styles en utilisant `StyleSheet.create`, qui est une API fournie par React Native pour créer des feuilles de style.


Maintenant, pour afficher ce composant dans votre application, vous devez l'importer et l'utiliser dans votre fichier `App.js` :

Test de l'application : Exécutez votre application avec la commande npm start ou expo start.


npm start

Voilà, vous avez créé et utilisé votre premier composant React Native !


En utilisant cette approche modulaire, vous pouvez construire des applications complexes en assemblant différents composants.

Première application avec deux écrans

Maintenant, créons une application simple avec deux écrans et une navigation entre eux.


D'accord, je vais réviser cette section en détaillant les étapes d'installation des dépendances nécessaires avec `npm`.

Installation des dépendances

Maintenant que nous avons expliqué les bases de React Native et d'Expo, nous allons commencer à construire notre application.


Nous avons besoin d'installer deux packages supplémentaires pour ce faire : `@react-navigation/native` et `@react-navigation/stack`.


Ces paquets nous permettront de créer une navigation par onglets et une navigation par pile dans notre application.


Voici comment vous pouvez les installer en utilisant `npm` :

  • 1. Ouvrez un terminal ou une invite de commandes dans le répertoire de votre projet React Native.
  • 2. Pour installer le package `@react-navigation/native`, exécutez la commande suivante :

npm install @react-navigation/native
  • 3. Pour installer le package `@react-navigation/stack`, exécutez la commande suivante :

npm install @react-navigation/stack

Chaque commande ci-dessus doit mettre à jour automatiquement votre fichier `package.json` avec les nouvelles dépendances installées.


Vous pouvez le vérifier en ouvrant le fichier `package.json` et en recherchant `@react-navigation/native` et `@react-navigation/stack` dans la section `dependencies`.


Une fois ces paquets installés, nous pouvons commencer à construire notre application de navigation.

Construire notre application avec Stack Navigation

Nous allons créer deux écrans dans notre application - l'écran d'accueil (Home) et l'écran de profil (Profile).


Chaque écran sera un composant React.


Commençons par l'écran Home.


Créez un nouveau fichier nommé `HomeScreen.js` dans un dossier `screens` à la racine de votre projet et ajoutez le code suivant :

Ensuite, créons l'écran Profile.


Créez un nouveau fichier nommé `ProfileScreen.js` dans le même dossier `screens` et ajoutez le code suivant :

Enfin, nous allons configurer la navigation par pile (Stack Navigation) dans notre fichier `App.js`.


Remplacez le contenu du fichier `App.js` par le code suivant :

Test de l'application : Exécutez votre application avec la commande npm start ou expo start, et testez la navigation entre vos deux écrans.


npm start

Après avoir ajouté ce code, vous devriez pouvoir naviguer entre l'écran d'accueil et l'écran de profil en appuyant sur les boutons respectifs.

Conclusion

En suivant ce tutoriel, vous avez appris comment initialiser un projet React Native avec Expo, comment naviguer entre les écrans avec React Navigation, et comment construire une application simple avec deux écrans.


C'est un excellent point de départ pour explorer davantage React Native et créer des applications plus complexes.


Mais ne vous arrêtez pas là !


Pour approfondir vos connaissances en React Native et enrichir votre application avec de nouvelles fonctionnalités, je vous invite à suivre ma série de vidéos sur ma chaîne YouTube.


Ces vidéos vous guideront à travers des exercices pratiques, avec des codes complets disponibles sur mon dépôt GitHub.


https://github.com/greg198584/react-native-exercise-1


Cette approche pratique vous permettra d'apprendre en codant, et vous aidera à assimiler plus efficacement les concepts essentiels de React Native.


Prêt à coder davantage ?


Rejoignez-moi sur ma chaîne YouTube et découvrez ma série de vidéos sur React Native.


Ensemble, nous allons construire des applications plus riches et développer vos compétences en React Native.


Restez avec nous et continuez à coder !

Abonnez-vous

Abonner vous, pour recevoir les nouvelles publications et obtenir ma formation programmation pour débutant 100% gratuite.

S'ABONNER

ME SUIVRE

À PROPOS

Je m'appelle Gregory Lafitte, ancien étudiant de l'école 42, et aujourd’hui ingénieur informatique.


Je partage mes connaissances et mon expérience dans les métiers du numérique.