React - Bibliothèque Javascript pour le frontend
Page 10: Créer et importer des composants personnalisés et réutilisables
Toutes les pages 
React - Bibliothèque Javascript pour le frontend
Page 10
Créer et importer des composants personnalisés et réutilisables
Créer et importer des composants personnalisés et réutilisables
Créer et importer des composants personnalisés
Créer un composant JSX réutilisable
L’une des caractéristiques les plus pratiques d’un composant JSX c’est sa réutilisabilité. Par exemple, si l’application React renferme plusieurs boutons, alors au lieu de les créer indépendamment à chaque fois que l’on a besoin, il serait judicieux de créer un composant à part qui contient notre bouton, ensuite on va juste l’invoquer aux emplacements souhaités.Le bouton dans ce cas sert juste à donner un exemple simple, car son code n’est pas si compliqué à tel point de l’isoler dans un composant à part. Par contre, si vous disposez de deux boutons par exemple, un pour valider et l’autre pour annuler, en plus d’autres éléments communs, dans ce cas là, il serait utile d’isoler notre composant qui contient tous ces éléments là.
Le composant que l’on souhaitera créer est une fonction qui retourne du JSX (comme le fait le composant principal <app />. Nous allons donc l’isoler dans un fichier .js (ou .jsx) à part. De préférence, nous allons créer un répertoire nommé components dans le dossier src. Ce dossier components contiendra tous nos composants personnalisés pour une meilleure organisation du code.
Disons par exemple que dans notre composant, nous voulons intégrer deux boutons, un pour valider et l’autre pour annuler. Nous allons nommer notre fichier Boutons.js et la fonction qui implémente notre composant Boutons.
Notez qu’il n’est pas obligatoire de nommer le composant avec le même nom que le fichier qui le contient. Cependant, leur donner un nom identique est vue comme une bonne pratique fortement recommandée car elle permet de se retrouver facilement dans le code, d’autant plus si notre application devient plus complexe et contient beaucoup de composants.
Le code que l’on va intégrer dans le fichier Boutons.js ressemblera à ceci :
function Boutons(){
return(
<>
<button>Valider</button>
<button>Annuler</button>
</>
)
}
export default Boutons
Je pense que le code est claire car il ressemble à celui qu'on a vu dans le composant <App />. Il reste juste l'instruction d'exportation qu'il faut expliciter, car en Javascript, pour importer un module il faut l'exporter d'abord. Quant à l'exportation par défaut export default, elle sert à désigner l'élément principal que le fichier exporte. En effet, il est possible d'effectuer plusieurs exportations dans le même fichier, mais un seul élément peut être exporté par défaut.
return(
<>
<button>Valider</button>
<button>Annuler</button>
</>
)
}
export default Boutons
Plaçons nous maintenant dans le fichier <App />, car c'est là qu'on procédera à l'importation de notre composant. Le code ressemblera à ceci:
import Boutons from "./components/Boutons"
function App() {
return (
<>
<Boutons />
</>
);
}
export default App;
On commence par importer le composant Bouton à partir de l'emplacement ./components/Boutons (sans avoir besoin d'expliciter l'extension .js ou .jsx). Puis, dans le composant principal <App />, on invoque notre composant <Boutons /> (N'oubliez pas de spécifier les chevrons et le slash comme si c'était une balise autofermante en respectant les spécifications HTML5).
function App() {
return (
<>
<Boutons />
</>
);
}
export default App;
Il est possible de personnaliser le composant après l'avoir importé en modifiant l'étiquette des boutons par exemple, ou même d'ajouter des events handlers etc... Nous allons voir comment procéder à ces opérations en utilisant les props ou encore le hook useContext qu'on verra plus loin dans ce cours.
Page 10
Créer et importer des composants personnalisés et réutilisables
Créer et importer des composants personnalisés et réutilisables
