Initier un projet React Native

L'outil de création expo

Expo est un outil open source basé sur React Native, conçus pour simplifier et accélérer le développement d'applications natives cross-platform pour Android et iOS. Il propose une multitude de fonctionnalités qui simplifient l'ensemble du cycle de développement des applications, allant du développement jusqu'au déploiement.

Expo permet au développeur de s'affranchir de la complexité de configuration du projet et de plutôt de se concentrer sur le développement de l'application. Il constitue donc un outil idéal pour les débutants qui souhaitent monter une application mobile complète sans trop de complication.

Créer et initier un nouveau projet React Native avec expo

Pour créer un nouveau projet à l'aide de l'outil Expo, on exécute la commande suivante:
MonApp est le nom du dossier qui contient l'ensemble du projet. Il sera créé automatiquement à l'emplacement où vous êtes situés au moment de l'exécution de la commande.

Expo propose de nombreux templates de création. En effet, les templates jouent le rôle de "plans" pour notre application. Autrement dit, ils définissent la structure de départ, les bibliothèques incluses, et le niveau de complexité initial.

Parmi les templates proposés par Expo on peut citer:

• blank: une feuille blanche, idéale pour les développeurs qui veulent tout construire eux-mêmes.
• blank (TypeScript): pareil que blank mais ajoute le typage statique (à l'aide de TypeScript) pour plus de robustesse et de maintenabilité.
• tabs: offre un evironnment enrichi en intègrant une navigation par onglets, une gestion des écrans et parfois des exemples d’utilisation de composants.

Choisir le bon template permet de gagner du temps, d’éviter les erreurs de configuration et d’adapter le projet à son niveau de maîtrise. Dans notre cas, on va choisir blank pour minimiser les modules téléchargés initialement et avoir la possibilité de personnaliser proprement notre application selon nos besoins.

Une fois le projet créé, un ensemble de dossiers et fichiers seront automatiquement générés dans le répertoireMonApp. Pour connaitre l'utilité de chacun d'entre eux, je vous renvoie vers ce cours de React. Bien entendu, certains dossiers et fichiers ne sont pas présents dans notre application React Native car il ne s'agit pas d'une application Web, mais le reste de ressources servent exactement à la même chose.

Parmi les ressources qui ont faire leur apparition ici on trouve le dossier assets et le fichier yarn.lock qui illustrent la logique globale de l’écosystème React où chaque ressource a un rôle précis pour garantir la cohérence, la performance et la maintenabilité du projet. Le dossier assets centralise les fichiers statiques (images, sons, polices…) utilisés dans l’interface, tandis que yarn.lock fige les versions exactes des dépendances pour éviter les conflits ou les comportements imprévus (un peu comme le dossier package-lock.json de React).

Exécuter le projet et visualiser le résultat sur son téléphone à l'aide de Expo Go

Une fois le projet installé, le terminal vous affiche toutes les commandes utiles avec leurs explications. Dans notre cas, nous allons lancer l'application à l'aide de la commande suivante:
Une fois la commande exécutée, un ensemble d'options sont listées avec leurs explications détaillés. Ce qui nous intéresse c'est le QR Code qui sera affiché et que l'on doit scanner avec notre téléphone (ou tout autre appareil mobile) afin d'exécuter l'application directement dessus.
Désormais, toute modification dans la base de code sera aussitôt visible sur votre téléphone sans avoir besoin de rafraîchir ou de redémarrer l'application.