Geliştirme Ortamı: Vite ile Proje Kurulumu

Node.js kurulumu, Vite ile yeni React projesi açma, dosya yapısı ve dev server.

React projesini ayağa kaldırmanın 2026'daki standart yolu Vite'tır. Eskiden create-react-app (CRA) kullanılırdı — artık önerilmiyor, deprecate edildi.

Gereksinimler

Node.js 20+ kurulu olmalı: nodejs.org
VS Code veya benzeri bir editör
Tarayıcı (Chrome / Firefox)

Kontrol:

node -v   # v20.x veya üzeri
npm -v    # 10.x veya üzeri

Yeni proje oluşturma

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

http://localhost:5173 adresinde uygulaman ayakta. Hot reload çalışıyor — dosyayı kaydeder kaydetmez tarayıcı güncellenir.

TypeScript istiyorsan template react-ts:

npm create vite@latest my-app -- --template react-ts

💡Öneri

TypeScript'i en başından öğrenmeye başla. Bu eğitimde örnekler JavaScript ile verilse de prod kodunda TS standarttır. İlerleyen bölümde TS'e ayrı bir bölüm var.

Dosya yapısı

my-app/
├── public/              # statik dosyalar (favicon, robots.txt)
├── src/
│   ├── App.jsx          # ana bileşen
│   ├── main.jsx         # giriş noktası
│   ├── index.css
│   └── assets/
├── index.html           # HTML kabuğu (Vite'a özgü, root burada)
├── vite.config.js
└── package.json

main.jsx her şeyin başladığı yer:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
 
createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

StrictMode, geliştirme aşamasında potansiyel sorunları yüzeye çıkarmak için bileşenleri iki kere render eder. Üretimde bu davranış olmaz.

React DevTools

Tarayıcıya React Developer Tools eklentisini kur:

Bileşen ağacını, props'u ve state'i inceleyebileceğin bir DevTools paneli ekler. Reactçı için olmazsa olmaz.

ESLint ve Prettier

Vite varsayılan olarak ESLint kurulu gelir. Prettier eklemek için:

npm install -D prettier eslint-config-prettier

Linter uyarılarını ciddiye al — çoğu, anti-pattern'leri yakalar.

Yararlı komutlar

npm run dev     # geliştirme sunucusu
npm run build   # production build (dist/)
npm run preview # build çıktısını önizle

Artık hazırsın. Sıradaki bölümde JSX'e dalıyoruz.