Windows VPS’ye React.js Nasıl Kurulur
React.js, Facebook tarafından özellikle tek sayfalık uygulamalar için kullanıcı arayüzleri oluşturmak üzere geliştirilmiş güçlü bir JavaScript kütüphanesidir. Geliştiricilerin sayfayı yeniden yüklemeden verileri değiştirebilen büyük web uygulamaları oluşturmasına olanak tanır. Windows makinenizde React.js ile çalışmaya başlamak istiyorsanız, bu kılavuz kısa sürede kurulum yapmanıza yardımcı olacaktır.
Ön Koşullar
React.js’yi yüklemeden önce, Windows sisteminizde aşağıdakilerin yüklü olduğundan emin olun:
- Node.js: React, sunucuda JavaScript çalıştırmak için çalışma zamanı ortamı sağlayan ve bağımlılıkları yönetmek için npm (Node Package Manager) içeren Node.js’ye dayanır.
- Metin Düzenleyici: Visual Studio Code (VS Code), Sublime Text veya tercih ettiğiniz herhangi bir IDE gibi bir metin düzenleyiciye ihtiyacınız olacak.
Hadi başlayalım!
Adım 1: Node.js’yi yükleyin
1.1 Node.js’yi indirin
Node.js’yi yüklemek için aşağıdaki adımları izleyin:
- Resmi Node.js web sitesini ziyaret edin: https://nodejs.org.
- Windows için Node.js’in en son LTS (Uzun Süreli Destek) sürümünü indirin.
- İndirme işlemi tamamlandıktan sonra yükleyiciyi çalıştırın.
1.2 Node.js’yi yükleyin
Node.js yükleyicisindeki talimatları izleyin:
- Karşılama ekranında İleri ‘yi seçin.
- Lisans sözleşmesini kabul edin ve İleri‘ye tıklayın.
- Hedef klasörü seçin ve İleri‘ye tıklayın.
- “Node.js çalışma zamanı”, “npm paket yöneticisi” ve diğer araçların işaretlendiğinden emin olun ve İleri‘ye tıklayın.
- Kurulumu tamamlayın.
1.3 Node.js ve npm Kurulumunu Doğrulama
Node.js kurulduktan sonra, bir terminal (Komut İstemi veya PowerShell) açıp aşağıdaki komutları çalıştırarak doğrulayabilirsiniz:
düğüm -v
Bu komut Node.js’nin kurulu sürümünün çıktısını verecektir.
npm -v
Bu komut, Node.js ile birlikte yüklenen npm (Node Paket Yöneticisi) sürümünün çıktısını verecektir.
Her iki komut da sürüm numarası döndürürse, Node.js ve npm başarıyla yüklenmiştir.
Adım 2: Create React App Aracını Yükleyin
React uygulamaları, standart bir yapıya ve derleme yapılandırmasına sahip tek sayfalı React uygulamaları oluşturmanın resmi olarak desteklenen bir yolu olan Create React App aracı kullanılarak oluşturulur.
Yüklemek için aşağıdaki adımları izleyin:
2.1 Bir Komut İstemi veya PowerShell açın
Yeni bir terminal penceresi açın (Komut İstemi veya PowerShell).
2.2 React Uygulaması Oluşturmayı Global Olarak Yükleme
Create React App’i sisteminize global olarak yüklemek için aşağıdaki npm komutunu çalıştırın:
npm install -g create-react-app
Bu, create-react-app paketini global olarak yükler, böylece dosya sisteminizdeki herhangi bir yerden yeni React projeleri oluşturabilirsiniz.
Adım 3: Yeni Bir React Uygulaması Oluşturun
Create React App yüklendikten sonra, aşağıdaki adımları izleyerek yeni bir React.js projesi oluşturabilirsiniz:
3.1 Proje Dizininize Gidin
Yeni React uygulamanızı oluşturmak istediğiniz klasöre gitmek için cd komutunu kullanın. Örneğin:
cd C:\Projeler
3.2 Yeni bir React Projesi Oluşturun
Terminalde, yeni bir React projesi oluşturmak için aşağıdaki komutu çalıştırın:
npx create-react-app my-react-app
My-react-app yerine projenizin adını yazın. Bu komut, projenizin adıyla yeni bir dizin oluşturacak ve bir React uygulaması için gerekli tüm dosyaları ve bağımlılıkları yükleyecektir.
3.3 React Projenize Gitme
Proje oluşturulduktan sonra, proje dizininize gidin:
cd my-react-app
3.4 Geliştirme Sunucusunu Başlatın
Artık React projeniz hazır olduğuna göre geliştirme sunucusunu başlatabilirsiniz. Bu, uygulamanızı tarayıcıda açar ve çalışırken yeniden yüklemeyi etkinleştirir, böylece kodunuzda her değişiklik yaptığınızda uygulamanız otomatik olarak yenilenir.
Geliştirme sunucusunu başlatmak için çalıştırın:
npm start
Birkaç dakika sonra, terminalde geliştirme sunucusunun çalıştığını gösteren bir çıktı göreceksiniz ve tarayıcınız otomatik olarak http://localhost:3000 adresine açılarak varsayılan React uygulama sayfasını görüntüleyecektir.
Otomatik olarak açılmazsa, tarayıcınızı manuel olarak açabilir ve http://localhost:3000 adresine gidebilirsiniz.
Adım 4: Projenizi Bir Metin Düzenleyicide Açın
Bu noktada, React projeniz çalışıyor ve kodlamaya başlayabilirsiniz!
4.1 Bir Metin Düzenleyici yükleyin (henüz yüklenmemişse)
Kodunuzu yazmak için bir metin editörüne ihtiyacınız olacak. Bazı popüler seçenekler şunlardır:
- Visual Studio Code (VS Code): Hafif, güçlü ve React geliştirme için yaygın olarak kullanılır. JavaScript ve React.js için harika bir desteğe sahiptir.
- Sublime Text: Hızlı ve basit, birçok programlama dilini destekliyor.
- Atom: Özelleştirilebilir ve hacklenebilir bir metin editörü.
4.2 Projenizi Düzenleyicide Açın
Bir metin editörü kurduktan sonra, editörde React proje klasörünüzü (my-react-app) açın.
Örneğin Visual Studio Code’da, Dosya > Klasörü Aç ‘ı seçip React proje dizininize giderek klasörü açabilirsiniz.
Artık React uygulamanızı oluşturmaya başlamak için src klasörü dosyalarını değiştirmeye başlayabilirsiniz.
Adım 5: Üretim için React Uygulamanızı Oluşturun
React uygulamanızı dağıtmaya hazır olduğunuzda, bir üretim derlemesi oluşturmanız gerekir. Bu, dosya boyutunu en aza indirir ve uygulamayı performans için optimize eder.
Bir üretim derlemesi oluşturmak için aşağıdaki komutu çalıştırın:
npm run build
Bu,
derleme
Adım 6: Sorun Giderme ve Sık Karşılaşılan Sorunlar
6.1 Komut Tanınmadı
Eğer npm için “komut tanınmadı” hatası ile karşılaşırsanız, bunun nedeni kurulum sırasında Node.js’nin sistemin PATH’ine eklenmemiş olması olabilir. Bunu düzeltmek için aşağıdaki adımları izleyin:
- Windows Tuşu R’ye basıp sysdm.cpl yazarak ve Enter tuşuna basarak Sistem Özellikleri ‘ni açın.
- Gelişmiş sekmesi altında Ortam Değişkenleri ‘ne tıklayın.
- Sistem Değişkenleri altında Yol değişkenini bulun ve Düzenle‘ye tıklayın.
- Node.js kurulumunun yolunu ekleyin (genellikle C:\Program Files\nodejs\) ve Tamam‘a tıklayın.
6.2 React Uygulaması Oluşturma ile İlgili Sorunlar
Create-react-app ile ilgili sorun yaşarsanız, npm önbelleğinizi temizlemeyi ve yeniden yüklemeyi deneyin:
npm cache clean --forcee
npm install -g create-react-app
Sonuç
Tebrikler! React.js’yi Windows makinenize başarıyla yüklediniz. Artık JavaScript ve React’in sağladığı zengin kütüphane ve araç ekosistemini kullanarak React uygulamalarınızı oluşturmaya başlamaya hazırsınız. İster web uygulamaları ister mobil uygulamalar geliştiriyor olun, React dinamik kullanıcı arayüzleri oluşturmak için esneklik ve güç sunar.