Bonjour, résidents de Khabrovsk. Aujourd'hui, nous partageons avec vous la traduction d'un article dont la traduction a été préparée spécifiquement pour la première
session du cours ReactJS / React Native-Developer . Bonne lecture.
Si vous êtes nouveau dans le monde natif de React, vous savez qu'il comporte des pièges que vous souhaitez éviter. Dans certains cas, vous devrez faire un choix à l'avance sans avoir la moindre idée de comment ou de ce que cela affectera.
Ci-dessous, j'ai compilé une liste des meilleurs conseils pratiques de mon expérience personnelle qui, je l'espère, vous seront utiles :)
N'utilisez l'Expo-Kit que si vous savez vraiment ce que vous faites.
Expo est un outil open source gratuit pour React Native. Il est possible que ce soit le meilleur ensemble d'outils pour créer des applications sur React Native, mais il a aussi ses limites.
Utilisez Expo:- Si vous souhaitez simplement créer un sandbox, ne créez pas de référentiel pour votre application. Créez simplement une nouvelle application à l'aide du package create-react-native-app .
- Si vous avez fait des recherches avant de créer une application et réalisé que tous ses besoins peuvent être couverts par les solutions qu'Expo propose.
- Si vous ne disposez pas d'un ordinateur Mac OS, mais que vous souhaitez toujours créer des applications iPhone. C'est la seule alternative pour créer des exécutables IPA.
N'utilisez pas Expo:- Si vous êtes nouveau dans React Native et que vous pensez que c'est le seul moyen de créer une application. Tout d'abord, vérifiez s'il répond à vos besoins.
- Si vous prévoyez d'utiliser des packages RN tiers avec des modules utilisateur natifs. Expo ne prend pas en charge cette fonctionnalité, auquel cas vous devrez extraire (éjecter) l' Expo-Kit . À mon avis, si vous allez initialement extraire un ensemble d'outils, vous ne devriez pas l'utiliser du tout. La procédure d'extraction compliquera la création de l'application, si vous ne l'avez pas du tout utilisée.
En général, je pense qu'Expo est un excellent outil et j'utilise
Expo Snack moi-même pour partager du code React Native. Cependant, pour le moment, il ne peut être utile que pour créer certains types d'applications.
Comment structurer les dossiers et fichiers de votre application
L'organisation d'une application sur React Native n'est pas différente de l'organisation d'une application sur React. Par conséquent, si vous êtes familier avec cela, respectez simplement la même logique. Cependant, si ce n'est pas le cas, la logique décrite ci-dessous sera utile:
- Ajoutez le dossier à la racine et nommez-le «app»;
- Créez des dossiers dans «l'application»:
assets - À l'intérieur, j'ai jusqu'à trois dossiers avec des polices, des icônes et des images.
components - Ici, vous placerez tous les composants React partagés. Ce sont généralement les composants que nous appelons «factices» car ils n'ont pas de logique d'état et peuvent être facilement réutilisés à l'intérieur de l'application.
views - Ce sont nos écrans d'application, ceux avec lesquels nous passons de l'un à l'autre. Les composants React sont également stockés ici, ceux que nous appelons conteneurs, car ils stockent leur propre état.
modules - Les pièces qui n'ont pas de vue correspondante (JCX) y sont stockées. Des exemples typiques sont le module couleurs (contient toutes les couleurs d'application) et le module utils (contient des fonctions utilitaires qui peuvent être réutilisées).
services - Voici les fonctions qui encapsulent les appels API.
i18n - La traduction est stockée ici pour les utilisateurs avec différentes langues et paramètres régionaux.
Toutes les applications nécessitent un certain type de configuration, donc je crée généralement un fichier appelé
config.js et
config.js stocke. S'il y a trop de lignes dans le fichier de configuration, vous pouvez créer un dossier de
config séparé et le diviser en plusieurs fichiers.
Si vous avez une bibliothèque de gestion d'état, vous aurez également besoin de dossiers pour ses composants. Dans le cas de Redux, 2 dossiers ou plus sont utilisés, un pour les
actions et un pour les
reducers . Si vous n'utilisez pas de packages externes et préférez utiliser l'API React Context, vous pouvez créer vos propres fournisseurs, qui peuvent être placés dans le dossier modules ou dans le dossier des nouveaux
providers .
Nous sélectionnons la bibliothèque de navigation selon vos besoins
Malheureusement, RN n'a pas encore de solution complète ou au moins un remplacement digne de l'ancien composant Navigator, nous allons donc maintenant nous concentrer sur la façon dont la communauté résout ce problème. Par conséquent, si vous allez créer un projet et que vous souhaitez savoir quelle bibliothèque de navigation utiliser, cette section est faite pour vous.
En général, il existe deux types de bibliothèques de navigation: les navigateurs JavaScript et les navigateurs natifs. Les premières sont écrites en JavaScript, tandis que les bibliothèques natives sont écrites en modules natifs selon la plateforme (Android, iOS) et connectées aux modules JavaScript pour être jetées dans le code. Les premiers sont beaucoup plus faciles à installer, tandis que les seconds sont beaucoup plus efficaces. Prenez le temps de déterminer le type qui vous convient le mieux, puis choisissez parmi autant de bibliothèques de ce type.
Spencer Carly a fait un excellent travail et a développé les options de navigation actuelles dans le monde natif de React, vous pouvez lire son
article sur ce sujet. Les solutions les plus populaires sont désormais
React Navigation , en tant que solution JavaScript, et
React Native Navigation , en tant que solution native.
Pour plus de commodité, utilisez la bibliothèque d'encapsulation CSS-in-JS
Dans React Native, CSS est écrit en JavaScript. Ici, nous n'avons pas le choix. Personnellement, au lieu d'utiliser la méthode
StyleSheet.create et le code CSS en JavaScript pur, j'utilise la bibliothèque
Styled Components . Les composants stylisés clarifient CSS à nouveau et rendent JSX plus sémantique.
J'ai récemment écrit un article expliquant pourquoi je préfère utiliser les composants stylisés dans
les applications
React Native , vous pouvez le lire pour mieux comprendre le sujet.
Décidez à l'avance de la façon dont vous souhaitez que votre application évolue sur différents appareils avec différentes tailles d'écran.
Très probablement, vous développez une application pour plusieurs appareils et tailles d'écran. Il existe maintenant deux approches pour la conception et le développement d'applications.
Vous pouvez opter pour un UX / UI différent selon la taille de l'écran. Pour la plupart des types d'applications, c'est probablement la meilleure option, mais elle nécessite beaucoup d'efforts, car vous devez trouver et implémenter plusieurs options d'écran. Les tailles d'écran peuvent être déterminées à l'aide de l'
API Dimensions . D'un autre côté, vous pouvez utiliser un package tiers qui, prêt à l'emploi, fournit certains outils, tels que
React Native Responsive UI .
Ou vous pouvez utiliser le même UI / UX, qui évoluera proportionnellement pour toutes les tailles d'écran. C'est la meilleure option si, par exemple, vous développez un jeu. Encore une fois, vous pouvez utiliser un package tiers, par exemple,
React Native Responsive Screen .
Avis de non-responsabilité: je suis le créateur du package React Native Responsive Screen .
Soyez prudent avec l'animation
L'animation est cruciale pour les applications mobiles, mais les performances de React Native sont médiocres.
Pour vous protéger contre les erreurs, vous devez tester l'animation sur l'appareil, car l'émulateur ne fournit pas la rétroaction correcte. Vous devez également utiliser
useNativeDriver (avec true) dans la mesure du possible, car cela vous aidera à obtenir de meilleures performances.
Si vous souhaitez plus de conseils sur la façon d'améliorer les performances, consultez mon
article précédent.
Rappelez-vous également
- React Native n'a aucun élément DOM. Au lieu de cela, nous travaillons avec des éléments natifs.
- À propos de CSS:
- Toutes les fonctionnalités ne sont pas prises en charge, du moins pas encore. Pour en savoir plus, consultez la documentation: Propriétés du style d' affichage, Propriétés du style d'image , Propriétés du style de texte .
- Les raccourcis ne fonctionnent pas toujours bien, il est donc préférable d'utiliser des propriétés spécifiques (telles que margin-bottom, margin-top, margin-left, margin-right au lieu de margin).
- Toutes les propriétés ne prennent pas en charge les pourcentages. Par exemple, les éléments suivants: marge, largeur de bordure et rayon de bordure. Si quelqu'un essaie d'utiliser des valeurs de pourcentage, soit RN les ignorera, soit l'application plantera en principe.
- RN prend en charge le flex hors de la boîte. Examinez-le et utilisez-le le cas échéant. C'est le meilleur allié CSS!
C’est tout. En savoir plus sur le cours
ici .