Açısal JS vs. Tepki JS

Angular ve React, web uygulamaları için en iyi ön uç çerçevelerinden ikisidir. Kapsamları biraz farklı olsa da (biri geliştirme platformu, diğeri kitaplık), büyük rakipler olarak görülüyorlar. Bir uygulama geliştirmek için her iki çerçeveyi de kullanabileceğinizi varsaymak güvenlidir.

O zaman asıl soru şu olur: neden birini diğerine tercih edesiniz? Bu makale, basit bir kayıt formu geliştirerek buna cevap vermeyi amaçlamaktadır. Form, yalnızca her çerçevenin doğrulama yeteneklerine dayanacaktır.

Önkoşullar

Devam etmek için şunları yapabilmeniz gerekir: React'i kurun ve genel bir anlayışa sahip olmak bir React uygulaması nasıl çalışır?. Ayrıca nasıl kurulacağını ve Açısal kullan.

Her Uygulamanın Dosya Yapısı

React formu aşağıdaki dosya yapısına sahiptir:

Açısal form aşağıdaki dosya yapısına sahiptir:

Yukarıdaki resim, Angular uygulamasının yalnızca düzenlenmiş bölümünü gösterir.

Yukarıdaki dosya yapılarından her iki çerçevenin de büyük ölçüde bileşenlerin kullanımına bağlı olduğunu görebilirsiniz.

Her Form Başvurusu İçin Mantığı Oluşturma

Her başvuru aynı amaca sahip olacaktır: form yalnızca her giriş alanı geçerli veriler içeriyorsa gönderilir. Kullanıcı adı alanı, en az bir karakter içeriyorsa geçerlidir. İki parola alanı, değerleri aynıysa geçerlidir.

Angular, iki form oluşturma yöntemi sunar: şablon odaklı ve reaktif. Reaktif yaklaşım, geliştiricinin özel doğrulama kriterleri oluşturmasına olanak tanır. Şablona dayalı yaklaşım, form doğrulamasını basitleştiren özelliklerle birlikte gelir.

React, yalnızca özel doğrulama ile bir form geliştirme yeteneğine sahiptir. Ancak, React daha popüler çerçevedir ve daha büyük bir topluluğa sahiptir, bu nedenle React için birçok form işleme kitaplığı mevcuttur. Buradaki amacın harici kitaplıkların kullanımından kaçınmak olduğu göz önüne alındığında, React uygulaması özel doğrulamaya güvenecektir.

Her Uygulama için Şablon Geliştirme

Her iki uygulama da nihai HTML çıktısını oluşturmak için şablonlara güvenir.

Açısal HTML Şablonu

bu form-signup.component.html dosya aşağıdaki kodu içerir:

<div sınıfı="biçim-içerik">
<form sınıfı="biçim" #myForm="ngForm">
<h1>Topluluğumuza katılmak için formu doldurun!</h1>
<div sınıfı="form-girdiler">
<etiket için ="Kullanıcı adı" sınıf="form etiketi">Kullanıcı adı:</label>
<giriş
 kimlik="Kullanıcı adı"
 tip="metin"
sınıf="form girişi"
 yer tutucu="Kullanıcı adı girin"
 isim="Kullanıcı adı"
 ngModel
 gereklidir
 #kullanıcıadı="ngModel"
 />
<p *ngIf="kullanıcı adı.invalid && kullanıcı adı.touched">Kullanıcı adı gerekli</p>
</div>
<div sınıfı="form-girdiler">
<etiket için ="parola" sınıf="form etiketi">Parola:</label>
<giriş
 kimlik="parola"
 tip="parola"
 isim="parola"
sınıf="form girişi"
 yer tutucu="Parolanı Gir"
 ngModel
 gereklidir
 #şifre="ngModel"
 [(ngModel)]="model.şifre"
 />
<p *ngIf="şifre.invalid && şifre.dokunuldu">şifre gerekli</p>
</div>
<div sınıfı="form-girdiler">
<etiket için ="şifre doğrulama" sınıf="form etiketi">Parola:</label>
<giriş
 kimlik="Şifreyi Onayla"
 tip="parola"
 isim="Şifreyi Onayla"
sınıf="form girişi"
 yer tutucu="Şifreyi Onayla"
 ngModel
 gereklidir
 #şifre2="ngModel"
 ngValidateEqual="parola"
 [(ngModel)]="model.confirmpassword"
 />
<div *ngIf="(şifre2.dirty || şifre2.dokunuldu) && şifre2.geçersiz">
<p *ngIf="password2.hasError('eşit değildir') && şifre.valid">
 Şifreler yapmakolumsuzlukeşleşme
</p>
</div>
</div>
<buton
sınıf="form-input-btn"
 tip="Sunmak"
 [devre dışı]="benimForm.invalid"
 yönlendiriciLink="/success"
>
 Üye olmak
</button>
</form>
</div>

Tepki HTML Şablonu

bu Signup.js dosya aşağıdaki kodu içerir:

içe aktarmak Tepki itibaren "tepki";
içe aktarmak Kullanım Formu itibaren "../useForm";
içe aktarmak doğrulamak itibaren "../validateData";
içe aktarmak "./Signup.css"
const Kaydol = ({gönderForm}) => {
const {handleChange, değerler, handleSubmit, hatalar} = useForm( sendForm, validate);
dönüş (
<div sınıfıAdı="biçim-içerik">
<form sınıfıAdı="biçim" onSubmit={handleSubmit}>
<h1>Topluluğumuza katılmak için formu doldurun!</h1>
<div sınıfıAdı="form-girdiler">
<etiket htmlFor="Kullanıcı adı" sınıfAdı="form etiketi">Kullanıcı adı:</label>
<giriş
 kimlik="Kullanıcı adı"
 tip="metin"
 isim="Kullanıcı adı"
 sınıfAdı="form-giriş"
 yer tutucu="Kullanıcı adı girin"
 değer={değerler.kullanıcıadı}
 onChange={handleChange}
 />
{hatalar.kullanıcı adı &&<p>{hatalar.kullanıcıadı}</p>}
</div>
<div sınıfıAdı="form-girdiler">
<etiket htmlFor="parola" sınıfAdı="form etiketi"> Parola: </label>
<giriş
 kimlik="parola"
 tip="parola"
 isim="parola"
 sınıfAdı="form-giriş"
 yer tutucu="Parolanı Gir"
 değer={değerler.şifre}
 onChange={handleChange}
 />
{hatalar.şifre &&<p>{hatalar.şifre}</p>}
</div>
<div sınıfıAdı="form-girdiler">
<etiket htmlFor="şifre doğrulama" sınıfAdı="form etiketi"> Parola: </label>
<giriş
 kimlik="şifre doğrulama"
 tip="parola"
 isim="şifre doğrulama"
 sınıfAdı="form-giriş"
 yer tutucu="Şifreyi Onayla"
 değer={değerler.passwordvalidate}
 onChange={handleChange}
 />
{errors.passwordvalidate &&<p>{errors.passwordvalidate}</p>}
</div>
<düğme sınıfıAdı="form-input-btn" tip="Sunmak">Üye olmak</button>
</form>
</div>
 )
}
ihracatvarsayılan Üye olmak;

Bazı küçük farklılıklar dışında her iki uygulamanın da temel HTML kodunu kullandığını fark edeceksiniz. Örneğin, Angular uygulaması, CSS sınıflarını tanımlamak için standart "sınıf" özniteliğini kullanır. React, kendi özel "className" özelliğini kullanır. React, bunu nihai çıktıda standart “sınıf” özniteliğine dönüştürür. UI, herhangi bir uygulamanın başarısında önemli bir rol oynar. Her iki uygulama da aynı HTML yapısını ve sınıf adlarını kullandığından, her iki uygulama da aynı stil sayfasını kullanabilir.

Yukarıdaki şablonlardaki tüm standart olmayan özellikler doğrulama ile ilgilidir.

Angular Uygulaması için Form Doğrulaması Oluşturma

Angular'ın şablon odaklı yaklaşımının bir parçası olan doğrulama özelliklerine erişmek için, FormlarModule içinde app.module.ts dosya.

app.module.ts Dosyası

içe aktarmak { NgModül } itibaren '@açısal/çekirdek';
içe aktarmak { FormsModule } itibaren '@açısal/formlar';
içe aktarmak { Tarayıcı Modülü } itibaren '@angular/platform-tarayıcı';
içe aktarmak { ValidateEqualModule } itibaren 'ng-validate-equal'
içe aktarmak { AppRoutingModule } itibaren './app-routing.module';
içe aktarmak { Uygulama Bileşeni } itibaren './app.component';
içe aktarmak { FormSignupComponent } itibaren './form-signup/form-signup.component';
içe aktarmak { FormSuccessComponent } itibaren './form-success/form-success.component';
@NgModule({
 beyanlar: [
 Uygulama Bileşeni,
 FormKayıtBileşeni,
 FormSuccessBileşeni
 ],
 ithalat: [
 tarayıcıModülü,
 FormlarModülü,
 ValidateEqualModule,
 AppRoutingModule
 ],
sağlayıcılar: [],
önyükleme: [ Uygulama Bileşeni ]
})
ihracatsınıfAppModule{ }

içe aktararak FormlarModule yukarıdaki dosyada, artık bir dizi farklı doğrulama özelliğine erişiminiz var. eklemeniz gerekecek ngModel Angular HTML şablonunun giriş alanlarına özellik. Yukarıdaki Angular şablonuna tekrar bakarsanız, giriş öğelerinin her birinin bu özelliğe sahip olduğunu görürsünüz.

bu FormlarModule ve ngModel geliştiriciye aşağıdaki gibi doğrulama özelliklerine erişim izni verin geçerli ve geçersiz. Angular HTML şablonunun paragraf bölümü, #kullanıcıadı=”ngModel” Emlak. Giriş alanındaki veriler geçersizse ve kullanıcı değiştirmişse uyarı verir.

İçinde app.module.ts dosyasını da göreceksiniz. ValidateEqualModule, bu iki parolayı karşılaştırır. Bunu yapmak için, bir model nesnesi oluşturmanız gerekir. form-signup.component.ts dosya.

form-signup.component.ts Dosyası

içe aktarmak { Bileşen, OnInit } itibaren '@açısal/çekirdek';
@Bileşen({
 seçici: 'uygulama-form-kayıt',
 şablon URL'si: './form-signup.component.html',
 styleUrl'ler: ['./form-signup.component.css']
})
ihracat sınıfFormKayıtBileşeniuygularOnInit{
kurucu() { }
 ngOnInit(): geçersiz {}
 model = {
 parola: boş,
 Şifreyi Onayla: boş
 };
}

Angular HTML şablonundaki ikinci şifre, model değerini ilk parolayla karşılaştırmak için yukarıdaki dosyadaki nesne.

bu engelli Gönder düğmesindeki özellik, her giriş alanı geçerli veriler içerene kadar etkin olmamasını sağlar. Formu göndermek, kullanıcıyı Angular'ın yönlendiricisi yardımıyla bir başarı sayfasına götürür.

app.routing.module.ts Dosyası

içe aktarmak { NgModül } itibaren '@açısal/çekirdek';
içe aktarmak { RouterModule, Rotalar } itibaren '@açısal/yönlendirici';
içe aktarmak { FormSignupComponent } itibaren './form-signup/form-signup.component';
içe aktarmak { FormSuccessComponent } itibaren './form-success/form-success.component';
const rotalar: Rotalar = [{
 yol: '',
 bileşen: FormSignupComponent
},{
 yol: 'başarı',
 bileşen: FormSuccessComponent
}];
@NgModule({
ithalat: [RouterModule.forRoot (yollar)],
ihracat: [YönlendiriciModülü]
})
ihracatsınıfAppRoutingModule{ }

Yukarıdaki yönlendirme modülü iki yol içerir; formun ana yolu ve başarı bileşeni için bir başarı yolu.

app.component.html Dosyası

<yönlendirici çıkışı></router-outlet>

Yukarıdaki uygulama bileşeni dosyasındaki yönlendirici çıkışı, kullanıcının aşağıdakiler arasında kolayca gezinmesini sağlar. form-kayıt ve form-başarı URL'leri kullanan bileşenler.

React Uygulaması için Form Validation Oluşturma

ihracatvarsayılanişlevvalidateData(değerler) {
İzin Vermek hatalar = {}
Eğer (!değerler.Kullanıcı adı.trim()) {
 error.kullanıcı adı = "Kullanıcı adı gerekli";
 }
Eğer (!değerler.parola) {
 hatalar.şifre = "şifre gerekli";
 }
Eğer (!değerler.parola doğrulama) {
 error.passwordvalidate = "şifre gerekli";
 } başkaEğer (values.passwordvalidate !== values.password) {
 error.passwordvalidate = "Şifreler yapmakolumsuzlukeşleşme";
 }
dönüş hatalar;
}

bu validateData.js dosya yukarıdaki kodu içerir. Her alanın geçerli veriler içerdiğinden emin olmak için formdaki her giriş alanını izler.

useForm.js Dosyası

içe aktarmak {useState, useEffect} itibaren 'tepki';
const useForm = (geri arama, doğrulama) => {
const [değerler, setValues] = useState({
 Kullanıcı adı: '',
 parola: '',
 şifre doğrulama: ''
 });
const [hatalar, setErrors] = useState ({});
const [isSubmitting, setIsSubmitting] = useState (yanlış)
const handleChange = e => {
const {isim, değer} = e.hedef;
setValues({
 ...değerler,
[isim]: değer
 });
 }
const handleSubmit = e => {
e.preventDefault();
 setErrors (doğrula(değerler));
 setIsSubmitting(doğru);
 }
 useEffect(() => {
 if (Object.keys (hatalar).length 0 && Gönderiliyor) {
 geri çağırmak();
 }
 }, [hatalar, geri arama, isSubmitting]);
dönüş { handleChange, değerler, handleSubmit, hatalar };
}
ihracatvarsayılan Kullanım Formu;

Gelenek Kullanım Formu yukarıdaki kanca, kullanıcının formu başarıyla gönderip göndermediğini belirler. Bu olay, yalnızca formdaki tüm veriler geçerliyse gerçekleşir.

Form.js Dosyası

içe aktarmak Tepki itibaren "tepki";
içe aktarmak Üye olmak itibaren "./Üye olmak";
içe aktarmak Başarı itibaren "./Başarı"
içe aktarmak { useState } itibaren "tepki";
const Form = () => {
const [isSubmission, setIsSubmission] = useState(yanlış);
işlevFormu gönder() {
 setIsSubmission(doğru);
 }
dönüş (
<div>
 {!Gönderildi mi? (<Kaydolun sendForm={submitForm} />): (<Başarı />)}
</div>
 )
}
ihracatvarsayılan Biçim;

bu Biçim yukarıdaki bileşen, aşağıdakiler arasındaki görünümü değiştirir Üye olmak bileşen ve Başarı form gönderilirse bileşen.

App.js Dosyası

içe aktarmak Biçim itibaren "./bileşenler/Form";
işlevUygulama() {
dönüş (
<div sınıfıAdı="Uygulama">
<Biçim/>
</div>
 );
}
ihracatvarsayılan Uygulama;

Açısal Uygulama Kullanıcı Arayüzü

UI, kullanıcı adı için bir giriş ve iki şifre girişi içeren bir form görüntüler.

Form geçersiz veriler içerdiğinde, sayfalarda hata mesajları görüntülenir:

Form geçerli veriler içerdiğinde, kullanıcı bunu başarıyla gönderebilir:

React Uygulaması Kullanıcı Arayüzü

Form geçersiz veriler içerdiğinde:

Form geçerli veriler içerdiğinde:

React ve Angular Arasındaki Benzerlikler ve Farklılıklar

Angular ve React çerçeveleri oldukça benzerdir ve aynı sonuçları üretme yeteneğine sahiptir. Ancak, bu sonuçları elde etmek için kullanabileceğiniz araçlar farklılık gösterecektir. Angular, yönlendirici ve form kitaplığı gibi araçlara erişim sağlayan bir geliştirme platformudur. React, aynı sonuçları elde etmek için geliştiriciden biraz daha yaratıcılık gerektirir.

Tepki vs. Angular: React Neden Çok Daha Popüler?

Sonrakini Oku

Yazar hakkında