React Projelerini Vite ile Hızlı Geliştirme İçin Kurulum Rehberi

React Projelerini Vite ile Hızlı Geliştirme İçin Kurulum Rehberi

Modern web geliştirme dünyasında hız, verimlilik ve kullanıcı deneyimi her zamankinden daha kritik bir öneme sahiptir. Özellikle React gibi bileşen tabanlı kütüphanelerle büyük ölçekli uygulamalar geliştirirken, geliştirme süreçlerinin olabildiğince akıcı ve hızlı olması beklenir. Bu noktada, geleneksel derleme araçlarının (bundlers) karşılaştığı performans sorunları, yeni nesil araçlara olan ihtiyacı doğurmuştur. İşte tam da bu ihtiyaca cevap veren araçlardan biri de Vite’tır. Bu makalede, React projelerinizi Vite ile nasıl kuracağınızı, yapılandıracağınızı ve geliştirme süreçlerinizi nasıl hızlandıracağınızı adım adım inceleyeceğiz.

Giriş: React ve Geliştirme Ortamlarının Evrimi

React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bileşen tabanlı yapısı sayesinde karmaşık UI’ları yönetilebilir parçalara ayırma ve yeniden kullanılabilirlik sağlama konusunda büyük avantajlar sunar. Ancak React uygulamaları genellikle JSX (JavaScript XML), TypeScript, CSS ön işlemcileri gibi modern özellikler kullanır. Tarayıcılar bu dilleri doğrudan anlayamadığı için, yazdığımız kodu tarayıcının anlayabileceği standart JavaScript, HTML ve CSS’e dönüştüren araçlara ihtiyaç duyarız. Bu araçlara “derleyici” veya “paketleyici” (bundler) denir.

Uzun yıllar boyunca Webpack, React projeleri için en yaygın kullanılan paketleyici olmuştur. Webpack, güçlü ve esnek bir araç olmasına rağmen, özellikle büyük projelerde geliştirme sunucusunun başlaması (cold start) ve Hot Module Replacement (HMR) sürelerinin uzaması gibi performans sorunlarına yol açabilmekteydi. Bu durum, geliştiricilerin verimliliğini düşürmekte ve geliştirme döngülerini yavaşlatmaktaydı. Create React App (CRA) gibi araçlar, Webpack’in karmaşık yapılandırmasını soyutlayarak geliştiricilere hızlı bir başlangıç noktası sunsa da, altında yatan Webpack mimarisinin getirdiği performans kısıtlamalarını tamamen ortadan kaldıramamıştır.

İşte tam bu noktada, modern web geliştirme araçları sahneye çıktı. Vite, Evan You (Vue.js’nin yaratıcısı) tarafından geliştirilen, geliştirme sunucusu ve derleme aracı kombinasyonudur. Vite, ES Modüllerini (ESM) temel alarak geliştirme ortamında derleme adımını büyük ölçüde ortadan kaldırır ve bu sayede inanılmaz derecede hızlı bir geliştirme deneyimi sunar. React ile birlikte kullanıldığında, geliştiricilere hem tanıdık bir React geliştirme ortamı hem de rakipsiz bir hız avantajı sağlar.

Neden Vite? Geleneksel Araçlara Göre Avantajları

Vite’ın popülaritesi, sunduğu eşsiz hız ve geliştirici deneyimi sayesinde hızla artmaktadır. Geleneksel araçlara kıyasla birçok önemli avantajı bulunmaktadır:

Geleneksel Araçların Zorlukları

Geleneksel paketleyiciler (örneğin Webpack), projeyi çalıştırmadan önce tüm modülleri bir araya getirip derler. Bu “ön-paketleme” (pre-bundling) süreci, özellikle büyük uygulamalarda ciddi zaman alabilir.

* Yavaş Başlangıç Süreleri (Cold Start): Geliştirme sunucusunu ilk başlattığınızda, tüm uygulama kodunun taranması, bağımlılıkların çözümlenmesi ve derlenmesi gerekir. Bu işlem, binlerce modülü olan projelerde dakikalar sürebilir.
* Yavaş Hot Module Replacement (HMR): Kodda küçük bir değişiklik yaptığınızda, Webpack genellikle etkilenen modülü ve onun bağımlılıklarını yeniden derlemek zorunda kalır. Büyük projelerde bu da hissedilir bir gecikmeye yol açabilir.
* Karmaşık Yapılandırma: Webpack’in yapılandırma dosyası (webpack.config.js) oldukça karmaşık olabilir ve birçok eklenti (plugins), yükleyici (loaders) ve optimizasyon ayarı gerektirebilir. Bu durum, yeni başlayanlar için öğrenme eğrisini artırır ve deneyimli geliştiriciler için de zaman kaybına neden olabilir.

Vite’ın Temel Avantajları

Vite, bu sorunlara modern bir yaklaşımla çözüm getirir:

* ES Modülleri (ESM) Üzerinden Geliştirme: Vite, geliştirme ortamında tarayıcının yerel ES Modülü desteğini kullanır. Bu, Vite’ın kodunuzu derlemeden doğrudan tarayıcıya gönderebileceği anlamına gelir. Yalnızca tarayıcı bir modülü istediğinde Vite onu işler. Bu “isteğe bağlı derleme” (on-demand compilation) sayesinde geliştirme sunucusunun başlangıç süreleri neredeyse anlıktır.
* Anında Hot Module Replacement (HMR): Vite, HMR’ı ESM üzerine inşa etmiştir. Bir dosyada değişiklik yaptığınızda, Vite sadece değişen modülü ve onun bağımlılıklarını geçersiz kılar ve tarayıcıya gönderir. Bu işlem, sadece değişen kodun tarayıcı tarafından yeniden yüklenmesini sağlar ve uygulama durumunu koruyarak anında güncellemeler sunar.
* Hızlı Derleme (Rollup ile): Üretim ortamı için Vite, Rollup’ı kullanır. Rollup, ESM tabanlı uygulamalar için oldukça optimize edilmiş ve verimli bir paketleyicidir. Bu sayede, Vite ile oluşturulan üretim derlemeleri de oldukça hızlı ve performanslıdır.
* Geniş Eklenti Ekosistemi: Vite, Rollup’ın eklenti arayüzünü benimser ve kendi özel Vite eklentileriyle bu ekosistemi genişletir. Bu sayede, özel ihtiyaçlarınıza göre kolayca genişletilebilir.
* Kolay Yapılandırma: Vite’ın varsayılan yapılandırması çoğu proje için yeterlidir. Özel bir yapılandırmaya ihtiyaç duyduğunuzda ise vite.config.js dosyası oldukça basit ve anlaşılırdır.
* TypeScript, JSX, CSS Desteği: Vite, kutudan çıktığı gibi TypeScript, JSX ve çeşitli CSS ön işlemcilerini (Sass, Less, Stylus) destekler. Bu, geliştiricilerin ek yapılandırma olmadan modern web teknolojilerini kullanabileceği anlamına gelir.
* Monorepo Desteği: Vite, monorepo yapıları içinde de oldukça iyi çalışır ve bağımlılıkların yönetimi konusunda esneklik sunar.

Kısacası, Vite geliştiricilere daha hızlı bir başlangıç, daha hızlı geri bildirim döngüleri ve daha az yapılandırma karmaşıklığı sunarak React projelerinde geliştirme deneyimini kökten iyileştirir.

Ön Gereksinimler

React projenizi Vite ile kurmaya başlamadan önce bilgisayarınızda bazı temel araçların yüklü olması gerekmektedir:

* Node.js: Vite ve React projeleri Node.js çalışma zamanına ihtiyaç duyar. Node.js’in LTS (Uzun Süreli Destek) sürümünü indirip kurmanız önerilir. Node.js kurulumuyla birlikte npm (Node Package Manager) de otomatik olarak yüklenecektir.
* Node.js’in kurulu olup olmadığını kontrol etmek için terminalde node -v ve npm -v komutlarını çalıştırabilirsiniz.
* Paket Yöneticisi: npm, Yarn veya pnpm’den herhangi birini kullanabilirsiniz. Bu makalede örnekler için npm kullanılacaktır, ancak komutlar diğer paket yöneticileriyle de benzerdir.
* Temel Komut Satırı Bilgisi: Terminal veya komut istemcisini kullanarak dizinler arasında gezinme ve temel komutları çalıştırma bilgisi faydalı olacaktır.
* Metin Düzenleyici: Visual Studio Code (VS Code) gibi modern bir metin düzenleyici, geliştirme sürecinizi kolaylaştıracaktır.

Bu gereksinimleri karşıladığınızda, React projenizi Vite ile kurmaya hazırsınız demektir.

React Projesi Vite ile Adım Adım Kurulum

Şimdi, React projemizi Vite kullanarak nasıl oluşturacağımızı adım adım görelim.

1. Yeni Bir Vite Projesi Oluşturma

Vite, projenizi kolayca oluşturmanız için bir komut satırı arayüzü (CLI) sağlar. Terminalinizi açın ve aşağıdaki komutu çalıştırın:

npm create vite@latest

Bu komut, create-vite aracını çalıştıracak ve size bir dizi soru sorarak projenizi yapılandırmanıza yardımcı olacaktır:

* Proje adı: (örneğin: my-react-app)
* Projenizin adını girin. Bu aynı zamanda projenizin oluşturulacağı dizinin adı olacaktır.
* Bir çerçeve seçin: (örneğin: React)
* Ok tuşlarını kullanarak React‘ı seçin ve Enter’a basın.
* Bir varyant seçin: (örneğin: JavaScript veya TypeScript)
* React için çeşitli varyantlar sunulur: JavaScript, TypeScript, JavaScript + SWC, TypeScript + SWC. SWC (Speedy Web Compiler), Rust tabanlı hızlı bir derleyicidir ve React kodunuzu daha hızlı derleyebilir. Yeni başlayanlar için JavaScript veya TypeScript yeterli olacaktır. Eğer TypeScript kullanmayı planlıyorsanız TypeScript varyantını seçin. Bu makalede JavaScript varyantı üzerinden devam edeceğiz.

Seçimlerinizi yaptıktan sonra, Vite projenizin temel yapısını saniyeler içinde oluşturacaktır. Terminal çıktısı şuna benzer olacaktır:

✔ Proje adı: … my-react-app
✔ Bir çerçeve seçin: › React
✔ Bir varyant seçin: › JavaScript

Scaffolding project in /Users/kullanici/Desktop/my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

2. Proje Dizinine Gitme ve Bağımlılıkları Yükleme

Proje başarıyla oluşturulduktan sonra, terminalinizde oluşturulan proje dizinine geçmeniz ve projenin bağımlılıklarını yüklemeniz gerekir.

cd my-react-app
npm install

npm install komutu, package.json dosyasında belirtilen tüm bağımlılıkları (React, ReactDOM, Vite eklentileri vb.) projenizin node_modules klasörüne indirecektir. Bu işlem, internet hızınıza ve proje bağımlılıklarının sayısına bağlı olarak birkaç saniye veya dakika sürebilir.

3. Geliştirme Sunucusunu Başlatma

Bağımlılıklar yüklendikten sonra, Vite’ın süper hızlı geliştirme sunucusunu başlatmaya hazırsınız.

npm run dev

Bu komut, package.json dosyasındaki scripts bölümünde tanımlanan dev komutunu çalıştırır. Vite, geliştirme sunucusunu başlatacak ve size uygulamanızın yerel olarak erişilebilir olduğu URL’yi (genellikle http://localhost:5173) verecektir.

Terminal çıktısı şuna benzer olacaktır:

> my-react-app@0.0.0 dev
> vite

  VITE v4.4.9  ready in 186 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Şimdi tarayıcınızı açın ve verilen URL’ye gidin (örneğin, http://localhost:5173). React uygulamanızın varsayılan Vite logosu ve React logosu ile birlikte çalıştığını göreceksiniz. Tebrikler, ilk Vite ve React projenizi başarıyla kurdunuz!

4. Proje Yapısı ve Dosyalar

Vite ile oluşturulan React projesinin temel dizin yapısını inceleyelim:

my-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx           // veya App.tsx
│   ├── index.css
│   └── main.jsx          // veya main.tsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── README.md
└── vite.config.js        // veya vite.config.ts

* public/: Statik dosyalarınızı içeren dizindir. Bu dizindeki dosyalar doğrudan web sunucusunun kökünden sunulur ve derleme sürecine dahil edilmez. index.html içinde gibi yollarla erişilebilirler.
* src/: Uygulamanızın kaynak kodunu içerir.
* src/assets/: Uygulamanızın resim, font gibi statik varlıklarını içerir. Vite, bu varlıkları derleme sürecinde işler.
* src/App.jsx: Ana React bileşeninizdir. Uygulamanızın temel layout’u ve bileşenleri burada tanımlanır.
* src/main.jsx: Uygulamanızın giriş noktasıdır. React uygulamanızın DOM’a bağlandığı yerdir. ReactDOM.createRoot ve root.render burada kullanılır.
* src/App.css ve src/index.css: Uygulamanızın stil dosyalarıdır.
* .eslintrc.cjs: ESLint yapılandırma dosyasıdır. Kod kalitesini ve tutarlılığını sağlamak için kullanılır.
* .gitignore: Git versiyon kontrol sistemi tarafından izlenmemesi gereken dosya ve dizinleri belirtir.
* index.html: Uygulamanızın tek HTML dosyasıdır. Vite, geliştirme sırasında bu dosyayı entry point olarak kullanır. etiketi ile main.jsx dosyasını yükler.
* package.json: Projenizin meta verilerini, bağımlılıklarını ve çalışma komutlarını (scriptler) içerir.
* "scripts":
* "dev": Geliştirme sunucusunu başlatır (vite).
* "build": Üretim için uygulamayı derler (vite build).
* "lint": ESLint ile kod kontrolü yapar.
* "preview": Üretim derlemesini yerel olarak önizler (vite preview).
* vite.config.js: Vite’ın yapılandırma dosyasıdır. Buradan Vite’ın davranışını özelleştirebilirsiniz.

Vite ve React Projenizi Yapılandırma

vite.config.js dosyası, Vite projenizin kalbidir ve burada birçok ayarı özelleştirebilirsiniz.

vite.config.js Dosyasını Anlamak

Varsayılan vite.config.js dosyası şuna benzer:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

* defineConfig: Vite’tan içe aktarılan bir yardımcı fonksiyondur. Bu fonksiyon, yapılandırma nesnesinin otomatik tamamlanmasını (autocompletion) ve tip kontrolünü sağlamak için kullanılır.
* plugins: Vite’ın temel özelliklerini genişletmek için kullanılan eklentilerin bir dizisidir.
* @vitejs/plugin-react: Bu eklenti, React uygulamaları için gerekli olan JSX dönüşümünü ve HMR’ı sağlar. React projeniz için olmazsa olmaz bir eklentidir.

Yaygın yapılandırma seçenekleri şunlardır:

* root: Projenizin kök dizini. Varsayılan olarak process.cwd() (komutun çalıştırıldığı dizin) kullanılır.
* base: Üretim ortamında uygulamanızın dağıtılacağı temel URL yolu. Örneğin, GitHub Pages’a dağıtıyorsanız /repo-adı/ gibi bir değer atayabilirsiniz.
* publicDir: Statik varlıkların bulunduğu dizin. Varsayılan olarak public klasörüdür.
* resolve.alias: Modül yolları için takma adlar (aliases) tanımlamanızı sağlar. Bu, uzun göreceli yolları yazmaktan kurtarır. Örneğin:

resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './src/components'),
      },
    },

Bunu kullanmak için path modülünü import etmeniz gerekebilir: import path from 'path'; (Node.js ortamında çalışır).
* server: Geliştirme sunucusu ayarları.
* port: Sunucunun çalışacağı port (varsayılan: 5173).
* host: Sunucunun dinleyeceği adres (varsayılan: localhost). true olarak ayarlarsanız 0.0.0.0 ile ağ üzerinden erişilebilir olur.
* open: Sunucu başlatıldığında tarayıcıyı otomatik olarak açar (varsayılan: false).
* proxy: API isteklerini başka bir sunucuya yönlendirmek için vekil sunucu ayarları.
* build: Üretim derlemesi ayarları.
* outDir: Derlenmiş çıktı dosyalarının kaydedileceği dizin (varsayılan: dist).
* sourcemap: Kaynak haritaları oluşturup oluşturmayacağı (hata ayıklama için faydalıdır).
* minify: Üretim derlemesini küçültüp küçültmeyeceği (varsayılan: true ve esbuild kullanır).
* rollupOptions: Rollup’ın özelleştirilmiş yapılandırması.
* css: CSS ile ilgili ayarlar.
* preprocessorOptions: CSS ön işlemcileri (Sass, Less, Stylus) için seçenekler.
* modules: CSS Modülleri için ayarlar.
* envDir: Ortam değişkenlerinin bulunduğu dizin.

Ortam Değişkenleri Yönetimi

Vite, ortam değişkenlerini .env dosyaları aracılığıyla yönetmeyi kolaylaştırır. Bu dosyalar, farklı geliştirme ortamları (geliştirme, üretim, test) için farklı yapılandırmalar tanımlamanıza olanak tanır.

* .env: Tüm ortamlar için genel değişkenler.
* .env.development: Sadece geliştirme ortamı için değişkenler (npm run dev).
* .env.production: Sadece üretim ortamı için değişkenler (npm run build).

Ortam değişkenleri VITE_ öneki ile başlamalıdır. Örneğin:

// .env.development
VITE_API_URL=http://localhost:3000/api

// .env.production
VITE_API_URL=https://api.myproductionapp.com/api

Bu değişkenlere uygulamanız içinden import.meta.env nesnesi aracılığıyla erişebilirsiniz:

// App.jsx
function App() {
  const apiUrl = import.meta.env.VITE_API_URL;
  console.log('API URL:', apiUrl);
  // ...
}

Unutmayın, VITE_ öneki olmayan değişkenler istemci tarafında kullanılamaz, sadece Vite yapılandırmasında veya Node.js tarafında kullanılabilir. Bu bir güvenlik önlemidir.

CSS Ön İşlemcileri ve CSS Modülleri

Vite, Sass, Less ve Stylus gibi CSS ön işlemcilerini kutudan çıktığı gibi destekler. Tek yapmanız gereken ilgili paketi projenize yüklemektir:

npm install -D sass # Sass için
npm install -D less # Less için
npm install -D stylus # Stylus için

Yükledikten sonra, dosyalarınızı .scss, .less veya .styl uzantılarıyla oluşturabilir ve doğrudan React bileşenlerinizden import edebilirsiniz. Vite, bunları otomatik olarak işleyecektir.

CSS Modülleri ise bileşen bazlı stil yönetimi için harika bir çözümdür. Bileşenlerinize özel, global çakışmaları önleyen benzersiz sınıf adları oluşturur. Vite’ta CSS Modüllerini kullanmak için stil dosyanızın adını .module.css (veya .module.scss, .module.less vb.) olarak değiştirmeniz yeterlidir:

/ src/components/MyComponent/MyComponent.module.css /
.container {
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  color: #333;
  font-size: 24px;
}

React bileşeninizde bu modülü şu şekilde kullanabilirsiniz:

// src/components/MyComponent/MyComponent.jsx
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    

      
Merhaba Vite React!
      
Bu bir CSS Modülü örneğidir.
    
  );
}

export default MyComponent;

Vite, styles nesnesi içinde benzersiz sınıf adları sağlayacaktır (örneğin, MyComponent_container__abc12).

Geliştirme Deneyiminizi İyileştirme

Vite ve React ile geliştirme yaparken verimliliğinizi artıracak bazı ek araçlar ve teknikler mevcuttur.

Yol Takma Adları (Path Aliases) Kullanımı

Büyük projelerde iç içe geçmiş dizin yapıları nedeniyle ../../components/Button gibi uzun göreceli yollar yazmak zorunda kalabilirsiniz. Yol takma adları, bu tür yolları @components/Button gibi daha kısa ve okunaklı hale getirmenizi sağlar.

vite.config.js dosyanızda resolve.alias bölümünü kullanarak takma adları tanımlayabilirsiniz:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path'; // path modülünü import etmeyi unutmayın

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
});

Bu takma adları hem Vite’ın kendisi hem de IDE’nizin (VS Code gibi) anlayabilmesi için jsconfig.json (JavaScript için) veya tsconfig.json (TypeScript için) dosyasına da eklemeniz gerekir:

// jsconfig.json (projenizin kök dizininde)
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/": ["./src/"],
      "@components/": ["./src/components/"],
      "@utils/": ["./src/utils/"]
    }
  },
  "include": ["src"]
}

Artık bileşenlerinizde bu takma adları kullanabilirsiniz:

// src/App.jsx
import Button from '@components/Button';
import { formatDate } from '@utils/dateHelpers';

function App() {
  // ...
}

Linting ve Biçimlendirme (ESLint, Prettier)

Kod kalitesini, tutarlılığını ve okunabilirliğini sağlamak için linting (ESLint) ve biçimlendirme (Prettier) araçlarını kullanmak önemlidir. Vite şablonları genellikle ESLint ile birlikte gelir.

* ESLint: Kodunuzdaki potansiyel hataları ve stil ihlallerini tespit eder. package.json dosyasında genellikle bir lint script’i bulunur:

"scripts": {
      "lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0"
    }

npm run lint komutuyla kodunuzu kontrol edebilirsiniz.
* Prettier: Kodunuzu otomatik olarak belirli bir stil kılavuzuna göre biçimlendirir. ESLint ile Prettier’ı entegre etmek için bazı ek paketler kurmanız ve yapılandırmanız gerekebilir (eslint-config-prettier, eslint-plugin-prettier).

Bu araçları IDE’nizle (özellikle VS Code) entegre ederek, dosyaları kaydettiğinizde otomatik olarak kodunuzu biçimlendirmesini ve hataları göstermesini sağlayabilirsiniz.

Test Ortamı Kurulumu (Vitest)

Bileşenlerinizi ve yardımcı fonksiyonlarınızı test etmek, uygulamanızın güvenilirliğini sağlamak için kritik öneme sahiptir. Vite ekosisteminde, Vitest popüler bir test çerçevesidir. Vitest, Vite’ın yapılandırmasını ve hızını devraldığı için oldukça hızlı ve entegre bir test deneyimi sunar.

Vitest’i kurmak için:

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

* vitest: Test çerçevesi.
* @testing-library/react: React bileşenlerini test etmek için yardımcı kütüphane.
* @testing-library/jest-dom: Jest DOM eşleştiricileri (matchers) sağlar.
* jsdom: Tarayıcı ortamını simüle etmek için kullanılır (Node.js ortamında React bileşenlerini çalıştırmak için).

package.json dosyanıza bir test script’i ekleyin:

"scripts": {
  "test": "vitest"
}

vite.config.js dosyanızda Vitest için bazı ayarlar yapmanız gerekebilir:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true, // global API'leri kullanmak için (örneğin describe, it)
    environment: 'jsdom', // Tarayıcı ortamını simüle etmek için
    setupFiles: './src/setupTests.js', // Testler başlamadan önce çalışacak dosyalar
  },
});

src/setupTests.js dosyasını oluşturun (genellikle @testing-library/jest-dom‘u import etmek için):

// src/setupTests.js
import '@testing-library/jest-dom';

Şimdi bir test dosyası oluşturabilirsiniz (örneğin, src/App.test.jsx):

// src/App.test.jsx
import { render, screen } from '@testing-library/react';
import App from './App';

describe('App', () => {
  it('renders Vite logo', () => {
    render();
    expect(screen.getByAltText('Vite logo')).toBeInTheDocument();
  });

  it('renders React logo', () => {
    render();
    expect(screen.getByAltText('React logo')).toBeInTheDocument();
  });
});

Testleri çalıştırmak için npm run test komutunu kullanın. Vitest, hızlı bir şekilde testlerinizi çalıştıracak ve sonuçları terminalde gösterecektir.

Üretim Ortamına Dağıtım

Uygulamanızın geliştirme süreci tamamlandığında, onu üretim ortamına dağıtmaya hazır hale getirmelisiniz. Vite, uygulamanızı optimize edilmiş bir şekilde derlemek için Rollup’ı kullanır.

Üretim Derlemesi Oluşturma

Uygulamanızın üretim derlemesini oluşturmak için aşağıdaki komutu kullanın:

npm run build

Bu komut, package.json dosyasındaki build script’ini çalıştırır (vite build). Vite, uygulamanızı Rollup ile optimize edecek, tüm JavaScript, CSS ve diğer varlıkları küçültecek, birleştirecek ve sıkıştıracaktır. Bu işlem tamamlandığında, projenizin kök dizininde varsayılan olarak dist adında bir klasör oluşacaktır.

dist klasörü, uygulamanızın tüm statik dosyalarını (HTML, JavaScript, CSS, resimler vb.) içerir. Bu dosyalar, herhangi bir statik dosya sunucusuna (örneğin Nginx, Apache) veya bir bulut barındırma hizmetine (Netlify, Vercel, GitHub Pages, Firebase Hosting) yüklenebilir.

Yerel Olarak Önizleme

Üretim derlemesini dağıtmadan önce yerel olarak nasıl göründüğünü ve çalıştığını kontrol etmek isteyebilirsiniz. Vite, bu amaçla bir önizleme sunucusu sağlar:

npm run preview

Bu komut, dist klasöründeki derlenmiş dosyaları sunan basit bir yerel sunucu başlatır. Tarayıcınızda verilen URL’ye giderek uygulamanızın üretim derlemesini test edebilirsiniz. Bu, dağıtımdan önceki son kontrol için harika bir yoldur.

Dağıtım Stratejileri

Vite ile derlenen React uygulamaları, statik web siteleri olarak dağıtılır. Bu, onları birçok farklı platforma kolayca dağıtabileceğiniz anlamına gelir:

* Netlify, Vercel: Bu platformlar, Git entegrasyonu sayesinde kodunuzu otomatik olarak derleyip dağıtmanızı sağlar. Sadece projenizi Git deposuna yüklemeniz ve build komutunu (npm run build) belirtmeniz yeterlidir.
* GitHub Pages: Eğer projenizi GitHub’da barındırıyorsanız, GitHub Pages aracılığıyla ücretsiz olarak dağıtabilirsiniz. Genellikle vite.config.js dosyasında base: '/repo-adı/' ayarını yapmanız ve dist klasörünü gh-pages dalına göndermeniz gerekir.
* Firebase Hosting: Google Firebase’in hosting hizmeti de statik siteler için popüler bir seçenektir.
* Herhangi Bir Statik Web Sunucusu: Nginx veya Apache gibi bir web sunucusu kullanıyorsanız, dist klasörünün içeriğini sunucunuzun kök dizinine kopyalamanız yeterlidir.

Dağıtım süreci, seçtiğiniz platforma göre değişiklik gösterebilir, ancak temel olarak npm run build komutuyla oluşturulan dist klasörünü hedef platforma yüklemeyi içerir.

Vite ve React ile İleri Seviye Konular

Vite ve React, hızlı geliştirme için mükemmel bir kombinasyon sunsa da, daha karmaşık ihtiyaçlar için de çeşitli ileri seviye özellikler ve eklentiler mevcuttur.

SSR (Server-Side Rendering) ve SSG (Static Site Generation)

Tek sayfa uygulamaları (SPA) SEO ve ilk yükleme performansı açısından bazı dezavantajlara sahip olabilir. Bu sorunları çözmek için SSR (Sunucu Taraflı Oluşturma) veya SSG (Statik Site Oluşturma) teknikleri kullanılır.

* SSR: Uygulamanızın HTML’ini sunucu tarafında oluşturup tarayıcıya gönderme işlemidir. Bu, ilk yüklemede daha hızlı bir sayfa gösterimi ve daha iyi SEO sağlar. Vite, SSR için deneysel desteğe sahiptir ve vite-plugin-ssr gibi eklentilerle React için SSR uygulamaları geliştirmek mümkündür.
* SSG: Uygulamanızın tüm sayfalarını derleme zamanında statik HTML dosyalarına dönüştürme işlemidir. Bu dosyalar CDN’lerden çok hızlı bir şekilde sunulabilir ve mükemmel SEO sağlar. Vite, statik site oluşturucularıyla (örneğin Astro, Eleventy) veya özel script’lerle SSG için kullanılabilir.

Bu konular, Vite’ın esnek yapısı sayesinde daha karmaşık uygulamaların ihtiyaçlarını karşılamak için genişletilebilir olduğunu gösterir.

Micro-Frontends

Büyük ölçekli uygulamalar, genellikle birden fazla bağımsız bölümden oluşur ve bu bölümler farklı ekipler tarafından geliştirilebilir. Micro-frontend mimarileri, bu bölümleri bağımsız olarak dağıtılabilir ve yönetilebilir küçük uygulamalara ayırmayı hedefler. Vite’ın hızlı derleme ve ES Modülü tabanlı yapısı, micro-frontend’ler için ideal bir temel oluşturabilir. Her bir micro-frontend’i ayrı bir Vite projesi olarak geliştirebilir ve daha sonra bunları bir ana uygulama içinde birleştirebilirsiniz. vite-plugin-federation gibi eklentiler, Webpack’in Module Federation özelliğine benzer işlevsellik sunarak micro-frontend entegrasyonunu kolaylaştırabilir.

Web Workers ve Service Workers

* Web Workers: Yoğun işlem gerektiren görevleri ana iş parçacığından ayırarak kullanıcı arayüzünün donmasını engeller. Vite, Web Workers’ı kolayca kullanmanıza olanak tanır. Worker dosyanızı import ederken özel bir sorgu (?worker) eklemeniz yeterlidir: import MyWorker from './my.worker?worker';.
* Service Workers: Çevrimdışı yetenekler, önbelleğe alma ve anlık bildirimler gibi özellikler sunar. Vite, Service Workers’ı derleme sürecine dahil etmek için eklentilerle (örneğin vite-plugin-pwa) entegre edilebilir, böylece uygulamanızı bir PWA’ya (Progressive Web App) dönüştürebilirsiniz.

Bu ileri seviye konular, Vite’ın sadece basit React projeleri için değil, aynı zamanda modern web’in karmaşık ve performans odaklı gereksinimleri için de güçlü bir araç olduğunu göstermektedir.

Sonuç

Vite, modern web geliştirme dünyasına getirdiği yenilikçi yaklaşımla React projeleri için vazgeçilmez bir araç haline gelmiştir. ES Modüllerini temel alan mimarisi sayesinde, geleneksel paketleyicilerin karşılaştığı yavaş başlangıç süreleri ve HMR gecikmeleri gibi sorunları ortadan kaldırarak geliştiricilere rakipsiz bir hız ve verimlilik sunar.

Bu makalede, React projenizi Vite ile baştan sona nasıl kuracağınızı, temel yapılandırma adımlarını, ortam değişkenlerini, CSS ön işlemcilerini ve modüllerini nasıl yöneteceğinizi detaylı bir şekilde inceledik. Ayrıca, geliştirme deneyiminizi iyileştirecek yol takma adları, linting, biçimlendirme ve test ortamı kurulumu gibi pratik ipuçlarını da ele aldık. Son olarak, uygulamanızı üretim ortamına nasıl derleyeceğinizi ve dağıtacağınızı gösterdikten sonra, SSR, SSG ve micro-frontends gibi ileri seviye konulara değinerek Vite’ın geniş potansiyelini ortaya koyduk.

Vite’ın sunduğu hız, kolay yapılandırma ve genişletilebilirlik, onu React geliştiricileri için açık ara en iyi seçeneklerden biri yapmaktadır. İster küçük bir proje ister büyük bir kurumsal uygulama geliştiriyor olun, Vite geliştirme süreçlerinizi hızlandıracak, geliştirici mutluluğunuzu artıracak ve sonuç olarak daha kaliteli uygulamalar oluşturmanıza yardımcı olacaktır. Artık geleneksel araçların kısıtlamalarına takılmadan, React projelerinizi ışık hızında geliştirmeye hazırsınız. Gelecek projelerinizde Vite’ı denemekten çekinmeyin ve modern web geliştirmenin keyfini çıkarın!