Skip to main content

⚡ Vite ile Hızlı React Projesi Kurulumu: Adım Adım Türkçe Rehber

🧭 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, Create React App yerine çok daha hızlı çalışan Vite aracını kullanarak bir React uygulaması kurmayı, özel bileşenler ve stiller eklemeyi ve üretim için optimize edilmiş paket oluşturmayı adım adım öğreneceksiniz.

💻 Ön Gereksinimler​

Başlamadan önce aşağıdaki araçların kurulu olduğundan emin olun:

  • Node.js: v12.2.0 veya üstü
  • Yarn Paket Yöneticisi: v1.22.0 veya üstü
  • Temel Bilgiler: HTML, CSS, modern JavaScript ve React kavramlarına aşinalık
  • İsteğe Bağlı: Mobil cihazınız, yerel ağda önizleme yapmak için aynı Wi-Fi’a bağlı olmalı

1️⃣ Yeni Vite Projesi Oluşturma​

Yeni bir React projesi oluşturmak için terminali açın ve şu komutu çalıştırın:

yarn create vite

Bu komut, Vite aracını indirip yerel geliştirme ortamını hazırlar.

Proje oluşturma adımlarında:


Proje adı: rabisu-vite-proje

Framework: React

Dil tipi: JavaScript

Sonrasında dizine girip bağımlılıkları kurun:

cd rabisu-vite-proje
yarn

2️⃣ Geliştirme Sunucusunu Başlatma​

Projeyi geliştirme modunda başlatın:


yarn run dev

Bu komut, React uygulamanızı http://localhost:5173/ adresinde başlatır.

Tarayıcıda açarak ilk React sayfasını görebilirsiniz.

3️⃣ Uygulamayı Mobilde Önizleme (Opsiyonel)​

Vite uygulaması varsayılan olarak sadece yerel bilgisayara açıktır. Aynı ağdaki bir telefondan test etmek için mevcut sunucuyu durdurun:

CTRL + C

Ardından şu komutla yeniden çalıştırın:


yarn run dev --host

Çıktıda Network: http://192.168.1.xx:5173benzeri bir adres görünecektir. Bu adresi telefon tarayıcınıza yazarak uygulamayı görebilirsiniz.

4️⃣ Varsayılan Kodları Kaldırma​

Temiz bir başlangıç için varsayılan dosyaları silin:


rm src/App.css src/App.jsx src/index.css
rm -r src/assets

Ardından src/main.jsx dosyasını açın ve şu satırı silin:


import "./index.css";

5️⃣ Yeni Bileşen, Görsel ve CSS Ekleme​

➤ Yeni bileşen oluşturma​


mkdir src/components
nano src/components/Welcome.jsx
jsx


export default function Welcome() {
  return (
    <div className="wrapper">
      <h1>Rabisu Bulut’a Hoş Geldiniz</h1>
      <p>Bu, Vite ile oluşturulmuş bir React uygulamasıdır!</p>
    </div>
  );
}

➤ Görsel ekleme​


mkdir src/img
wget https://html.sammy-codes.com/images/small-profile.jpeg -O src/img/rabisu-maskot.jpeg

Bileşene görseli dahil edin:


import Maskot from "../img/rabisu-maskot.jpeg";

➤ Stil dosyası ekleme​


mkdir src/css
nano src/css/ana-stil.css
css

body {
  display: grid;
  place-items: center;
  background-color: #b4a7d6;
  font-family: Arial, sans-serif;
}

.wrapper {
  background-color: #fff9e6;
  padding: 20px;
  border-radius: 10px;
}

h1 {
  color: #8873be;
}

CSS’i bileşene dahil edin:


import "../css/ana-stil.css";

6️⃣ Başlık Değiştirme​

index.html dosyasını açın ve <title> etiketini düzenleyin:

<title>Rabisu’nun Hızlı React Uygulaması</title>

Bu değişiklik, tarayıcı sekmesinde görünen uygulama başlığını günceller.

7️⃣ Build (Üretim) Alma​

Son olarak optimize edilmiş dosyaları oluşturun:


yarn run build

Bu komut, dist/ klasörüne minify edilmiş kaynakları çıkarır.

Bu klasörü Rabisu Bulut sunucunuza veya Nginx, Apache gibi bir web sunucusuna yükleyerek yayına alabilirsiniz.

❓ Sıkça Sorulan Sorular (SSS)​

  1. Vite neden CRA’den daha hızlı?

Vite, yerel ES modülleri sayesinde sadece değişen dosyaları yeniden yükler. CRA ise tüm projeyi yeniden derler.

  1. .env dosyaları nasıl çalışır?

Vite değişkenleri VITE_ önekiyle tanır. Kod içinde import.meta.env.VITE_API_URL şeklinde erişilir.

  1. TypeScript desteği var mı?

Evet. Kurulum sırasında “TypeScript” veya “TypeScript + SWC” seçebilirsin.

  1. dist klasörü nasıl yayınlanır?

Bu klasör tamamen statik dosyalardır. Rabisu Bulut’ta ya da herhangi bir CDN’de kolayca barındırabilirsin.

  1. Build sonrası hata olursa ne yapmalıyım?

CTRL+C ile sunucuyu kapat, ardından yarn run dev komutuyla yeniden başlat.

🚀 Sonuç​

Tebrikler! 🎉 Artık Vite ile React projeni sıfırdan kurmayı, bileşen eklemeyi, stilleri bağlamayı ve optimize build almayı öğrendin. Hızlı geliştirme deneyimi için hemen Rabisu Bulut Platformu’nda kendi uygulamanı kurup test edebilirsin.