• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Maîtrisez la hiérarchie d'une application React Native

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

J'ai nommé ce chapitre "Maîtrisez la hiérarchie d'une application React Native" pour simplifier le sommaire. Pour être plus précis, il s'agit de la hiérarchie d'une CRNA. La hiérarchie diverge un peu entre une CRNA et une application React Native avec du code natif, nous le verrons plus loin dans ce cours, mais la différence est très légère. Désolé pour ce raccourci. :-°

Alors, sans plus attendre, découvrons à quoi ressemble la CRNA que l'on a créée.

Contenu d'une CRNA

Ouvrez votre projet MoviesAndMe avec Atom, ou tout autre éditeur de texte.

Euh, mon éditeur de texte est vraiment un éditeur de texte et ne permet pas d'ouvrir un projet ?

Pas de soucis, dans ce cas, parcourez vos dossiers dans votre ordinateur et allez jusqu'au dossier de votre projet.

Vous devriez voir apparaître ceci :

Hiérarchie d’une CRNA / Solution Expo
Hiérarchie d’une CRNA/Solution Expo

Il y a déjà pas mal de fichiers, mais, rassurez-vous, on va rapidement faire le tri dans cette liste. Seuls quelques fichiers nous intéressent vraiment. Toutefois, même si on n'y touchera certainement pas, il est toujours intéressant de savoir à quoi sert chaque fichier :

babel.config.js

Babel est un compilateur Javascript. Il permet d'écrire du Javascript avec une syntaxe plus simple, plus moderne, tout en restant compatible avec les normes Javascript plus ou moins anciennes. Le fichier babel.config.js correspond à sa configuration. Ici, on utilise la configuration d'expo qui correspond à la dernière en date (ES6) et qui offre les dernières fonctionnalités de développement.

.gitignore

Pour ceux qui utilisent Git, un fichier gitignore est déjà configuré pour exclure les fichiers React Native et Expo de vos repos.

.watchmanconfig

Watchman est un service permettant d'observer notre projet. Par défaut, Watchman regarde et notifie chaque changement dans votre projet. Ce fichier de configuration permet de modifier ce comportement en excluant des fichiers de ce service. 

assets

Ce dossier contient deux images. L’une correspond à l’icône de votre application et l’autre à son splashscreen, il s’agit de l’image affichée lorsque l’application est lancée. Expo vous permet ici de modifier ces deux images afin qu’elles représentent au mieux votre application.

Vous voyez ce tableau ? Avec ces 6 fichiers ? Vous pouvez les oublier, ils ne servent que rarement et, dans notre projet, nous ne les utiliserons pas.

Par contre, les autres fichiers nous seront utiles et on va les détailler tout de suite :

node_modules

En parlant de fichier, on commence par un dossier. :ange: Si vous dépliez ce dossier, vous devez voir une multitude de dossiers. Il s'agit de toutes les dépendances pour que votre CRNA fonctionne. Si vous êtes courageux au point de survoler cette liste, vous verrez apparaître des librairies comme expo, babel et oh ! react et react native, car oui, votre CRNA 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. Si vous en êtes arrivés au point de vous dire "il faut que je modifie une classe du dossier node_modules", c'est que vous êtes sur la mauvaise piste.

app.json

Ce fichier permet de configurer des informations liées à votre application. Ici, on définit le SDK Expo. 

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 (celui qui s'affichera sur Expo) et la version de votre application.

Même si ces fichiers et dossiers ont leur importance dans ce cours, on va les laisser de côté pour l'instant et s'intéresser au seul fichier restant :

- App.js : Si vous êtes développeur web, c'est votre index.html. Si vous êtes développeur mobile iOS / Android, c'est votre AppDelegate / MainActivity. C'est le point d'entrée de votre CRNA, c'est ce fichier qui va être exécuté au lancement de l'application et c'est aussi ici qu'on va réaliser nos premiers développements en React Native.

Vous pouvez commencer à regarder le contenu de ce fichier. Enfin du code, pas facile, hein ? >_< Pas d'inquiétudes, on détaillera tout cela ensemble dans la partie 2 de ce cours.

Vous l'aurez compris, beaucoup de fichiers d'une application React Native correspondent à des fichiers de configuration. Je fais volontairement le raccourci "application React Native", car c'est pareil pour une CRNA et une application React Native avec du code natif. 

Nous n'aborderons pas la configuration de ces fichiers, mais vous pouvez en apprendre plus à leur sujet sur les sites officiels : Babel et Watchman.

On a créé notre première application React Native. On a vu à quoi elle ressemblait côté fichier, il serait peut-être temps de voir à quoi elle ressemble côté smartphone / tablette, qu'en dites-vous ? C'est le sujet de notre prochain chapitre.

Exemple de certificat de réussite
Exemple de certificat de réussite