Vite 6 + React + TypeScript: بناء تطبيق ويب حديث من الصفر في 2026

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

pnpm create vite my-vite-app --template react-ts
cd my-vite-app
pnpm install

npm run dev

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
})

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
 
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
 
  return {
    plugins: [react()],
 
    // أسماء مستعارة للمسارات لاستيراد أنظف
    resolve: {
      alias: {
        '@': resolve(__dirname, './src'),
        '@components': resolve(__dirname, './src/components'),
        '@hooks': resolve(__dirname, './src/hooks'),
        '@utils': resolve(__dirname, './src/utils'),
        '@types': resolve(__dirname, './src/types'),
      },
    },
 
    // تهيئة خادم التطوير
    server: {
      port: 3000,
      open: true,
      // وكيل لاستدعاءات API في التطوير
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
 
    // تهيئة بناء الإنتاج
    build: {
      target: 'es2022',
      sourcemap: true,
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['react', 'react-dom'],
          },
        },
      },
    },
 
    // تهيئة CSS
    css: {
      modules: {
        localsConvention: 'camelCase',
      },
    },
  }
})

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@utils/*": ["./src/utils/*"],
      "@types/*": ["./src/types/*"]
    }
  }
}

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
 
  environments: {
    // بيئة العميل (المتصفح)
    client: {
      build: {
        outDir: 'dist/client',
        rollupOptions: {
          input: './index.html',
        },
      },
    },
 
    // بيئة SSR (Node.js)
    ssr: {
      build: {
        outDir: 'dist/server',
        ssr: true,
      },
      resolve: {
        conditions: ['node'],
      },
    },
  },
})

function myVitePlugin() {
  return {
    name: 'my-plugin',
 
    // هذا الخطاف يعمل في كل بيئة
    resolveId(source, importer, options) {
      if (this.environment.name === 'ssr') {
        // منطق خاص بـ SSR
        return null
      }
      // المنطق الافتراضي (العميل)
      return null
    },
 
    // تهيئة مختلفة حسب البيئة
    configureServer(server) {
      const clientEnv = server.environments.client
      const ssrEnv = server.environments.ssr
 
      // كل بيئة لها رسم وحدات بياني خاص
      console.log('وحدات العميل:', clientEnv.moduleGraph.idToModuleMap.size)
    },
  }
}

mkdir -p src/{components,hooks,utils,types,pages,styles,services}

import { Outlet } from 'react-router-dom'
import { Header } from './Header'
import { Footer } from './Footer'
import styles from './Layout.module.css'
 
export function Layout() {
  return (
    <div className={styles.layout}>
      <Header />
      <main className={styles.main}>
        <Outlet />
      </main>
      <Footer />
    </div>
  )
}

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
 
.main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
}

import { Link, NavLink } from 'react-router-dom'
import styles from './Header.module.css'
 
const navLinks = [
  { to: '/', label: 'الرئيسية' },
  { to: '/about', label: 'حول' },
  { to: '/dashboard', label: 'لوحة التحكم' },
]
 
export function Header() {
  return (
    <header className={styles.header}>
      <Link to="/" className={styles.logo}>
        تطبيق Vite
      </Link>
      <nav className={styles.nav}>
        {navLinks.map(({ to, label }) => (
          <NavLink
            key={to}
            to={to}
            className={({ isActive }) =>
              isActive ? styles.active : styles.link
            }
          >
            {label}
          </NavLink>
        ))}
      </nav>
    </header>
  )
}

import styles from './Footer.module.css'
 
export function Footer() {
  return (
    <footer className={styles.footer}>
      <p>
        بُني بـ Vite 6 + React + TypeScript &mdash;{' '}
        {new Date().getFullYear()}
      </p>
    </footer>
  )
}

npm install react-router-dom

import styles from './Home.module.css'
 
export function Home() {
  return (
    <div className={styles.home}>
      <h1>مرحباً بك في تطبيق Vite 6</h1>
      <p>
        هذا التطبيق مبني بـ Vite 6 و React 19 و TypeScript
        لأداء مثالي.
      </p>
      <div className={styles.features}>
        <FeatureCard
          title="HMR فائق السرعة"
          description="التعديلات تنعكس فوراً في المتصفح"
        />
        <FeatureCard
          title="TypeScript أصلي"
          description="دعم TypeScript كامل بدون تهيئة"
        />
        <FeatureCard
          title="بناء محسّن"
          description="tree-shaking وتقسيم الكود تلقائياً"
        />
      </div>
    </div>
  )
}
 
function FeatureCard({ title, description }: { title: string; description: string }) {
  return (
    <div className={styles.card}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  )
}

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { Layout } from '@/components/Layout'
import { Home } from '@/pages/Home'
import './index.css'
 
const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      {
        path: 'about',
        lazy: () => import('@/pages/About').then(m => ({ Component: m.About })),
      },
      {
        path: 'dashboard',
        lazy: () => import('@/pages/Dashboard').then(m => ({ Component: m.Dashboard })),
      },
    ],
  },
])
 
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
)

# .env — يُحمّل في جميع الأوضاع
VITE_APP_TITLE=My Vite App
VITE_API_URL=https://api.example.com
 
# .env.development — وضع التطوير فقط
VITE_API_URL=http://localhost:8080
VITE_DEBUG=true
 
# .env.production — وضع الإنتاج فقط
VITE_API_URL=https://api.production.com

/// <reference types="vite/client" />
 
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  readonly VITE_API_URL: string
  readonly VITE_DEBUG?: string
}
 
interface ImportMeta {
  readonly env: ImportMetaEnv
}

const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE
const isDev = import.meta.env.DEV // قيمة منطقية تلقائية

import { useState, useEffect } from 'react'
 
interface FetchState<T> {
  data: T | null
  loading: boolean
  error: string | null
}
 
export function useFetch<T>(url: string): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: true,
    error: null,
  })
 
  useEffect(() => {
    const controller = new AbortController()
 
    async function fetchData() {
      try {
        setState(prev => ({ ...prev, loading: true, error: null }))
        const response = await fetch(url, { signal: controller.signal })
 
        if (!response.ok) {
          throw new Error(`HTTP error: ${response.status}`)
        }
 
        const data = await response.json()
        setState({ data, loading: false, error: null })
      } catch (err) {
        if (err instanceof DOMException && err.name === 'AbortError') return
        setState({
          data: null,
          loading: false,
          error: err instanceof Error ? err.message : 'خطأ غير معروف',
        })
      }
    }
 
    fetchData()
    return () => controller.abort()
  }, [url])
 
  return state
}

import { useFetch } from '@/hooks/useFetch'
import styles from './Dashboard.module.css'
 
interface User {
  id: number
  name: string
  email: string
}
 
export function Dashboard() {
  const { data: users, loading, error } = useFetch<User[]>(
    'https://jsonplaceholder.typicode.com/users'
  )
 
  if (loading) return <div className={styles.loading}>جارٍ التحميل...</div>
  if (error) return <div className={styles.error}>خطأ: {error}</div>
 
  return (
    <div className={styles.dashboard}>
      <h1>لوحة التحكم</h1>
      <div className={styles.grid}>
        {users?.map(user => (
          <div key={user.id} className={styles.userCard}>
            <h3>{user.name}</h3>
            <p>{user.email}</p>
          </div>
        ))}
      </div>
    </div>
  )
}

// vite.config.ts
export default defineConfig({
  build: {
    target: 'es2022',
    minify: 'esbuild',
    sourcemap: true,
 
    rollupOptions: {
      output: {
        manualChunks(id) {
          // فصل تبعيات React في قطعة vendor
          if (id.includes('node_modules/react')) {
            return 'react-vendor'
          }
          // فصل React Router
          if (id.includes('node_modules/react-router')) {
            return 'router'
          }
          // تجميع التبعيات الأخرى
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        },
      },
    },
 
    // عتبة تحذير حجم القطع
    chunkSizeWarningLimit: 500,
  },
})

npm install -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'
 
export default defineConfig({
  plugins: [
    react(),
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
    }),
  ],
})

npm run build

export default defineConfig({
  build: {
    modulePreload: {
      polyfill: true, // Polyfill للمتصفحات القديمة
    },
  },
})

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

/// <reference types="vitest/config" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
 
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*.{ts,tsx}'],
      exclude: ['src/**/*.test.{ts,tsx}', 'src/test/**'],
    },
  },
})

import '@testing-library/jest-dom'

import { renderHook, waitFor } from '@testing-library/react'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { useFetch } from './useFetch'
 
describe('useFetch', () => {
  beforeEach(() => {
    vi.restoreAllMocks()
  })
 
  it('يجب أن يعيد البيانات بعد جلب ناجح', async () => {
    const mockData = [{ id: 1, name: 'Test' }]
 
    global.fetch = vi.fn().mockResolvedValue({
      ok: true,
      json: () => Promise.resolve(mockData),
    })
 
    const { result } = renderHook(() =>
      useFetch('https://api.example.com/data')
    )
 
    expect(result.current.loading).toBe(true)
 
    await waitFor(() => {
      expect(result.current.loading).toBe(false)
      expect(result.current.data).toEqual(mockData)
      expect(result.current.error).toBeNull()
    })
  })
 
  it('يجب أن يتعامل مع أخطاء HTTP', async () => {
    global.fetch = vi.fn().mockResolvedValue({
      ok: false,
      status: 404,
    })
 
    const { result } = renderHook(() =>
      useFetch('https://api.example.com/not-found')
    )
 
    await waitFor(() => {
      expect(result.current.loading).toBe(false)
      expect(result.current.error).toBe('HTTP error: 404')
      expect(result.current.data).toBeNull()
    })
  })
})

import { render, screen } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import { describe, it, expect } from 'vitest'
import { Header } from './Header'
 
describe('Header', () => {
  it('يجب أن يعرض الشعار وروابط التنقل', () => {
    render(
      <MemoryRouter>
        <Header />
      </MemoryRouter>
    )
 
    expect(screen.getByText('تطبيق Vite')).toBeInTheDocument()
    expect(screen.getByText('الرئيسية')).toBeInTheDocument()
    expect(screen.getByText('حول')).toBeInTheDocument()
    expect(screen.getByText('لوحة التحكم')).toBeInTheDocument()
  })
})

npx vitest          # وضع المراقبة
npx vitest run      # تشغيل واحد
npx vitest --coverage  # مع التغطية

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr'
 
export default defineConfig({
  plugins: [
    react(),
    svgr(),
  ],
})

import { ReactComponent as Logo } from '@/assets/logo.svg'
 
function App() {
  return <Logo className="logo" />
}

npm install -D vite-plugin-compression

import compression from 'vite-plugin-compression'
 
export default defineConfig({
  plugins: [
    react(),
    compression({
      algorithm: 'brotliCompress',
      ext: '.br',
    }),
    compression({
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
})

npm install -D vite-plugin-pwa

import { VitePWA } from 'vite-plugin-pwa'
 
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My Vite App',
        short_name: 'MyApp',
        theme_color: '#646cff',
      },
    }),
  ],
})

npm run build

npm run preview

npm install -g vercel
vercel

npm install -D wrangler
npx wrangler pages deploy dist

server {
    listen 80;
    server_name myapp.com;
    root /var/www/my-vite-app/dist;
    index index.html;
 
    # ضغط gzip
    gzip on;
    gzip_types text/css application/javascript application/json image/svg+xml;
 
    # تخزين مؤقت للأصول الثابتة (ملفات مُجزّأة)
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
 
    # رجوع SPA
    location / {
        try_files $uri $uri/ /index.html;
    }
}