Composants sont les éléments constitutifs de l'application React et ont un élément indépendant de certaines fonctionnalités que vous pouvez réutiliser dans votre projet frontal. Le fichier composant peut comprendre les fonctions et classes JavaScript simples; Cependant, vous pouvez les utiliser comme éléments HTML personnalisés. Les composants sont utilisés pour ajouter des menus, des boutons ou tout autre contenu de page à votre réaction.JS front-end, et il est également utilisé pour inclure la marque et les informations d'état.

Cet article montrera comment créer un composant dans Réagir.js. Alors, commençons!

Comment créer un composant dans React.js

En réaction.JS, composants affichent ce que nous voulons voir sur notre application React. Un composant de réact peut prendre le «Accessoires» ou les propriétés comme paramètres et renvoyez une hiérarchie de vue pour afficher à l'aide de la méthode de rendu. Le code ajouté dans la méthode de rendu définira ce que vous voulez afficher à l'écran. Réagir.JS prend le corps de la méthode de rendu puis affiche les résultats en fonction. Les applications React peuvent mettre à jour efficacement, puis renforcer les composants ajoutés lorsque les données changent.

Avant de créer un composant dans notre réaction.Application JS, premièrement, nous vous montrerons comment l'interface de notre réaction.L'application JS ressemble à:

À cette fin, nous passerons à notre réaction.Dossier d'application JS en exécutant la commande suivante dans le terminal:

> CD Mern-EMSystem

À ce stade, vous devez vous assurer que votre réaction.L'application JS s'exécute sur le port spécifié. Si ce n'est pas le cas, écrivez la commande ci-dessous pour démarrer votre serveur Web frontal:

> start npm

Voici l'interface de base de notre application de système de gestion des employés:

Maintenant, ouvrez une nouvelle fenêtre de terminal en cliquant sur le bouton «+», qui est mis en surbrillance dans l'image ci-dessous:

Nous utiliserons la nouvelle fenêtre de terminal pour installer le framework Bootstrap CSS pour faciliter le style:

> npm installer bootstrap

Dans l'étape suivante, ouvrez le «Application.JS " Fichier JavaScript, situé dans le «SRC» annuaire:

Maintenant, importez le "amorcer" Fichier CSS en ajoutant les lignes suivantes:

Importer "bootstrap / dist / css / bootstrap.min.CSS ";

Presse «Ctrl + S» pour enregistrer les modifications supplémentaires, puis créer un nouveau "Composants" dossier dans le «SRC» dossier:

Après cela, nous créerons un nouveau "Instructions.JS " Fichier de composant:

Ensuite, ouvrez le créé "Instructions.JS " fichier et ajouter le code ci-dessous:

Notre idée est de créer un composant personnalisé qui affichera un titre, une description et une image liée à notre système de gestion des employés réagir.Application JS. À cette fin, premièrement, nous importerons le "Réagir" et son "Composant" classe et le «EMS.png ” image, que nous voulons ajouter à ce composant d'instructions. Le "Composant" La classe de base peut ensuite être étendue pour créer les composants requis.

Le "Composant" La classe a diverses fonctions qui peuvent être utilisées pour améliorer la fonctionnalité de la méthode créée et "rendre()" est une telle méthode. "rendre()" est utilisé pour renvoyer le code JSX que vous souhaitez afficher dans le navigateur:

Importer React, Component depuis 'react';
Importer des EMS à partir de './ EMS.png ';
Les instructions de classe d'exportation étendent le composant
rendre()
retour(

Projet Employee Mern

Ceci est un système de gestion des employés

;

)


Exporter les instructions par défaut;

Après avoir ajouté le code dans le "Instruction.JS ", presse «Ctrl + S» pour l'enregistrer puis ouvrir votre «Application.JS " déposer:

Votre réaction créée.Le composant JS ne sera pas utile tant que vous ne l'avez pas importé dans votre «Application.JS " fichier et envelopper les composants créés avec les supports d'angle.

Ici, nous avons importé le "Instructions" composant et ajouté le composant spécifié comme "" dans le "retour()" fonction du App ():

importer réagir à partir de «réagir»;
Importer "bootstrap / dist / css / bootstrap.min.CSS ";
Importer des instructions de './ composants / instructions »;
Function App ()
retour (


));

Exporter l'application par défaut;

Après l'importation du "Instructions" composant, nous exécuterons notre réaction.Application JS:

> start npm

De la sortie, vous pouvez voir que notre "Instructions" Le composant affiche avec succès le contenu ajouté:

Conclusion

En réaction.JS, les composants sont les éléments autonomes qui peuvent être réutilisés sur une page. Ils affichent ce que nous voulons voir sur notre application React. Vous pouvez également décomposer des applications complexes en petites sections qui peuvent être plus faciles à concevoir et à gérer à l'aide de composants. Cet article a démontré comment créer un composant dans le Réagir.js application. De plus, la procédure de création et d'utilisation d'un composant personnalisé vous est également fournie.