Ders 01: TanStack Start'a Giriş ve Kurulum

🎯 Bu Derste Neleri Öğreneceksiniz?

• TanStack Start nedir ve neden kullanmalıyız?
• Geliştirme ortamınızı nasıl kurarsınız?
• İlk TanStack Start projenizi nasıl oluşturursunuz?
• Proje yapısını anlama

---

📚 TanStack Start Nedir?

TanStack Start, modern web uygulamaları geliştirmek için tasarlanmış full-stack React framework’üdür. Şu anda Release Candidate (RC) aşamasındadır, yani özellikler tamamlanmış durumda ve v1’e çok yakındır.

Temel Bileşenler

TanStack Start iki temel teknoloji üzerine kuruludur:

1. TanStack Router - Type-safe routing sistemi
2. Vite - Hızlı build tool ve development server

Neden TanStack Start?

Özellik	Açıklama
Type Safety	Uçtan uca tip güvenliği (end-to-end)
Hızlı Geliştirme	Vite sayesinde anında hot reload
Deployment Esnekliği	Herhangi bir Vite-compatible host’a deploy edebilirsiniz
Modern Rx Practices	Server Functions ile type-safe RPC
Selective SSR	Her route için SSR kontrolü
Developer Experience - Mükemmel geliştirici deneyimi

Kimler Kullanmalı?

• ✅ TypeScript seven geliştiriciler
• ✅ Tip güvenliğine önem veren ekipler
• ✅ Next.js’e alternatif arayanlar
• ✅ Vite ekosisteminin gücünden faydalanmak isteyenler
• ✅ Vendor lock-in’den kaçınmak isteyenler

---

🔧 Geliştirme Ortamı Kurulumu

Gerekli Araçlar

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

• Node.js (v18 veya üzeri) - Indir
• pnpm (önerilen) veya npm/yarn
• VS Code (veya tercih ettiğiniz IDE)
• Git

Node.js Kurulum Kontrolü

Terminalinizi açın ve şu komutu çalıştırın:

node --version
# Çıktı: v18.x.x veya üzeri olmalı

pnpm Kurulumu (Önerilen)

npm install -g pnpm

💡 İpucu: pnpm, npm ve yarn’a göre daha hızlı ve disk alanından tasarruf eder.

---

🚀 İlk Projenizi Oluşturma

Yöntem 1: CLI ile Oluşturma (En Kolay)

# Yeni bir proje oluşturun
pnpm create @tanstack/start@latest my-first-app

# Proje dizinine gidin
cd my-first-app

# Bağımlıkları yükleyin
pnpm install

# Geliştirme sunucusunu başlatın
pnpm dev

Kurulum Sırasında Size Sorulan Sorular:

CLI size bazı sorular soracaktır:

? Paket yöneticinizi seçin:
  ❯ pnpm (önerilen)
    npm
    yarn

? TypeScript kullanın mı?
  ❯ Evet (önerilen)
    Hayır

? Tailwind CSS ekleyelim mi?
  ❯ Evet
    Hayır

? ESLint ekleyelim mi?
  ❯ Evet
    Hayır

Tavsiyem: Evet seçeneklerini seçin, özellikle TypeScript için!

Yöntem 2: Manuel Oluşturma

Daha fazla kontrol istiyorsanız projeyi manuel de oluşturabilirsiniz:

# 1. Proje dizini oluşturun
mkdir my-first-app
cd my-first-app

# 2. package.json dosyasını başlatın
npm init -y

# 3. Bağımlıkları yükleyin
npm i @tanstack/react-start @tanstack/react-router
npm i -D vite @vitejs/plugin-react
npm i react react-dom
npm i -D typescript @types/react @types/react-dom @types/node vite-tsconfig-paths

# 4. TypeScript yapılandırması
cat > tsconfig.json << 'EOF'
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}
EOF

# 5. Vite yapılandırması
cat > vite.config.ts << 'EOF'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
  server: { port: 3000 },
  plugins: [
    tsConfigPaths(),
    tanstackStart(),
    viteReact(),
  ],
})
EOF

# 6. package.json scriptlerini güncelleyin
# package.json dosyasını açın ve scripts kısmını şöyle değiştirin:
{
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build"
  }
}

---

📁 Proje Yapısını Anlama

Projenizi oluşturduktan sonra şu yapıyı göreceksiniz:

my-first-app/
├── src/
│   ├── routes/           # ❓ Route dosyalarınız buraya
│   │   ├── __root.tsx   # Ana layout (her zaman render edilir)
│   │   └── index.tsx    # Ana sayfa (/)
│   ├── router.tsx        # Router yapılandırması
│   ├── routeTree.gen.ts  # Otomatik oluşturulan route ağacı
│   └── client.tsx        # Client entry point (opsiyonel)
├── public/               # Statik dosyalar (resimler, favicon vb.)
├── vite.config.ts        # Vite yapılandırması
├── tsconfig.json         # TypeScript yapılandırması
├── package.json          # Proje bağımlılıkları ve scriptler
└── README.md

Önemli Dosyalar

src/routes/__root.tsx - Ana Layout

Bu dosya tüm uygulamanızın sarmalayıcısıdır (wrapper). Her zaman render edilir.

/// <reference types="vite/client" />

import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/react-router'
import type { ReactNode } from 'react'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'İlk Uygulamam' },
    ],
  }),
  component: RootComponent,
})

function RootComponent() {
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  )
}

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  )
}

Önemli Noktalar:

• HeadContent - Meta tag’lerini render eder
• Outlet - Çocuk route’ları render eder
• Scripts - Client-side JavaScript’i yükler

src/routes/index.tsx - Ana Sayfa

Bu dosya / path’ine denk gelir:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: HomePage,
})

function HomePage() {
  return (
    <div>
      <h1>Merhaba, TanStack Start!</h1>
      <p>İlk sayfanız başarıyla çalışıyor.</p>
    </div>
  )
}

src/router.tsx - Router Yapılandırması

Router davranışlarını buradan yapılandırırsınız:

import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

export function getRouter() {
  const router = createRouter({
    routeTree,
    scrollRestoration: true,
  })

  return router
}

---

🎯 İlk Uygulamanızı Çalıştırma

Geliştirme Sunucusunu Başlatma

cd my-first-app
pnpm dev

Şu çıktıyı görmelisiniz:

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose

Tarayıcıda Açma

Tarayıcınızda http://localhost:3000 adresine gidin.

Beklediğiniz Görüntü:

┌─────────────────────────────┐
│                             │
│   Merhaba, TanStack Start!  │
│                             │
│   İlk sayfanız başarıyla    │
│   çalışıyor.                │
│                             │
└─────────────────────────────┘

Tebrikler! 🎉 İlk TanStack Start projeniz çalışıyor!

---

✅ Ders 1 Özeti

Bu derste öğrendikleriniz:

Konu	Açıklama
TanStack Start	Full-stack React framework
Temel Teknolojiler	TanStack Router + Vite
Proje Oluşturma	CLI veya manuel yöntemler
Proje Yapısı	routes/, router.tsx, routeTree.gen.ts
__root.tsx	Ana layout, her zaman render edilir
index.tsx	Ana sayfa (/) route’u
pnpm dev	Geliştirme sunucusunu başlatır

---

📝 Alıştırmalar

Alıştırma 1: Kendi Projenizi Oluşturun

# Yeni bir proje oluşturun
pnpm create @tanstack/start@latest ders-1-alistirma
cd ders-1-alistirma
pnpm install
pnpm dev

Alıştırma 2: Ana Sayfayı Düzenleyin

src/routes/index.tsx dosyasını açın ve şöyle değiştirin:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: HomePage,
})

function HomePage() {
  return (
    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
      <h1 style={{ color: '#3b82f6', fontSize: '2rem' }}>
        👋 Hoş Geldiniz!
      </h1>
      <p style={{ fontSize: '1.1rem', marginTop: '1rem' }}>
        Ben TanStack Start ile oluşturulmuş bir sayfayım.
      </p>
      <div style={{
        marginTop: '2rem',
        padding: '1rem',
        backgroundColor: '#f3f4f6',
        borderRadius: '8px'
      }}>
        <p><strong>📚 Öğrendiklerim:</strong></p>
        <ul>
          <li>TanStack Start nedir</li>
          <li>Nasıl proje oluşturulur</li>
          <li>Proje yapısı nasıldır</li>
        </ul>
      </div>
    </div>
  )
}

Alıştırma 3: Kendi Bilgilerinizi Ekleyin

__root.tsx dosyasında başlığı ve meta bilgilerini kendinize göre düzenleyin:

head: () => ({
  meta: [
    { charSet: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { title: 'Benim Uygulamam - TanStack Start' },
    { name: 'description', content: 'TanStack Start ile yapılmış ilk uygulamam' },
  ],
}),

---

🚀 Sonraki Ders: Routing - Temel Seviye

Bir sonraki derste şunları öğreneceksiniz:

• 📍 Yeni route’lar nasıl oluşturulur
• 🔗 Dinamik route’lar ($param)
• 🌐 Nested routing (iç içe route’lar)
• 🔍 Route parametrelerini kullanma

---

💬 Sorularınız?

Herhangi bir konuda takıldığınız yer oldu mu? Sorularınızı aşağıya yazabilirsiniz:

1. Kurulum sırasında hata aldım mı?
2. Proje yapısını anlamakta zorlandım mı?
3. Tailwind CSS kurulumu gerekli mi?

Bir sonraki derste görüşmek üzere! 👋