React proje şablonunu ASP.NET Core ile kullanma

  • Makale
  • Okumak için 2 dakika

güncelleştirilmiş React proje şablonu, zengin, istemci tarafı kullanıcı arabirimi (uı) uygulamak için React ve oluşturma- yanıt verme uygulaması (cra) kurallarını kullanarak ASP.NET Core uygulamalar için uygun bir başlangıç noktası sağlar.

şablon, bir apı arka ucu olarak davranacak bir ASP.NET Core projesi ve bir kullanıcı arabirimi olarak görev yapacak standart bir cra React projesi oluşturmaya eşdeğerdir, ancak her ikisini de tek bir birim olarak oluşturulup yayımlanabilen tek bir uygulama projesinde barındırmanın rahatlığını sağlar.

React proje şablonu, sunucu tarafı işleme (ssr) için tasarlanmamıştır. React ve Node.js ile ssr için, Next.js veya kzzlekullanmayı düşünün.

Yeni uygulama oluşturma

ASP.NET Core 2,1 veya üzeri bir sürümü yüklediyseniz, React proje şablonunu yüklemeniz gerekmez.

Boş bir dizinde komutunu kullanarak komut isteminden yeni bir proje oluşturun dotnet new react . Örneğin, aşağıdaki komutlar uygulamayı Yeni bir uygulama dizininde oluşturur ve bu dizine geçer:

dotnet new react -o my-new-app
cd my-new-app

uygulamayı Visual Studio veya .NET Core CLI çalıştırın:

Oluşturulan . csproj dosyasını açın ve uygulamayı buradan normal olarak çalıştırın.

Yapı işlemi ilk çalıştırmada NPM bağımlılıklarını geri yükler ve bu işlem birkaç dakika sürebilir. Sonraki derlemeler çok daha hızlıdır.

proje şablonu, bir ASP.NET Core uygulaması ve bir React uygulaması oluşturur. ASP.NET Core uygulaması veri erişimi, yetkilendirme ve diğer sunucu tarafı sorunları için kullanılmak üzere tasarlanmıştır. clientapp alt dizininde bulunan React uygulamasının tüm kullanıcı arabirimi sorunları için kullanılması amaçlanmıştır.

Sayfa, resim, stil, modül vb. ekleyin

clientapp dizini standart bir cra React uygulamasıdır. Daha fazla bilgi için resmi CRA belgelerine bakın.

bu şablon tarafından oluşturulan React uygulaması ve cra tarafından oluşturulan uygulama arasında hafif farklar vardır; Ancak, uygulamanın özellikleri değiştirilmez. Şablon tarafından oluşturulan uygulama, önyüklemetabanlı bir düzen ve temel bir yönlendirme örneği içerir.

NPM paketlerini yükler

Üçüncü taraf NPM paketlerini yüklemek için clientapp alt dizininde bir komut istemi kullanın. Örnek:

cd ClientApp
npm install --save <package_name>

Yayımla ve dağıt

Geliştirme aşamasında uygulama, geliştirici kolaylığı için iyileştirilmiş bir modda çalışır. Örneğin, JavaScript demeti kaynak eşlemeleri içerir (hata ayıklarken, özgün kaynak kodunuzu görebilirsiniz). Uygulama JavaScript, HTML ve CSS dosya değişikliklerini diskte izler ve bu dosya değişikliğini gördüğünde otomatik olarak yeniden derlenir ve yeniden yükler.

Üretimde, uygulamanızın performans için iyileştirilmiş bir sürümünü sunar. Bu otomatik olarak gerçekleşecek şekilde yapılandırılmıştır. Yayımladığınızda, derleme yapılandırması, istemci tarafı kodunuzun küçültülmüş, transpiled derlemesini yayar. Geliştirme derlemesinin aksine, üretim derlemesi sunucuya Node.js yüklenmesini gerektirmez.

standart ASP.NET Core barındırma ve dağıtım yöntemlerikullanabilirsiniz.

CRA sunucusunu bağımsız olarak çalıştırma

proje, ASP.NET Core uygulama geliştirme modunda başladığında, cra geliştirme sunucusunun kendi örneğini arka planda başlatacak şekilde yapılandırılmıştır. Bu kullanışlı bir yöntemdir çünkü bu, ayrı bir sunucuyu el ile çalıştırmak zorunda olmadığınız anlamına gelir.

Bu varsayılan Kurulumun bir dezavantajı vardır. C# kodunuzu her değiştirişinizde ve ASP.NET Core uygulamanızın yeniden başlatılması gerektiğinde cra sunucusu yeniden başlatılır. Yeniden başlamak için birkaç saniye gerekir. sık kullanılan C# kod düzenlemeleri yapıyorsanız ve cra sunucusunun yeniden başlamasını beklemek istemiyorsanız, cra sunucusunu ASP.NET Core işleminden bağımsız olarak dışarıdan çalıştırın. Bunun için:

  1. Clientapp alt dizinine aşağıdaki ayarla bir . env dosyası ekleyin:

    BROWSER=none

    Bu, CRA sunucusunu dışarıdan başlatırken Web tarayıcınızın açılmasını engeller.

  2. Bir komut isteminde clientapp alt dizinine geçin ve CRA geliştirme sunucusunu başlatın:

    cd ClientApp
npm start

  3. ASP.NET Core uygulamanızı, kendi kendine birini başlatmak yerine dış cra sunucu örneğini kullanacak şekilde değiştirin. Başlangıç sınıfınıza, spa.UseReactDevelopmentServer çağrıyı aşağıdaki ile değiştirin:

    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

ASP.NET Core uygulamanızı başlattığınızda, bir cra sunucusu başlatılmaz. Bunun yerine el ile başlattığınız örnek kullanılır. Bu, daha hızlı başlamasını ve yeniden başlatılmasını sağlar. artık React uygulamanızın her seferinde yeniden derlenmesini beklemiyordu.

Önemli

"Sunucu tarafı işleme", bu şablonun desteklenen bir özelliği değildir. Bu şablonla olan amamız "oluşturma-tepki-uygulama" ile eşlik sağlamaktır. Bu nedenle, "oluşturma-yanıt verme uygulaması" projesine (SSR gibi) dahil olmayan senaryolar ve özellikler desteklenmez ve Kullanıcı için bir alıştırma olarak kalır.

Ek kaynaklar