Dans la partie précédente nous avons installé les outils dont nous auront besoin pour concevoir des applications mobiles en React native. Nous allons donc commencer le développement proprement dit en créant notre projet dans cette partie.

Si vous avez raté les parties précédentes de cette série, je vous conseille de commencer par là.

1. Introduction
2. Installation des outils

Les types d'application en react native

En react native nous pouvons concevoir deux types d'applications: ceux ayant nécessairement besoin d'accéder aux fonctionnalités natives de l'appareil(caméra, doc scanner, lecteur de musique, etc.) et ceux qui de base n'ont pas spécifiquement besoin d'accéder aux matériels(Youtube, pinterest, etc.).

Avant d'initialiser tête baissée votre projet il est nécessaire de se demander si notre application va avoir besoin d'accéder aux matériels natifs de l'appareil mobile pour fonctionner.

bare React Native app: Accès aux matériels natifs du smartphone

Pour concevoir une application type appareil photo, application de running, gyroscope et autre type d'application dont le fonctionnement repose sur un ou plusieurs capteurs présents sur le téléphone alors vous devez choisir ce type d'application.

Notez qu'il est alors nécessaire d'installer sur votre machine tous les outils de développement de votre plateforme cible.
Pour android il est nécessaire d'avoir android studio et le sdk android et pour ios il faut Xcode qui n'est disponible que sur macOS.

Expo based App

Expo est un outil et un ecosysteme qui permet de developper des applications react native sans avoir besoin de toute la panoplie des outils de developpement installer directement sur votre ordinateur.

il est livré avec son SDK (Expo SDK) qui nous fournit des services tels que la notification push, la connexion Facebook et Google en quelques lignes de code. Cela nous permet de démarrer notre projet en une minute.

Typiquement si vous concevez un dictionnaire, un lecteur PDF, une app de news ou encore une todolist, expo est le choix idéal.

Dans cette formation nous allons donc développer une application de type expo car nous n'avons pas spécifiquement besoin d'un capteur natif.

Quel que soit le type d'application, bare ou expo, react native reste le même dans le fonctionnement. les changements entre les deux types sont surtout observables lors de l'utilisation des capteurs particuliers et de la manière de compiler et de déployer l'application.

Commençons donc par initialiser notre projet.

Initialisation du projet

Pour initialiser notre projet nous allons ouvrir un terminal(cmd pour ceux sous windows)et se positionner dans le dossier ou nous voulons sauvegarder nos fichiers.

commencer par installer expo avec cette commande :

npm install --global expo-cli

on vérifie que l'installation s'est bien passée par la commande :

expo whoami

Si l'installation réussit, vous verrez un message "Non connecté" car vous n'êtes pas encore connecté à un compte Expo. Vous n'avez pas besoin d'un compte pour démarrer et pouvez poursuivre votre projet.

on peut ensuite créer un nouveau projet:

npx create-expo-app todoList

Maintenant, lorsque nous ouvrons ce projet, Expo aura déjà créé un ensemble initial de fichiers et de dossiers pour nous. Cela représente en fait la structure initiale de nos projets. Voici à quoi cela ressemble :

Structure des dossiers sous React Native

En ouvrant le nouveau dossier todolist avec notre éditeur de texte préféré, vs code pour mon cas, nous constatons là un ensemble un fichier créer par expo.

Dans le répertoire racine se trouve:

• App.js qui est le fichier qui lance le projet.

• le dossier assets qui est l'endroit où les ressources statiques peuvent être placées.

• app.json, babel.config.js, package.json, etc. qui sont des fichiers de configuration et de gestion des dépendances.

Nous ne travaillerons pas exactement avec cette structure initiale tout au long de notre développement, quelques changements seront nécessaires pour bien ranger nos fichiers et garder notre code lisible et maintainable.

Lançons notre application

Pour lancer une application react native basées sur expo nous aurons besoin d'installer une application mobile sur notre téléphone.

Prenez donc votre téléphone android ou ios, ouvrez le play store ou l'app store, chercher et installer ExpoGo.

Vous pouvez aussi directement cliquer sur :

• Android Play Store - Android Lollipop (5) et supérieur
• iOS App Store - iOS 12.0 et supérieur

Ensuite rentrer sur votre terminal et taper:

cd todoList
expo start

Lorsque vous exécutez expo start (ou npm start), Expo CLI démarre Metro Bundler. Ce bundler est un serveur HTTP qui compile le code JavaScript de votre application à l'aide de Babel et le sert à l'application Expo.

Pour voir le rendu de votre l'application :

• Sur votre iPhone ou iPad, ouvrez l'application Apple "Appareil photo" par défaut et scannez le code QR que vous voyez dans le terminal.

• Sur votre appareil Android, appuyez sur "Scan QR Code" dans l'onglet "Accueil" de l'application Expo Go et scannez le code QR que vous voyez dans le terminal.

Vous pouvez ouvrir le projet sur plusieurs appareils simultanément. Allez-y et essayez-le sur un iPhone et un téléphone Android en même temps si vous avez les deux à portée de main.

assurez-vous que vous êtes sur le même réseau Wi-Fi sur votre ordinateur et votre appareil.

Effectuer votre premier changement

Pour effectuer un changement, Ouvrez le fichier App.js dans votre éditeur de code et remplacez le texte par "Open up App.js to start working on your app!" par ce que vous voudrez.

Vous allez le voir se mettre à jour sur votre appareil une fois la modification enregistrer.

C'est un grand progrès ! Vous avez maintenant la chaîne d'outils Expo en cours d'exécution sur votre machine, vous pouvez modifier le code source d'un projet et voir les modifications en direct sur votre appareil.

Si vous ne voyez pas le changement automatiquement sur votre app, alors secouez votre appareil pour révéler le menu développeur et si vous voyez Activer l'actualisation rapide("Enable Fast Refresh"), appuyez dessus. Si par contre vous voyez Désactiver l'actualisation rapide("Disable Fast Refresh"), fermez le menu du développeur. Maintenant, essayez de faire un autre changement.

Quelle est la suite ?

Dans la prochaine partie nous allons créer notre premier composant.