Öğretici: React ASP.NET Core Visual Studio

Bu makalede API arka ucu olarak davranacak bir ASP.NET Core projesi ve kullanıcı arabirimi olarak React bir React projesi derlemeyi öğrenirsiniz.

Şu anda Visual Studio uygulama ve ASP.NET Core destekleyen tek sayfalı uygulama (SPA) Angular React. Şablonlar, her çerçevenin temel dosyalarını ve klasörlerini içeren ASP.NET Core projelerinde yerleşik bir İstemci Uygulaması klasörü sağlar.

2022 Visual Studio 2022 Preview 2'den başlayarak, tek sayfalı uygulamalar oluşturmak için bu ASP.NET Core açıklanan yöntemi kullanabilirsiniz:

• İstemci uygulamasını ASP.NET Core projesinin dışında ayrı bir projeye koyma
• Bilgisayarınızda yüklü olan çerçeve CLI'sini temel alarak istemci projesini oluşturma

Önkoşullar

Aşağıdakilerin yüklü olduğundan emin olun:

• Visual Studio ve web geliştirme iş yükünün yüklü olduğu 2022 Preview 2 ASP.NET veya sonraki bir sürümü yükleyin. Ücretsiz yüklemek Visual Studio indirmeler sayfasına gidin. İş yükünü yüklemeniz ve önceden yüklemeniz gerekirse Visual Studio Araçları ve Özellikleri Al... 'a gidin > ve Visual Studio Yükleyicisi. Web geliştirme ASP.NET iş yükünü ve ardından Değiştir'i seçin.
• npm ( https://www.npmjs.com/ )
• npx ( https://www.npmjs.com/package/npx )

Ön uç uygulamasını oluşturma

1. Yeni Proje Oluştur Project Yeni proje oluştur'a seçin.

   

2. Üst React arama çubuğundan Tek Başına JavaScript komut dosyası şablonunu React seçin. (Tek başına TypeScript React Şablonu şu anda bu öğreticide desteklenmiyor.)

   

3. Projenize ve çözümünüze bir ad girin. Ek bilgiler penceresine bakarak Boş web API'si ASP.NET tümleştirmesi ekle seçeneğini Project olun. Bu seçenek, daha sonra React projeyle bağlanacak şekilde dosya şablonunuz ASP.NET Core ekler.

   

   Proje oluşturulduktan sonra bazı yeni ve değiştirilmiş dosyalar görüyorsunuz:

   • aspnetcore-https.js
   • aspnetcore-react.js
   • setupProxy.js
   • App.js (değiştirilmiş)
   • App.test.js (değiştirilmiş)

Arka uç uygulamasını oluşturma

1. Çözüm gezgininde çözüm adına sağ tıklayın, Ekle'nin üzerine gelin ve Ardından Yeni girişler'i Project.

   

2. Web API projesini ASP.NET Core ve seçin.

   

3. Projenize ve çözümünüze bir ad girin. Ek bilgiler penceresine ulaşarak hedef çerçeveniz olarak .NET 6.0'ı seçin.

   Proje oluşturulduktan sonra Çözüm Gezgini aşağıdaki gibi olması gerekir:

   

Proje özelliklerini ayarlama

1. ASP.NET Core projesine sağ tıklayın ve Özellikler'i seçin.

   

2. Hata ayıkla menüsüne gidin ve Hata ayıklama başlatma profilleri kullanıcı arabirimini aç seçeneğini belirleyin. Tarayıcıyı Başlat seçeneğinin işaretini kaldırın.

   

3. Ardından, React projesine sağ tıklayın, Özellikler menüsünü seçin ve Hata Ayıklama bölümüne gidin. Debugger'ı launch.json seçeneğiyle değiştirebilirsiniz.

   

Başlangıç projesini ayarlama

1. Çözüme sağ tıklayın ve Başlangıç Ayarlarını Ayarla'yı Project. Tek başlangıç projesi olan başlangıç projesini Birden çok başlangıç projesi olarak değiştirme. Her projenin eylemi için Başlat'ı seçin.

2. Ardından, arka uç projesini seçin ve ön ucun üzerine taşıarak ilk olarak başlamayı seçin.

   

Projeyi başlatma

1. Projeyi başlatmadan önce bağlantı noktası numaralarının eş olduğundan emin olun. ASP.NET Core projenizin launchSettings.json dosyasına gidin (Özellikler klasöründe). özelliğinden bağlantı noktası numarasını applicationUrl almak.

   Birden çok özellik applicationUrl varsa, uç nokta kullanarak bir tane https olup bakabilirsiniz. şuna benzer şekilde görünüyor https://localhost:7049 olabilir: .

2. Ardından,setupProxy.js projenizin React (src klasörüne bakın) gidin. applicationUrl launchSettings.json'daki özelliğiyle eşleşmesi için hedef özelliği güncelleştirin.

3. Projeyi başlatmak için F5 tuşuna basın veya pencerenin üst kısmından Başlat düğmesini seçin. İki komut istemi görüntülenir:

• Çalışan ASP.NET Core API projesi
• react-scripts start komutunu çalıştıran npm

API aracılığıyla React bir uygulamanın görüntü olduğunu görüyorsanız.

Sorun giderme

Aşağıdaki hatayı alabilirsiniz:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Bu sorunu görüyorsanız, büyük olasılıkla ön uç arka uç öncesinde başlamıştır. Arka uç komut isteminin çalışır olduğunu gördüğünüzde, tarayıcıda React App'i yenilemeniz gerekir.