1 00:00:02,240 --> 00:00:08,750 C'était donc beaucoup d'introduction à React Native et expo, mais je trouve important que vous compreniez avec 2 00:00:08,750 --> 00:00:11,540 quoi vous travaillez avant de commencer. 3 00:00:11,540 --> 00:00:18,470 Maintenant, avec cela, il est temps de commencer et pour cela, visitez expo. io. Là, vous pouvez cliquer sur 4 00:00:18,470 --> 00:00:22,020 Démarrer et vous trouverez les étapes de démarrage ici. 5 00:00:22,190 --> 00:00:24,290 Maintenant, vous n'avez pas vraiment besoin de cette première 6 00:00:24,290 --> 00:00:30,920 é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 7 00:00:30,920 --> 00:00:36,800 permet par exemple de créer des applications côté serveur avec Javascript. Vous n'en avez pas besoin car nous sommes sur 8 00:00:36,800 --> 00:00:39,980 le point d'écrire du code NodeJS dans ce cours, 9 00:00:39,980 --> 00:00:41,020 ce n'est 10 00:00:41,030 --> 00:00:42,550 pas un cours Node, 11 00:00:42,590 --> 00:00:50,750 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 12 00:00:50,750 --> 00:00:54,680 exemple, le client expo en arrière-plan fonctionne également sur Javascript, il 13 00:00:54,680 --> 00:00:57,410 n'est absolument pas lié à React Native, c'est 14 00:00:57,410 --> 00:01:00,100 juste pour que cet outil fonctionne correctement. 15 00:01:00,230 --> 00:01:05,050 Aussi pour cette commande pour installer l'outil, npm, c'est le Node Package Manager et 16 00:01:05,150 --> 00:01:08,320 qui est également mis à disposition par NodeJS. 17 00:01:08,330 --> 00:01:14,300 La première étape consiste donc à visiter nodejs. org et là, téléchargez la 18 00:01:14,300 --> 00:01:20,300 dernière version, dans mon cas 12. 6 à partir de là pour commencer et quelle que soit 19 00:01:20,300 --> 00:01:22,840 votre dernière version lorsque vous la visualisez, téléchargez simplement cette 20 00:01:22,880 --> 00:01:28,080 version, installez-la, cela vous donne un programme d'installation normal que vous pouvez simplement parcourir en cliquant sur toutes ces étapes, 21 00:01:28,100 --> 00:01:29,420 rien de trop sophistiqué. 22 00:01:29,420 --> 00:01:32,220 Il est disponible pour MacOS et Windows et Linux. 23 00:01:32,270 --> 00:01:38,330 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 24 00:01:38,330 --> 00:01:39,760 à cette troisième étape ici. 25 00:01:39,830 --> 00:01:46,130 Donc, avec NodeJS installé, copions cette commande ici, puis ouvrez votre terminal normal ou sous Windows, 26 00:01:46,130 --> 00:01:49,770 votre invite de commande et collez cette commande ici. 27 00:01:49,790 --> 00:01:54,530 Maintenant, sur Mac et Linux, vous devrez peut-être ajouter un sudo devant cela, sous Windows, 28 00:01:54,530 --> 00:01:57,820 cela ne sera pas nécessaire, pour obtenir les bonnes autorisations. 29 00:01:57,830 --> 00:01:59,090 Alors ici, je vais 30 00:01:59,120 --> 00:02:03,630 l'entrer, alors vous pourriez être invité à entrer votre mot de passe, entrez-le simplement si 31 00:02:03,740 --> 00:02:09,290 vous l'êtes et maintenant cela installera l'expo CLI qui est cet outil qui nous aide à créer et gérer 32 00:02:09,290 --> 00:02:15,080 des projets React Native avec l'aide d'expo à l'échelle mondiale sur votre machine, afin que vous puissiez l'utiliser depuis 33 00:02:15,230 --> 00:02:16,280 n'importe où sur 34 00:02:16,280 --> 00:02:19,190 votre machine, donc depuis n'importe où dans votre terminal. 35 00:02:19,280 --> 00:02:21,540 Attendons donc la fin de cette installation, vous pouvez 36 00:02:21,560 --> 00:02:26,180 ignorer tous les avertissements que vous pourriez avoir entre les deux et je serai de retour une 37 00:02:26,180 --> 00:02:27,470 fois cette installation terminée. 38 00:02:27,560 --> 00:02:33,170 Soit dit en passant, vous pouvez également ignorer ces erreurs intermédiaires, tant que l'ensemble ne se bloque pas avec 39 00:02:33,170 --> 00:02:35,990 une erreur mais se termine par un message comme celui-ci 40 00:02:35,990 --> 00:02:38,030 à la fin, vous avez réussi. 41 00:02:38,030 --> 00:02:43,760 Donc, avec cela, nous avons installé Expo CLI, la prochaine étape est de créer notre projet, donc l'étape numéro 42 00:02:43,760 --> 00:02:44,510 quatre ici. 43 00:02:44,510 --> 00:02:46,280 Nous le faisons en exécutant expo 44 00:02:46,340 --> 00:02:52,250 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 45 00:02:52,310 --> 00:02:58,890 le dossier ici sur votre machine où vous souhaitez créer ce projet. J'ai donc fait ça ici, je suis dans ce dossier 46 00:02:58,890 --> 00:03:04,440 et maintenant je peux lancer expo init et je vais nommer cette première application, car c'est notre 47 00:03:04,440 --> 00:03:09,870 première application React Native ici après tout. Appuyez simplement sur Entrée, ce nom dépend bien sûr 48 00:03:09,870 --> 00:03:11,250 de vous et vous 49 00:03:11,250 --> 00:03:16,530 allez maintenant créer un nouveau dossier à l'endroit où vous avez exécuté cette commande et y installer une 50 00:03:16,800 --> 00:03:18,810 application React Native en utilisant expo. 51 00:03:18,900 --> 00:03:22,290 Maintenant, on vous demande probablement quel modèle vous souhaitez utiliser et 52 00:03:22,350 --> 00:03:25,480 là, vous pouvez utiliser le modèle vierge pour l'instant. 53 00:03:25,560 --> 00:03:32,700 Assurez-vous de ne pas choisir le strict minimum car ce serait une configuration sans l'environnement expo avec toutes 54 00:03:32,700 --> 00:03:34,060 les fonctionnalités pratiques, 55 00:03:34,080 --> 00:03:36,570 alors allez-y avec un blanc ici. 56 00:03:36,570 --> 00:03:42,570 Maintenant, vous serez probablement invité à entrer un nom pour votre application et je vais juste entrer rn-first-app ici, c'est 57 00:03:42,570 --> 00:03:43,050 finalement 58 00:03:43,080 --> 00:03:47,770 le nom qui est affiché dans le sélecteur de tâches de votre application sur l'écran d'accueil 59 00:03:47,770 --> 00:03:48,540 et bientôt. 60 00:03:48,570 --> 00:03:52,130 Vous pouvez laisser la limace telle quelle et appuyez simplement sur Entrée, 61 00:03:52,140 --> 00:03:58,650 maintenant j'utilise également du fil sur ma machine qui est une alternative à npm, on ne vous demandera peut-être pas si vous 62 00:03:58,650 --> 00:04:00,780 voulez utiliser un fil qui est 63 00:04:00,780 --> 00:04:03,210 totalement fin, je le ferai choisissez également non 64 00:04:03,390 --> 00:04:08,550 ici pour utiliser npm et donc maintenant, cela ira de l'avant, créez ce dossier de projet, installez toutes 65 00:04:08,550 --> 00:04:14,970 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 66 00:04:14,970 --> 00:04:15,330 native. 67 00:04:15,570 --> 00:04:17,960 Attendons donc que cela se termine maintenant. 68 00:04:17,970 --> 00:04:23,610 Maintenant, une fois terminé, vous voyez les prochaines instructions ici. Vous pouvez naviguer dans le dossier nouvellement 69 00:04:23,610 --> 00:04:31,230 créé avec la commande cd puis y lancer simplement npm start. Npm start lancera maintenant l'outil de développement 70 00:04:31,230 --> 00:04:38,410 expo, les outils de développement expo et un nouvel onglet devraient s'ouvrir dans votre navigateur. 71 00:04:38,570 --> 00:04:43,420 Voici cet onglet qui s'est ouvert, si vous avez des problèmes ici, vous pouvez 72 00:04:43,550 --> 00:04:49,070 ignorer que pour l'instant, voici l'outil de développement expo ou les outils de développement expo comme on l'appelle. 73 00:04:49,280 --> 00:04:55,610 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 74 00:04:55,760 --> 00:05:00,740 gérer généralement des parties de votre application, vous voyez ici une sortie de votre application, certains avertissements que 75 00:05:00,740 --> 00:05:02,650 vous pourriez recevoir et c'est très 76 00:05:02,750 --> 00:05:09,200 pratique fenêtre pour gérer votre application et pour exécuter votre application. Assurez-vous également qu'ici, dans le terminal 77 00:05:09,210 --> 00:05:15,780 où vous avez exécuté npm start, vous laisserez ce processus en cours d'exécution. 78 00:05:15,810 --> 00:05:21,000 Vous pourriez voir qu'il ne s'est pas terminé, vous ne voyez plus cette ligne de saisie où vous pouvez entrer des commandes, 79 00:05:21,630 --> 00:05:27,630 à 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 80 00:05:27,630 --> 00:05:28,500 taper nouvelles commandes. 81 00:05:28,500 --> 00:05:33,960 Vous pouvez toujours quitter ce processus en appuyant simultanément sur control et c mais vous devez laisser ce processus 82 00:05:33,960 --> 00:05:37,640 en place aussi longtemps que vous travaillez sur votre projet et 83 00:05:37,740 --> 00:05:42,660 si vous avez ensuite terminé pour la journée, vous pouvez le quitter et le redémarrer. le lendemain, 84 00:05:42,660 --> 00:05:47,850 car ce processus surveillera également votre code et chaque fois que vous modifiez quelque chose dans votre code 85 00:05:47,850 --> 00:05:52,530 et que vous enregistrez ce changement, il l'enregistrera automatiquement et le publiera sur votre appareil connecté. 86 00:05:52,560 --> 00:05:58,680 Mais en parlant de cela, connectons l'appareil et pour cela, la façon la plus simple de commencer est 87 00:05:58,680 --> 00:06:01,940 d'utiliser votre iPhone ou téléphone Android que vous possédez. 88 00:06:01,950 --> 00:06:08,290 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 89 00:06:08,290 --> 00:06:12,730 un téléphone allemand mais c'est l'App Store normal. Maintenant là-dedans, vous pouvez 90 00:06:12,730 --> 00:06:19,900 aller dans la zone de recherche et rechercher expo. Maintenant, une fois que vous avez fait cela, vous devriez trouver ce client expo ici 91 00:06:20,020 --> 00:06:26,680 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 92 00:06:26,680 --> 00:06:28,430 se termine bien sûr et 93 00:06:28,450 --> 00:06:30,690 une fois que cela est terminé, vous pouvez 94 00:06:30,700 --> 00:06:37,030 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 95 00:06:37,370 --> 00:06:42,880 scanner ce code à barres directement depuis votre application expo. Sur iOS, ouvrez simplement l'application appareil photo, 96 00:06:42,880 --> 00:06:49,230 puis vous pouvez également accéder aux outils de développement ici et vous verrez ce code-barres ici, 97 00:06:49,230 --> 00:06:58,190 maintenez simplement votre appareil photo sur iOS ou le scanner d'application expo ici sur Android et vous devriez être invité si vous souhaitez 98 00:06:58,190 --> 00:07:03,510 ouvrir une application dans expo alors. Il vous suffit de l'ouvrir et maintenant cela 99 00:07:03,800 --> 00:07:07,730 devrait ouvrir votre application ici dans le client expo que vous avez 100 00:07:07,760 --> 00:07:14,810 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 101 00:07:14,810 --> 00:07:19,350 le faisant directement depuis l'application expo où vous aurez cette option pour le faire. 102 00:07:19,370 --> 00:07:24,050 Alors maintenant, cela va construire le bundle Javascript comme vous le voyez ici en bas ou 103 00:07:24,050 --> 00:07:30,260 en d'autres termes, cela va maintenant prendre votre application et la compiler en gros et la préparer, puis la charger ici sur 104 00:07:30,320 --> 00:07:36,920 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 105 00:07:36,920 --> 00:07:38,130 React Native de départ. 106 00:07:38,270 --> 00:07:43,220 Et maintenant, regardons le code pour cela et voyons comment nous pouvons changer quelque chose dans le code pour voir quelque 107 00:07:43,220 --> 00:07:45,110 chose de différent ici sur cet écran.