Proje kurulumu: Vite, düzen ve geliştirme sunucusu
Vite (veya benzeri) ile bir React uygulaması oluşturun, temel klasör düzenini anlayın, geliştirme sunucusunu çalıştırın ve küçük bir bileşenle oluşturmayı doğrulayın.
Proje kurulumu: Vite, düzen ve geliştirme sunucusu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
Kuruluma genel bakış
Amaç: Hızla bir proje oluşturun, klasör yapısını öğrenin ve sıcak yeniden yüklemeli bir geliştirme sunucusu çalıştırın.
- Vite (veya benzeri) ile proje iskeleti oluşturma
- Dosyaların bulunduğu yerler
- Uygulamayı başlatma ve doğrulama
Ön koşullar
Ön koşullar:
- Node.js LTS ve npm kurulu olmalıdır
- Terminal erişimi
- Temel CLI kullanımı (cd, ls)
Vite ile iskelet oluşturma
Projeyi hızlı bir araçla oluşturun:
- İskelet oluşturun (ör. npm create vite@latest)
- React (JavaScript) seçin
- Bağımlılıkları kurun (npm install)
Klasörün temel öğeleri
Yapı (tipik):
- index.html:
div#rootöğesini içerir - src/main.jsx: kökü oluşturur ve App'i görüntüler
- src/App.jsx: bileşeniniz
Geliştirme sunucusunu çalıştırma
Geliştirme sunucusu:
- npm run dev ile başlatın
- Yerel URL'yi açın
- App.jsx'i düzenleyin; değişiklikler anında görünür (sıcak yeniden yükleme)
Oluşturmayı doğrulama
Kurulumun çalıştığını doğrulamak için küçük bir App oluşturun; sıcak yeniden yüklemeyi görmek için metni değiştirin.
<div id="root"></div>
Bir Vite React uygulamasında, <div id="root"> öğesi genellikle hangi dosyada bulunur?
Özet
Özet: Vite ile iskelet oluşturun, index.html, main.jsx ve App.jsx dosyalarının nerede bulunduğunu öğrenin, geliştirme sunucusunu çalıştırın ve küçük bir bileşenle oluşturmayı doğrulayın.
Sıkça Sorulan Sorular
“Proje kurulumu: Vite, düzen ve geliştirme sunucusu” dersi ücretsiz mi?
Evet — “Proje kurulumu: Vite, düzen ve geliştirme sunucusu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“Proje kurulumu: Vite, düzen ve geliştirme sunucusu” dersinde ne öğreneceğim?
Vite (veya benzeri) ile bir React uygulaması oluşturun, temel klasör düzenini anlayın, geliştirme sunucusunu çalıştırın ve küçük bir bileşenle oluşturmayı doğrulayın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“Proje kurulumu: Vite, düzen ve geliştirme sunucusu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- React'e başlangıç: kavramlar ve kurulum
- Proje kurulumu: Vite, düzen ve geliştirme sunucusu
- İlk bileşen ve oluşturma