TanStack Start - Build from Scratch 从零构建

逐步构建一个完整的 TanStack Start 应用程序。

项目目标

构建一个基础的 TanStack Start Web 应用：服务首页、显示计数器、在服务端和客户端增加计数。

构建步骤

第一步：创建项目

bash

mkdir myApp
cd myApp
npm init -y

第二步：TypeScript 配置

json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

第三步：安装依赖

bash

npm i @tanstack/react-start @tanstack/react-router
npm i -D vite @vitejs/plugin-react typescript @types/react @types/react-dom @types/node vite-tsconfig-paths
npm i react react-dom

第四步：配置 Vite

typescript

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()],
})

第五步：路由配置

tsx

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

export function getRouter() {
  return createRouter({ routeTree, scrollRestoration: true })
}

第六步：应用根节点

tsx

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

第七步：第一个路由

tsx

const getCount = createServerFn({ method: 'GET' }).handler(() => readCount())
const updateCount = createServerFn({ method: 'POST' })
  .inputValidator((d: number) => d)
  .handler(async ({ data }) => { await writeCount(data) })

export const Route = createFileRoute('/')({
  component: Home,
  loader: async () => await getCount(),
})

字节笔记本

TanStack Start - Build from Scratch 从零构建

项目目标

构建步骤

第一步：创建项目

第二步：TypeScript 配置

第三步：安装依赖

第四步：配置 Vite

第五步：路由配置

第六步：应用根节点

第七步：第一个路由

相关资源