Bagikan melalui

Gunakan React dengan ASP.NET Core

  • Artikel

Catatan

Ini bukan versi terbaru dari artikel ini. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Peringatan

Versi ASP.NET Core ini tidak lagi didukung. Untuk informasi selengkapnya, lihat Kebijakan Dukungan .NET dan .NET Core. Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Penting

Informasi ini berkaitan dengan produk pra-rilis yang mungkin dimodifikasi secara substansial sebelum dirilis secara komersial. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Untuk rilis saat ini, lihat versi .NET 8 dari artikel ini.

Visual Studio menyediakan templat proyek untuk membuat aplikasi satu halaman (SPAs) berdasarkan kerangka kerja JavaScript seperti Angular, React, dan Vue yang memiliki backend ASP.NET Core. Templat ini:

  • Buat solusi Visual Studio dengan proyek frontend dan proyek backend.
  • Gunakan jenis proyek Visual Studio untuk JavaScript dan TypeScript (.esproj) untuk frontend.
  • Gunakan proyek ASP.NET Core untuk backend.

Proyek yang dibuat dengan menggunakan templat Visual Studio dapat dijalankan dari baris perintah di Windows, Linux, dan macOS. Untuk menjalankan aplikasi, gunakan dotnet run --launch-profile https untuk menjalankan proyek server. Menjalankan proyek server secara otomatis memulai server pengembangan JavaScript frontend. Profil https peluncuran saat ini diperlukan.

Tutorial Visual Studio

Untuk memulai, ikuti tutorial Membuat aplikasi ASP.NET Core dengan React dalam dokumentasi Visual Studio.

Untuk informasi selengkapnya, lihat JavaScript dan TypeScript di Visual Studio

ASP.NET templat SPA Inti

Visual Studio menyertakan templat untuk membangun aplikasi ASP.NET Core dengan frontend JavaScript atau TypeScript. Templat ini tersedia di Visual Studio 2022 versi 17.8 atau yang lebih baru dengan beban kerja ASP.NET dan pengembangan web terinstal.

Templat Visual Studio untuk membangun aplikasi ASP.NET Core dengan frontend JavaScript atau TypeScript menawarkan manfaat berikut:

  • Bersihkan pemisahan proyek untuk frontend dan backend.
  • Tetap up-to-date dengan versi kerangka kerja frontend terbaru.
  • Integrasikan dengan alat baris perintah kerangka kerja frontend terbaru, seperti Vite.
  • Templat untuk JavaScript & TypeScript (hanya TypeScript untuk Angular).
  • Pengalaman pengeditan kode JavaScript dan TypeScript yang kaya.
  • Integrasikan alat build JavaScript dengan build .NET.
  • UI manajemen dependensi npm.
  • Kompatibel dengan debugging Visual Studio Code dan konfigurasi peluncuran.
  • Jalankan pengujian unit frontend di Test Explorer menggunakan kerangka kerja pengujian JavaScript.

Templat Warisan ASP.NET Core SPA

Versi .NET SDK yang lebih lama menyertakan templat warisan apa yang sekarang untuk membangun aplikasi SPA dengan ASP.NET Core. Untuk dokumentasi tentang templat lama ini, lihat gambaran umum SPA versi ASP.NET Core 7.0 dan artikel Angular dan React .

Templat proyek ASP.NET Core with React menyediakan titik awal yang nyaman untuk aplikasi ASP.NET Core menggunakan Aplikasi React dan Create React (CRA) untuk mengimplementasikan antarmuka pengguna (UI) sisi klien yang kaya.

Templat proyek setara dengan membuat proyek ASP.NET Core untuk bertindak sebagai API web dan proyek CRA React untuk bertindak sebagai UI. Kombinasi proyek ini menawarkan kenyamanan menghosting kedua proyek dalam satu proyek ASP.NET Core yang dapat dibangun dan diterbitkan sebagai satu unit.

Templat proyek tidak dimaksudkan untuk penyajian sisi server (SSR). Untuk SSR dengan React dan Node.js, pertimbangkan Next.js atau Razzle.

Membuat aplikasi baru

Buat proyek baru dari prompt perintah menggunakan perintah dotnet new react di direktori kosong. Misalnya, perintah berikut membuat aplikasi di my-new-app direktori dan beralih ke direktori tersebut:

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

Jalankan aplikasi dari Visual Studio atau .NET CLI:

Buka file yang dihasilkan .csproj , dan jalankan aplikasi seperti biasa dari sana.

Proses build memulihkan dependensi npm pada eksekusi pertama, yang dapat memakan waktu beberapa menit. Build berikutnya jauh lebih cepat.

Templat proyek membuat aplikasi ASP.NET Core dan aplikasi React. Aplikasi ASP.NET Core dimaksudkan untuk digunakan untuk akses data, otorisasi, dan masalah sisi server lainnya. Aplikasi React, yang berada di ClientApp subdirektori, dimaksudkan untuk digunakan untuk semua masalah UI.

Tambahkan halaman, gambar, gaya, modul, dll.

ClientApp Direktori adalah aplikasi CRA React standar. Lihat dokumentasi CRA resmi untuk informasi selengkapnya.

Ada sedikit perbedaan antara aplikasi React yang dibuat oleh templat ini dan yang dibuat oleh CRA itu sendiri; namun, kemampuan aplikasi tidak berubah. Aplikasi yang dibuat oleh templat berisi tata letak berbasis Bootstrap dan contoh perutean dasar.

Memasang paket npm

Untuk menginstal paket npm pihak ketiga, gunakan prompt perintah di subdirektori ClientApp . Contohnya:

cd ClientApp
npm install <package_name>

Menerbitkan dan menyebarkan

Dalam pengembangan, aplikasi berjalan dalam mode yang dioptimalkan untuk kenyamanan pengembang. Misalnya, bundel JavaScript menyertakan peta sumber (sehingga saat penelusuran kesalahan, Anda dapat melihat kode sumber asli Anda). Aplikasi ini mengawasi perubahan file JavaScript, HTML, dan CSS pada disk dan secara otomatis mengkombinasi ulang dan memuat ulang saat melihat file tersebut berubah.

Dalam produksi, sajikan versi aplikasi Anda yang dioptimalkan untuk performa. Ini dikonfigurasi untuk terjadi secara otomatis. Saat Anda menerbitkan, konfigurasi build memancarkan build yang dikurangi dan ditranspilasi dari kode sisi klien Anda. Tidak seperti build pengembangan, build produksi tidak mengharuskan Node.js diinstal di server.

Anda dapat menggunakan metode hosting dan penyebaran ASP.NET Core standar.

Jalankan server CRA secara independen

Proyek ini dikonfigurasi untuk memulai instans server pengembangan CRA sendiri di latar belakang ketika aplikasi ASP.NET Core dimulai dalam mode pengembangan. Ini nyaman karena itu berarti Anda tidak perlu menjalankan server terpisah secara manual.

Ada kelemahan untuk penyiapan default ini. Setiap kali Anda memodifikasi kode C# dan aplikasi ASP.NET Core Anda perlu dimulai ulang, server CRA dimulai ulang. Beberapa detik diperlukan untuk memulai pencadangan. Jika Anda sering melakukan pengeditan kode C# dan tidak ingin menunggu server CRA dimulai ulang, jalankan server CRA secara eksternal, secara independen dari proses ASP.NET Core.

Untuk menjalankan server CRA secara eksternal, beralihlah ClientApp ke subdirektori dalam prompt perintah dan luncurkan server pengembangan CRA:

cd ClientApp
npm start

Saat Anda memulai aplikasi ASP.NET Core, aplikasi tersebut tidak akan meluncurkan server CRA. Instans yang Anda mulai secara manual digunakan sebagai gantinya. Ini memungkinkannya untuk memulai dan memulai ulang lebih cepat. Ini tidak lagi menunggu aplikasi React Anda dibangun kembali setiap kali.

Mengonfigurasi middleware proksi untuk SignalR

Untuk informasi selengkapnya, lihat http-proxy-middleware.

Sumber Daya Tambahan:

Templat proyek React yang diperbarui menyediakan titik awal yang nyaman untuk aplikasi ASP.NET Core menggunakan konvensi React dan create-react-app (CRA) untuk menerapkan antarmuka pengguna (UI) sisi klien yang kaya.

Templat ini setara dengan membuat proyek ASP.NET Core untuk bertindak sebagai backend API, dan proyek CRA React standar untuk bertindak sebagai UI, tetapi dengan kenyamanan hosting baik dalam satu proyek aplikasi yang dapat dibangun dan diterbitkan sebagai satu unit.

Templat proyek React tidak dimaksudkan untuk penyajian sisi server (SSR). Untuk SSR dengan React dan Node.js, pertimbangkan Next.js atau Razzle.

Membuat aplikasi baru

Buat proyek baru dari prompt perintah menggunakan perintah dotnet new react di direktori kosong. Misalnya, perintah berikut membuat aplikasi di my-new-app direktori dan beralih ke direktori tersebut:

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

Jalankan aplikasi dari Visual Studio atau .NET CLI:

Buka file yang dihasilkan .csproj , dan jalankan aplikasi seperti biasa dari sana.

Proses build memulihkan dependensi npm pada eksekusi pertama, yang dapat memakan waktu beberapa menit. Build berikutnya jauh lebih cepat.

Templat proyek membuat aplikasi ASP.NET Core dan aplikasi React. Aplikasi ASP.NET Core dimaksudkan untuk digunakan untuk akses data, otorisasi, dan masalah sisi server lainnya. Aplikasi React, yang berada di ClientApp subdirektori, dimaksudkan untuk digunakan untuk semua masalah UI.

Tambahkan halaman, gambar, gaya, modul, dll.

ClientApp Direktori adalah aplikasi CRA React standar. Lihat dokumentasi CRA resmi untuk informasi selengkapnya.

Ada sedikit perbedaan antara aplikasi React yang dibuat oleh templat ini dan yang dibuat oleh CRA itu sendiri; namun, kemampuan aplikasi tidak berubah. Aplikasi yang dibuat oleh templat berisi tata letak berbasis Bootstrap dan contoh perutean dasar.

Memasang paket npm

Untuk menginstal paket npm pihak ketiga, gunakan prompt perintah di subdirektori ClientApp . Contohnya:

cd ClientApp
npm install --save <package_name>

Menerbitkan dan menyebarkan

Dalam pengembangan, aplikasi berjalan dalam mode yang dioptimalkan untuk kenyamanan pengembang. Misalnya, bundel JavaScript menyertakan peta sumber (sehingga saat penelusuran kesalahan, Anda dapat melihat kode sumber asli Anda). Aplikasi ini mengawasi perubahan file JavaScript, HTML, dan CSS pada disk dan secara otomatis mengkombinasi ulang dan memuat ulang saat melihat file tersebut berubah.

Dalam produksi, sajikan versi aplikasi Anda yang dioptimalkan untuk performa. Ini dikonfigurasi untuk terjadi secara otomatis. Saat Anda menerbitkan, konfigurasi build memancarkan build yang dikurangi dan ditranspilasi dari kode sisi klien Anda. Tidak seperti build pengembangan, build produksi tidak mengharuskan Node.js diinstal di server.

Anda dapat menggunakan metode hosting dan penyebaran ASP.NET Core standar.

Jalankan server CRA secara independen

Proyek ini dikonfigurasi untuk memulai instans server pengembangan CRA sendiri di latar belakang ketika aplikasi ASP.NET Core dimulai dalam mode pengembangan. Ini nyaman karena itu berarti Anda tidak perlu menjalankan server terpisah secara manual.

Ada kelemahan untuk penyiapan default ini. Setiap kali Anda memodifikasi kode C# dan aplikasi ASP.NET Core Anda perlu dimulai ulang, server CRA dimulai ulang. Beberapa detik diperlukan untuk memulai pencadangan. Jika Anda sering melakukan pengeditan kode C# dan tidak ingin menunggu server CRA dimulai ulang, jalankan server CRA secara eksternal, secara independen dari proses ASP.NET Core. Untuk melakukannya:

  1. .env Tambahkan file ke subdirektori ClientApp dengan pengaturan berikut:

    BROWSER=none

    Ini akan mencegah browser web Anda terbuka saat memulai server CRA secara eksternal.

  2. Dalam prompt perintah, beralihlah ke ClientApp subdirektori, dan luncurkan server pengembangan CRA:

    cd ClientApp
npm start

  3. Ubah aplikasi ASP.NET Core Anda untuk menggunakan instans server CRA eksternal alih-alih meluncurkan salah satu aplikasinya sendiri. Di kelas Startup Anda, ganti spa.UseReactDevelopmentServer pemanggilan dengan yang berikut:

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

Saat Anda memulai aplikasi ASP.NET Core, aplikasi tersebut tidak akan meluncurkan server CRA. Instans yang Anda mulai secara manual digunakan sebagai gantinya. Ini memungkinkannya untuk memulai dan memulai ulang lebih cepat. Ini tidak lagi menunggu aplikasi React Anda dibangun kembali setiap kali.

Penting

"Penyajian sisi server" bukan fitur yang didukung dari templat ini. Tujuan kami dengan templat ini adalah untuk memenuhi paritas dengan "create-react-app". Dengan demikian, skenario dan fitur yang tidak disertakan dalam proyek "create-react-app" (seperti SSR) tidak didukung dan dibiarkan sebagai latihan untuk pengguna.

Mengonfigurasi middleware proksi untuk SignalR

Untuk informasi selengkapnya, lihat http-proxy-middleware.

Sumber Daya Tambahan: