Et pour cela, il est logique de commencer ici dans l'application. fichier js.
Maintenant, laissez ce terminal ouvert ici et ce processus en cours,
bien sûr, afin que les modifications de votre code soient automatiquement répercutées sur les émulateurs
et voyons maintenant comment nous pouvons commencer avec cela.
J'ai déjà mentionné dans le premier module de cours que React Native est tout au sujet de ces composants
de base intégrés comme le texte et la vue. Une vue serait votre div du développement web au
cas où vous êtes un développeur web que vous êtes probablement si vous connaissez React.
C'est donc un excellent composant de
conteneur, vous pouvez le styler comme vous le voyez ici et vous pouvez envelopper d'autres contenus avec.
Maintenant, un texte, d'autre part, est un composant central pour la sortie de texte,
c'est son objectif, pas là pour sortir une image mais là pour sortir du texte.
Maintenant, ce que vous ne pouvez pas faire dans React Native et c'est la première chose importante, vous ne pouvez pas par exemple
sortir du texte entre une vue comme celle-ci.
Si nous essayons de l'enregistrer sans ce wrapper de texte, vous voyez que nous obtenons une erreur. C'est par la façon dont un écran que vous
verrez de temps en temps lorsque vous travaillez avec React Native, cela vous donne une erreur,
il explique ce qui n'a pas fonctionné. Voici par exemple un message d'erreur assez clair nous disant que les chaînes
de texte doivent être rendues dans le composant texte
et pourquoi est-ce si important?
Pourquoi est-ce que j'insiste là-dessus?
Parce que c'est une différence importante pour le développement Web, vous pouvez y
mettre du texte n'importe où. Dans le développement Web,
vous pouvez avoir un div et entre les balises d'ouverture et de fermeture du div, vous pouvez avoir n'importe quel texte et cela ne fonctionnera pas
sur React Native, non seulement parce que nous utilisons un div qui n'est pas pris en charge mais
bien sûr parce que sur React Native, vous ne pouvez vraiment sortir du texte qu'entre balises de texte, vous devez donc utiliser ce composant de texte fourni
par React Native pour sortir du texte et c'est une différence cruciale sur le Web où vous pouvez lancer votre texte n'importe où
et dans React Native, c'est la manière il est plus important d'utiliser le bon composant intégré pour le travail que
vous souhaitez effectuer et pour le style, pour configurer un conteneur dans lequel vous structurez un contenu différent, ce serait une vue,
pour la sortie de texte, qui pourrait être un texte. Pour sortir une image par exemple,
vous aurez un composant image. C'est ainsi que React Native fonctionne et en parlant
de style, de mise en page, la vue a cela comme tâche principale, elle est principalement là pour appliquer des styles et pour mettre en
page le contenu que vous avez là-bas et
en parlant de cela, commençons par la mise en page.
Disons que dans notre application, nous voulons avoir deux zones principales ici sur cet écran. En haut, je veux permettre à l'utilisateur d'entrer
du texte et à droite, je veux avoir un bouton pour confirmer ce choix et en dessous, donc c'est
la première
partie, la zone
de saisie et en dessous, nous avons le deuxième partie et c'est la liste des objectifs
que l'utilisateur a entré.
Donc donc ici dans l'application. js, nous pouvons commencer par avoir une vue d'habillage parce
que, tout comme dans React normal, vous devez avoir un composant parent et ce sera généralement une vue dans React
Native car cela vous donne la plupart des options de mise en page et de style
et à l'intérieur de cette vue, nous pourrions avoir une autre vue pour la zone de saisie où nous ajoutons ensuite notre entrée et en dessous,
encore une autre vue pour avoir notre liste d'objectifs et je vais me débarrasser de ce texte et c'est assez normal
dans React Native que vous en avez beaucoup de vues imbriquées les unes dans les autres, afin que vous puissiez créer la mise en page de votre choix.
Maintenant, débarrassons-nous de ce conteneur là-bas et de cette affectation de style et commençons avec tout cela
à partir de zéro.
À retenir en ce moment, chaque composant fourni par React Native a son propre travail, il n'y a pas beaucoup de
composants mais ceux qui y sont ont des rôles clairement définis et vous créez ensuite votre interface utilisateur en imbriquant
ces composants les uns dans les autres en fonction de ce que vous voulez réaliser, par exemple
si vous voulez construire une mise en page, vous commencez par imbriquer quelques vues, puis une fois que
vous êtes à la partie où vous voulez sortir du contenu, vous commencerez à ajouter des textes et ainsi
de suite et nous Je ferai tout cela au cours des prochaines conférences. Vous pouvez également toujours consulter les documents officiels React Native et si vous cliquez sur Guides,
Composants et API, vous obtiendrez un aperçu de ces blocs de construction de base. Vous trouverez la vue ici, le texte, l'image, la saisie de texte
que j'ai déjà mentionnée plus tôt et quelques autres composants de base et vous verrez à peu près tous ceux-ci
ou la plupart de ceux-ci tout au long de ce cours et ceci est un un excellent endroit pour
plonger plus profondément et en savoir plus à leur sujet et comme vous pouvez déjà le voir
si vous omettez ceux spécifiques à la plate-forme qui sont plus axés sur des créneaux, il n'y a pas beaucoup de composants de base, seulement environ
10 composants de base et c'est ainsi que React Native fonctionne. Néanmoins, vous pourrez créer n'importe quelle application
comme vous le verrez.