Qu’est-ce qu’un composant React et comment en créer un

Les composants sont des blocs de construction essentiels dans une application React car ils nous permettent de décomposer notre application en éléments plus petits et réutilisables. Dans cet article, nous discuterons de ce qui fait un composant React et de ce qu’il faut pour en créer un.

Réagir est une bibliothèque JavaScript populaire gérée par une communauté mondiale de développeurs et utilisée par d’innombrables entreprises et organisations. L’objectif principal de React est de fournir aux développeurs un moyen de créer des interfaces utilisateur complexes à l’aide d’une syntaxe déclarative simple. L’une des façons dont React atteint cet objectif est de fournir la possibilité de créer des pages Web avec un concept connu sous le nom de Composants.

Dans cet article, nous nous concentrerons sur les bases des composants React et sur la manière de les créer.

HTML et Javascript

Lorsque nous travaillons dans un environnement HTML standard, nous construisons souvent un balisage (c’est-à-dire du code) pour créer la structure et la mise en page d’une page Web ou des éléments d’une page Web. Par exemple, nous pouvons avoir un balisage comme celui-ci pour créer le modèle d’un formulaire :

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <input type="submit" value="Submit" />
</form>

Lorsqu’il s’agit d’introduire de l’interactivité, JavaScript peut alors être utilisé. Avec JavaScript, nous devons accéder aux éléments DOM dans notre code HTML (avec des sélecteurs de requête et des écouteurs d’événement) pour introduire l’interactivité que nous souhaitons.

Voici un exemple de la façon dont nous pouvons utiliser le JavaScript natif pour interagir avec le modèle de formulaire partagé ci-dessus :

let form = document.querySelector("form");
let nameInput = form.querySelector("#name");
let emailInput = form.querySelector("#email");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  let name = nameInput.value;
  let email = emailInput.value;
  console.log(`Name: ${name}, Email: ${email}`);
});

Le code ci-dessus ajoute un écouteur d’événement au formulaire qui écoute un événement submit. Lorsque le formulaire est soumis, le code récupère les valeurs saisies dans les éléments d’entrée et les enregistre dans la console.

Essayez ce qui précède sur Stackblitz ici.

À mesure que la complexité d’une page Web augmente, il peut devenir de plus en plus difficile de gérer l’interactivité de la page en utilisant uniquement le JavaScript natif. C’est là qu’une bibliothèque comme React entre en jeu. React fournit une manière plus organisée de gérer l’état et l’interactivité des éléments et l’une des principales manières de le faire est de nous permettre de créer Composants.

Composants

Un composant React est un morceau de code autonome qui définit une partie spécifique de l’interface utilisateur. Les composants React sont les blocs de construction des applications React en nous permettant de coupler le balisage (HTML), la logique (JS) et les styles (CSS) en leur sein.

Les composants sont écrits sous forme de fonctions JavaScript. Lors de la création d’un composant, nous devons d’abord définir une fonction pour décrire le nom du composant. Par exemple, nous pouvons définir un nom de fonction de Form() pour décrire que nous construisons un composant de formulaire.

function Form() {}

Remarque : Les noms des composants React doivent toujours commencer par une majuscule !

Pour faire d’une fonction un composant React, elle doit renvoyer un balisage. Avec React, nous pouvons le faire avec JSX, une extension de syntaxe pour JavaScript qui nous permet d’écrire des éléments HTML dans notre code JavaScript.

Voici comment nous pouvons avoir notre Form() La fonction renvoie le balisage d’un formulaire HTML.

function Form() {
  return (
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />

      <input type="submit" value="Submit" />
    </form>
  );
}

Avec cela, nous avons créé notre composant React !

Nous avons vu précédemment, dans notre exemple JavaScript standard, comment nous devons utiliser des sélecteurs de requêtes et des écouteurs d’événements pour ajouter de l’interactivité à nos éléments Web. Avec React, cependant, nous pouvons y parvenir en utilisant État et accessoires pour gérer les données et l’interactivité de nos composants.

État est un objet qui représente les données ou les informations dont un composant a besoin pour maintenir et mettre à jour. Il permet à un composant de suivre les modifications et de répondre aux interactions des utilisateurs. Nous chercherons à reproduire le comportement de formulaire que nous avons créé en HTML et JavaScript standard dans notre composant React à l’aide de l’état du composant.

Pour notre composant Form, nous pouvons créer un objet d’état étiqueté formData pour suivre la valeur saisie dans les entrées de notre formulaire. Nous le ferons avec l’aide du useState() crochet de fonction qui nous donnera un formData objet et setFormData() fonction que nous pouvons utiliser pour mettre à jour l’état.

function Form() {
  
  const [formData, setFormData] = React.useState({ name: "", email: "" });

  return (
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />

      <input type="submit" value="Submit" />
    </form>
  );
}

Au sein de notre composant, nous pouvons définir deux nouvelles fonctions :

• handleChange(): ceci sera utilisé pour mettre à jour les valeurs des champs de saisie dans notre formulaire.
• handleSubmit(): il sera utilisé pour soumettre le formulaire.

function Form() {
  
  const [formData, setFormData] = React.useState({ name: "", email: "" });

  
  function handleChange(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

  
  function handleSubmit(e) {
    e.preventDefault();
    console.log(formData);
  }

  return (
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />

      <input type="submit" value="Submit" />
    </form>
  );
}

Enfin, nous pouvons référencer les objets et fonctions JavaScript de notre composant dans le balisage du composant. C’est parce que nous utilisons JSX (pas HTML traditionnel), et avec JSX nous pouvons utiliser des accolades ({}) pour référencer les valeurs JavaScript directement dans notre balisage.

Dans notre <form> élément, nous aurons l’élément soumettre l’événement déclenche le handleSubmit() fonction dans notre composant. Dans notre <input /> éléments, leurs valeurs feront référence aux valeurs du formData objet d’état et nous aurons leur changement les événements déclenchent handleChange() fonction dans notre composant.

function Form() {
  
  const [formData, setFormData] = React.useState({ name: "", email: "" });

  
  function handleChange(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

  
  function handleSubmit(e) {
    e.preventDefault();
    console.log(formData);
  }

  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>

      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>

      <input type="submit" value="Submit" />
    </form>
  );
}

Notre <Form /> Le composant se comporte maintenant comme prévu.

Essayez ce qui précède sur Stackblitz ici.

Notre formulaire écrit en React se comporte presque de la même manière que le formulaire que nous avons créé précédemment avec JavaScript et HTML standard. Cependant, il existe une distinction clé quant à la manière dont nous avons mis en œuvre chaque formulaire. Avec JavaScript et HTML standard, nous avons utilisé des sélecteurs de requêtes et des écouteurs d’événements pour ajouter de l’interactivité à notre formulaire. Avec React, nous y sommes parvenus en construisant notre logique JavaScript dans notre composant puisque les composants nous permettent de coupler HTML et JavaScript ensemble !

Dans les prochaines sections, nous aborderons certains sujets importants à garder à l’esprit lorsque vous travaillez avec des composants React.

Composants de rendu

Les composants peuvent être réutilisés dans une application React. Cela signifie qu’une fois que nous avons créé un composant, nous pouvons l’utiliser à plusieurs endroits dans notre application sans avoir à réécrire le même code plusieurs fois. Cela peut être fait puisque React nous permet d’imbriquer des composants les uns dans les autres. Un composant ressemble à un bloc de construction unique, mais, lorsqu’ils sont regroupés, ils peuvent constituer une application globale.

A titre d’exemple, nous pouvons avoir notre <Form /> composant rendu plusieurs fois dans un composant parent appelé <App />.

function Form() {
  
}

function App() {
  return (
    <div>
      <Form />
      <Form />
      <Form />
    </div>
  );
}

Remarque : React nécessite que tous les JSX renvoyés par un composant soient contenus dans un seul élément !

Le code ci-dessus aura maintenant plusieurs formulaires affichés sur notre page Web.

Essayez ce qui précède sur Stackblitz ici.

Les données ne peuvent circuler que dans un seul sens (parent vers enfant)

Nous avons parlé plus tôt de la façon dont les composants peuvent maintenir et mettre à jour les données en eux-mêmes grâce à un concept appelé état. Les accessoires sont un autre sujet important à comprendre lorsque vous travaillez avec des composants.

Accessoires, abréviation de propriétés, sont utilisées pour transmettre des données d’un composant parent à un composant enfant. Les accessoires sont en lecture seule et les données ne peuvent circuler que dans une seule direction, du parent vers l’enfant. C’est ce qu’on appelle le « flux de données à sens unique » dans React.

Par exemple, disons que nous avons un composant parent appelé <App /> et un composant enfant appelé <Form /> comme nous l’avons vu dans l’exemple ci-dessus. On peut passer l’état du <App /> composant jusqu’au <Form /> composant comme accessoire, et le <Form /> composant peut alors utiliser et mettre à jour ces données.

Dans le <App /> composant, nous pouvons passer l’état en tant qu’accessoires comme celui-ci :

function App() {
  const [formData, setFormData] = React.useState({ name: "", email: "" });

  return (
    <div>
      <Form formData={formData} setFormData={setFormData} />
    </div>
  );
}

Et dans le <Form /> composant, nous pouvons accéder aux accessoires en tant qu’arguments passés dans la fonction :

function Form({ formData, setFormData }) {
  function handleChange(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit} autoComplete="off">
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>

      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>

      <input type="submit" value="Submit" />
    </form>
  );
}

Dans cet exemple, le <App /> le composant transmet le formData objet d’état et le setFormData() fonctionner comme des accessoires pour le <Form /> composant. Le <Form /> Le composant utilise les données prop pour mettre à jour les valeurs des champs d’entrée et répondre aux interactions de l’utilisateur.

Essayez ce qui précède sur Stackblitz ici.

Notre application se comporte comme avant, mais notre <Form /> Le composant met désormais à jour l’état de son parent et non le sien.

Il est important de toujours se rappeler que le flux de données est toujours à sens unique, du parent à l’enfant. React le fait pour s’assurer que l’état de l’application est prévisible et facile à déboguer.

Re-rendu des composants

React utilise également un concept appelé « re-rendu » pour mettre à jour la vue du composant lorsque l’état ou les accessoires du composant ont changé. Lorsque l’état ou les accessoires d’un composant sont mis à jour, React restituera ce composant et tous ses composants enfants à refléter les changements dans la vue.

Nous pouvons essayer d’en voir un exemple dans notre précédent <Form /> composant. Supposons que lorsque le formulaire est soumis, nous déclenchons le setFormData() fonction pour réinitialiser les propriétés d’état du formulaire sur des chaînes vides.

function Form() {
  const [formData, setFormData] = React.useState({ name: "", email: "" });

  
  

  function handleSubmit(e) {
    

    
    setFormData({ name: "", email: ""})
  }

  return (
    
  )
}

Avec ce changement, nous remarquerons que notre formulaire est effacé au moment où l’utilisateur clique sur le Submit bouton.

Essayez ce qui précède sur Stackblitz ici.

Notre composant React restitue le moment où son état est mis à jour. Cela permet des mises à jour rapides et fluides de l’interface utilisateur, sans avoir besoin de manipulation manuelle du DOM !

Ce processus de re-rendu est efficace et optimisé, ne mettant à jour que les composants qui ont changé, plutôt que de re-rendre l’intégralité de l’application.

KendoRéagir

Nous avons vu comment un composant React peut être créé en passant par un exemple de construction d’un élément de formulaire simple. Les composants React peuvent être utilisés pour afficher toutes sortes d’éléments HTML, notamment :

• Boutons
• Dialogues
• Sections
• Texte
• Images
• Liens
• Etc.

La façon dont nous structurons et construisons les composants dépend du cas d’utilisation de ce que nous construisons et de la manière dont nous voulons le construire. Cependant, en plus de construire nos propres composants, nous pouvons également utiliser des composants pré-construits à partir de bibliothèques externes. Ces bibliothèques peuvent nous faire gagner beaucoup de temps et d’efforts car elles fournissent souvent une large gamme de composants couramment utilisés que nous pouvons facilement intégrer à notre application.

Une de ces bibliothèques est Progress KendoRéagir, qui est un ensemble de composants d’interface utilisateur professionnels conçus pour React. KendoReact comprend une large gamme de composants tels que Grilles de données, Graphiques, Contributions et beaucoup plus. Ces composants sont conçus pour être hautement personnalisables et faciles à utiliser.

KendoReact propose également un ensemble de thèmes qui nous permettent de changer facilement l’apparence de nos composants, ainsi qu’un ensemble d’outils pour créer des applications réactives et accessibles.

L’utilisation de KendoReact peut nous aider à nous concentrer sur la logique unique de notre application sans avoir à passer du temps à créer des fonctionnalités communes, telles que des formulaires et des grilles de données, à partir de zéro. Assurez-vous de consulter l’officiel Documentation pour plus de détails!

Conclure

Dans cet article, nous avons compris comment les composants sont des éléments de base essentiels à une application React, car ils nous permettent de décomposer notre application en éléments plus petits et réutilisables. Les composants acceptent les accessoires et la sortie JSX et peuvent être imbriqués les uns dans les autres pour créer des interfaces utilisateur complexes. Le flux de données unidirectionnel et les capacités de re-rendu de React facilitent la gestion et la mise à jour de l’état de nos composants. Cela conduit à une base de code plus organisée et efficace.