Bagikan melalui

Membuat aplikasi React

  • Artikel

Dalam pengenalan 5-10 menit ini ke lingkungan pengembangan terpadu (IDE) Visual Studio, Anda membuat dan menjalankan aplikasi web frontend React sederhana.

Prasyarat

Pastikan untuk menginstal hal berikut:

Membuat aplikasi Anda

  1. Di jendela Mulai (pilih Jendela Mulai File>untuk dibuka), pilih Buat proyek baru.

    Screenshot showing Create a new project

  2. Cari React di bilah pencarian di bagian atas lalu pilih Proyek React JavaScript Mandiri atau Proyek React TypeScript Mandiri, berdasarkan preferensi Anda.

    Screenshot showing choosing a template

  3. Beri nama proyek dan solusi Anda.

    Jika sebelumnya Anda memilih Standalone JavaScript React Template, ketika Anda masuk ke jendela Informasi tambahan pastikan untuk TIDAK mencentang opsi Tambahkan integrasi untuk Proyek Web API ASP.NET Kosong. Opsi ini menambahkan file ke templat React Anda sehingga dapat dikaitkan dengan proyek ASP.NET Core, jika proyek ASP.NET Core ditambahkan.

    Screenshot showing Additional information

  4. Pilih Buat, lalu tunggu Visual Studio untuk membuat proyek.

    Harap dicatat bahwa pembuatan proyek React membutuhkan waktu sejenak karena perintah create-react-app yang berjalan saat ini juga menjalankan perintah penginstalan npm.

Menampilkan properti proyek

Pengaturan proyek default memungkinkan Anda untuk membangun dan men-debug proyek. Tetapi, jika Anda perlu mengubah pengaturan, klik kanan proyek di Penjelajah Solusi, pilih Properti, lalu buka bagian Build atau Debugging.

Catatan

launch.json menyimpan pengaturan startup yang terkait dengan tombol Mulai di toolbar Debug. Saat ini, launch.json harus terletak di folder .vscode.

Membangun Proyek Anda

Pilih Build>Solusi Build untuk membangun proyek.

Mulai Proyek Anda

Tekan F5 atau pilih tombol Mulai di bagian atas jendela, dan Anda akan melihat perintah seperti:

  • VITE v4.4.9 siap dalam 780 mdtk

Catatan

Periksa output konsol untuk pesan, seperti pesan yang menginstruksikan Anda untuk memperbarui versi Node.js Anda.

Selanjutnya, Anda akan melihat aplikasi React dasar muncul!

Langkah berikutnya

Untuk integrasi ASP.NET Core:

Buat aplikasi ASP.NET Core dengan React