Kampinis JS vs. Reaguoti JS

Angular ir React yra dvi populiariausios žiniatinklio programų sąsajos sistemos. Nors jų taikymo sritis šiek tiek skiriasi (viena yra kūrimo platforma, kita biblioteka), jie laikomi pagrindiniais konkurentais. Galima daryti prielaidą, kad kurdami programą galite naudoti bet kurią sistemą.

Tada kyla pagrindinis klausimas: kodėl rinktumėtės vieną, o ne kitą? Šiuo straipsniu siekiama į tai atsakyti sukuriant paprastą registracijos formą. Forma priklausys tik nuo kiekvienos sistemos patvirtinimo galimybių.

Būtinos sąlygos

Norėdami tęsti, turėtumėte galėti įdiegti React ir turi bendrą supratimą kaip veikia React programa. Taip pat turėtumėte žinoti, kaip įdiegti ir naudokite kampinį.

Kiekvienos programos failo struktūra

Reagavimo forma turi tokią failų struktūrą:

Kampinė forma turi tokią failo struktūrą:

Aukščiau pateiktame paveikslėlyje rodoma tik redaguota „Angular“ programos dalis.

Iš aukščiau pateiktų failų struktūrų matote, kad abi sistemos labai priklauso nuo komponentų naudojimo.

Logikos kūrimas kiekvienai formos programai

Kiekviena paraiška turi tą patį tikslą: forma pateikiama tik tuo atveju, jei kiekviename įvesties lauke yra tinkamų duomenų. Vartotojo vardo laukas galioja, jei jame yra bent vienas simbolis. Du slaptažodžio laukai galioja, jei jų reikšmės yra identiškos.

Angular siūlo du formos kūrimo būdus: šabloną ir reaktyvųjį. Reaktyvusis metodas leidžia kūrėjui sukurti pasirinktinius patvirtinimo kriterijus. Šablonu pagrįstas metodas turi savybių, kurios supaprastina formos patvirtinimą.

„React“ gali sukurti formą tik su tinkintu patvirtinimu. Tačiau „React“ yra populiaresnė sistema ir ji turi didesnę bendruomenę, todėl „React“ yra daug formų tvarkymo bibliotekų. Atsižvelgiant į tai, kad čia siekiama išvengti išorinių bibliotekų naudojimo, programa „React“ pasikliaus pasirinktiniu patvirtinimu.

Kiekvienos programos šablono kūrimas

Abi programos remiasi šablonais, kad sukurtų galutinę HTML išvestį.

Kampinis HTML šablonas

The form-signup.component.html faile yra toks kodas:

<div klasė ="forma-turinys">
<forma klasė ="forma" #manoForma="ngForma">
<h1>Norėdami prisijungti prie mūsų bendruomenės, užpildykite formą!</h1>
<div klasė ="formos įvestys">
<etiketė ="Vartotojo vardas" klasė ="formos etiketė">Vartotojo vardas:</label>
<įvestis
 id="Vartotojo vardas"
 tipas ="tekstą"
klasė="formos įvestis"
 vietos rezervuaras="Įveskite vartotojo vardą"
 vardas ="Vartotojo vardas"
 ngModelis
 reikalaujama
 #naudotojo vardas="ngModelis"
 />
<p *ngIf="vartotojo vardas.negaliojantis && vartotojo vardas.palietė">Reikalingas vartotojo vardas</p>
</div>
<div klasė ="formos įvestys">
<etiketė ="Slaptažodis" klasė ="formos etiketė">Slaptažodis:</label>
<įvestis
 id="Slaptažodis"
 tipas ="Slaptažodis"
 vardas ="Slaptažodis"
klasė="formos įvestis"
 vietos rezervuaras="Įvesti slaptažodį"
 ngModelis
 reikalaujama
 #slaptažodis="ngModelis"
 [(ngModelis)]="modelis.slaptažodis"
 />
<p *ngIf="slaptažodis.negaliojantis && slaptažodis.palietė">reikalingas slaptažodis</p>
</div>
<div klasė ="formos įvestys">
<etiketė ="patvirtinti slaptažodį" klasė ="formos etiketė">Slaptažodis:</label>
<įvestis
 id="patvirtinti slaptažodį"
 tipas ="Slaptažodis"
 vardas ="patvirtinti slaptažodį"
klasė="formos įvestis"
 vietos rezervuaras="Patvirtinti slaptažodį"
 ngModelis
 reikalaujama
 #password2="ngModelis"
 ngValidateEqual="Slaptažodis"
 [(ngModelis)]="modelis.patvirtinti slaptažodį"
 />
<div *ngIf="(password2.dirty || password2.touched) && slaptažodis2.negaliojantis">
<p *ngIf="password2.hasError('nėra lygus') && slaptažodis.galiojantis">
 Slaptažodžiai darytinerungtynės
</p>
</div>
</div>
<mygtuką
klasė="form-input-btn"
 tipas ="Pateikti"
 [išjungta]="manoForma.negaliojantis"
 routerLink="/success"
>
 Registruotis
</button>
</form>
</div>

Reaguoti HTML šabloną

The Registracija.js faile yra toks kodas:

importuoti Reaguoti iš „reaguoti“;
importuoti naudojimo forma iš "../useForm";
importuoti patvirtinti iš "../validateData";
importuoti "./Signup.css"
konst Registracija = ({submitForm}) => {
konst {handleChange, value, handleSubmit, errors} = useForm( PateiktiForm, patvirtinti);
grąžinti (
<div className="forma-turinys">
<form className="forma" onSubmit={handleSubmit}>
<h1>Norėdami prisijungti prie mūsų bendruomenės, užpildykite formą!</h1>
<div className="formos įvestys">
<etiketė htmlFor="Vartotojo vardas" className="formos etiketė">Vartotojo vardas:</label>
<įvestis
 id="Vartotojo vardas"
 tipas ="tekstą"
 vardas ="Vartotojo vardas"
 className="forma-įvestis"
 vietos rezervuaras="Įveskite vartotojo vardą"
 value={values.username}
 onChange={handleChange}
 />
{errors.username &&<p>{errors.username}</p>}
</div>
<div className="formos įvestys">
<etiketė htmlFor="Slaptažodis" className="formos etiketė"> Slaptažodis: </label>
<įvestis
 id="Slaptažodis"
 tipas ="Slaptažodis"
 vardas ="Slaptažodis"
 className="forma-įvestis"
 vietos rezervuaras="Įvesti slaptažodį"
 value={values.password}
 onChange={handleChange}
 />
{errors.password &&<p>{errors.password}</p>}
</div>
<div className="formos įvestys">
<etiketė htmlFor="patvirtinti slaptažodį" className="formos etiketė"> Slaptažodis: </label>
<įvestis
 id="patvirtinti slaptažodį"
 tipas ="Slaptažodis"
 vardas ="patvirtinti slaptažodį"
 className="forma-įvestis"
 vietos rezervuaras="Patvirtinti slaptažodį"
 value={values.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<mygtukas className="forma-įvestis-btn" tipas ="Pateikti">Registruotis</button>
</form>
</div>
 )
}
eksportuotinumatytas Registruotis;

Pastebėsite, kad abi programos naudoja pagrindinį HTML kodą, išskyrus kai kuriuos nedidelius skirtumus. Pavyzdžiui, „Angular“ programa naudoja standartinį „class“ atributą, kad nustatytų CSS klases. „React“ naudoja savo pasirinktinę „className“ ypatybę. „React“ paverčia tai standartiniu „klasės“ atributu galutinėje išvestyje. UI vaidina svarbų vaidmenį bet kurios programos sėkmei. Kadangi abi programos naudoja tą pačią HTML struktūrą ir klasių pavadinimus, abi programos gali naudoti tą patį stiliaus lapą.

Visos anksčiau pateiktuose šablonuose pateiktos nestandartinės savybės yra susijusios su patvirtinimu.

Kampinės programos formos patvirtinimo kūrimas

Norėdami pasiekti patvirtinimo ypatybes, kurios yra „Angular“ šablonu pagrįsto metodo dalis, turėsite importuoti FormsModule viduje konors app.module.ts failą.

Failas app.module.ts

importuoti { NgModule } iš '@kampinis/šerdis';
importuoti { FormsModule } iš '@kampinis/formos';
importuoti { Naršyklės modulis } iš '@kampinė/platforminė naršyklė';
importuoti { ValidateEqualModule } iš „ng-validate-equal“
importuoti { AppRoutingModule } iš './app-routing.module';
importuoti { AppComponent } iš './app.component';
importuoti { FormSignupComponent } iš './form-signup/form-signup.component';
importuoti { FormSuccessComponent } iš './form-success/form-success.component';
@NgModule({
 deklaracijos: [
 AppComponent,
 FormSignupComponent,
 FormSuccessComponent
 ],
 importas: [
 Naršyklės modulis,
 FormsModule,
 ValidateEqualModule,
 AppRoutingModule
 ],
teikėjai: [],
bootstrap: [AppComponent]
})
eksportuotiklasėAppModule{ }

Importuodami FormsModule aukščiau esančiame faile dabar turite prieigą prie įvairių patvirtinimo savybių. Jums reikės pridėti ngModelis ypatybę į kampinio HTML šablono įvesties laukus. Jei pažvelgsite į anksčiau pateiktą kampinį šabloną, pamatysite, kad kiekvienas įvesties elementas turi šią savybę.

The FormsModule ir ngModelis suteikti kūrėjui prieigą prie patvirtinimo ypatybių, tokių kaip galioja ir negaliojančiais. Kampinio HTML šablono pastraipos skiltyje naudojama #username="ngModel" nuosavybė. Jis pateikia įspėjimą, jei įvesties lauke esantys duomenys neteisingi ir vartotojas juos pakeitė.

Viduje konors app.module.ts failą, taip pat matysite PatvirtinkiteEqualModule, kuriame lyginami du slaptažodžiai. Norėdami tai padaryti, turėsite sukurti modelio objektą form-signup.component.ts failą.

Failas form-signup.component.ts

importuoti { Komponentas, OnInit } iš '@kampinis/šerdis';
@Komponentas({
 parinkiklis: 'programa-forma-registracija',
 šablono URL: './form-signup.component.html',
 styleUrls: ['./form-signup.component.css']
})
eksportuoti klasėFormSignupComponentpadargaiOnInit{
konstruktorius() { }
 ngOnInit(): tuštuma {}
 modelis = {
 Slaptažodis: nulinis,
 patvirtinti slaptažodį: nulinis
 };
}

Antrasis kampinio HTML šablono slaptažodis naudoja modelis objektą aukščiau esančiame faile, kad palygintumėte jo vertę su pirmuoju slaptažodžiu.

The neįgalus Pateikimo mygtuko ypatybė užtikrina, kad ji liktų neaktyvi, kol kiekviename įvesties lauke bus tinkamų duomenų. Pateikus formą, vartotojas patenka į sėkmingą puslapį naudojant Angular maršrutizatorių.

Failas app.routing.module.ts

importuoti { NgModule } iš '@kampinis/šerdis';
importuoti { RouterModule, Routes } iš '@kampinis/maršrutizatorius';
importuoti { FormSignupComponent } iš './form-signup/form-signup.component';
importuoti { FormSuccessComponent } iš './form-success/form-success.component';
konst maršrutai: Maršrutai = [{
 kelias: '',
 komponentas: FormSignupComponent
},{
 kelias: 'sėkmė',
 komponentas: FormSuccessComponent
}];
@NgModule({
importas: [RouterModule.forRoot (maršrutai)],
eksportas: [RouterModule]
})
eksportuotiklasėAppRoutingModule{ }

Aukščiau pateiktame maršruto parinkimo modulyje yra du keliai; pagrindinis kelias formai ir sėkmės kelias sėkmės komponentui.

Failas app.component.html

<maršrutizatorius-išvestis></router-outlet>

Maršrutizatoriaus lizdas aukščiau esančiame programos komponento faile leidžia vartotojui lengvai naršyti tarp forma-registracija ir forma-sėkmė komponentus naudojant URL.

„React“ programos patvirtinimo formos sukūrimas

eksportuotinumatytasfunkcijapatvirtintiData(vertybes) {
leisti klaidos = {}
jeigu (!vertybes.Vartotojo vardas.apkarpyti()) {
 errors.username = "Reikalingas vartotojo vardas";
 }
jeigu (!vertybes.Slaptažodis) {
 klaidos.password = "Reikalingas slaptažodis";
 }
jeigu (!vertybes.passwordvalidate) {
 errors.passwordvalidate = "Reikalingas slaptažodis";
 } Kitasjeigu (values.passwordvalidate !== values.password) {
 errors.passwordvalidate = "Slaptažodžiai darytinerungtynės";
 }
grąžinti klaidos;
}

The valideData.js faile yra aukščiau pateiktas kodas. Ji stebi kiekvieną formos įvesties lauką, siekdama užtikrinti, kad kiekviename lauke būtų tinkami duomenys.

Failas useForm.js

importuoti {useState, useEffect} iš „reaguoti“;
konst useForm = (atskambinti, patvirtinti) => {
konst [values, setValues] = useState({
 Vartotojo vardas: '',
 Slaptažodis: '',
 patvirtinti slaptažodį: ''
 });
konst [errors, setErrors] = useState ({});
konst [isSubmitting, setIsSubmitting] = useState (klaidinga)
konst handChange = e => {
konst {vardas, reikšmė} = e.target;
setValues({
 ...vertybes,
[vardas]: vertė
 });
 }
konst handleSubmit = e => {
e.preventDefault();
 setErrors (validate(vertybes));
 setIsSubmitting(tiesa);
 }
 useEffect(() => {
 if (Objektas.raktai (klaidos).ilgis 0 && isSubmitting) {
 perskambink();
 }
 }, [klaidos, atgalinis skambutis, isSubmitting]);
grąžinti { handleChange, value, handleSubmit, errors };
}
eksportuotinumatytas naudojimo forma;

Paprotys naudojimo forma kabliukas aukščiau nustato, ar vartotojas sėkmingai pateikia formą. Šis įvykis įvyksta tik tuo atveju, jei visi formoje esantys duomenys yra galiojantys.

Form.js failas

importuoti Reaguoti iš „reaguoti“;
importuoti Registruotis iš "./Registruotis";
importuoti Sėkmė iš "./Sėkmė"
importuoti { useState } iš „reaguoti“;
konst Forma = () => {
konst [isSubmitted, setIsSubmitted] = useState(klaidinga);
funkcijapateikti formą() {
 setIsSubmitted(tiesa);
 }
grąžinti (
<div>
 {!isPateikta? (<Registracija submitForm={submitForm} />): (<Sėkmė />)}
</div>
 )
}
eksportuotinumatytas Forma;

The Forma aukščiau esantis komponentas perjungia vaizdą tarp Registruotis komponentas ir Sėkmė komponentas, jei forma pateikiama.

App.js failas

importuoti Forma iš "./components/Form";
funkcijaProgramėlė() {
grąžinti (
<div className="Programėlė">
<Forma/>
</div>
 );
}
eksportuotinumatytas Programėlė;

Kampinė programos vartotojo sąsaja

UI rodoma forma su vienu vartotojo vardo ir dviem slaptažodžio įvestimis.

Kai formoje yra neteisingų duomenų, puslapiuose rodomi klaidų pranešimai:

Kai formoje yra tinkamų duomenų, vartotojas gali juos sėkmingai pateikti:

„React“ programos vartotojo sąsaja

Kai formoje yra neteisingų duomenų:

Kai formoje yra tinkamų duomenų:

Reakcijos ir kampo panašumai ir skirtumai

„Angular“ ir „React“ sistemos yra nepaprastai panašios ir gali duoti identiškus rezultatus. Tačiau įrankiai, kuriuos galite naudoti norėdami pasiekti šiuos rezultatus, skirsis. Angular yra kūrimo platforma, suteikianti prieigą prie įrankių, tokių kaip maršrutizatorius ir formų biblioteka. Norint pasiekti tokius pat rezultatus, „React“ iš kūrėjo reikalauja šiek tiek daugiau kūrybiškumo.

Reaguoti vs. „Angular“: kodėl „React“ yra daug populiaresnis?

Skaitykite toliau

Apie autorių