Créer un composant dans React

Comment créer un composant dans React, c’est ce que nous allons voir ici.

En effet, dans le précédent article : « Que faut-il installer pour commencer avec React ?« , vous avez découvert comment créer une application HelloWorld après avoir installé tout le nécessaire pour React.

A présent, rentrons dans le vif du sujet et créons un composant réutilisable.

Créer un nouveau composant

Pour créer un nouveau composant, les conventions veulent qu’on crée un nouveau dossier dans le répertoire « src ».

Dans notre cas, créons un dossier « Article ». Celui-ci contiendra donc tous les fichiers nécessaires pour notre composant « Article ».

Pour créer le composant en lui-même, créons notre fichier « Article.js » dans ce nouveau dossier. Voici à quoi ressemble le contenu de ce fichier :

import React from 'react';

const article = () => {
    return <p>Mon article </p>
};

export default article;

On peut voir 3 choses :

• On commence par importer React depuis la librairie ‘react’. Jusque là il s’agit d’importer en javascript tout ce qui nous permet d’utiliser React.
• Ensuite, on définit une fonction qui représente l’affichage de notre composant. Cette fonction est une Arrow Function donc une fonction déclarée comme une constante : const fonction = () => { … }; C’est dans cette fonction qu’on affiche notre composant.
• Enfin, on expose notre composant en disant bien que si on importe le fichier Article.js, c’est la fonction « const article… » qui sera exportée par défaut sans devoir préciser que c’est elle qu’on souhaite importer.

Utilisons notre composant

Utilisons notre composant dans le composant principal. Pour se faire, rendez-vous dans le code du composant App.js dans le dossier « src » toujours.

Voici la modification à apporter pour utiliser notre composant :

import ...
import Article from './Article/Article';
...
function App() {
  return (
    <div className="App">
      <Article />
    </div>
  );
}
...

On peut voir 2 modifications :

• On importe notre composant sous le nom Article via la commande importe Article from ‘./Article/Article’ -> from définit depuis quel endroit on l’importe. Dans notre cas, on part du dossier en cours « . » et on va dans le sous-dossier Article puis dans le fichier js Article (on ne précise pas « .js » car c’est implicite en React).
• Enfin, il suffit d’ajouter notre composant <Article /> dans le rendu html de notre composant principal pour que notre composant Article y soit incorporé.

Une fois cela compris, vous pourrez vous rendre compte que quand vous aurez appris à passer des données d’un composant à l’autre, l’imbrication de composants réutilisables vous permettra de mieux gérer votre code, d’y voir plus clair et même de pouvoir partager le travail entre plusieurs personnes. Bref, que du positif et comme vous pouvez le voir, de manière toute simple.

Petit récapitulatif

Vous voyez comme c’est simple :

• Vous créer un dossier portant le nom de votre composant ainsi qu’un fichier js pour le composant en lui-même
• Vous importez ce dernier dans votre composant principal
• Vous l’utilisez comme un contrôle html pour le rendu final

Dans le prochain article, vous verrez justement comment passer des données à un composant pour qu’il puisse afficher des données dynamiques.

J’espère que cet article simple mais qui vous permettra de bien démarrer vous aura plu. N’hésitez pas à vous abonner à ce blog pour ne rien manquer et à commenter ou partager cet article. Merci d’avoir lu cet article et à très bientôt sur le blog developpement-web-facile.com.