Comment configurer React.JS sur côté client dans le développement de la pile Mern

Réagir.js est considéré comme le niveau supérieur du développement de la pile Mern. C'est un déclaratif Framework JavaScript utilisé pour développer des applications côté client dynamique. Il vous permet également de créer des interfaces complexes en connectant les composants de vos données à partir du serveur backend, puis en les rendant sous forme de HTML. React excelle également à gérer les interfaces axées sur les données et avec état avec un code minimal et d'autres fonctionnalités telles que la gestion des erreurs, les listes, les formulaires, les événements, que vous attendez d'un cadre Web moderne.

Cet article montrera comment installation le Réagir.js application sur côté client dans Développement de la pile Mern. Alors, commençons!

Note: Assurez-vous que vous avez "Nœud.js"Installé sur votre système. L'installez d'abord avant de sauter dans React.Développement d'applications JS si vous ne l'avez pas déjà.

Comment configurer React.JS sur côté client dans le développement de la pile Mern

Nœud.JS a également un «NPM»Node Package Manager, qui installera tous les packages JavaScript requis dans votre réaction.projet JS. Il comprend également un outil de package de nœud "NPX»Outil que vous pouvez utiliser pour exécuter des packages exécutables.

Pour configurer React.JS sur côté client dans le développement de la pile Mern, vous devez d'abord sélectionner un répertoire pour installer la réaction.Projet basé sur JS. Vous pouvez utiliser le "Invite de commande" dans ce but. Cependant, nous utiliserons le «Code Visual Studio»Terminal, ce qui facilite le fonctionnement avec la réaction.Application JS.

Pour ce faire, premièrement, recherchez le «Code Visual Studio»Application et ouvrez-le:

Dans l'application ouverte, cliquez sur le «Déposer”Option de la barre de menu et sélectionnez"Dossier ouvert" option:

Maintenant, parcourez le dossier où vous voulez placer votre réaction.Fichier lié à l'application JS. Dans notre cas, nous avons sélectionné le «Employee-Mern-Project”Dossier, présent dans le«Disque local (e :)»:

Ensuite, appuyez sur Ctrl + shift + ' Pour ouvrir le terminal de code Visual Studio. Vous pouvez également effectuer l'opération spécifiée à l'aide du menu «Terminal»:

À ce stade, nous sommes tous prêts à configurer la réaction.Application JS dans le développement de la pile Mern. L'exécution du «NPX«Commande avec le«create-react-app"L'option vous aide à créer une réaction.Application JS. Par exemple, le Prédire ci-dessous "NPX«La commande créera un«Mern-Emsystem»Réagir.Application JS qui aura toutes les dépendances requises dans son dossier de projet:

> npx create-react-app Mern-emsystem

Attendez quelques minutes, car l'installation des packages prendra un certain temps:

La sortie sans erreur sous-donnée indique que nous avons réussi à installer le «Mern-Emsystem»Réagir.Application JS:

Le code Visual Studio chargera automatiquement la création de réaction.dossier d'application JS. Maintenant, nous allons apporter quelques modifications dans le «indice.html«Fichier du«Mern-Emsystem»Réagir.Application JS:

Le "indice.html"Fichier de votre réaction.L'application JS ressemblera en quelque sorte à ceci:

Ici, "Application React" représente le "titre" de nôtre "Mern-Emsystem" application:

Nous utiliserons la réaction créée.Application JS pour développer un système de gestion des employés avec Mern Stack. Ainsi, premièrement, nous changerons le titre de notre «Mern-Emsystem»Réagir.Application JS à "Système de gestion des employés"Et enregistrez l'ouverture"indice.html" déposer:

Dans la prochaine étape, nous modifierons le répertoire de travail actuel en «Mern-Emsystem”Utilisation du terminal:

> CD Mern-EMSystem

Maintenant, écrivez le diable "NPM»Commande pour démarrer le développement du serveur Web:

> start npm

Comme vous pouvez le voir sur la sortie que notre «Mern-Emsystem»Le projet est compilé avec succès et prêt à visualiser dans le navigateur:

En tapant le «LocalHost: 3000"Dans la barre d'adresse de notre navigateur, nous verrons l'interface suivante pour le"Mern-Emsystem»Réagir.Application JS:

Vous pouvez également modifier le contenu du «Appliquer.js”Fichier JavaScript pour gérer ou afficher les composants de votre application React:

Par exemple, l'ajout du code suivant dans notre «Appliquer.js«Le fichier enregistrera le«Système de gestion des employés”Contenu à l'intérieur d'un conteneur:

importer './ Application.CSS ';
Function App ()
retour (

Système de gestion des employés

));

Exporter l'application par défaut;

À partir de l'image ci-dessous, vous pouvez voir que l'ajout "Système de gestion des employés”Contenu pour notre réaction.L'application JS est affichée avec succès:

C'était tout au sujet de la procédure de configuration de la réaction.Application JS sur côté client dans le développement de la pile Mern. Vous pouvez faire une personnalisation supplémentaire en fonction de vos exigences.

Conclusion

Réagir.JS est une bibliothèque JavaScript utilisée pour développer le front-end des applications basée sur Mern Stack. Il permet aux utilisateurs de créer des composants et du code d'interface utilisateur dans JavaScript. En raison de sa capacité à gérer le changement rapide des données et à établir une connexion forte avec le back-end, il est couramment utilisé dans le développement des applications de pile Mern. Cet article a démontré la procédure de configuration Réagir.js application sur côté client dans Développement de la pile Mern.