React Nasıl Kurulur? Vite ile React Arasındaki Fark Nedir?

React, modern web arayüzleri geliştirmek için kullanılan en popüler JavaScript kütüphanelerinden biridir. Özellikle tek sayfa uygulamalar, yönetim panelleri, müşteri panelleri, e-ticaret arayüzleri ve interaktif web projelerinde sıkça tercih edilir.

Ancak React öğrenmeye başlayan birçok kişinin kafası şurada karışıyor:

“React ayrı bir şey mi, Vite ayrı bir şey mi?”
“React kurarken neden Vite kullanıyoruz?”
“Create React App nerede kaldı?”

Gelin bunu kısa ve net şekilde anlatalım.

React Nedir?

React, kullanıcı arayüzü geliştirmek için kullanılan bir JavaScript kütüphanesidir. Yani butonlar, formlar, listeler, paneller, kartlar, menüler ve dinamik sayfa bölümleri gibi arayüz parçalarını daha düzenli şekilde oluşturmanızı sağlar.

React’in en güçlü tarafı, arayüzü küçük parçalara yani component yapısına bölmesidir. Örneğin bir yönetim paneli yapıyorsanız; menüyü, tabloyu, kullanıcı kartını, bildirim alanını ve formu ayrı ayrı component olarak hazırlayabilirsiniz.

Bu da projeyi daha düzenli, yönetilebilir ve geliştirilebilir hale getirir.

Vite Nedir?

Vite ise React gibi bir arayüz kütüphanesi değildir. Vite, modern frontend projeleri için kullanılan hızlı bir geliştirme ve build aracıdır.

Yani React ile uygulamanın arayüzünü yazarsınız; Vite ise bu projeyi çalıştırır, geliştirirken hızlı şekilde önizleme sunar ve proje bittiğinde yayına hazır hale getirir.

Vite’in resmi dokümantasyonunda da Vite, yeni nesil web uygulamalarını güçlendiren hızlı bir frontend build aracı olarak tanımlanır.

React ile Vite Arasındaki Fark Nedir?

En basit haliyle fark şudur:

React, arayüz geliştirmek için kullanılır.
Vite, React projesini kurmak, çalıştırmak ve build almak için kullanılır.

Yani React projenin kendisidir, Vite ise o projeyi ayağa kaldıran geliştirme ortamıdır.

Bir örnekle anlatmak gerekirse:

React = Motor
Vite = O motoru çalıştıran hızlı garaj sistemi

React olmadan arayüzü yazamazsınız. Vite olmadan da modern bir React projesini pratik şekilde geliştirmek zorlaşır.

React Nasıl Kurulur?

React kurulumu için önce bilgisayarınızda Node.js kurulu olmalıdır. Vite’in güncel dokümantasyonuna göre Vite, Node.js tarafında 20.19+ veya 22.12+ sürüm ister. Bu yüzden eski Node.js sürümü kullanıyorsanız önce güncellemeniz gerekir.

Node.js kuruluysa terminal veya komut satırını açıp şu komutu çalıştırabilirsiniz:

npm create vite@latest

Bu komuttan sonra sizden proje adı istenir. Örneğin:

proje adı: my-react-app
framework: React
variant: JavaScript veya TypeScript

Daha sonra proje klasörüne girilir:

cd my-react-app

Bağımlılıklar yüklenir:

npm install

Proje çalıştırılır:

npm run dev

Bu komuttan sonra Vite size genellikle localhost üzerinde bir adres verir. Bu adresi tarayıcıda açarak React projenizi görüntüleyebilirsiniz.

React Projesi Yayına Nasıl Hazırlanır?

React projesini canlıya almak için geliştirme modunda değil, production build almak gerekir. Vite dokümantasyonuna göre production için vite build komutu kullanılır ve proje statik hosting veya sunucu ortamında yayınlanabilecek hale getirilir.

Komut şu şekildedir:

npm run build

Bu işlemden sonra genellikle dist adında bir klasör oluşur. Yayına alınacak asıl dosyalar bu klasörün içindedir.

Create React App Kullanılıyor mu?

Eskiden React projeleri genellikle Create React App ile kuruluyordu. Ancak React ekibi, 2025 yılında Create React App’in yeni projeler için kullanımdan kaldırıldığını ve geliştiricilerin framework ya da Vite gibi build araçlarına yönelmesini önerdiğini açıkladı.

Bu yüzden günümüzde yeni bir React projesine başlarken Vite kullanmak daha modern ve mantıklı bir tercihtir.

Neden React + Vite Kullanmalıyız?

React ve Vite birlikte kullanıldığında geliştirme süreci oldukça hızlanır.

Bunun başlıca avantajları şunlardır:

Sayfalar daha hızlı çalışır.
Geliştirme sunucusu hızlı açılır.
Kod değişiklikleri anında ekrana yansır.
Proje yapısı daha sade olur.
Build işlemleri daha pratiktir.
Yeni başlayanlar için kurulum süreci daha kolaydır.

Özellikle yönetim paneli, CRM, müşteri paneli, SaaS uygulaması, e-ticaret arayüzü veya dinamik web uygulaması geliştiriyorsanız React + Vite ikilisi gayet güçlü bir başlangıçtır.

JavaScript mi TypeScript mi Seçilmeli?

Yeni başlıyorsanız JavaScript ile başlamak daha kolay olabilir. Çünkü öğrenme süreci daha sade ilerler.

Ancak büyük ve uzun vadeli bir proje geliştiriyorsanız TypeScript daha mantıklı olabilir. TypeScript, kod yazarken hataları daha erken fark etmenizi sağlar ve büyük projelerde daha düzenli bir yapı sunar.

Kısaca:

Yeni başlayanlar için JavaScript
Profesyonel ve büyük projeler için TypeScript

React Öğrenmek Zor mu?

React ilk bakışta biraz karmaşık görünebilir. Çünkü klasik HTML, CSS ve JavaScript mantığından farklı olarak component, state, props, hook ve render mantığıyla çalışır.

Ama temel yapıyı anladıktan sonra React oldukça keyifli hale gelir. Özellikle daha önce JavaScript, HTML ve CSS biliyorsanız React öğrenmek çok daha kolaydır.

React öğrenirken önce şu konulara odaklanmak gerekir:

Component yapısı
Props kullanımı
State yönetimi
useEffect mantığı
Form işlemleri
Listeleme işlemleri
API’den veri çekme
Routing yapısı
Build ve deploy işlemleri

Bu konular oturduktan sonra React ile profesyonel arayüzler geliştirmek çok daha kolay hale gelir.

React, modern web arayüzleri geliştirmek için kullanılan güçlü bir JavaScript kütüphanesidir. Vite ise React projelerini hızlı şekilde kurmak, çalıştırmak ve yayına hazırlamak için kullanılan modern bir geliştirme aracıdır.

Kısaca söylemek gerekirse:

React arayüzü oluşturur.
Vite projeyi çalıştırır.
React + Vite ise modern frontend geliştirmenin en pratik yollarından biridir.

Bugün yeni bir React projesine başlayacaksanız, eski yöntemlerle vakit kaybetmek yerine Vite ile başlamak daha doğru bir tercih olacaktır. Hem hızlıdır, hem sadedir, hem de güncel frontend dünyasına daha uygundur.

React öğrenmek isteyen biri için en güzel başlangıç şudur: küçük bir proje aç, component mantığını öğren, sonra API bağlantısı ve sayfa yönlendirme işlemlerine geç. Gerisi zaten kod yazdıkça oturur. Kod biraz nankördür ama React öğrendikçe “tamam ya bu iş güzelmiş” dedirtir.