Quelles sont donc nos alternatives au workflow géré?
Une alternative consiste à utiliser la CLI React Native, vous pouvez
en apprendre davantage à ce sujet sur la page
officielle React Native si vous visitez cela, vous pouvez simplement rechercher Google React Native pour le
trouver et là, si vous cliquez sur démarrer, vous êtes réellement accueilli avec deux façons différentes de démarrer et les façons présélectionnées d'utiliser
l'Expo CLI, c'est
l'approche que nous avons utilisée, non?
Il n'y a donc rien de trop sophistiqué à cela, cela vous donne une application React Native utilisant expo, c'est ce que
nous avons utilisé dans ce cours.
Vous pouvez également cliquer sur le démarrage rapide de
React Native CLI et maintenant ici, vous devez d'abord configurer votre système d'une certaine manière,
puis vous pouvez installer un package séparé, le React Native CLI dont vous avez maintenant besoin pour
créer un projet et pour l'exécuter et ainsi de suite. Maintenant important, vous trouverez ici les instructions d'installation détaillées pour les différents systèmes d'exploitation
et applications que vous souhaitez créer.
Maintenant, sachez que sous Windows, comme il est dit ici, vous ne pouvez pas créer d'applications iOS, de même sous Linux, vous
ne pouvez y créer que des applications Android et vous trouverez des instructions d'installation si vous sélectionnez les options spécifiques.
Sur macOS, vous
pouvez créer iOS et Android et vous devrez également suivre ces instructions d'installation.
Maintenant, je ne vais pas le faire en détail ici parce que vous les trouverez tous écrits ici
bien sûr si
vous voulez suivre, à la fin, vous devrez installer quelques packages, pas des packages npm mais des packages à l'échelle du système
et le le processus d'installation exact diffère en fonction de la plate-forme sur laquelle vous exécutez.
Vous devrez installer Android Studio ou Xcode, donc Xcode pour les applications iOS, Android Studio pour les applications Android et
vous devez l'installer maintenant, auparavant c'était facultatif, je
l'ai juste fait pour
obtenir un simulateur, maintenant vous en avez
besoin parce que maintenant ces des outils seront utilisés pour créer votre application.
Auparavant, cela n'était pas nécessaire, car le wrapper expo a en quelque sorte lu notre code et l'a hébergé et
vous pouvez également créer une application autonome avec expo dans le flux de travail géré,
ce qui se produira dans le cloud.
Maintenant que tout se passe localement, vous devrez donc installer Android Studio et ainsi de suite et l'installer
avec toutes les options que vous trouverez ici.
Maintenant, vous aussi, peu importe la plate-forme sur laquelle vous travaillez, vous devez également installer la CLI React Native, vous
pouvez le faire dans votre invite de commande ou terminal normal, sur Mac ou Linux, vous devrez peut-être ajouter sudo devant obtenir les bonnes autorisations et
cela va maintenant installer globalement la React Native CLI, pour cela vous avez également besoin que
NodeJS soit installé car il utilise npm qui est le gestionnaire de paquets du nœud, alors
assurez-vous de l'avoir également.
Maintenant que React Native CLI est installé,
nous pouvons commencer à créer un projet totalement sans expo et pour cela je vais créer un
tout nouveau projet et j'ai sélectionné un dossier pour cela en
exécutant react-native init et maintenant n'importe quel nom de votre
choix, pour exemple RNWithoutExpo. Pour le nom, il est important qu'il
soit écrit comme ceci, pas de tirets ou de soulignements mais juste un mot.
Donc, RNWithoutExpo est le nom que je vais choisir et cela va maintenant créer un tout nouveau projet React
Native en utilisant la CLI React Native à cet endroit où vous avez exécuté cette commande et il vous donnera ce nouveau
dossier qui contient ce nouveau projet React Native.
Maintenant important à
nouveau, vous devez maintenant avoir Android Studio et Xcode installés et configurés comme mentionné dans les documents officiels
ici, sinon
ce que je vais vous montrer ne fonctionnera
plus, vous avez besoin que cela soit installé car maintenant ces outils seront exploités par la
React Native CLI pour créer et exécuter votre application. Faites également tourner certains émulateurs ou simulateurs, qui peuvent être les mêmes que ceux
utilisés auparavant dans le cours, mais vous devez les faire fonctionner afin que nous puissions y voir notre application React Native en cours d'exécution.
Alors maintenant, attendons que cette configuration se termine ici et une fois que cela est fait et que ce processus peut prendre un certain
temps, vous pouvez suivre les instructions ici pour finalement exécuter votre application. Alors laissez-moi naviguer dans ce dossier nouvellement créé
ici
et exécutez run-ios réactif natif par exemple
pour l'exécuter sur le simulateur iOS que j'ai obtenu. Maintenant, dans les coulisses, Xcode est utilisé pour construire cette
application,
il n'utilise plus expo, vous pouvez désinstaller le client expo ici, vous pouvez désinstaller l'expo CLI
de votre système,
cela ne tire pas parti du tout expo, il utilise simplement Xcode derrière les scènes pour construire
votre application, donc cet outil de développement natif Apple. Attendons donc que cette version se termine et la première fois que vous la
créez, cela prend un
peu plus de temps, les reconstructions suivantes seront plus rapides. Attendons donc que cela se termine.
Maintenant, tout au long de ce processus de construction, un nouvel onglet sera ouvert ou une
nouvelle fenêtre dans votre terminal, gardez ce processus en cours d'exécution et maintenez également
le processus
de construction en cours, ne quittez pas cela, alors gardez ces deux processus opérationnels ici et maintenant, cela installe l'application sur le
simulateur, dans ce cas, si vous aviez un véritable appareil connecté, il l'installerait là et il lancerait l'application là-bas et
donc ici, il a en fait
créé un nouveau simulateur ici pour moi, n'est-ce pas importe
cependant, il lance maintenant l'application ici dans ce simulateur. Encore une fois pour le premier lancement,
cela télécharge maintenant l'application intégrée sur cet appareil et vous avez également de belles fonctionnalités de développement, le débogage à distance
peut être activé, vous avez donc toutes ces belles fonctionnalités ici également, ce n'est pas
exclusif à l'expo et ce premier lancement prendra un peu plus de temps comme mentionné.
Attendons donc que ce téléchargement se termine ici pour que l'application se lance et qu'elle arrive. Maintenant, l'écran de démarrage exact que vous voyez ici,
qui peut différer au fil
du temps, car ce n'est que le code de départ que vous
obtenez dans le projet que nous verrons dans une seconde, mais c'est maintenant l'application, une application native
sans expo sinon le même, fonctionnant sur iOS. Nous pouvons également l'exécuter sur Android et pour cela, ce processus qui est maintenant terminé
peut être effacé, l'autre doit continuer à
fonctionner, c'est votre serveur de développement qui parle à l'appareil et qui surveille les modifications de fichiers et pousse le nouveau code
vers l'appareil ,
donc ce que vous savez de l'expo, ça marche aussi ici. Donc, gardez l'autre processus en cours,
mais maintenant nous pouvons également exécuter run-android réactif pour créer également l'application pour Android et tirer parti de ce même
serveur pour ensuite également créer et pousser l'application Android vers l'émulateur Android, puis le voir également.
Attendons donc que cela se
termine, encore une fois cette première version prendra plus de temps, les rechargements suivants seront beaucoup plus rapides.
Ce processus de construction tire désormais parti d'Android Studio que vous devez également avoir
installé et configuré comme décrit dans les documents officiels et, par conséquent, cela fonctionne bien sûr
sans aucune expo, il utilise simplement Android Studio.
Maintenant, cela lance également l'application Android ici sur mon émulateur Android, mais comme auparavant, ce lancement initial peut prendre un peu de temps,
maintenant il se connecte à
ce serveur de développement que vous devez donc ici aussi continuer
à utiliser, non seulement pendant sa construction ce bundle mais tout le temps pour que les modifications
apportées à vos fichiers, vous obtenez une reconstruction en direct et une fois cela fait, voyons l'application terminée
s'exécuter sur Android.
Voyons maintenant le code qui en est responsable, est-ce
que cela semble totalement différent de ce que nous avons vu jusqu'à présent?
Pour cela, j'ai chargé le projet ici à nouveau avec Visual Studio Code, donc la même configuration qu'avant et
ce que vous voyez est un peu différent mais surtout, nous avons un tas de fichiers de configuration différents, assez bien
mais cela ne change pas vraiment la façon dont nous écrivons notre code.
Très important, nous avons un dossier Android et iOS,
nous n'en avions pas
auparavant, ces dossiers et sur Windows d'ailleurs, Linux vous n'avez pas iOS, vous avez seulement Android
mais ces dossiers contiennent la vraie application native projets qui sont construits avec l'aide d'Android Studio et Xcode
et votre code est en quelque sorte intégré dans ce que vous pourriez
dire, React Native fait tout cela pour vous, le processus CLI React Native, mais si nous jetons
un coup d'œil au code concret dans le app. fichier js, eh bien c'est exactement
ce que nous avons utilisé dans ce cours, non? Là, nous avons quelques importations et quelques liens supplémentaires qui vous montrent quelques avertissements
ici concernant le style de code.
Ce ne sont pas des erreurs réelles, juste que je devrais utiliser des guillemets doubles
au lieu de guillemets simples, oui une recommandation qui ne m'intéresse pas ici, mais si vous regardez ce
qui est importé ici, réagissez, enregistrez la vue de la zone, la feuille de style, la vue de défilement ,
view, text - ce sont toutes des choses avec lesquelles nous avons déjà travaillé, nous avons donc les composants
normaux avec lesquels nous avons déjà travaillé et bien sûr nous le faisons parce que ce que j'ai dit tout au long de ce cours, React Native est React Native, expo est un
mince emballage autour .
Nous écrivons le même code, nous utilisons les mêmes composants, ils sont compilés en widgets natifs, que tout ne change pas lorsque
nous utilisons expo, la seule différence est
qu'avec expo, nous n'avons pas besoin d'en configurer autant, la construction est un peu
plus rapide et l'ajout de modules natifs est super facile, les tests sur des appareils réels sont super faciles, c'est tout simplement
plus facile, nous construisons
l'application de la même manière et c'est quelque chose que vous pouvez voir ici également.
Les styles sont configurés de la même manière avec la feuille de style. créer, c'est tout comme
nous l'avons fait tout au long de ce cours et c'est
important pour vous.
Maintenant, une chose supplémentaire que vous trouverez ici est l'index. fichier js, nous n'avions
pas cela dans expo, ce genre de fichier de configuration de base qui lance votre application, vous pourriez dire,
qui s'assure que ce composant d'application est rendu à l'écran, c'est quelque chose que l'expo
a fait pour vous dans React Application expo native mais à part ça, c'est vraiment la même chose et vous
construisez une application de la même manière.