JS angolare vs. Reagisci JS

Angular e React sono due dei migliori framework frontend per applicazioni web. Sebbene i loro ambiti siano leggermente diversi (uno una piattaforma di sviluppo, l'altro una libreria), sono visti come i principali concorrenti. È lecito ritenere che sia possibile utilizzare entrambi i framework per sviluppare un'applicazione.

La domanda principale diventa quindi: perché dovresti scegliere l'uno rispetto all'altro? Questo articolo mira a rispondere sviluppando un semplice modulo di iscrizione. Il modulo si baserà esclusivamente sulle capacità di convalida di ciascun framework.

Prerequisiti

Per continuare, dovresti essere in grado di farlo installare Reagire e avere una comprensione generale di come funziona un'applicazione React. Dovresti anche sapere come installare e usa Angolare.

La struttura dei file di ciascuna applicazione

Il modulo React ha la seguente struttura di file:

La forma angolare ha la seguente struttura di file:

L'immagine sopra mostra solo la sezione modificata dell'applicazione Angular.

Dalle strutture dei file sopra puoi vedere che entrambi i framework fanno molto affidamento sull'uso dei componenti.

Creazione della logica per ogni applicazione del modulo

Ogni domanda avrà lo stesso scopo: il modulo viene inviato solo se ogni campo di input contiene dati validi. Il campo nome utente è valido se contiene almeno un carattere. I due campi password sono validi se i loro valori sono identici.

Angular fornisce due metodi di creazione del modulo: basato su modello e reattivo. L'approccio reattivo consente allo sviluppatore di creare criteri di convalida personalizzati. L'approccio basato su modelli include proprietà che semplificano la convalida dei moduli.

React è in grado di sviluppare solo un modulo con convalida personalizzata. Tuttavia, React è il framework più popolare e ha una comunità più ampia, quindi molte librerie di gestione dei moduli sono disponibili per React. Dato che l'obiettivo qui è evitare l'uso di librerie esterne, l'applicazione React si baserà sulla convalida personalizzata.

Sviluppo del modello per ogni applicazione

Entrambe le applicazioni si basano su modelli per creare l'output HTML finale.

Modello HTML angolare

Il modulo-iscrizione.component.html il file contiene il seguente codice:

<classe div="forma-contenuto">
<classe modulo="modulo" #myForm="ngForm">
<h1>Compila il form per entrare a far parte della nostra community!</h1>
<classe div="form-input">
<etichetta per="nome utente" classe="modulo-etichetta">Nome utente:</label>
<ingresso
 id="nome utente"
 tipo="testo"
classe="form-input"
 segnaposto="Inserire username"
 nome="nome utente"
 ngModel
 necessario
 #nomeutente="ngModel"
 />
<p *ngIf="nome utente.non valido && nomeutente.toccato">Nome utente richiesto</p>
</div>
<classe div="form-input">
<etichetta per="parola d'ordine" classe="modulo-etichetta">Parola d'ordine:</label>
<ingresso
 id="parola d'ordine"
 tipo="parola d'ordine"
 nome="parola d'ordine"
classe="form-input"
 segnaposto="Inserire la password"
 ngModel
 necessario
 #password="ngModel"
 [(ngModel)]="password.modello"
 />
<p *ngIf="password non valida && password.toccata">Password richiesta</p>
</div>
<classe div="form-input">
<etichetta per="convalidare la password" classe="modulo-etichetta">Parola d'ordine:</label>
<ingresso
 id="Conferma password"
 tipo="parola d'ordine"
 nome="Conferma password"
classe="form-input"
 segnaposto="Conferma password"
 ngModel
 necessario
 #password2="ngModel"
 ngValidateEqual="parola d'ordine"
 [(ngModel)]="modello.conferma password"
 />
<div *ngIf="(password2.dirty || password2.toccata) && password2.non valida">
<p *ngIf="password2.hasError('non uguale') && password.valida">
 Le password farenonpartita
</p>
</div>
</div>
<pulsante
classe="form-input-btn"
 tipo="Sottoscrivi"
 [disabilitato]="myForm.non valido"
 routerLink="/success"
>
 Iscriviti
</button>
</form>
</div>

Modello HTML di reazione

Il Iscriviti.js il file contiene il seguente codice:

importare Reagire a partire dal "reagire";
importare usaForm a partire dal "../useForm";
importare convalidare a partire dal "../validateData";
importare "./Registrazione.css"
cost Iscrizione = ({submitForm}) => {
cost {handleChange, valori, handleSubmit, errori} = useForm(submit, validate);
Restituzione (
<div nomeclasse="forma-contenuto">
<modulo nomeclasse="modulo" onSubmit={handleSubmit}>
<h1>Compila il form per entrare a far parte della nostra community!</h1>
<div nomeclasse="form-input">
<etichetta htmlFor="nome utente" nomeclasse="modulo-etichetta">Nome utente:</label>
<ingresso
 id="nome utente"
 tipo="testo"
 nome="nome utente"
 nomeclasse="form-input"
 segnaposto="Inserire username"
 valore={valori.nomeutente}
 onChange={handleChange}
 />
{errori.nomeutente &&<p>{errors.username}</p>}
</div>
<div nomeclasse="form-input">
<etichetta htmlFor="parola d'ordine" nomeclasse="modulo-etichetta"> Parola d'ordine: </label>
<ingresso
 id="parola d'ordine"
 tipo="parola d'ordine"
 nome="parola d'ordine"
 nomeclasse="form-input"
 segnaposto="Inserire la password"
 valore={valori.password}
 onChange={handleChange}
 />
{errore.password &&<p>{errori.password}</p>}
</div>
<div nomeclasse="form-input">
<etichetta htmlFor="convalidare la password" nomeclasse="modulo-etichetta"> Parola d'ordine: </label>
<ingresso
 id="convalidare la password"
 tipo="parola d'ordine"
 nome="convalidare la password"
 nomeclasse="form-input"
 segnaposto="Conferma password"
 valore={valori.passwordvalidate}
 onChange={handleChange}
 />
{errori.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<pulsante nomeclasse="form-input-btn" tipo="Sottoscrivi">Iscriviti</button>
</form>
</div>
 )
}
esportarepredefinito Iscriviti;

Noterai che entrambe le applicazioni utilizzano il codice HTML di base, ad eccezione di alcune piccole differenze. Ad esempio, l'applicazione Angular utilizza l'attributo standard "class" per identificare le classi CSS. React utilizza la propria proprietà "className" personalizzata. React lo trasforma nell'attributo standard "class" nell'output finale. L'interfaccia utente gioca un ruolo importante nel successo di qualsiasi applicazione. Poiché entrambe le applicazioni utilizzano la stessa struttura HTML e nomi di classe, entrambe le applicazioni possono utilizzare lo stesso foglio di stile.

Tutte le proprietà non standard nei modelli sopra si riferiscono alla convalida.

Creazione della convalida del modulo per l'applicazione angolare

Per accedere alle proprietà di convalida che fanno parte dell'approccio basato su modelli di Angular, dovrai importare il file Modulo Forme nel app.module.ts file.

Il file app.module.ts

importare { NgModulo } a partire dal '@angular/core';
importare { Modulo Moduli } a partire dal '@angolare/forme';
importare {BrowserModulo} a partire dal '@angular/browser-piattaforma';
importare {ConvalidaEqualModule} a partire dal 'ng-validate-uguale'
importare {AppRoutingModule} a partire dal './app-routing.module';
importare {AppComponente} a partire dal './app.component';
importare {ComponenteFormSignup} a partire dal './form-signup/form-signup.component';
importare {FormSuccessComponent } a partire dal './form-success/form-success.component';
@NgModule({
 dichiarazioni: [
 Componente dell'app,
 Modulo di iscrizione,
 FormSuccessComponent
 ],
 importazioni: [
 BrowserModulo,
 Modulo moduli,
 ConvalidaEqualModule,
 AppRoutingModule
 ],
fornitori: [],
bootstrap: [AppComponente]
})
esportareclasseModulo App{ }

Importando il Modulo Forme nel file sopra, ora hai accesso a una gamma di diverse proprietà di convalida. Dovrai aggiungere il ngModel proprietà ai campi di input del modello HTML angolare. Se guardi indietro al modello Angular sopra, vedrai che ciascuno degli elementi di input ha questa proprietà.

Il Modulo Forme e ngModel fornire allo sviluppatore l'accesso a proprietà di convalida come valido e non valido. La sezione del paragrafo del modello Angular HTML utilizza il file #nomeutente="ngModel" proprietà. Produce un avviso se i dati nel campo di input non sono validi e l'utente li ha modificati.

Nel app.module.ts file, vedrai anche il ConvalidaEqualModule, che confronta le due password. Per fare ciò, dovrai creare un oggetto modello in modulo-iscrizione.component.ts file.

Il file form-signup.component.ts

importare {Componente, OnInit} a partire dal '@angular/core';
@Componente({
 selettore: 'iscrizione-app-modulo',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
esportare classeModulo di iscrizioneimplementaOnInit{
costruttore() { }
 ngOnInit(): vuoto {}
 modello = {
 parola d'ordine: nullo,
 Conferma password: nullo
 };
}

La seconda password nel modello Angular HTML utilizza modello oggetto nel file sopra, per confrontare il suo valore con la prima password.

Il Disabilitato la proprietà sul pulsante di invio assicura che rimanga inattiva finché ogni campo di input non contiene dati validi. L'invio del modulo porta l'utente a una pagina di successo con l'aiuto del router di Angular.

Il file app.routing.module.ts

importare { NgModulo } a partire dal '@angular/core';
importare {Modulo Router, Percorsi} a partire dal '@angolare/router';
importare {ComponenteFormSignup} a partire dal './form-signup/form-signup.component';
importare {FormSuccessComponent } a partire dal './form-success/form-success.component';
cost rotte: rotte = [{
 il percorso: '',
 componente: FormSignupComponent
},{
 il percorso: 'successo',
 componente: FormSuccessComponent
}];
@NgModule({
importazioni: [RouterModule.forRoot (percorsi)],
esportazioni: [Modulo router]
})
esportareclasseAppRoutingModule{ }

Il modulo di routing sopra contiene due percorsi; il percorso principale per il modulo e un percorso di successo per la componente di successo.

Il file app.component.html

<presa del router></router-outlet>

L'uscita del router nel file del componente dell'app sopra consente a un utente di navigare facilmente tra i file modulo di iscrizione e forma-successo componenti utilizzando gli URL.

Creazione della convalida del modulo per l'applicazione React

esportarepredefinitofunzionevalidateData(valori) {
permettere errori = {}
Se (!valori.nome utente.ordinare()) {
 errori.nomeutente = "Nome utente richiesto";
 }
Se (!valori.parola d'ordine) {
 errori.password = "Password richiesta";
 }
Se (!valori.convalida password) {
 errori.passwordvalidate = "Password richiesta";
 } altroSe (valori.passwordvalidate !== valori.password) {
 errors.passwordvalidate = "Password farenonpartita";
 }
Restituzione errori;
}

Il validateData.js il file contiene il codice sopra. Controlla ogni campo di input nel modulo per garantire che ogni campo contenga dati validi.

Il file useForm.js

importare {useState, useEffect} a partire dal 'reagire';
cost useForm = (richiamata, convalida) => {
cost [valori, setValues] = useState({
 nome utente: '',
 parola d'ordine: '',
 convalida password: ''
 });
cost [errori, setErrors] = useState ({});
cost [isSubmitting, setIsSubmitting] = useState (falso)
cost handleChange = e => {
cost {nome, valore} = e.target;
setValues({
 ...valori,
[nome]: valore
 });
 }
cost handleSubmit = e => {
e.preventDefault();
 setErrors (convalida(valori));
 setInvio(VERO);
 }
 useEffect(() => {
 if (Chiavi.oggetto (errori).lunghezza 0 && sta inviando) {
 richiama();
 }
 }, [errori, richiamata, in corso]);
Restituzione { handleChange, valori, handleSubmit, errori };
}
esportarepredefinito usaForm;

L'usanza usaForm hook sopra determina se l'utente invia correttamente il modulo. Questo evento si verifica solo se tutti i dati all'interno del modulo sono validi.

Il file Form.js

importare Reagire a partire dal "reagire";
importare Iscriviti a partire dal "./Iscriviti";
importare Successo a partire dal "./Successo"
importare {UsaStato} a partire dal "reagire";
cost Modulo = () => {
cost [isSubmitted, setIsSubmitted] = useState(falso);
funzioneinviare il modulo() {
 setIsSubmitted(VERO);
 }
Restituzione (
<div>
 {!è inviato? (<Iscriviti submitForm={submitForm} />): (<Successo />)}
</div>
 )
}
esportarepredefinito Modulo;

Il Modulo componente sopra cambia la vista tra i Iscriviti componente e il Successo componente se il modulo viene inviato.

Il file App.js

importare Modulo a partire dal "./componenti/modulo";
funzioneApp() {
Restituzione (
<div nomeclasse="App">
<Modulo/>
</div>
 );
}
esportarepredefinito App;

L'interfaccia utente dell'applicazione angolare

L'interfaccia utente visualizza un modulo con un input per il nome utente e due input per la password.

Quando il modulo contiene dati non validi, le pagine visualizzano messaggi di errore:

Quando il modulo contiene dati validi, l'utente può inviarlo correttamente:

L'interfaccia utente dell'applicazione React

Quando il modulo contiene dati non validi:

Quando il modulo contiene dati validi:

Somiglianze e differenze tra reazione e angolare

I framework Angular e React sono notevolmente simili e in grado di produrre risultati identici. Tuttavia, gli strumenti che potresti utilizzare per ottenere questi risultati saranno diversi. Angular è una piattaforma di sviluppo che fornisce l'accesso a strumenti come un router e una libreria di moduli. React richiede un po' più di creatività da parte dello sviluppatore per ottenere gli stessi risultati.

Reagire contro Angular: perché React è molto più popolare?

Leggi Avanti

Circa l'autore