Linux için Windows Alt Sisteminde React'i yükleme

Bu kılavuz, vite ön uç araçlarını kullanarak, Windows için Linux Alt Sistemi'nde (WSL) çalışan bir Linux dağıtımı (örneğin, Ubuntu) üzerine React yükleme adımlarını gösterecektir.

Bash komutlarını veya araçlarını linux sunucusuna dağıtmayı ve/veya Docker kapsayıcılarını kullanmayı planlamayı istediğiniz tek sayfalı bir uygulama (SPA) oluşturuyorsanız bu yönergelerin izlenmesini öneririz. React'te yeniyseniz ve yalnızca öğrenmek istiyorsanız , vite ile doğrudan Windows'a yüklemeyi düşünebilirsiniz.

React, React (web uygulamaları), React Native (mobil uygulamalar) ve Masaüstü için React Native (masaüstü uygulamaları) arasında karar verme hakkında daha genel bilgi için React'e genel bakış bölümüne bakın.

Önkoşullar

• Windows 10'un en son sürümünü (Sürüm 1903+, Derleme 18362+) veya Windows 11'i yükleyin
• Linux dağıtımı (Ubuntu gibi) dahil olmak üzere Linux için Windows Alt Sistemi (WSL)yükleyin ve WSL 2 modunda çalıştığından emin olun. PowerShell'i açıp şunu girerek bunu deleyebilirsiniz: wsl -l -v
• WSL 2'de Node.js yükleme: Bu yönergelerde yükleme için Node Version Manager (nvm) kullanılır. Vite'yi çalıştırmak için NodeJS'nin son sürümüne ve Node Package Manager'ın (npm) son sürümüne ihtiyacınız olacaktır.

Önemli

WSL ile Linux dağıtımı yüklemek, dosyaları depolamak için bir dizin oluşturur: \\wsl\Ubuntu-20.04 (kullandığınız Linux dağıtımıyla Ubuntu-20.04'ü kullanın). Bu dizini Windows Dosya Gezgini'nde açmak için WSL komut satırınızı açın, cd ~kullanarak giriş dizininizi seçin, ardından komutunu girin explorer.exe . NodeJS'yi yüklememeye veya bağlı C sürücüsünde (/mnt/c/Users/yourname$) üzerinde çalışacağınız dosyaları depolamamaya dikkat edin. Bunun yapılması yükleme ve derleme sürelerinizi önemli ölçüde yavaşlatır.

React'i yükleme

WSL'de tam React araç zincirini yüklemek için vite kullanmanızı öneririz.

1. WSL komut satırını açın (örneğin, Ubuntu).

2. Yeni bir proje klasörü oluşturun: mkdir ReactProjects ve şu dizini girin: cd ReactProjects.

3. Vite kullanarak React'i yükleyin:

   npm create vite@latest my-react-app -- --template react
   

4. Yüklendikten sonra dizinleri yeni uygulamanıza ("my-react-app" veya çağırmak için seçtiğiniz her şey) değiştirin, cd my-react-appbağımlılıkları yükleyin: npm install ve ardından yerel geliştirme sunucunuzu başlatın: npm run dev

   Bu komut Node.js sunucusunu başlatır ve uygulamanızı görüntüleyen yeni bir tarayıcı penceresi başlatır. React uygulamasını komut satırınızda çalıştırmayı durdurmak için Ctrl + c kullanabilirsiniz.

Uyarı

Vite , Babel, esbuild ve Rollup kullanan bir ön uç derleme işlem hattı içerir, ancak arka uç mantığını veya veritabanlarını işlemez. React ile Node.js arka ucu kullanan sunucu tarafından işlenmiş bir web sitesi oluşturmak istiyorsanız, tek sayfalı uygulamalar (SPA) için daha fazla amaçlanan bu Vite yüklemesi yerine Next.jsyüklemenizi öneririz. Statik içerik odaklı bir web sitesi oluşturmak istiyorsanız Gatsby yüklemeyi de düşünebilirsiniz.

6. Web uygulamanızı üretim ortamına dağıtmaya hazır olduğunuzda, "dist" klasöründe uygulamanızın bir derlemesini oluşturmak için komutunu çalıştırın npm run build . Statik Site Dağıtma bölümünden daha fazla bilgi edinebilirsiniz.

Ek kaynaklar

• React belgeleri
• Vite
• Yükleme Next.js
• Gatsby'yi Yükle
• Masaüstü için React Native'i yükleme
• NodeJS'yi Windows'a Yükleme
• WSL'ye NodeJS Yükleme
• Öğreticiyi deneyin: Visual Studio Code'da React Kullanma
• React öğrenme yolunu deneyin