Créer des applications mobiles avec React Native

Auteur: Mohamed CHINY Durée necessaire pour le cours de Créer des applications mobiles avec React Native Niveau recommandé pour le cours de Créer des applications mobiles avec React Native Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 12: Réutiliser les composants en React Native

Toutes les pages

Composants réutilisables en React Native

Pourquoi réutiliser les composants?

Imaginez que l'on souhaite intégrer deux boutons dans une vue de notre application mobile, un pour confirmer une action et l'autre pour l'annuler. On peut facilement invoquer les composants Button (inclus dans une View) comme ceci:
<View style={{flexDirection:"row", gap:4}}>
   <Button title="Continuer" />
   <Button title="Annuler" />
</View>
Dans cet exemple, nous n'avons pas inclus les event handlers afin de soulager le code et faciliter l'explication, mais on verra juste après comment faire ceci. Notez également qu'on a changé flexDirection en row afin d'aligner les deux boutons sur la même ligne.
Comme vous l'aurez certainement deviné, ces deux boutons feront souvent leur apparition dans d'autres vues, car leurs fonctions sont communes et très sollicitées dans de nombreuses situations. Ce qui veut dire que l'on doit copier et coller ces composants à chaque fois.

Certes, un tel code n'est pas difficile à reproduire (ou simplement copier), mais s'il était plus imposant, alors l'opération ne serait pas vraiment propre, surtout que si jamais on voudrait changer quelque chose dans ces deux boutons, comme leurs attributs ou leurs styles, alors on serait tenus de le faire partout où ils apparaissent.

La solution consiste à regrouper ces composants dans un fichier à part et les importer à chaque fois qu'on en aura besoin à fin de les réutiliser. De cette façon, on aura un code centralisé et facile à maintenir. En plus, le code même devient claire, lisible et bien structuré.

Créer, exporter et importer les composants réutilisables

Afin que notre projet soit bien structuré, nous allons créer un répertoire nommé components dans la racine du projet (au même niveau que App.js). Ce répertoire est sensé englober tous les composants réutilisables que l'on créera par la suite.

Maintenant, on crée un fichier nomme MyButtons.js dans ce répertoire et dont le code ressemblera à ceci:
import { Button, View } from 'react-native';
function MyButtons(){
   return(
      <View style={{flexDirection:"row", gap:4}}>
         <Button title="Continuer" />
         <Button title="Annuler" />
      </View>
   )
}

export default MyButtons
Vous avez constaté qu'on a créé une fonction du même nom que le fichier. La fonction MyButtons implémentera le composant View ainsi que ses enfants (les deux boutons).
Le fait de nommer le composant avec le même nom que le fichier qui les définit est une pratique très courante et recommandée afin de garantir la cohérence et la clarté de la structure du projet. Cependant, on peut toujours appliquer des noms différents.
L'instruction d'export
export default MyButtons
est obligatoire afin de pourvoir importer le composant ailleurs.
L'exportation par défaut indiques qu'un seul élément principal (composant) est exporté par le fichier. Cela permet ensuite de l’importer sans avoir à connaître son nom exact.
Dans le fichier principal App.js on va inclure ce code:
import { StyleSheet, View, Button } from 'react-native';
import MyButtons from './components/MyButtons';

export default function App() {
   return (
      <View style={styles.container}>
         <MyButtons />
      </View>
   );
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   }
});

Nous avons commencé par importer notre composant:
import MyButtons from './components/MyButtons';
Ensuite, nous l'avons inclus là où l'en a besoin:
<View style={styles.container}>
   <MyButtons />
</View>