Kotni JS vs. Reagirajte JS

Angular in React sta dva najboljša sprednja okvirja za spletne aplikacije. Čeprav so njihovi obsegi nekoliko drugačni (ena je razvojna platforma, druga knjižnica), jih obravnavajo kot glavne konkurente. Varno je domnevati, da lahko uporabite kateri koli okvir za razvoj aplikacije.

Glavno vprašanje potem postane: zakaj bi izbrali enega pred drugim? Namen tega članka je odgovoriti nanj z razvojem preprostega obrazca za prijavo. Obrazec se bo zanašal izključno na zmožnosti potrjevanja vsakega okvira.

Predpogoji

Če želite nadaljevati, bi morali biti sposobni namestite React in imajo splošno razumevanje kako deluje aplikacija React. Prav tako morate vedeti, kako namestiti in uporabite Angular.

Struktura datotek vsake aplikacije

Obrazec React ima naslednjo strukturo datoteke:

Kotna oblika ima naslednjo strukturo datoteke:

Zgornja slika prikazuje samo urejen del aplikacije Angular.

Iz zgornjih datotečnih struktur lahko vidite, da sta oba okvira močno odvisna od uporabe komponent.

Ustvarjanje logike za vsako aplikacijo obrazca

Vsaka vloga bo imela enak namen: obrazec se odda le, če vsako vnosno polje vsebuje veljavne podatke. Polje uporabniškega imena je veljavno, če vsebuje vsaj en znak. Polji za geslo sta veljavni, če sta njuni vrednosti enaki.

Angular ponuja dva načina ustvarjanja obrazcev: s predlogo in reaktivno. Reaktivni pristop omogoča razvijalcu, da ustvari merila za preverjanje po meri. Pristop, ki temelji na predlogah, ima lastnosti, ki poenostavljajo preverjanje veljavnosti obrazca.

React lahko razvije samo obrazec s preverjanjem po meri. Vendar je React bolj priljubljen okvir in ima večjo skupnost, zato je za React na voljo veliko knjižnic za obdelavo obrazcev. Glede na to, da je cilj tukaj izogniti se uporabi zunanjih knjižnic, se bo aplikacija React zanašala na preverjanje po meri.

Razvijanje predloge za vsako aplikacijo

Obe aplikaciji se zanašata na predloge za ustvarjanje končnega izhoda HTML.

Kotna HTML predloga

The form-signup.component.html datoteka vsebuje naslednjo kodo:

<div razred="oblika-vsebina">
<obrazec razred="oblika" #moj obrazec="ngForm">
<h1>Izpolnite obrazec in se pridružite naši skupnosti!</h1>
<div razred="obrazec-vhodi">
<oznaka za="uporabniško ime" razred="nalepka obrazca">Uporabniško ime:</label>
<vnos
 id="uporabniško ime"
 vrsta="besedilo"
razredu="obrazec-input"
 nadomestni znak="Vnesite uporabniško ime"
 ime="uporabniško ime"
 ngModel
 zahtevano
 #uporabniško ime="ngModel"
 />
<p *ngIf="uporabniško ime.neveljavno && uporabniško ime.dotaknil">Zahtevano uporabniško ime</str>
</div>
<div razred="obrazec-vhodi">
<oznaka za="geslo" razred="nalepka obrazca">geslo:</label>
<vnos
 id="geslo"
 vrsta="geslo"
 ime="geslo"
razredu="obrazec-input"
 nadomestni znak="Vnesite geslo"
 ngModel
 zahtevano
 #geslo="ngModel"
 [(ngModel)]="model.geslo"
 />
<p *ngIf="geslo.neveljavno && geslo.dotaknil">zahtevano geslo</str>
</div>
<div razred="obrazec-vhodi">
<oznaka za="geslo potrdi" razred="nalepka obrazca">geslo:</label>
<vnos
 id="potrdi geslo"
 vrsta="geslo"
 ime="potrdi geslo"
razredu="obrazec-input"
 nadomestni znak="Potrdi geslo"
 ngModel
 zahtevano
 #geslo2="ngModel"
 ngValidateEqual="geslo"
 [(ngModel)]="model.confirmpasword"
 />
<div *ngIf="(password2.dirty || password2.touched) && geslo2.neveljavno">
<p *ngIf="password2.hasError('notEqual') && geslo.veljavno">
 Gesla nareditinetekmo
</str>
</div>
</div>
<gumb
razredu="form-input-btn"
 vrsta="predložiti"
 [onemogočeno]="myForm.invalid"
 routerLink="/success"
>
 Prijavite se
</button>
</form>
</div>

React HTML Predloga

The Signup.js datoteka vsebuje naslednjo kodo:

uvoz Reagirajte od "reagirati";
uvoz useForm od "../useForm";
uvoz potrditi od "../validateData";
uvoz "./Signup.css"
konst Prijava = ({submitForm}) => {
konst {handleChange, vrednosti, handleSubmit, napake} = useForm( submitForm, validate);
vrnitev (
<div ime razreda="oblika-vsebina">
<obrazec Ime razreda="oblika" onSubmit={handleSubmit}>
<h1>Izpolnite obrazec in se pridružite naši skupnosti!</h1>
<div ime razreda="obrazec-vhodi">
<oznaka htmlFor="uporabniško ime" ime razreda="nalepka obrazca">Uporabniško ime:</label>
<vnos
 id="uporabniško ime"
 vrsta="besedilo"
 ime="uporabniško ime"
 ime razreda="vnos obrazca"
 nadomestni znak="Vnesite uporabniško ime"
 vrednost={values.username}
 onChange={handleChange}
 />
{errors.username &&<str>{errors.username}</str>}
</div>
<div ime razreda="obrazec-vhodi">
<oznaka htmlFor="geslo" ime razreda="nalepka obrazca"> geslo: </label>
<vnos
 id="geslo"
 vrsta="geslo"
 ime="geslo"
 ime razreda="vnos obrazca"
 nadomestni znak="Vnesite geslo"
 vrednost={values.password}
 onChange={handleChange}
 />
{errors.password &&<str>{errors.password}</str>}
</div>
<div ime razreda="obrazec-vhodi">
<oznaka htmlFor="geslo potrdi" ime razreda="nalepka obrazca"> geslo: </label>
<vnos
 id="geslo potrdi"
 vrsta="geslo"
 ime="geslo potrdi"
 ime razreda="vnos obrazca"
 nadomestni znak="Potrdi geslo"
 vrednost={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<str>{errors.passwordvalidate}</str>}
</div>
<gumb ime razreda="obrazec-input-btn" vrsta="predložiti">Prijavite se</button>
</form>
</div>
 )
}
izvozprivzeto Prijava;

Opazili boste, da obe aplikaciji uporabljata osnovno kodo HTML, razen nekaj manjših razlik. Na primer, aplikacija Angular uporablja standardni atribut »class« za prepoznavanje razredov CSS. React uporablja lastno lastnost "className" po meri. React to pretvori v standardni atribut »razreda« v končnem izhodu. Uporabniški vmesnik igra pomembno vlogo pri uspehu katere koli aplikacije. Ker obe aplikaciji uporabljata isto strukturo HTML in imena razredov, lahko obe aplikaciji uporabljata isto tabelo slogov.

Vse nestandardne lastnosti v zgornjih predlogah se nanašajo na preverjanje veljavnosti.

Ustvarjanje validacije obrazca za aplikacijo Angular

Za dostop do lastnosti preverjanja, ki so del pristopa Angular, ki temelji na predlogah, boste morali uvoziti FormsModule v app.module.ts mapa.

Datoteka app.module.ts

uvoz { NgModule } od '@kotni/jedro';
uvoz {FormsModule} od '@angular/forms';
uvoz {BrowserModule} od '@angular/platform-browser';
uvoz { ValidateEqualModule } od 'ng-validate-equal'
uvoz { AppRoutingModule } od './app-routing.module';
uvoz {AppComponent} od './app.component';
uvoz { FormSignupComponent } od './form-signup/form-signup.component';
uvoz { FormSuccessComponent } od './form-success/form-success.component';
@NgModule({
 izjave: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 uvoz: [
 modul brskalnika,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
ponudniki: [],
bootstrap: [Aplikacijska komponenta]
})
izvozrazreduAppModule{ }

Z uvozom FormsModule v zgornji datoteki imate zdaj dostop do vrste različnih lastnosti preverjanja. Dodati boste morali ngModel lastnost v vnosna polja predloge Angular HTML. Če pogledate nazaj na zgornjo kotno predlogo, boste videli, da ima vsak vhodni element to lastnost.

The FormsModule in ngModel omogoči razvijalcu dostop do lastnosti preverjanja, kot je npr veljaven in neveljavno. Razdelek odstavka predloge Angular HTML uporablja #username=”ngModel” lastnine. Opozori, če so podatki v vnosnem polju neveljavni in jih je uporabnik spremenil.

V app.module.ts datoteko, boste videli tudi ValidateEqualModule, ki primerja obe gesli. Če želite to narediti, boste morali ustvariti modelni predmet v form-signup.component.ts mapa.

Datoteka form-signup.component.ts

uvoz { Komponenta, OnInit } od '@kotni/jedro';
@Komponenta({
 selektor: 'aplikacija-obrazec-prijava',
 templateUrl: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
izvoz razreduFormSignupComponentorodjaOnInit{
konstruktor() { }
 ngOnInit(): nična {}
 model = {
 geslo: nič,
 potrdi geslo: nič
 };
}

Drugo geslo v predlogi Angular HTML uporablja model predmet v zgornji datoteki, da primerjate njegovo vrednost s prvim geslom.

The onemogočeno lastnost na gumbu za pošiljanje zagotavlja, da ostane neaktivna, dokler vsako vnosno polje ne vsebuje veljavnih podatkov. Oddaja obrazca uporabnika pripelje na stran o uspehu s pomočjo usmerjevalnika Angular.

Datoteka app.routing.module.ts

uvoz { NgModule } od '@kotni/jedro';
uvoz { RouterModule, Routes } od '@kotni/usmerjevalnik';
uvoz { FormSignupComponent } od './form-signup/form-signup.component';
uvoz { FormSuccessComponent } od './form-success/form-success.component';
konst poti: Poti = [{
 pot: '',
 komponenta: FormSignupComponent
},{
 pot: 'uspeh',
 komponenta: FormSuccessComponent
}];
@NgModule({
uvoz: [RouterModule.forRoot (poti)],
izvoza: [Modul usmerjevalnika]
})
izvozrazreduAppRoutingModule{ }

Zgornji usmerjevalni modul vsebuje dve poti; glavna pot za formo in pot uspeha za komponento uspeha.

Datoteka app.component.html

<usmerjevalnik-izhod></router-outlet>

Vtičnica usmerjevalnika v zgornji datoteki komponente aplikacije omogoča uporabniku enostavno krmarjenje med obrazec-prijava in forma-uspeh komponente z uporabo URL-jev.

Ustvarjanje validacije obrazca za aplikacijo React

izvozprivzetofunkcijovalidateData(vrednote) {
pustiti napake = {}
če (!vrednote.uporabniško ime.trim()) {
 napake.uporabniško ime = "Zahtevano uporabniško ime";
 }
če (!vrednote.geslo) {
 napake.geslo = "Zahtevano geslo";
 }
če (!vrednote.passwordvalidate) {
 errors.passwordvalidate = "Zahtevano geslo";
 } drugoče (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Gesla nareditinetekmo";
 }
vrnitev napake;
}

The validateData.js datoteka vsebuje zgornjo kodo. Spremlja vsako vnosno polje v obrazcu, da zagotovi, da vsako polje vsebuje veljavne podatke.

Datoteka useForm.js

uvoz {useState, useEffect} od 'reagirati';
konst useForm = (povratni klic, potrditev) => {
konst [values, setValues] = useState({
 uporabniško ime: '',
 geslo: '',
 potrditev gesla: ''
 });
konst [napake, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (napačno)
konst handleChange = e => {
konst {ime, vrednost} = e.target;
setValues({
 ...vrednote,
[ime]: vrednost
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (preveri (vrednote));
 setIsSubmitting(prav);
 }
 useEffect(() => {
 if (Object.keys (napake).length 0 && jeSubmitting) {
 poklicati nazaj();
 }
 }, [napake, povratni klic, isSubmitting]);
vrnitev { handleChange, values, handleSubmit, errors };
}
izvozprivzeto useForm;

Po navadi useForm kavelj zgoraj določa, ali je uporabnik uspešno oddal obrazec. Ta dogodek se zgodi le, če so vsi podatki v obrazcu veljavni.

Datoteka Form.js

uvoz Reagirajte od "reagirati";
uvoz Prijava od "./Prijava";
uvoz uspeh od "./Uspeh"
uvoz {useState} od "reagirati";
konst Obrazec = () => {
konst [isSubmitted, setIsSubmitted] = useState(napačno);
funkcijopredloži obrazec() {
 setIsSubmitted(prav);
 }
vrnitev (
<razdel>
 {!je predloženo? (<Prijava submitForm={submitForm} />): (<uspeh />)}
</div>
 )
}
izvozprivzeto Oblika;

The Oblika zgornja komponenta preklopi pogled med Prijava komponenta in uspeh komponento, če je obrazec oddan.

Datoteka App.js

uvoz Oblika od "./components/Form";
funkcijoApp() {
vrnitev (
<div ime razreda="App">
<Oblika/>
</div>
 );
}
izvozprivzeto aplikacija;

Uporabniški vmesnik aplikacije Angular

Uporabniški vmesnik prikaže obrazec z enim vnosom za uporabniško ime in dvema vnosoma gesla.

Če obrazec vsebuje neveljavne podatke, se na strani prikažejo sporočila o napakah:

Ko obrazec vsebuje veljavne podatke, ga lahko uporabnik uspešno odda:

Uporabniški vmesnik aplikacije React

Ko obrazec vsebuje neveljavne podatke:

Ko obrazec vsebuje veljavne podatke:

Podobnosti in razlike med Reactom in Angularom

Okvirja Angular in React sta izjemno podobna in lahko dajeta enake rezultate. Vendar se bodo orodja, ki jih lahko uporabite za doseganje teh rezultatov, razlikovala. Angular je razvojna platforma, ki omogoča dostop do orodij, kot sta usmerjevalnik in knjižnica obrazcev. React zahteva od razvijalca malo več kreativnosti, da doseže enake rezultate.

React vs. Angular: Zakaj je React toliko bolj priljubljen?

Preberite Naprej

O avtorju