Aracılığıyla paylaş

React uygulaması oluşturma

  • Makale

Visual Studio tümleşik geliştirme ortamına (IDE) bu 5-10 dakikalık girişte basit bir React ön uç web uygulaması oluşturup çalıştıracaksınız.

Önkoşullar

Aşağıdakileri yüklediğinizden emin olun:

Uygulamanızı oluşturma

  1. Başlangıç penceresinde (açmak için Dosya>Başlangıç Penceresi'ni seçin), Yeni proje oluştur'u seçin.

    Screenshot showing Create a new project

  2. Üstteki arama çubuğunda React araması yapın ve ardından tercihinize göre Tek Başına JavaScript React Projesi veya Tek Başına TypeScript React Projesi'ni seçin.

    Screenshot showing choosing a template

  3. Projenize ve çözümünüze bir ad verin.

    Daha önce Tek Başına JavaScript React Şablonu'nı seçtiyseniz, Ek bilgi penceresine gittiğiniz zaman Boş ASP.NET Web API Projesi için tümleştirme ekle seçeneğini DENETLEMEYİn. Bu seçenek, bir ASP.NET Core projesi eklendiğinde ASP.NET Core projesiyle bağlanabilmesi için React şablonunuza dosya ekler.

    Screenshot showing Additional information

  4. Oluştur'u seçin ve Visual Studio'da projeyi oluşturmasını bekleyin.

    React projesinin oluşturulması biraz zaman alır çünkü şu anda çalışan create-react-app komutu npm install komutunu da çalıştırır.

Proje özelliklerini görüntüleme

Varsayılan proje ayarları, projeyi derlemenize ve hatalarını ayıklamanıza olanak sağlar. Ancak, ayarları değiştirmeniz gerekiyorsa, Çözüm Gezgini'da projeye sağ tıklayın, Özellikler'i seçin ve ardından Derleme veya Hata Ayıklama bölümüne gidin.

Not

launch.json, Hata Ayıklama araç çubuğunda başlangıç düğmesiyle ilişkili başlangıç ayarlarını depolar. Şu anda launch.json dosyasının .vscode klasörünün altında bulunması gerekir.

Projenizi Oluşturma

Projeyi oluşturmak için Derleme>Çözümü Oluştur'u seçin.

Projenizi Başlatma

F5 tuşuna basın veya pencerenin üst kısmındaki Başlangıç düğmesini seçtiğinizde aşağıdaki gibi bir komut istemi görürsünüz:

  • VITE v4.4.9 780 ms'de hazır

Not

Node.js sürümünüzü güncelleştirmenizi belirten bir ileti gibi iletiler için konsol çıkışını denetleyin.

Ardından, temel React uygulamasının gösterildiğini görmeniz gerekir!

Sonraki adımlar

ASP.NET Core tümleştirmesi için:

React ile ASP.NET Core uygulaması oluşturma