TanStack Start 快速入门从脚手架、CLI 到官方示例跑通你的第一个全栈 React 应用【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/routerTanStack Start 是由 TanStack Router 驱动的全栈 React 框架本指南对应仓库中 docs/start/framework/react/getting-started.md 的完整内容带你走通四条从零到可运行项目的路径TanStack Builder、CLI 脚手架、官方示例克隆与手动从零搭建。读完本文你将能独立创建、运行一个 TanStack Start 项目并知道下一步该学习哪些核心概念路由、Server Functions、SSR 等以及去哪里寻找对应的仓库源码与示例。TanStack Start 是什么在进入搭建步骤之前先明确 TanStack Start 的定位。根据 docs/start/framework/react/overview.mdTanStack Start 是一个由 TanStack Router 提供路由能力的全栈 React 框架目前处于Release CandidateRC阶段功能已完备、API 已趋稳官方鼓励尽早试用并提供反馈。它提供全文档 SSR、流式渲染Streaming、Server Functions、客户端/服务端双构建等能力并同时支持 Vite 与 Rsbuild 两种构建工具。因此无论你通过哪种方式新建项目最终拿到的都是一个融合了 Router 构建工具 Server 运行时 的标准工程结构这也是下面所有搭建路径的共同目标。方式一使用 TanStack Builder推荐最快、最省事的起步方式是使用TanStack Builder——这是 TanStack 官方提供的 AI-first 交互式建站流程能在浏览器中引导你完成项目初始化并快速得到一个可运行的工程。适合希望减少环境配置、快速验证想法的开发者。方式二使用 CLI 脚手架如果你想在本地直接生成项目或者希望保留一条不依赖 Web 流程的备用路径可以使用 TanStack CLInpx tanstack/clilatest create执行后 CLI 会以交互方式提示你选择包管理器npm / pnpm / yarn 等可选附加功能例如 Tailwind CSS 与 ESLint。按提示完成选择后CLI 会在当前目录生成一个可直接运行的 TanStack Start 项目。仓库佐证CLI 与代码生成的底层实现本仓库中的 packages/router-cli 包tanstack/router-cli提供了tsr命令行入口见 packages/router-cli/package.json 中的bin字段它依赖 packages/router-generator 完成文件路由的代码生成而 packages/router-generator/tests 下数百个测试用例则覆盖了各类路由文件与配置组合的生成结果。这些包是 TanStack Router / Start 在项目运行时自动生成路由代码RouteTree的基础设施你在脚手架项目里看到的routeTree.gen.ts即由此类生成器产出。方式三从官方示例开始如果你更愿意从一个已经能跑通的工作代码库出发可以克隆官方示例。以 Basic 示例为例npx gitpick TanStack/router/tree/main/examples/react/start-basic start-basic cd start-basic npm install npm run devnpx gitpick ...负责把指定示例目录克隆到本地gitpick支持按仓库子目录精确抓取npm install安装依赖npm run dev启动开发服务器。想使用其他示例时只需把命令中的start-basic替换为下表左侧的 slug 即可Start 专属示例清单Slug说明仓库位置start-basic基础全栈示例推荐起点examples/react/start-basicstart-basic-rsbuildBasic Rsbuild 构建examples/react/start-basic-rsbuildstart-basic-authBasic 认证examples/react/start-basic-authstart-counter计数器Server Function 演示examples/react/start-counterstart-basic-react-queryBasic React Queryexamples/react/start-basic-react-querystart-clerk-basicClerk 认证集成examples/react/start-clerk-basicstart-convex-trellauxConvex 数据库 Trellaux 应用examples/react/start-convex-trellauxstart-supabase-basicSupabase 集成examples/react/start-supabase-basicstart-trellauxTrellaux 应用examples/react/start-trellauxstart-workosWorkOS 认证集成examples/react/start-workosstart-material-uiMaterial UI 集成examples/react/start-material-ui每个示例页面都附有 StackBlitz 在线预览克隆之前可以先在浏览器里查看运行效果。如果你想快速克隆并部署也可以使用示例页面上的Deploy to Netlify按钮一键完成。如果需要克隆其他示例把下面的EXAMPLE_SLUG替换成上表中的任意 slug 即可npx gitpick TanStack/router/tree/main/examples/react/EXAMPLE_SLUG my-new-project cd my-new-project npm install npm run dev仓库里的 start-basic 长什么样以 examples/react/start-basic 为例它的工程结构可以直接在本仓库中查阅帮助你理解示例的构成package.jsonexamples/react/start-basic/package.json核心依赖为tanstack/react-router、tanstack/react-start、react/react-dom与zod脚本包含devvite dev、buildvite build tsc --noEmit、previewvite preview以及startnode .output/server/index.mjs即启动构建后的服务端产物。vite.config.tsexamples/react/start-basic/vite.config.ts按顺序装配了tailwindcss()、tanstackStart({ srcDirectory: src })、viteReact()与nitro()插件并把开发服务器端口设为3000。从这里可以看到 TanStack Start 的 Vite 插件入口来自tanstack/react-start/plugin/vite服务端运行时则由 Nitro 提供。src/routes/__root.tsxexamples/react/start-basic/src/routes/__root.tsx通过createRootRoute定义根路由使用HeadContent/Scripts注入 head 与脚本通过shellComponent自定义文档外壳并挂载TanStackRouterDevtools调试工具——这是所有 TanStack Start 应用共享的文件路由 根布局骨架。方式四从零开始手动构建如果你希望完全手工接线、深入理解每一步的配置可以阅读 Build a project from scratch 文档其中会逐步讲解如何从空目录开始安装依赖、配置 Vite 插件、建立src/routes文件路由目录并启动开发服务器。从其他框架迁移已有项目如果你的项目不是从零开始而是从其他框架迁移而来建议先通过上面任一新建项目的方式从一个干净的 TanStack Start 工程学起避免迁移 学习双重负担叠加然后参考针对性的迁移指南从 Next.js 迁移从 Remix 2 / React Router 7 Framework Mode 迁移的指南即将推出。下一步开始学习路由项目创建、克隆或部署完成后下一步是学习 TanStack Start 的核心——路由系统请继续阅读 Routing 路由指南。路由是整个框架的基石docs/start/framework/react/guide 目录下还整理了 Server Functions、Server Components、SSR、中间件、认证等 30 余篇进阶指南均以当前文档同源的框架体系展开。其他 Router非 Start 专属示例如果你需要的是与 TanStack Router 本身相关、而不依赖 Start 框架的示例以下示例是很好的参考均可在本仓库 examples/react 目录下找到Slug说明仓库位置quickstart-file-based文件路由快速上手examples/react/quickstart-file-basedbasic-file-based文件路由基础examples/react/basic-file-basedkitchen-sink-file-based文件路由全家桶examples/react/kitchen-sink-file-basedkitchen-sink-react-query-file-based全家桶 React Queryexamples/react/kitchen-sink-react-query-file-basedlocation-masking位置掩码examples/react/location-maskingauthenticated-routes认证路由examples/react/authenticated-routesscroll-restoration滚动恢复examples/react/scroll-restorationdeferred-data延迟数据加载examples/react/deferred-datanavigation-blocking导航拦截examples/react/navigation-blockingview-transitions视图过渡动画examples/react/view-transitionswith-trpctRPC 集成examples/react/with-trpcwith-trpc-react-querytRPC React Queryexamples/react/with-trpc-react-query小结TanStack Start 提供了四条互补的起步路径追求效率用TanStack Builder本地可控用CLI想要现成可运行代码用官方示例gitpick 克隆追求完全掌控则手动从零搭建。无论选择哪条路最终都会进入同一个以文件路由为核心的工程结构——开发脚本dev/build/preview/start、Vite 插件装配方式与根路由骨架都可以在仓库的 examples/react/start-basic 中直接验证。跑通项目后请继续阅读 Routing 指南正式进入路由学习阶段。【免费下载链接】router A client-first, server-capable, fully type-safe router and full-stack framework for the web (React and more).项目地址: https://gitcode.com/GitHub_Trending/ro/router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考