JS angulaire contre. Réagir JS

Angular et React sont deux des meilleurs frameworks frontaux pour les applications Web. Bien que leurs champs d'application soient légèrement différents (l'un étant une plate-forme de développement, l'autre une bibliothèque), ils sont considérés comme des concurrents majeurs. Il est prudent de supposer que vous pouvez utiliser l'un ou l'autre des frameworks pour développer une application.

La question majeure devient alors: pourquoi choisiriez-vous l'un plutôt que l'autre? Cet article vise à y répondre en développant un formulaire d'inscription simple. Le formulaire s'appuiera uniquement sur les capacités de validation de chaque framework.

Conditions préalables

Pour continuer, vous devriez pouvoir installer React et avoir une compréhension générale de comment fonctionne une application React. Vous devez également savoir comment installer et utiliser angulaire.

La structure de fichier de chaque application

Le formulaire React a la structure de fichier suivante :

Le formulaire angulaire a la structure de fichier suivante :

L'image ci-dessus affiche uniquement la section modifiée de l'application Angular.

À partir des structures de fichiers ci-dessus, vous pouvez voir que les deux frameworks reposent fortement sur l'utilisation de composants.

Création de la logique pour chaque application de formulaire

Chaque application aura le même objectif: le formulaire ne se soumet que si chaque champ de saisie contient des données valides. Le champ nom d'utilisateur est valide s'il contient au moins un caractère. Les deux champs de mot de passe sont valides si leurs valeurs sont identiques.

Angular fournit deux méthodes de création de formulaires: basées sur des modèles et réactives. L'approche réactive permet au développeur de créer des critères de validation personnalisés. L'approche basée sur les modèles est fournie avec des propriétés qui simplifient la validation des formulaires.

React est uniquement capable de développer un formulaire avec une validation personnalisée. Cependant, React est le framework le plus populaire et il a une plus grande communauté, donc de nombreuses bibliothèques de gestion de formulaires sont disponibles pour React. Étant donné que le but ici est d'éviter l'utilisation de bibliothèques externes, l'application React s'appuiera sur une validation personnalisée.

Développement du modèle pour chaque application

Les deux applications s'appuient sur des modèles pour créer la sortie HTML finale.

Modèle HTML angulaire

Le form-signup.component.html fichier contient le code suivant :

<classe div="contenu-formulaire">
<classe de formulaire="formulaire" #monFormulaire="ngForm">
<h1>Complétez le formulaire pour rejoindre notre communauté !</h1>
<classe div="entrées de formulaire">
<étiquette pour="Nom d'utilisateur" classe="étiquette-formulaire">Nom d'utilisateur:</label>
<saisir
 identifiant="Nom d'utilisateur"
 taper="texte"
classe="entrée de formulaire"
 espace réservé="Saisissez votre nom d'utilisateur"
 nom="Nom d'utilisateur"
 ngModel
 obligatoire
 #nom d'utilisateur="ngModel"
 />
<p *ngIf="nom d'utilisateur.invalide && nom d'utilisateur.touché">Nom d'utilisateur (requis</p>
</div>
<classe div="entrées de formulaire">
<étiquette pour="le mot de passe" classe="étiquette-formulaire">Mot de passe:</label>
<saisir
 identifiant="le mot de passe"
 taper="le mot de passe"
 nom="le mot de passe"
classe="entrée de formulaire"
 espace réservé="Entrer le mot de passe"
 ngModel
 obligatoire
 #password="ngModel"
 [(ngModel)]="model.password"
 />
<p *ngIf="mot de passe invalide && mot de passe.touché">Mot de passe requis</p>
</div>
<classe div="entrées de formulaire">
<étiquette pour="mot de passevalider" classe="étiquette-formulaire">Mot de passe:</label>
<saisir
 identifiant="Confirmez le mot de passe"
 taper="le mot de passe"
 nom="Confirmez le mot de passe"
classe="entrée de formulaire"
 espace réservé="Confirmez le mot de passe"
 ngModel
 obligatoire
 #password2="ngModel"
 ngValidateEqual="le mot de passe"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(password2.dirty || password2.touched) && mot de passe2.invalide">
<p *ngIf="password2.hasError('inégal') && mot de passe.valide">
 Mots de passe fairene pascorrespondre
</p>
</div>
</div>
<bouton
classe="form-input-btn"
 taper="nous faire parvenir"
 [désactivé]="myForm.invalid"
 routerLink="/success"
>
 S'inscrire
</button>
</form>
</div>

Modèle HTML de réaction

Le Inscription.js fichier contient le code suivant :

importer Réagir depuis "réagir";
importer utiliserFormulaire depuis "../useForm" ;
importer valider depuis "../validateData" ;
importer "./Inscription.css"
constante Inscription = ({submitForm}) => {
constante {handleChange, valeurs, handleSubmit, erreurs} = useForm( submitForm, valider);
retourner (
<div nom_classe="contenu-formulaire">
<formulaire nom_classe="formulaire" onSubmit={handleSubmit}>
<h1>Complétez le formulaire pour rejoindre notre communauté !</h1>
<div nom_classe="entrées de formulaire">
<étiquette htmlFor="Nom d'utilisateur" NomClasse="étiquette-formulaire">Nom d'utilisateur:</label>
<saisir
 identifiant="Nom d'utilisateur"
 taper="texte"
 nom="Nom d'utilisateur"
 NomClasse="entrée de formulaire"
 espace réservé="Saisissez votre nom d'utilisateur"
 valeur={valeurs.nom d'utilisateur}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</p>}
</div>
<div nom_classe="entrées de formulaire">
<étiquette htmlFor="le mot de passe" NomClasse="étiquette-formulaire"> Mot de passe: </label>
<saisir
 identifiant="le mot de passe"
 taper="le mot de passe"
 nom="le mot de passe"
 NomClasse="entrée de formulaire"
 espace réservé="Entrer le mot de passe"
 valeur={valeurs.motdepasse}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</p>}
</div>
<div nom_classe="entrées de formulaire">
<étiquette htmlFor="mot de passevalider" NomClasse="étiquette-formulaire"> Mot de passe: </label>
<saisir
 identifiant="mot de passevalider"
 taper="le mot de passe"
 nom="mot de passevalider"
 NomClasse="entrée de formulaire"
 espace réservé="Confirmez le mot de passe"
 valeur={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<bouton className="formulaire-entrée-btn" taper="nous faire parvenir">S'inscrire</button>
</form>
</div>
 )
}
exporterdéfaut Inscrivez-vous;

Vous remarquerez que les deux applications utilisent du code HTML de base, à l'exception de quelques différences mineures. Par exemple, l'application Angular utilise l'attribut standard "class" pour identifier les classes CSS. React utilise sa propre propriété personnalisée "className". React transforme cela en attribut standard "class" dans la sortie finale. L'interface utilisateur joue un rôle important dans le succès de toute application. Étant donné que les deux applications utilisent la même structure HTML et les mêmes noms de classe, les deux applications peuvent utiliser la même feuille de style.

Toutes les propriétés non standard dans les modèles ci-dessus concernent la validation.

Création de la validation de formulaire pour l'application angulaire

Pour accéder aux propriétés de validation qui font partie de l'approche basée sur les modèles d'Angular, vous devrez importer le ModuleFormulaires dans le app.module.ts dossier.

Le fichier app.module.ts

importer { NgModule } depuis '@angular/core' ;
importer { ModuleFormulaires } depuis '@angular/forms' ;
importer { NavigateurModule } depuis '@angular/plateforme-navigateur' ;
importer { ValidateEqualModule } depuis 'ng-validate-equal'
importer { AppRoutingModule } depuis './app-routing.module';
importer { Composant d'application } depuis './app.composant' ;
importer { FormSignupComponent } depuis './form-signup/form-signup.component' ;
importer { FormSuccessComponent } depuis './form-success/form-success.component' ;
@NgModule({
 déclarations: [
 Composant d'application,
 FormSignupComponent,
 FormSuccessComponent
 ],
 importations: [
 NavigateurModule,
 Module Formulaires,
 ValidateEqualModule,
 AppRoutingModule
 ],
fournisseurs: [],
amorcer: [ Composant d'application ]
})
exporterclasseModule d'application{ }

En important le ModuleFormulaires dans le fichier ci-dessus, vous avez maintenant accès à une gamme de propriétés de validation différentes. Vous devrez ajouter le ngModel propriété aux champs de saisie du modèle HTML angulaire. Si vous regardez le modèle angulaire ci-dessus, vous verrez que chacun des éléments d'entrée a cette propriété.

Le ModuleFormulaires et ngModel donner au développeur l'accès aux propriétés de validation telles que valide et invalide. La section de paragraphe du modèle HTML angulaire utilise le #username="ngModel" biens. Il produit un avertissement si les données du champ de saisie ne sont pas valides et que l'utilisateur les a modifiées.

Dans le app.module.ts fichier, vous verrez également le ValidateEqualModule, qui compare les deux mots de passe. Pour ce faire, vous devrez créer un objet modèle dans le form-signup.component.ts dossier.

Le fichier form-signup.component.ts

importer { Composant, OnInit } depuis '@angular/core' ;
@Composant({
 sélecteur: 'formulaire d'inscription',
 templateUrl: './form-signup.component.html',
 styleUrl: ['./form-signup.component.css']
})
exporter classeFormSignupComponentmet en oeuvreOnInit{
constructeur() { }
 ngOnInit(): vide {}
 modèle = {
 le mot de passe: nul,
 Confirmez le mot de passe: nul
 };
}

Le deuxième mot de passe dans le modèle HTML angulaire utilise le maquette objet dans le fichier ci-dessus, pour comparer sa valeur au premier mot de passe.

Le désactivé La propriété sur le bouton d'envoi garantit qu'elle reste inactive jusqu'à ce que chaque champ d'entrée contienne des données valides. La soumission du formulaire amène l'utilisateur à une page de réussite à l'aide du routeur d'Angular.

Le fichier app.routing.module.ts

importer { NgModule } depuis '@angular/core' ;
importer {Module Routeur, Routes} depuis '@angular/routeur' ;
importer { FormSignupComponent } depuis './form-signup/form-signup.component' ;
importer { FormSuccessComponent } depuis './form-success/form-success.component' ;
constante routes: Routes = [{
 chemin: '',
 composant: FormSignupComponent
},{
 chemin: 'Succès',
 composant: FormSuccessComponent
}];
@NgModule({
importations: [RouterModule.forRoot (routes)],
exportations: [Module Routeur]
})
exporterclasseAppRoutingModule{ }

Le module de routage ci-dessus contient deux chemins; le chemin principal pour le formulaire et un chemin de réussite pour le composant success.

Le fichier app.component.html

<routeur-prise></router-outlet>

La sortie du routeur dans le fichier de composant d'application ci-dessus permet à un utilisateur de naviguer facilement entre le formulaire d'inscription et forme-succès composants à l'aide d'URL.

Création de la validation de formulaire pour l'application React

exporterdéfautune fonctionvaliderDonnées(valeurs) {
laisser erreurs = {}
si (!valeurs.Nom d'utilisateur.garniture()) {
 erreurs.nom d'utilisateur = "Nom d'utilisateur (requis";
 }
si (!valeurs.le mot de passe) {
 erreurs.motdepasse = "Mot de passe requis";
 }
si (!valeurs.passwordvalidate) {
 erreurs.passwordvalidate = "Mot de passe requis";
 } autresi (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Mots de passe fairene pascorrespondre";
 }
retourner les erreurs;
}

Le validerData.js le fichier contient le code ci-dessus. Il surveille chaque champ d'entrée du formulaire pour s'assurer que chaque champ contient des données valides.

Le fichier useForm.js

importer {useState, useEffect} depuis 'réagir';
constante useForm = (rappel, validation) => {
constante [valeurs, setValues] = useState({
 Nom d'utilisateur: '',
 le mot de passe: '',
 mot de passevalider: ''
 });
constante [erreurs, setErrors] = useState ({});
constante [isSubmitting, setIsSubmitting] = useState (faux)
constante handleChange = e => {
constante {nom, valeur} = e.cible ;
setValeurs({
 ...valeurs,
[Nom]: valeur
 });
 }
constante handleSubmit = e => {
e.preventDefault();
 setErrors (valider(valeurs));
 setIsSubmitting(vrai);
 }
 useEffet(() => {
 if (Object.keys (errors).length 0 && est en train de soumettre) {
 rappeler();
 }
 }, [erreurs, rappel, isSubmitting]);
retourner { handleChange, valeurs, handleSubmit, erreurs } ;
}
exporterdéfaut useForm;

La douane utiliserFormulaire hook ci-dessus détermine si l'utilisateur soumet le formulaire avec succès. Cet événement se produit uniquement si toutes les données du formulaire sont valides.

Le fichier Form.js

importer Réagir depuis "réagir";
importer Inscrivez-vous depuis "./Inscrivez-vous";
importer Succès depuis "./Succès"
importer { useState } depuis "réagir";
constante Formulaire = () => {
constante [isSubmitted, setIsSubmitted] = useState(faux);
une fonctionsoumettre le formulaire() {
 setIsSubmitted(vrai);
 }
retourner (
<div>
 {!isSubmitted? (<Inscription submitForm={submitForm} />): (<Succès />)}
</div>
 )
}
exporterdéfaut Formulaire;

Le Formulaire composant ci-dessus bascule la vue entre le Inscrivez-vous composant et le Succès composant si le formulaire est soumis.

Le fichier App.js

importer Formulaire depuis "./composants/Formulaire" ;
une fonctionApplication() {
retourner (
<div nom_classe="Application">
<Formulaire/>
</div>
 );
}
exporterdéfaut application ;

L'interface utilisateur de l'application angulaire

L'interface utilisateur affiche un formulaire avec une entrée pour le nom d'utilisateur et deux entrées de mot de passe.

Lorsque le formulaire contient des données invalides, les pages affichent des messages d'erreur :

Lorsque le formulaire contient des données valides, l'utilisateur peut le soumettre avec succès :

L'interface utilisateur de l'application React

Lorsque le formulaire contient des données invalides :

Lorsque le formulaire contient des données valides :

Similitudes et différences entre React et Angular

Les frameworks Angular et React sont remarquablement similaires et capables de produire des résultats identiques. Cependant, les outils que vous pourriez utiliser pour obtenir ces résultats seront différents. Angular est une plate-forme de développement qui donne accès à des outils tels qu'un routeur et une bibliothèque de formulaires. React nécessite un peu plus de créativité de la part du développeur pour obtenir les mêmes résultats.

Réagir contre Angular: Pourquoi React est-il tellement plus populaire ?

Lire la suite

A propos de l'auteur