Kurulum ve Vite

Vite ile yeni bir React projesi başlatmayı ve proje yapısını tanırsın.

Kurulum ve Vite

Yeni bir React projesi başlatmanın en hızlı yolu Vite'tır. Vite, geliştirme şunucusunu saniyeler içinde açar ve değişiklikleri anında ekrana yansıtır.

Terminalde şu komutu yazarsın: npm create vite@latest my-app -- --template react. Bu komut my-app adında bir klasör açar ve içine bir React başlangıç projesi koyar.

Sonra cd my-app ile klasöre girer, npm install ile bağımlılıkları kurar ve npm run dev ile geliştirme şunucusunu başlatırsın. Tarayıcı http://localhost:5173 adresinde açılır.

Proje yapısı

Vite ile açtığın projede birkaç önemli dosya vardır:

index.html: uygulamanın giriş HTML'i; içine bir <div id="root"> konur
src/main.jsx: React'i başlatan dosya; ReactDOM.createRoot çağrılır
src/App.jsx: varsayılan kök bileşen
package.json: bağımlılıklar ve komutlar

main.jsx içinde createRoot(document.getElementById('root')).render(<App />) satırı, React'i #root düğümüne bağlar.

Uygulama main.jsx içeriği

Aşağıdaki iskeleti tamamla. main.jsx içine createRoot çağrısı ekle: document.getElementById('root') düğümünü alıp içine <App /> çiz.

Örnek çözümü göster

createRoot(document.getElementById('root')).render(<App />);

Kendini test et

Hangi komut Vite ile React projesi açar?
- npm start react my-app
- npm create vite@latest my-app -- --template react
- npm new react my-app
- npm init react-app my-app --vite
Cevabı göster

npm create vite@latest my-app -- --template react — Vite, npm create vite@latest ... -- --template react ile başlatılır.

React'i bağlayan div

React, ____ id="root" olan düğümün içine çizilir.

Cevabı göster

React, div id="root" olan düğümün içine çizilir.

Dosyaları eşleştir

index.html

Giriş HTML
main.jsx

React'i başlatır
App.jsx

Kök bileşen
package.json

Bağımlılıklar

Sıradaki ders: İlk bileşen

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler