C'était donc beaucoup d'introduction à React Native et expo, mais je trouve important que vous compreniez avec
quoi vous travaillez avant de commencer.
Maintenant, avec cela, il est temps de commencer et pour cela, visitez expo. io. Là, vous pouvez cliquer sur
Démarrer et vous trouverez les étapes de démarrage ici.
Maintenant, vous n'avez pas vraiment besoin de cette première
étape, nous pouvons passer directement à l'étape numéro deux, c'est-à-dire que vous avez besoin de NodeJS. Vous avez maintenant besoin de NodeJS qui est un runtime Javascript qui vous
permet par exemple de créer des applications côté serveur avec Javascript. Vous n'en avez pas besoin car nous sommes sur
le point d'écrire du code NodeJS dans ce cours,
ce n'est
pas un cours Node,
pas de soucis, vous n'avez pas besoin de connaître NodeJS mais c'est un package qui nous permet d'exécuter Javascript sur notre machine et par
exemple, le client expo en arrière-plan fonctionne également sur Javascript, il
n'est absolument pas lié à React Native, c'est
juste pour que cet outil fonctionne correctement.
Aussi pour cette commande pour installer l'outil, npm, c'est le Node Package Manager et
qui est également mis à disposition par NodeJS.
La première étape consiste donc à visiter nodejs. org et là, téléchargez la
dernière version, dans mon cas 12. 6 à partir de là pour commencer et quelle que soit
votre dernière version lorsque vous la visualisez, téléchargez simplement cette
version, installez-la, cela vous donne un programme d'installation normal que vous pouvez simplement parcourir en cliquant sur toutes ces étapes,
rien de trop sophistiqué.
Il est disponible pour MacOS et Windows et Linux.
Il vous suffit donc de le télécharger ici, de parcourir le programme d'installation et une fois qu'il est installé, vous pouvez passer
à cette troisième étape ici.
Donc, avec NodeJS installé, copions cette commande ici, puis ouvrez votre terminal normal ou sous Windows,
votre invite de commande et collez cette commande ici.
Maintenant, sur Mac et Linux, vous devrez peut-être ajouter un sudo devant cela, sous Windows,
cela ne sera pas nécessaire, pour obtenir les bonnes autorisations.
Alors ici, je vais
l'entrer, alors vous pourriez être invité à entrer votre mot de passe, entrez-le simplement si
vous l'êtes et maintenant cela installera l'expo CLI qui est cet outil qui nous aide à créer et gérer
des projets React Native avec l'aide d'expo à l'échelle mondiale sur votre machine, afin que vous puissiez l'utiliser depuis
n'importe où sur
votre machine, donc depuis n'importe où dans votre terminal.
Attendons donc la fin de cette installation, vous pouvez
ignorer tous les avertissements que vous pourriez avoir entre les deux et je serai de retour une
fois cette installation terminée.
Soit dit en passant, vous pouvez également ignorer ces erreurs intermédiaires, tant que l'ensemble ne se bloque pas avec
une erreur mais se termine par un message comme celui-ci
à la fin, vous avez réussi.
Donc, avec cela, nous avons installé Expo CLI, la prochaine étape est de créer notre projet, donc l'étape numéro
quatre ici.
Nous le faisons en exécutant expo
init puis tout nom de projet de votre choix et pour cela, assurez-vous tout d'abord d'utiliser la commande cd pour naviguer dans
le dossier ici sur votre machine où vous souhaitez créer ce projet. J'ai donc fait ça ici, je suis dans ce dossier
et maintenant je peux lancer expo init et je vais nommer cette première application, car c'est notre
première application React Native ici après tout. Appuyez simplement sur Entrée, ce nom dépend bien sûr
de vous et vous
allez maintenant créer un nouveau dossier à l'endroit où vous avez exécuté cette commande et y installer une
application React Native en utilisant expo.
Maintenant, on vous demande probablement quel modèle vous souhaitez utiliser et
là, vous pouvez utiliser le modèle vierge pour l'instant.
Assurez-vous de ne pas choisir le strict minimum car ce serait une configuration sans l'environnement expo avec toutes
les fonctionnalités pratiques,
alors allez-y avec un blanc ici.
Maintenant, vous serez probablement invité à entrer un nom pour votre application et je vais juste entrer rn-first-app ici, c'est
finalement
le nom qui est affiché dans le sélecteur de tâches de votre application sur l'écran d'accueil
et bientôt.
Vous pouvez laisser la limace telle quelle et appuyez simplement sur Entrée,
maintenant j'utilise également du fil sur ma machine qui est une alternative à npm, on ne vous demandera peut-être pas si vous
voulez utiliser un fil qui est
totalement fin, je le ferai choisissez également non
ici pour utiliser npm et donc maintenant, cela ira de l'avant, créez ce dossier de projet, installez toutes
les dépendances requises comme React et React Native et donnez-nous un projet React Native que nous pouvons utiliser pour créer une application
native.
Attendons donc que cela se termine maintenant.
Maintenant, une fois terminé, vous voyez les prochaines instructions ici. Vous pouvez naviguer dans le dossier nouvellement
créé avec la commande cd puis y lancer simplement npm start. Npm start lancera maintenant l'outil de développement
expo, les outils de développement expo et un nouvel onglet devraient s'ouvrir dans votre navigateur.
Voici cet onglet qui s'est ouvert, si vous avez des problèmes ici, vous pouvez
ignorer que pour l'instant, voici l'outil de développement expo ou les outils de développement expo comme on l'appelle.
C'est une fenêtre qui vous permet d'exécuter votre application sur différents appareils connectés ou d'ajouter des simulateurs et qui vous permet de
gérer généralement des parties de votre application, vous voyez ici une sortie de votre application, certains avertissements que
vous pourriez recevoir et c'est très
pratique fenêtre pour gérer votre application et pour exécuter votre application. Assurez-vous également qu'ici, dans le terminal
où vous avez exécuté npm start, vous laisserez ce processus en cours d'exécution.
Vous pourriez voir qu'il ne s'est pas terminé, vous ne voyez plus cette ligne de saisie où vous pouvez entrer des commandes,
à la place ici, vous ne pouvez pas taper ou vous pouvez appuyer sur certains des raccourcis que vous voyez ici mais vous ne pouvez pas
taper nouvelles commandes.
Vous pouvez toujours quitter ce processus en appuyant simultanément sur control et c mais vous devez laisser ce processus
en place aussi longtemps que vous travaillez sur votre projet et
si vous avez ensuite terminé pour la journée, vous pouvez le quitter et le redémarrer. le lendemain,
car ce processus surveillera également votre code et chaque fois que vous modifiez quelque chose dans votre code
et que vous enregistrez ce changement, il l'enregistrera automatiquement et le publiera sur votre appareil connecté.
Mais en parlant de cela, connectons l'appareil et pour cela, la façon la plus simple de commencer est
d'utiliser votre iPhone ou téléphone Android que vous possédez.
Donc dans mon cas, c'est un iPhone ici et voici mon vrai téléphone et je suis dans l'App Store, maintenant c'est en allemand parce que j'ai
un téléphone allemand mais c'est l'App Store normal. Maintenant là-dedans, vous pouvez
aller dans la zone de recherche et rechercher expo. Maintenant, une fois que vous avez fait cela, vous devriez trouver ce client expo ici
et vous pouvez simplement le télécharger sur votre appareil, c'est gratuit à utiliser. Il suffit de l'installer sur votre appareil et d'attendre que cette installation
se termine bien sûr et
une fois que cela est terminé, vous pouvez
l'ouvrir et maintenant avec l'application expo installée, vous n'avez pas besoin de vous inscrire ici, mais sur Android, vous devriez pouvoir pour
scanner ce code à barres directement depuis votre application expo. Sur iOS, ouvrez simplement l'application appareil photo,
puis vous pouvez également accéder aux outils de développement ici et vous verrez ce code-barres ici,
maintenez simplement votre appareil photo sur iOS ou le scanner d'application expo ici sur Android et vous devriez être invité si vous souhaitez
ouvrir une application dans expo alors. Il vous suffit de l'ouvrir et maintenant cela
devrait ouvrir votre application ici dans le client expo que vous avez
installé, encore une fois sans vous inscrire, simplement en plaçant la caméra de votre iPhone sur ce code-barres ou sur Android en
le faisant directement depuis l'application expo où vous aurez cette option pour le faire.
Alors maintenant, cela va construire le bundle Javascript comme vous le voyez ici en bas ou
en d'autres termes, cela va maintenant prendre votre application et la compiler en gros et la préparer, puis la charger ici sur
les serveurs d'expo dans votre application et vous pouvez simplement appuyer sur l'a obtenu ici sur le premier écran, puis voici votre application
React Native de départ.
Et maintenant, regardons le code pour cela et voyons comment nous pouvons changer quelque chose dans le code pour voir quelque
chose de différent ici sur cet écran.