Aracılığıyla paylaş

react'i ASP.NET Core ile kullanma

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Uyarı

ASP.NET Core'un bu sürümü artık desteklenmiyor. Daha fazla bilgi için bkz . .NET ve .NET Core Destek İlkesi. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Visual Studio, ASP.NET Core arka ucuna sahip Angular, React ve Vue gibi JavaScript çerçevelerini temel alan tek sayfalı uygulamalar (SPA) oluşturmak için proje şablonları sağlar. Bu şablonlar:

  • Ön uç projesi ve arka uç projesiyle visual studio çözümü oluşturun.
  • Ön uç için JavaScript ve TypeScript (.esproj) için Visual Studio proje türünü kullanın.
  • Arka uç için bir ASP.NET Core projesi kullanın.

Visual Studio şablonları kullanılarak oluşturulan projeler Windows, Linux ve macOS'ta komut satırından çalıştırılabilir. Uygulamayı çalıştırmak için komutunu kullanarak dotnet run --launch-profile https sunucu projesini çalıştırın. Sunucu projesini çalıştırmak, ön uç JavaScript geliştirme sunucusunu otomatik olarak başlatır. Başlatma https profili şu anda gereklidir.

Visual Studio öğreticisi

Başlamak için Visual Studio belgelerindeki React ile ASP.NET Core uygulaması oluşturma öğreticisini izleyin.

Daha fazla bilgi için bkz. Visual Studio'da JavaScript ve TypeScript

ASP.NET Core SPA şablonları

Visual Studio, JavaScript veya TypeScript ön ucuyla ASP.NET Core uygulamaları oluşturmaya yönelik şablonlar içerir. Bu şablonlar Visual Studio 2022 sürüm 17.8 veya sonraki sürümlerde ASP.NET ve web geliştirme iş yükü yüklü olarak kullanılabilir.

JavaScript veya TypeScript ön ucuyla ASP.NET Core uygulamaları oluşturmaya yönelik Visual Studio şablonları aşağıdaki avantajları sunar:

  • Ön uç ve arka uç için temiz proje ayrımı.
  • En son ön uç çerçevesi sürümleriyle güncel kalın.
  • Vite gibi en son ön uç çerçevesi komut satırı araçlarıyla tümleştirin.
  • Hem JavaScript hem de TypeScript için şablonlar (yalnızca Angular için TypeScript).
  • Zengin JavaScript ve TypeScript kod düzenleme deneyimi.
  • JavaScript derleme araçlarını .NET derlemesiyle tümleştirin.
  • npm bağımlılık yönetimi kullanıcı arabirimi.
  • Visual Studio Code hata ayıklama ve başlatma yapılandırmasıyla uyumludur.
  • JavaScript test çerçevelerini kullanarak Test Gezgini'nde ön uç birim testleri çalıştırın.

Eski ASP.NET Core SPA şablonları

.NET SDK'sının önceki sürümleri, ASP.NET Core ile SPA uygulamaları oluşturmaya yönelik eski şablonları içeriyor. Bu eski şablonlarla ilgili belgeler için SPA'ya genel bakış ASP.NET Core 7.0 sürümüne ve Angular ve React makalelerine bakın.

React ile ASP.NET Core proje şablonu, React ve Create React App (CRA) kullanan ASP.NET Core uygulamaları için zengin, istemci tarafı kullanıcı arabirimi (UI) uygulamak için kullanışlı bir başlangıç noktası sağlar.

Proje şablonu, hem web API'si olarak davranacak bir ASP.NET Core projesi hem de kullanıcı arabirimi olarak davranacak bir CRA React projesi oluşturmaya eşdeğerdir. Bu proje bileşimi, her iki projeyi de tek bir birim olarak oluşturulabilen ve yayımlanabilen tek bir ASP.NET Core projesinde barındırma kolaylığı sunar.

Proje şablonu sunucu tarafı işleme (SSR) için tasarlanmamıştır. React ve Node ile SSR içinjs İlerijs veya Razzle'ı göz önünde bulundurun.

Yeni uygulama oluşturma

Komutunu boş bir dizinde kullanarak dotnet new react komut isteminden yeni bir proje oluşturun. Örneğin, aşağıdaki komutlar uygulamayı bir my-new-app dizinde oluşturur ve bu dizine geçer:

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

Uygulamayı Visual Studio'dan veya .NET CLI'dan çalıştırın:

Oluşturulan .csproj dosyayı açın ve uygulamayı oradan normal şekilde çalıştırın.

Derleme 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 react uygulaması oluşturur. ASP.NET Core uygulamasının veri erişimi, yetkilendirme ve diğer sunucu tarafı endişeleri için kullanılması amaçlanmıştır. Alt dizinde bulunan React uygulamasının ClientApp tüm kullanıcı arabirimi endişeleri için kullanılması amaçlanmıştır.

Sayfalar, resimler, stiller, modüller vb. ekleyin.

Dizin ClientApp , 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ı ile CRA tarafından oluşturulan uygulama arasında küçük farklar vardır; ancak uygulamanın özellikleri değişmez. Şablon tarafından oluşturulan uygulama, Bootstrap tabanlı bir düzen ve temel yönlendirme örneği içerir.

npm paketlerini yükleme

Üçüncü taraf npm paketlerini yüklemek için alt dizinde ClientApp bir komut istemi kullanın. Örneğin:

cd ClientApp
npm install <package_name>

Yayımlama ve dağıtma

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

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

Standart ASP.NET Core barındırma ve dağıtım yöntemlerini kullanabilirsiniz.

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

Proje, ASP.NET Core uygulaması geliştirme modunda başladığında arka planda CRA geliştirme sunucusunun kendi örneğini başlatacak şekilde yapılandırılır. Ayrı bir sunucuyu el ile çalıştırmak zorunda olmadığınız anlamına geldiği için bu kullanışlı bir işlemdir.

Bu varsayılan kurulumun bir dezavantajı vardır. C# kodunuzu değiştirdiğinizde ve ASP.NET Core uygulamanızın yeniden başlatılması gerektiğinde CRA sunucusu yeniden başlatılır. Yedeklemeyi başlatmak için birkaç saniye gerekir. Sık sık C# kodu düzenlemeleri yapıyorsanız ve CRA sunucusunun yeniden başlatılmasını beklemek istemiyorsanız, CRA sunucusunu ASP.NET Core işleminden bağımsız olarak harici olarak çalıştırın.

CRA sunucusunu harici olarak çalıştırmak için komut isteminde ClientApp alt dizine geçin ve CRA geliştirme sunucusunu başlatın:

cd ClientApp
npm start

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şlatılmasını ve yeniden başlatılmasını sağlar. Artık React uygulamanızın her seferinde yeniden derlenmesi beklenmiyorsa.

Için ara sunucu ara yazılımını yapılandırma SignalR

Daha fazla bilgi için bkz . http-proxy-ara yazılım.

Ek kaynaklar

Güncelleştirilmiş React proje şablonu, react ve create-react-app (CRA) kurallarını kullanarak zengin, istemci tarafı kullanıcı arabirimi (UI) uygulayan ASP.NET Core uygulamaları için kullanışlı bir başlangıç noktası sağlar.

Şablon, hem API arka ucu olarak davranacak bir ASP.NET Core projesi hem de kullanıcı arabirimi işlevi görmek için standart bir CRA React projesi oluşturmakla eşdeğerdir, ancak hem tek bir birim olarak oluşturulabilen hem de yayımlanabilir tek bir uygulama projesinde barındırma kolaylığı sağlar.

React proje şablonu sunucu tarafı işleme (SSR) için tasarlanmamıştır. React ve Node ile SSR içinjs İlerijs veya Razzle'ı göz önünde bulundurun.

Yeni uygulama oluşturma

Komutunu boş bir dizinde kullanarak dotnet new react komut isteminden yeni bir proje oluşturun. Örneğin, aşağıdaki komutlar uygulamayı bir my-new-app dizinde oluşturur ve bu dizine geçer:

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

Uygulamayı Visual Studio'dan veya .NET CLI'dan çalıştırın:

Oluşturulan .csproj dosyayı açın ve uygulamayı oradan normal şekilde çalıştırın.

Derleme 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 react uygulaması oluşturur. ASP.NET Core uygulamasının veri erişimi, yetkilendirme ve diğer sunucu tarafı endişeleri için kullanılması amaçlanmıştır. Alt dizinde bulunan React uygulamasının ClientApp tüm kullanıcı arabirimi endişeleri için kullanılması amaçlanmıştır.

Sayfalar, resimler, stiller, modüller vb. ekleyin.

Dizin ClientApp , 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ı ile CRA tarafından oluşturulan uygulama arasında küçük farklar vardır; ancak uygulamanın özellikleri değişmez. Şablon tarafından oluşturulan uygulama, Bootstrap tabanlı bir düzen ve temel yönlendirme örneği içerir.

npm paketlerini yükleme

Üçüncü taraf npm paketlerini yüklemek için alt dizinde ClientApp bir komut istemi kullanın. Örneğin:

cd ClientApp
npm install --save <package_name>

Yayımlama ve dağıtma

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

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

Standart ASP.NET Core barındırma ve dağıtım yöntemlerini kullanabilirsiniz.

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

Proje, ASP.NET Core uygulaması geliştirme modunda başladığında arka planda CRA geliştirme sunucusunun kendi örneğini başlatacak şekilde yapılandırılır. Ayrı bir sunucuyu el ile çalıştırmak zorunda olmadığınız anlamına geldiği için bu kullanışlı bir işlemdir.

Bu varsayılan kurulumun bir dezavantajı vardır. C# kodunuzu değiştirdiğinizde ve ASP.NET Core uygulamanızın yeniden başlatılması gerektiğinde CRA sunucusu yeniden başlatılır. Yedeklemeyi başlatmak için birkaç saniye gerekir. Sık sık C# kodu düzenlemeleri yapıyorsanız ve CRA sunucusunun yeniden başlatılmasını beklemek istemiyorsanız, CRA sunucusunu ASP.NET Core işleminden bağımsız olarak harici olarak çalıştırın. Yapmak için:

  1. Alt dizine ClientApp aşağıdaki ayara sahip bir .env dosya ekleyin:

    BROWSER=none

    Bu, CRA sunucusunu harici olarak başlatırken web tarayıcınızın açılmasını engeller.

  2. Komut isteminde alt dizine ClientApp geçin ve CRA geliştirme sunucusunu başlatın:

    cd ClientApp
npm start

  3. ASP.NET Core uygulamanızı kendilerinden birini başlatmak yerine dış CRA sunucu örneğini kullanacak şekilde değiştirin. Başlangıç sınıfınızda çağrıyı spa.UseReactDevelopmentServer aşağıdakilerle 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şlatılmasını ve yeniden başlatılmasını sağlar. Artık React uygulamanızın her seferinde yeniden derlenmesi beklenmiyorsa.

Önemli

"Sunucu tarafı işleme", bu şablonun desteklenen bir özelliği değildir. Bu şablonla amacımız "create-react-app" ile eşliği karşılamaktır. Bu nedenle, "create-react-app" projesine (SSR gibi) dahil olmayan senaryolar ve özellikler desteklenmez ve kullanıcı için bir alıştırma olarak bırakılır.

Için ara sunucu ara yazılımını yapılandırma SignalR

Daha fazla bilgi için bkz . http-proxy-ara yazılım.

Ek kaynaklar