Angular vs React vs Vue – Prise en main


“La seule façon d’apprendre un nouveau langage de programmation est d’y écrire des programmes.”

Dennis Ritchie

Table des matières

  • introduction
  • L’histoire
  • Exigences et Processus d’installation
  • Conclusion

introduction

Cet article fournit un guide étape par étape sur la façon d’installer les trois frameworks / bibliothèques javascript les plus populaires dans le monde du développement Web frontal. De nombreux articles expliquent comment cela est fait, mais dans cet article, j’essaie de diviser les choses de manière précise et concise, vous pouvez toujours vous y référer chaque fois que vous souhaitez installer ou configurer un Réagir, Vue, ou Angulaire application

Comme nous le savons tous, Javascript est le cœur et l’âme du développement web frontend. Pour créer des applications Web complexes, utiliser du javascript vanille n’est probablement pas le bon choix car vous pourriez finir par vous arracher les cheveux.

Pour faciliter les choses et accélérer le développement de produits, une bibliothèque comme jLa requête a été introduite en 2006.

Plus tard, en 2010 UNEngular js a été créé par Google. C’est devenu le premier framework qui a fourni une architecture complète pour l’extrémité avant développement d’applications.

Avance rapide jusqu’à aujourd’hui, et nous avons les 3 grands qui dominent le monde du développement Web frontal (Angular, React et Vue)

Chacun de ces outils est unique et peut remplir efficacement la même fonction. Un fait qui ne peut être ignoré est qu’il y aura toujours un débat pour savoir lequel est le meilleur parmi les trois, mais dans cet article, nous nous concentrons sur la façon de les configurer sur notre machine.

L’histoire

quelle est ton histoire?

Angulaire

Initialement publié par Google le 14 septembre 2016. C’est complètement différent de UNEngular Js qui a été créé des années plus tôt par l’équipe Google. Angulaire a été créé pour servir d’alternative à UNEngular Js qui a été placé sur le support à long terme jusqu’à 31 décembre 2021.

À la première sortie, Angulaire s’appelait initialement “Angular 2“. Cependant, cela a causé beaucoup de confusion, et le nom Angulaire sans aucun suffixe a été choisi.

Angulaire est écrit en Typescript, qui est un sur-ensemble de Javascript. le Angulaire L’équipe s’engage à faire une version majeure une fois tous les 6 mois.

À partir d’aujourd’hui, la dernière version est la version 10 qui a été publiée le 24 juin 2020.

Réagir Js

Aussi connu sous le nom Réagir ou React.js. C’est une bibliothèque JavaScript open source. Réagir a été créé par Jordan Walke, ingénieur logiciel chez Facebook.

Initialement publié le 29 mai 2013, il est maintenu par Facebook et une communauté de développeurs.

Réagir est écrit en Javascript et est considéré comme le plus populaire et le plus utilisé entre Angulaire et Vue.

La version stable actuelle est la 16.13.1, publiée le 19 mars 2020.

Vue.js

Aussi appelé Vue est également une bibliothèque JavaScript open source tout comme pour React. Il utilise le model – vue – ViewModel structure.

Créé par Evan vous, il est sorti en février 2014. Le créateur Evan vous travaillé sur UNEngular Js à l’origine chez Google.

Vue Js est écrit en Javascript. La version stable actuelle est le 20 août 2020.

Exigences et Processus d’installation

installation de panneaux solaires

Angulaire

Nous allons installer et exécuter l’application Angular en 5 étapes faciles:

Étape 1: Téléchargez Node.js

Pour utiliser Angular, la première étape consiste à installer Node.js. Node.js est un runtime JavaScript asynchrone piloté par les événements, Node.js est conçu pour créer des applications réseau évolutives.

L’installation de Node s’accompagne de NPM(Gestionnaire de packages de nœuds). NPM est l’outil que nous utiliserons dans le terminal pour installer d’autres bibliothèques tierces nécessaires pour exécuter une application Angular.

Si vous n’avez pas installé Node.js sur votre machine, vous pouvez le faire ici

Étape 2: Installez la CLI angulaire

Une fois Node.js installé sur votre machine, cette étape consiste à installer la CLI angulaire. Nous pouvons le faire en ouvrant le terminal et en exécutant la commande ci-dessous:

npm install -g @angular/cli

Une fois le processus d’installation terminé, vous pouvez taper ng v dans le terminal pour confirmer s’il a été installé avec succès. Cette commande affichera la version d’Angular que vous avez exécutée sur votre machine.

Étape 3: créer un nouveau projet angulaire

Maintenant que la CLI angulaire a été installée, nous avons maintenant accès au ng commande dans notre terminal.

Pour créer un nouveau projet, nous pouvons exécuter la commande ci-dessous:

ng new my-first-project

ng représente la commande angulaire, Nouveau représente le fait que c’est un nouveau projet et mon-premier-projet signifie le nom de notre projet.

Une fois le processus d’installation terminé et les dépendances et fichiers nécessaires téléchargés, la prochaine chose à faire est de naviguer dans le répertoire du projet. Nous pouvons le faire en exécutant le cd mon-premier-projet commande dans le terminal.

Étape 4: Exécutez l’application

Pour exécuter l’application et l’afficher sur le navigateur, nous exécuterons une autre commande à partir du terminal, illustrée ci-dessous:

ng serve --open

Une fois cette commande exécutée avec succès, un onglet devrait s’ouvrir dans le navigateur affichant le Angulaire gabarit passe-partout

Nous venons d’exécuter avec succès une application Angular. Par défaut, notre application fonctionnera sur localhost: 4200

Une addition

Pour préparer et regrouper notre application pour la production, nous pouvons exécuter le ng build –prod commande dans le terminal. Cela minimisera et regroupera notre application, la rendant prête pour le déploiement.

React.Js

Nous travaillerons sur deux manières différentes de mettre en place un projet React. Le premier sera fait en utilisant le create-react-app commande, et le second sera configuré en utilisant Webpack et Babel.

Utilisation de la commande Create-react-app

Cela se fera en deux (2) étapes faciles.

Étape 1: Installez Create-react-app

Pour avoir accès au commande create-react-app, nous devons l’installer sur le terminal en utilisant npm. La commande à cela est indiquée ci-dessous:

npm i create-react-app

Étape 2: créer un projet avec NPX

Nous pouvons maintenant créer un nouveau projet en utilisant npx. npx est un outil de lancement de package fourni avec npm version 5.2 et supérieure. Il nous permet de créer un nouveau projet React depuis le terminal en exécutant la commande ci-dessous:

npx create-react-app my-first-app
cd my-first-app npm start

Ci-dessus, nous avons créé un nouveau projet appelé my-first-app , nous nous sommes déplacés dans le répertoire de projet nouvellement créé et avons démarré le projet avec npm.

Par défaut, notre projet fonctionnera sur localhost: 3000 dans le navigateur. Pour préparer et regrouper notre application pour la production, nous pouvons exécuter le npm run build commande dans le terminal.

Utilisation de Webpack et Babel

Cela implique un processus beaucoup plus long pour exécuter React. Cela se fera en 7 étapes.

Étape 1: créer le dossier de projet

Pour installer React en utilisant cette méthode, nous allons créer un nouveau dossier pour installer toutes les dépendances requises. Nous pouvons le faire avec la commande ci-dessous:

C:Usersuser> mkdir my-first-react-app C:Usersuser>

cd my-first-react-app 

Étape 2: Package.JSON

Pour installer des dépendances, un package.json Le fichier doit être installé dans le projet. Pour ce faire, nous exécuterons le npm init commande dans notre répertoire de projet, depuis le terminal.

C:Usersusermy-first-react-app> npm init

La commande ci-dessus nécessitera que certaines informations telles que le nom, l’auteur, la version de la description, etc. soient remplies dans le terminal. Un exemple de ceci peut être trouvé ci-dessous:

Vous pouvez ignorer le remplissage de toutes les données ci-dessus en ajoutant un -y drapeau à la npm init commander.

npm init -y

Étape 3: Installez React et React Dom

Donc, pour que React fonctionne sur notre projet, nous devons installer React et React Dom. Pour ce faire, nous allons exécuter la commande ci-dessous:

C:Usersusermy-first-react-app> npm install react
C:Usersusermy-first-react-app> npm install react-dom

Étape 4: Installez Webpack et Babel

Commençons par Webpack. Webpack va nécessiter l’installation de trois éléments.

le CLI Webpack, les Serveur de développement Webpack, et Webpack lui-même. Tout cela peut être fait avec la commande ci-dessous:

C:Usersusermy-first-react-app>npm install webpack

webpack-dev-server webpack-cli --save 

La prochaine étape à installer est Babel. Certaines des dépendances Babel que nous allons installer incluent:

  • Présélection Babel env – Ce package permet la compilation de Javascript moderne jusqu’à ES5.
  • Babel preset réagit – Ce package permet la compilation de JSX en Javascript
  • Chargeur Babel – Ce package permet de transpiler des fichiers JavaScript en utilisant Babel et webpack.
  • Babel-noyau – Nous donne accès à l’API Node.

Maintenant, installons-les en exécutant la commande ci-dessous:

Babel est maintenant installé!

Étape 5: Créez tous les fichiers nécessaires

Nous devons créer les fichiers nécessaires à la configuration et au démarrage de l’application. Ces fichiers vont être créés dans le dossier racine (ma-première-application-de-réaction) de l’application. Ils comprennent:

  1. Index.html
  2. App.js
  3. Index.js
  4. Webpack.config.js

Étape 6: Configurer les règles, les chargeurs et les serveurs de développement

L’étape suivante consiste à ouvrir les fichiers et à terminer la configuration. Nous commençons par le index.html fichier.

index.html

La chose importante à prendre en compte dans notre index.html file est le div avec l’id appelé app.

App.js

C’est la partie de notre code qui sera affichée dans le navigateur. Lorsque nous exécutons finalement l’application, nous devrions voir un Bonjour le monde texte.

index.js

le App.js est importé dans le index.js fichier, cela nous permet de le rendre dans le navigateur.

Webpack.config.js

À partir du code ci-dessus, nous définissons le point d’entrée de l’application comme index.js. Ensuite, le chemin de sortie est l’endroit où nous allons regrouper l’application pour la production. Cela se fera à l’intérieur du dist dossier.

Dans l’objet mode, nous pouvons définir l’application à regrouper en mode production ou développement. Cela se fera dans le package.json fichier

Étape 7: Setup Package.JSON File

Lors de l’ouverture du package.json fichier, vous pouvez rencontrer “test” “echo ” Erreur: aucun test spécifié “&& exit 1” à l’intérieur de l’objet scripts. Vous devez l’effacer et publier le code ci-dessus dans l’objet scripts.

dans le build-for-windows objet, nous configurons notre application pour qu’elle s’exécute développement mode. Nous pouvons le changer en production lorsque nous sommes prêts à déployer l’application.

Maintenant, à la racine de notre application, nous pouvons démarrer notre application avec la commande ci-dessous, comme ceci:

C:Usersusermy-first-react-app>npm start

L’application fonctionnera sur http: // localhost: 8080 par défaut. Si nous allons à cette adresse sur le navigateur, nous devrions voir Bonjour le monde sur l’écran.

Pour générer le bundle nécessaire au déploiement, nous pouvons exécuter la commande ci-dessous dans le terminal.

C:Usersusermy-first-react-app>npm run build-for-windows

Alors voilà comment Réagir peut être créé en utilisant Babel et Webpack.

Vue.JS

Nous mettrons en place Vue avec le Vue CLI. Cela se fera en utilisant fil en 2 étapes faciles.

Remarque: Si vous n’avez pas de fil installé sur votre machine, vous pouvez l’installer avec npm en exécutant le npm je fil commander.

Étape 1: Installez la CLI Vue

Nous faisons cela en exécutant la commande ci-dessous:

yarn install -g vue-cli

Avec cela, nous avons installé Vue globalement sur notre machine.

Étape 2: créer un nouveau projet Vue

Pour terminer cette étape, nous exécutons la commande ci-dessous:

vue create first-vue-app

Cela affichera les options ci-dessous dans le terminal.

Vue CLI v4.5.6 Please pick a preset: 
(Use arrow keys) 
> default (babel, eslint)  
Manually select features

Pour garder les choses à un niveau de base, nous pouvons sélectionner l’option par défaut.

Étape 2: Exécutez l’application Vue

Pour exécuter l’application, nous devons nous déplacer dans le répertoire du projet qui est first-Vue-app avec la commande ci-dessous:

cd first-vue-app yarn serve

Désormais, le projet deviendra accessible à http: // localhost: 8080 / par défaut dans votre navigateur!

Conclusion

C’est donc à peu près tout ce qui est nécessaire pour mettre en place un Angulaire, Réagir, ou Vue application. Si vous rencontrez un problème pendant le processus d’installation, n’hésitez pas à laisser un commentaire, je ne manquerai pas d’y répondre.

Close Menu