La structuration d’un projet React Native peut rapidement devenir complexe sans une organisation adéquate.
Une mauvaise architecture peut entraîner des difficultés de maintenance, de performance et compliquer le développement ultérieur.
Cet article vous guide à travers l’architecture optimale d’un projet React Native, abordant les meilleures pratiques pour un développement efficace.
Développez votre première application mobile en un rien de temps !
Architecture projet React Native structurée
Dans cette section, nous explorerons ensemble la structure de répertoires d’un projet React Native généré par défaut avec la commande : npx create-expo-app nom-app. Cette commande crée automatiquement une arborescence de fichiers et de dossiers, qui sert de base pour commencer le développement.
Voici la composition générale du projet ainsi généré :
Dans un projet React Native, l’arborescence des dossiers et fichiers est organisée pour faciliter le développement et la gestion des différentes parties de l’application. Voici une explication des dossiers et fichiers principaux dans ton projet React Native :
- app/tabs :Ce dossier contient les fichiers qui définissent les différentes pages ou sections principales de l’application comme le fichier index.tsx qui est le fichier de notre application. Dans une application avec une navigation par onglets (ou tabs), chaque fichier ici correspondra généralement à un onglet spécifique.
- Assets :Ce dossier regroupe les ressources statiques de l’application, comme les images, les polices ou les sons. L’organisation centralisée de ces fichiers facilite leur accès et leur gestion.
- Component :Ici se trouvent les composants réutilisables de l’application. Un composant est une partie indépendante et réutilisable du code (comme un bouton, une carte, ou une barre de navigation) qui peut être utilisée dans plusieurs écrans. Voici les composants par défaut de l’application et nous pouvons y ajouter notre propre composant que nous allons voir dans la prochaine partie.
- Constants :Ce dossier contient les constantes de l’application, comme les couleurs, les tailles de texte ou d’autres valeurs globales. Cela permet de gérer les paramètres globaux et de les modifier facilement sans devoir parcourir tout le code. Dans ce dossier, nous trouvons par exemple le fichierColors.tsx, qui définit les couleurs de l’application avec un contenu similaire à ceci :
const tintColorLight = '#0a7ea4';
const tintColorDark = '#fff';
export const Colors = {
light: {
text: '#11181C',
background: '#fff',
tint: tintColorLight,
icon: '#687076',
tabIconDefault: '#687076',
tabIconSelected: tintColorLight,
},
dark: {
text: '#ECEDEE',
background: '#151718',
tint: tintColorDark,
icon: '#9BA1A6',
tabIconDefault: '#9BA1A6',
tabIconSelected: tintColorDark,
},
};
•Hooks : Ce dossier contient les hooks personnalisés, qui sont des fonctions spéciales dans React. Les hooks permettent de gérer l’état, le cycle de vie des composants et d’autres fonctionnalités de manière flexible et réutilisable. Dans ce projet React Native, trois hooks sont fournis par défaut : useColorScheme . tsx , useThemeColor . tsx , et useColorScheme . web . tsx .
Chacun joue un rôle particulier :
- useColorScheme.ts :Cehookdétecte le thème (clair ou sombre) du système d’exploitation de l’utilisateur et ajuste automatiquement l’apparence de l’application, améliorant ainsi l’expérience utilisateur sans intervention manuelle.
- useThemeColor.ts :Cehookapplique des couleurs thématiques en fonction du thème actuel détecté paruseColorScheme. Il ajuste les couleurs des éléments comme les boutons et le texte, garantissant une cohérence visuelle.
- useColorScheme.web.ts :Spécifique à la version web de l’application, cehookgère le thème selon les préférences de l’utilisateur pour offrir une expérience utilisateur cohérente sur les plateformes web et mobile.
• Node_modules : Ce dossier est généré automatiquement et contient tous les modules et dépendances installés avec npm (le gestionnaire de paquets Node.js). Il ne faut pas modifier manuellement ce dossier. Voici quelques-uns des dépendances installées par défaut :
Meilleures pratiques modularité React Native
- Utiliser des composants fonctionnels au lieu de composants de classe.
Les composants fonctionnels sont généralement préférés dans React, y compris React Native, car ils offrent une syntaxe plus concise, une meilleure lisibilité et des performances optimisées. De plus, avec l’introduction des hooks, les composants fonctionnels peuvent maintenant gérer l’état et les effets de bord de manière aussi efficace que les composants de classe.
Voici des exemples de composant qui permet de developpeur un compteur avec deux composant differents : classe et fonctionnel :
- Composant de classe :
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
class CounterClass extends Component {
state = { count: 0 };
increment = () => this.setState({ count: this.state.count + 1 });
render() {
return (
<View>
<Text>Compteur : {this.state.count}</Text>
<Button title="Incrémenter" onPress={this.increment} />
</View>
);
}
}
export default CounterClass;
- Composant fonctionnel :
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const CounterFunctional = () => {
const [count, setCount] = useState(0);
return (
<View>
<Text>Compteur : {count}</Text>
<Button title="Incrémenter" onPress={() => setCount(count + 1)} />
</View>
);
};
export default CounterFunctional;
Ces deux exemples montrent la gestion d’un compteur, mais avec des approches différentes, mettant en avant la concision et la simplicité du composant fonctionnel.
- Modularité et utilisation de StyleSheet :
La modularité est essentielle dans le développement d’applications React Native. Elle permet de structurer le code de manière claire et maintenable. De plus, l’utilisation de StyleSheet pour définir les styles aide à améliorer la performance de l’application en optimisant le rendu des styles.
Voici un exemple simple illustrant la modularité et l’utilisation de StyleSheet dans une application React Native. Nous allons créer un composant de carte (Card) réutilisable, ce qui démontre la modularité, tout en utilisant StyleSheet pour gérer les styles de manière efficace :
Composant Card :
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Card = ({ title, content }) => (
<View style={styles.card}>
<Text style={styles.title}>{title}</Text>
<Text>{content}</Text>
</View>
);
const styles = StyleSheet.create({
card: {
padding: 10,
margin: 5,
borderRadius: 5,
backgroundColor: '#fff',
elevation: 2,
},
});
export default Card;
Utilisation du composant Card :
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Card = ({ title, content }) => (
<View style={styles.card}>
<Text style={styles.title}>{title}</Text>
<Text>{content}</Text>
</View>
);
const styles = StyleSheet.create({
card: {
padding: 10,
margin: 5,
borderRadius: 5,
backgroundColor: '#fff',
elevation: 2,
},
});
export default Card;
Modularité : Le composant Card est réutilisable avec différents titres et contenus.
StyleSheet : Les styles sont centralisés pour améliorer la lisibilité et
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment est organisée l'arborescence des dossiers dans un projet React Native ?
Quels sont les avantages des composants fonctionnels dans React Native ?
Pourquoi utiliser StyleSheet dans React Native ?
Comment gérer les thèmes dans une application React Native ?
Comment assurer la modularité dans un projet React Native ?
Conclusion
Une bonne architecture est essentielle pour le développement d’applications robustes. Quelles autres pratiques recommandez-vous pour optimiser davantage un projet React Native ?
