React Kurulumu: Vite ile React Uygulaması Oluşturma

React'i kurmak için Vite ile yeni bir proje oluştur: npm create vite@latest my-app -- --template react komutunu, ardından cd my-app, npm install ve npm run dev komutlarını çalıştır. Önce Node.js'in kurulu olması gerekir. Vite; React'i, JSX derlemesini ve kaydettikçe sayfayı yenileyen bir geliştirme sunucusunu kurar.

Öğrenmeye başlamak için bunların hiçbirine ihtiyacın yok. Aşağıdaki editör React'i bu sayfada çalıştırır; Vite'ın senin için oluşturduğu App.jsx dosyasının sadeleştirilmiş bir hâlidir.

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <div style={{ textAlign: 'center' }}>
            <h1>Get started</h1>
            <p>
                Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
            </p>
            <button type="button" onClick={() => setCount((count) => count + 1)}>
                Count is {count}
            </button>
        </div>
    );
}

Düğmeye tıkla, sonra başlık metnini değiştir: önizleme sen yazdıkça güncellenir, tıpkı Vite'ın geliştirme sunucusunun sayfayı yeniden yüklemeden değişikliklerini yerine koyması gibi ("HMR", hot module replacement, bunu ifade eder).

Ön koşul: Node.js

Bir React uygulamasını derleyen araçlar Node.js üzerinde çalışır ve npm (paket yöneticisi) onunla birlikte gelir. Güncel LTS sürümünü Node.js web sitesinden ya da nvm gibi bir sürüm yöneticisiyle kur, sonra bir terminalde kontrol et:

node -v
npm -v

İki komut da bir sürüm numarası yazdırmalı. node -v eski bir sürüm yazdırıyorsa güncelle: Vite 8, Node.js 20.19 veya üstünü (22 serisinde 22.12 veya üstünü) ister ve daha eski sürümlerde bir uyarı yazdırır.

Vite ile React uygulaması oluşturma

Projelerini tuttuğun klasörde şu dört komutu çalıştır:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

• npm create vite@latest en son proje oluşturucusunu indirir. my-app klasör adıdır, --template react ise JavaScript ile düz React'i seçer. Ekstradaki --, şablon seçeneğini npm üzerinden oluşturucuya iletir.
• npm install, package.json içinde listelenen React, React DOM, Vite ve diğer bağımlılıkları node_modules içine indirir.
• npm run dev geliştirme sunucusunu başlatır ve genellikle http://localhost:5173 olan yerel bir adres yazdırır. Bunu bir tarayıcıda aç.

Oluşturucu ardından iki soru sorar: hangi linter'ın kurulacağı (Oxlint ya da ESLint) ve uygulamanın şimdi kurulup başlatılıp başlatılmayacağı. İkincisine evet dersen npm install ve npm run dev komutlarını senin için çalıştırır, yani son iki komutu atlayabilirsin. TypeScript için bunun yerine --template react-ts kullan; bkz. TypeScript ile React.

Vite'ın oluşturduğu dosyalar

my-app/
├── index.html
├── package.json
├── vite.config.js
├── README.md
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── App.css
    ├── index.css
    └── assets/

En önemlileri şu üçü:

index.html tarayıcının yüklediği sayfadır. Gövdesinde boş bir öğe, <div id="root"></div>, ve src/main.jsx dosyasını yükleyen bir script etiketi bulunur. React tüm uygulamayı o div'in içine çizer.

src/main.jsx giriş noktasıdır. React'i sayfaya bağlar:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

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

createRoot, #root öğesini alır ve içindeki her şeyden React'i sorumlu kılar. render(<App />) en üstteki bileşenini oraya çizer. StrictMode bazı ek kontroller çalıştıran bir geliştirme yardımcısıdır; production derlemesinde hiçbir etkisi yoktur (bkz. Strict Mode). Bu dosyayı nadiren düzenlemen gerekir.

src/App.jsx ilk bileşenindir ve düzenleyeceğin dosya budur. Vite'ın sürümü üç görsel (bir kapak resmi ile Vite ve React logoları) ve App.css içe aktarır, sonunda da export default App vardır. Bu, en üstte export default function App() yazmakla aynıdır; bu sayfalardaki örnekler de bu biçimi kullanır.

İlk düzenlemeni yap

src/App.jsx dosyasını aç, içindekileri sil ve yerine kendi bileşenini koy. Kaydet, tarayıcı güncellenir. İşte yazabileceğin küçük bir ilk uygulama; önce burada dene:

import { useState } from 'react';

function Greeting({ name }) {
    return <h2>Hello, {name}!</h2>;
}

export default function App() {
    const [name, setName] = useState('React');

    return (
        <div>
            <Greeting name={name} />
            <label>
                Your name:{' '}
                <input value={name} onChange={(e) => setName(e.target.value)} />
            </label>
        </div>
    );
}

Kutuya yaz, başlık da onu takip eder. Sonra ilkinin altına ikinci bir <Greeting name="Vite" /> ekle: bileşenler yeniden kullanılabilir ve her kopya kendi name değerini alır.

App.jsx büyüdükçe bileşenleri src/Greeting.jsx gibi kendi dosyalarına taşı, export et ve kullandığın yerde import et. Bileşenler sayfası bunun nasıl yapıldığını gösteriyor.

Production için derleme

Geliştirme sunucusu kodun üzerinde çalışmak içindir. Yayınlamaya hazır olduğunda uygulamayı derle:

npm run build
npm run preview

npm run build JSX'i derler, kodunu paketleyip küçültür ve statik dosyaları bir dist/ klasörüne yazar. npm run preview bu klasörü yerelde sunar, böylece gerçek derlemeyi kontrol edebilirsin. dist/ klasörünü herhangi bir statik barındırma hizmetine yükle. React de derlemede production moduna geçer; bu mod daha hızlıdır ve geliştirme uyarılarını atlar.

Create React App kullanımdan kalktı

Yıllarca başlamanın standart yolu npx create-react-app my-app idi. Şubat 2025'te React ekibi Create React App'i kullanımdan kaldırdı ve artık bakımı yapılmıyor. Birçok eski eğitim hâlâ onu kullanıyor, bu yüzden onlarda react-scripts start ve bir src/index.js giriş dosyası göreceksin; bileşenlerin kendisi bir Vite projesinde aynı şekilde çalışır.

Bunun yerine ne kullanmalı:

• İstemci tarafı bir uygulama, öğrenme projesi ya da widget için Vite: yukarıdaki kurulum.
• Yönlendirme, sunucu tarafı render ya da veri yükleme yerleşik olarak gerektiğinde bir framework. Next.js ve React Router'ın framework modu yaygın seçeneklerdir:

npx create-next-app@latest my-app
npx create-react-router@latest my-app

Mevcut bir Create React App projesini Vite'a taşımanın ana adımları şunlar: vite ve @vitejs/plugin-react paketlerini kur ve react-scripts'i kaldır; React eklentisini yükleyen bir vite.config.js ekle; index.html dosyasını public/ klasöründen proje köküne taşı, %PUBLIC_URL% yer tutucularını kaldır ve giriş dosyan için bir <script type="module" src="/src/index.jsx"> etiketi ekle; JSX içeren dosyaları .jsx olarak yeniden adlandır; REACT_APP_ ortam değişkenlerini VITE_ olarak yeniden adlandırıp import.meta.env üzerinden oku; ve package.json içindeki react-scripts komutlarını vite, vite build ve vite preview ile değiştir.

React'i mevcut bir sayfaya ekleme

React'in tüm sayfaya sahip olması gerekmez. Onu mevcut bir sitenin tek bir öğesine render edebilirsin; örneğin sunucuda render edilen bir mağazadaki sepet widget'ı. JSX'i derlemek için yine Vite gibi bir paketleyiciye ihtiyacın var. İki paketi kur:

npm install react react-dom

Ardından React'in kontrol etmesini istediğin öğe üzerinde bir root oluştur:

import { createRoot } from 'react-dom/client';
import Cart from './Cart.jsx';

const container = document.getElementById('cart');
createRoot(container).render(<Cart />);

#cart dışındaki her şey olduğu gibi kalır. Bir sayfada her öğe için bir tane olmak üzere birkaç root oluşturabilirsin ve her biri bağımsız çalışır.