Pour ce module et pour cette application que
nous construisons, vous trouverez à nouveau un projet de démarrage attaché à cette conférence que vous pouvez utiliser pour
commencer ou vous pouvez bien sûr créer une nouvelle application expo par vous-même.
Maintenant, c'est l'application que j'ai jointe, une application très basique avec I'm your app que nous pouvons à peine voir ce qui n'a pas d'importance parce
que nous ne garderons pas ce texte de toute façon et nous
n'avons qu'une seule application. fichier js.
Maintenant, beaucoup de choses que je fais dans ce module seront des choses que vous avez vues dans les modules précédents parce que
c'est évidemment l'idée centrale ici.
Nous mettrons en pratique ce que nous avons appris jusqu'à présent et il y aura de nouvelles choses ou
des modèles qui pourraient également vous intéresser.
Maintenant, bien sûr, dans cette application que j'ai esquissée lors de la dernière conférence, nous aurons quelques écrans, donc nous aurons
certainement besoin de navigation et donc j'ajouterai un dossier de navigation afin de pouvoir y stocker ma configuration de
navigation et ce n'est bien sûr qu'une
configuration possible, comme je l'ai mentionné précédemment, vous pouvez travailler avec n'importe
quelle structure de dossiers que vous souhaitez et qui fonctionne pour vous. Outre le dossier de navigation, je veux également
avoir un
dossier d'écrans ici, dans ce dossier d'écrans, je veux également stocker les écrans
sur lesquels nous pouvons naviguer et j'ajouterai un dossier de composants pour tous mes composants habituels,
bien sûr, les écrans sont également React
composants, mais les composants normaux, je veux dire ici sont les composants que nous ne chargeons
pas directement en tant qu'écrans mais que nous intégrons dans des écrans à la place ou dans
d'autres composants, c'est donc ce que nous aurons ici. Je vais également ajouter un dossier de constantes car, encore
une fois, je travaillerai avec mes constantes de couleur ici afin de pouvoir utiliser mes couleurs présélectionnées dans toute l'application.
Maintenant, il y a un tas de façons différentes de commencer, ce que j'aime faire en premier dans
mes applications, c'est que je
commence par les écrans, même si je n'ajoute pas encore le contenu à tous, j'aime ajouter ce général structure afin
que je puisse toujours voir sur quoi je dois encore travailler, quelles fonctionnalités manquent encore.
Donc, donc, j'ajouterai les écrans que j'aurai dans cette application et
ici je ferai quelque chose que je n'ai pas fait auparavant et qui est totalement facultatif mais
j'organiserai mes écrans dans des sous-dossiers séparés.
Je vais avoir un dossier avec mes écrans liés à la boutique
et bien sûr, puisque nous allons créer une application de magasinage, tous les écrans sont en quelque
sorte liés à la boutique, mais ici, je veux avoir les écrans qui nous aident directement à visualiser nos
produits,
à les ajouter vers le panier et ainsi de suite, puis je veux avoir un dossier séparé et c'est mon dossier utilisateur, vous pouvez
dire, là, je veux avoir les écrans
liés à l'utilisateur, ce serait donc mes produits utilisateur et mes produits d'administration.
C'est comme ça que je vais diviser
cela, mais bien sûr, vous pouvez organiser cela comme vous le souhaitez.
Ainsi, dans le dossier de la boutique ici par exemple, je veux avoir mon écran de présentation des produits et ce sera l'écran
que nous verrons lorsque l'application se chargera où nous avons tous les produits avec lesquels travailler et où nous
pouvons ensuite sélectionner un produit ou l'ajouter directement au panier. Nous aurons donc également besoin d'un écran de détail du produit, c'est
l'écran que nous voyons lorsque nous sélectionnons un produit et nous voulons en savoir plus, puis nous pouvons cliquer dessus ou
le toucher et nous sommes dirigés vers cet écran de détail. Nous aurons également besoin d'un écran de panier, c'est sans surprise l'écran que
nous voyons lorsque nous ajoutons un article au panier ou non que nous voyons ensuite, mais que nous pouvons visiter pour voir
l'article
là-bas, c'est donc quelque chose que
nous pouvons y faire et je '' ll ajoutera également un écran de commandes où nous pouvons voir nos commandes.
Maintenant, vous pouvez dire que l'écran du panier et le type d'écran de commande appartiennent au dossier utilisateur, car
ils sont en quelque sorte exclusifs à l'utilisateur, chaque utilisateur a ses propres
commandes et son propre panier et vous pouvez donc aller dans les deux sens, Je pense qu'ils sont
un peu plus du côté des produits de la boutique, mais encore une
fois, cela dépend entièrement de vous. Dans le dossier utilisateur,
je veux avoir mon écran de produits utilisateur, donc ce sera l'écran où je verrai une liste de tous les
produits qui appartiennent à cet utilisateur et l'écran de modification de produit qui est l'écran que nous utiliserons pour ajouter de
nouveaux produits ou pour éditer des
produits existants, nous pourrons les réutiliser.
Ce sont les écrans dans lesquels nous travaillerons
tout au long de ce module et nous ne les remplirons pas de vie tout de suite, nous allons plutôt travailler sur cette étape
par étape,
mais c'est ce dont nous aurons besoin.
Maintenant, bien sûr, il y a aussi un autre dossier que nous pouvons déjà ajouter et
c'est le dossier du magasin où nous gérerons notre magasin Redux et notre état Redux donc qui est notre système
de gestion d'état avec lequel je veux travailler dont nous avons bien sûr besoin car nous en avons beaucoup
des écrans qui doivent tous travailler sur le type de données associées et nous devons donc gérer ces données, nos produits et ce
qui est
dans le panier, etc. à un niveau mondial et Redux est
vraiment génial pour cela, nous en aurons certainement besoin . Sur la même note, nous devons également installer certains
packages, je vais donc exécuter npm install --save et installer Redux et React Redux. Nous aurons également besoin de React -navigation car
bien sûr, nous ajouterons à nouveau la navigation, nous pouvons donc déjà y ajouter cela.
J'ajouterai également déjà des boutons d'en-tête de navigation React parce que j'ajouterai des boutons d'en-tête ici et je veux avoir
ces boutons joliment stylés et positionnés sans avoir à faire tout ce positionnement de
style par moi-même et cela devrait être pour l'instant.
Je vais donc déjà installer tous ces packages, nous en aurons besoin tout au long de
ce module et avec ces packages installés et ces fichiers de base créés, nous avons une configuration de base solide pour commencer.
Maintenant, en plus de ces packages, nous devons également installer deux
autres packages à l'aide de la commande expo install et c'est react-native-gesture-handler, donc expo installer React-native-gesture-handler
et également le package react-native-reanimated . Les deux packages doivent également être installés
avec la commande expo install.
Maintenant, bien sûr, il s'agit de remplir cela avec la vie et
je veux commencer par le premier écran, nous verrons en fait quel est l'écran de présentation des produits.