Kurulum ve Vite
- React kursu
- Başlangıç
- Ders 2/84
- 4 dk
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">konursrc/main.jsx: React'i başlatan dosya;ReactDOM.createRootçağrılırsrc/App.jsx: varsayılan kök bileşenpackage.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.
Başlangıç kodu
import { createRoot } from 'react-dom/client';
import App from './App';
// React'i root içine çizÖrnek çözüm
createRoot(document.getElementById('root')).render(<App />);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi komut Vite ile React projesi açar?
- npm start react my-app
- npm create vite@latest my-app -- --template react Doğru cevap
- npm new react my-app
- npm init react-app my-app --vite
Açıklama: Vite, npm create vite@latest ... -- --template react ile başlatılır.
2 React'i bağlayan div
React, ____ id="root" olan düğümün içine çizilir.React, div id="root" olan düğümün içine çizilir.Açıklama: Varsayılan kök bir <div id="root"> düğümüdür.
3 Dosyaları eşleştir
| Kavram | Anlamı |
|---|---|
index.html |
Giriş HTML |
main.jsx |
React'i başlatır |
App.jsx |
Kök bileşen |
package.json |
Bağımlılıklar |