Pour visualiser et éditer notre code, nous avons besoin d'un éditeur et je recommande d'utiliser Visual Studio Code qui est
un IDE très puissant et gratuit qui est idéal pour le développement Javascript, ce que nous faisons ici à
la fin.
Vous pouvez l'obtenir à partir du code. Visual Studio. com vous
y trouverez des versions pour Mac, Windows et Linux, téléchargez simplement celle de votre système
d'exploitation et parcourez le programme d'installation que cela vous donne. Une fois que vous l'avez installé, ouvrez Visual
Studio Code et là-dedans, ouvrez votre projet en allant dans le fichier ouvert, puis choisissez simplement
votre projet, dans mon cas, rn-first-app. Cliquez sur ouvrir ici et cela
ouvrira maintenant le projet ici dans Visual Studio Code. Maintenant, mon code Visual Studio ressemble à cela, car j'ai un thème spécial
activé que vous pouvez modifier dans les préférences, le thème de couleur et là j'utilise le thème dark plus.
Donc, si vous voulez avoir le même
aspect, vous pouvez l'utiliser et j'ai également installé une extension spéciale que vous pouvez faire sous les extensions
de vue, là j'ai fait installer le thème d'icône de matériau, celui-ci ici qui est totalement facultatif mais vous pouvez l'installer à
partir de là
aussi et ensuite revenir à l'explorateur pour voir à nouveau vos fichiers
afin que vous obteniez les mêmes icônes
de fichiers que moi ici, encore une fois, c'est totalement facultatif et avec cela à l'écart, c'est notre application React Native gérée par expo.
Maintenant, laissez-moi vous expliquer rapidement ce que nous avons ici, puis vous montrer ce que vous pouvez changer dans
le code pour changer quelque chose dans votre application.
Nous avons maintenant quelques dossiers et
fichiers ici, le. Le dossier expo contient simplement
une configuration pour l'expo, vous n'avez pas besoin de toucher à cela. Le dossier des ressources, qui contient des images dans ce cas, comme
l'icône de votre application et l'image de l'écran de démarrage et nous allons explorer comment vous pouvez personnaliser cela vers la fin du cours et nous utiliserons d'autres
ressources comme des images dans général tout au long de ce cours bien sûr. Le dossier des modules de nœuds contient toutes les
dépendances de ce projet, c'est-à-dire React et React Native, mais aussi les dépendances des dépendances et ce dossier
est géré automatiquement pour vous, vous n'avez donc pas besoin de le toucher et vous
ne devriez pas le toucher en effet . gitignore est un fichier qui nous aide avec git qui
est un système de gestion de code source ou un outil de gestion de code source et vous n'avez
pas besoin d'utiliser git, si vous le faites, vous savez probablement ce que fait gitignore et si vous ne savez pas
quoi git est, après cette conférence, vous y trouverez une brève introduction ou quelques ressources qui vous aideront à démarrer, mais vous n'avez
pas besoin d'utiliser git pour travailler avec React Native. Watchmenconfig, c'est quelque chose que vous pouvez ignorer car vous voyez qu'il est vide ici,
c'est un outil utilisé en arrière-plan par expo à la fin et l'application. fichier js puis le fichier qui
contient le code qui est responsable du rendu de ce que nous voyons ici à l'écran.
Nous y plongerons dans une seconde, l'application. json détient une configuration pour notre application React Native alimentée par expo
et nous allons nous y plonger tout au long de ce cours pour le moment, ignorons-le. Babel config configure comment le code Javascript
est optimisé et compilé, vous pouvez également laisser la valeur par défaut
ici et le package. Le fichier json gère vos dépendances et là vous
voyez que vous utilisez expo mais aussi React, aussi React DOM car expo prend également en charge la construction d'applications React pour le web mais aussi React
Native ici et React Native web car encore une fois, expo vous donne la possibilité de créer également des applications Web avec
l'aide de React Native, ce n'est pas quelque chose sur lequel nous nous concentrerons dans ce cours.
C'est donc la configuration que nous avons
ici, le fichier important pour nous en ce moment est l'application. fichier js parce que c'est à la fin responsable
de mettre quelque chose à l'écran.
Maintenant, le contenu exact du fichier que vous voyez ici dans votre application. Le fichier js pourrait changer au fil
du temps, ce projet de démarrage qui est généré automatiquement est parfois simplement modifié.
Cela n'affecte bien sûr pas ce que j'explique ici ou ce cours, cela ne signifie pas que quelque chose est
obsolète ou quelque chose comme ça,
c'est juste un projet de démarrage différent et
si vous voulez suivre exactement le même que j'ai, vous '' Je le trouverai attaché, vous pouvez donc également l'utiliser, mais
bien sûr, vous pouvez également continuer avec les téléspectateurs s'il a l'air légèrement différent, car comme
je l'ai mentionné, ce n'est qu'un projet de démarrage que
vous avez, React Native fonctionne bien sûr toujours de la même manière que Je l'ai expliqué ici
et vous pouvez donc absolument suivre cela et ajouter votre application. fichier js exactement comme je l'ai ajouté et là-bas,
nous voyons que nous importons React comme nous le ferions dans une application Web React.
Nous devons importer React car ici, vous pouvez également voir que nous utilisons jsx qui est cette syntaxe
Javascript spéciale qui ressemble à
HTML mais à la fin est juste Javascript
et au cas où vous ne l'auriez jamais vu, plongez certainement dans une application React ou React premier tutoriel, je
m'attends à ce que vous sachiez comment React fonctionne généralement.
Nous avons toujours une autre importation ici et c'est l'importation React Native où nous importons la feuille de style, le texte
et la vue à partir de là.
Maintenant, ce sont ces composants et fonctionnalités spéciaux dont je parlais plus tôt, le texte et la vue sont des
composants fournis par React Native qui sont compilés dans les widgets de la plateforme native et la feuille de style est une
fonctionnalité supplémentaire fournie par React Native qui vous aide à styler.
Maintenant, ici, nous avons un composant React normal comme nous le construirions également dans une application React for Web.
Nous avons un composant fonctionnel ici et avec l'aide de hooks React, nous ne pouvons travailler avec des
composants fonctionnels que comme vous le savez probablement et ce composant fonctionnel retourne du code jsx qui est rendu à
l'écran et
ici nous utilisons le widget de vue ou le composant de vue fourni par React Native et le composant
de texte et le composant de vue sont
comme un div, c'est un bon wrapper, également bon pour appliquer certains styles pour certains conteneurs et détecte est ensuite utilisé pour
sortir du texte que vous mettez entre son ouverture et fermeture des balises.
Et ici, nous avons certains styles définis, React Native n'utilise pas CSS mais il utilise une syntaxe de
style basée sur CSS ou suit des conventions de dénomination similaires, mais nous approfondirons la façon de styliser vos applications React
Native tout au long de ce cours bien sûr.
Donc, avec cela, changeons ce que nous voyons à l'écran et ajoutons un bouton ici.
Maintenant, la bonne chose est que nous pouvons importer un bouton à partir de React Native, c'est un autre composant principal fourni par React Native, nous
pouvons donc ajouter cette importation puis utiliser un bouton là-bas. Cependant, nous ne l'utilisons pas avec une balise d'ouverture
et de fermeture,
mais comme un élément à fermeture automatique, puis nous pouvons ajouter un accessoire de titre ici pour définir le texte
que nous voyons sur un bouton, par exemple changer de texte.
Maintenant, lorsque nous tapons sur ce bouton, nous pourrions vouloir changer ce texte ici et pour cela,
nous devons gérer un état ici parce que je veux changer certaines données qui devraient conduire à ce que ce
composant soit rendu de nouveau et pour cela, vous avez besoin d'un état .
Maintenant avant React 16. 8 qui est pris en charge ici cependant, vous devrez le convertir en un composant
basé sur une classe pour utiliserState, depuis React 16. 8, nous pouvons utiliser des hooks
React et au cas où vous ne savez pas ce que
sont les hooks, vous devriez certainement plonger dans les bases des hooks, vous trouverez ci-joint
des ressources qui vous permettront de démarrer avec cela. Les hooks sont importés de React et ici, nous avons besoin du hook useState
qui nous permet de gérer l'état dans un composant fonctionnel.
Avec cela, nous pouvons utiliser ce crochet en appelant useState ici et en lui donnant une valeur par défaut qui pourrait être ce texte ici, coupons-le de là-bas
et l'ajoutons ici sous forme
de chaîne, puis ici, nous pouvons utiliser la déstructuration des tableaux pour obtenir notre sortie texte et obtenir une fonction pour
modifier ou réinitialiser ou remplacer ce texte de sortie et c'est exactement comme cela que fonctionne le hook useState, il vous
donne un tableau avec exactement deux éléments, où
le premier élément est votre instantané d'état actuel, donc soit notre état de départ, soit ensuite pour les
cycles de restitution ultérieurs, tout ce que nous définissons notre état et la seconde est une fonction qui
vous
permet de définir votre état sur une nouvelle valeur et l'appel de cette fonction rendra à
nouveau le composant entier et le texte de sortie se référera ensuite à la dernière nouvel état.
Donc ici entre le texte, je veux sortir le texte de sortie et sur une pression sur ce bouton,
je veux changer cela.
Donc, sur le bouton, nous pouvons donc enregistrer onPress qui est fondamentalement l'équivalent d'OnClick que nous aurions
sur le Web,
ici c'est onPress et ensuite nous devons le lier à une fonction, par exemple à une fonction en
ligne anonyme ici avec cette syntaxe où nous appelons définir le texte de sortie et nous le définissons sur le texte modifié.
Donc, cela appellera cette fonction ici, remplacera notre état, donc restituera ce composant, cela sera mis
à jour dans le prochain cycle de rendu et donc puisque nous éditons le texte de
sortie là-bas, cela changera. Si nous sauvegardons maintenant tout
cela, le plus intéressant est que votre application que vous devriez toujours ouvrir sur votre téléphone devrait avoir automatiquement rechargée,
vous
n'avez pas besoin
de la redémarrer, vous n'avez pas besoin de scanner à nouveau ce code ici, juste en modifiant le code et
en enregistrant ce fichier, il devrait se recharger automatiquement ici. Et maintenant, si nous tapons maintenant sur le changement de texte ici, vous voyez
le texte modifié et c'est votre première application React Native qui fait son travail propulsé
par expo, mais encore une fois, vous pouvez le créer et le publier en tant qu'application autonome et nous le ferons d'ici la
fin de le cours et donc c'est une façon incroyable de commencer et le développement de React Native peut être aussi simple
que cela.
Maintenant, avec cela, finissons ce premier module avant de plonger plus profondément dans React Native et d'écrire
du code React Native à partir du deuxième module de cours.