Redwood 教程第 1 章创建你的第一个页面generate page 与路由【免费下载链接】redwoodRedwoodGraphQL项目地址: https://gitcode.com/gh_mirrors/re/redwood本篇指南以 Redwood 教程 Chapter 1「Our First Page」为核心讲解如何用yarn redwood generate page脚手架命令快速生成页面组件及其测试、Storybook 文件并自动注册路由。你将掌握web/src/Routes.{js,tsx}中Route的声明式路由用法、NotFoundPage兜底机制以及如何通过web/src/index.css为应用添加基础样式最终搭建出第一个可访问、可导航的 Redwood 页面。从欢迎页到第一个页面generate page命令Redwood 项目初始化后Web 端默认展示的是内置的欢迎页splash screen。为了让用户看到真正属于我们自己的内容Redwood 提供了 CLI 脚手架命令来生成页面yarn redwood generate page home /这条命令在底层由 packages/cli/src/commands/generate/page/page.js 实现它会依次完成四件事创建页面组件web/src/pages/HomePage/HomePage.{js,tsx}。Redwood 会取page之后的第一个参数将其 PascalCase 化如home→Home再拼接上后缀Page构成组件名即HomePage。从源码看这个后缀由COMPONENT_SUFFIX Page常量定义而文件目录统一落在REDWOOD_WEB_PATH_NAME pages下。创建配套测试文件web/src/pages/HomePage/HomePage.test.{js,tsx}其中包含一个开箱即过的基础渲染测试renders successfully。创建 Storybook 文件web/src/pages/HomePage/HomePage.stories.{js,tsx}用于以组件驱动的方式单独开发和组织 UI。关于 Storybook 的完整用法会在教程第 5 章中展开。在web/src/Routes.{js,tsx}中注册路由将路径/映射到HomePage。其中第 1~3 步对应源码中的files()函数——它通过templateForComponentFile依次加载page.tsx.template、test.tsx.template与stories.tsx.template三个模板位于 packages/cli/src/commands/generate/page/templates/分别生成页面、测试与 Story 文件第 4 步则对应routes()函数它拼接出Route path/ page{HomePage} namehome /并交由addRoutesToRouterTask写入路由文件。如果你生成的是 TypeScript 项目CLI 会直接输出.tsx文件如果是 JavaScript 项目则会通过transformTSToJS将模板内容转换为.jsx。生成的页面模板大致如下省略 RSC 分支const HomePage () { return ( Metadata titleHome descriptionHome page / h1HomePage/h1 p Find me in codeweb/src/pages/HomePage/HomePage.tsx/code /p / ) } export default HomePage注意模板顶部引入了一个Metadata组件用于设置页面的title与description这是 Redwood 内置的 SEO 基础设施。命令执行完毕后CLI 还会打印一条提示建议参考搜索引擎官方文档撰写优质标题与摘要。页面生成后浏览器会自动热更新HMR你立刻就能在http://localhost:8910/看到默认的 HomePage 渲染结果——虽然还比较朴素但已经是自己的页面了。打开页面文件改几段文字并保存浏览器会再次自动刷新显示新内容。路由Route与自动导入打开web/src/Routes.{js,tsx}你会看到如下结构以 JS 为例TS 仅扩展名不同import { Router, Route } from redwoodjs/router const Routes () { return ( Router Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) } export default Routes几个要点值得注意页面组件的自动导入HomePage虽然在Routes文件中没有任何import语句却能被直接引用。这是因为 Redwood 会自动导入web/src/pages下的所有页面从而避免在路由文件顶部堆积一长串 import 声明。这正是 Redwood 约定优于配置 理念的体现。Route的三个关键属性pathURL 路径例如/或/hello。它支持动态参数如{id}甚至带类型的参数如{id:Int}CLI 会据此生成带类型 props 的页面page要渲染的页面组件name路由的命名标识供routes.home()这类命名路由辅助函数使用。Route notfound当没有路由能匹配当前 URL 时Redwood 会渲染NotFoundPage作为兜底页面。从源码层面看Route与Router分别定义在 packages/router/src/Route.tsx 和 packages/router/src/router.tsx 中路由上下文则由 packages/router/src/router-context.tsx 提供。只要存在一个path/的路由你就永远不会再看到 Redwood 初始欢迎页。不妨做个实验把路由改成Route path/hello page{HomePage} namehome /保存后访问http://localhost:8910/欢迎页会重新出现并列出应用中所有可用 URL访问/hello则能看到 HomePage。记得在继续之前把path改回/。简单样式web/src/index.css为了在后续教程中看得更舒服Redwood 教程建议向web/src/index.css粘贴一份基础样式表它负责切换到操作系统系统字体、为列表和表单元素添加间距、弱化标题链接样式等。完整内容如下body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } ul { list-style-type: none; margin: 1rem 0; padding: 0; } li { display: inline-block; margin: 0 1rem 0 0 ; } h1 a { text-decoration: none; color: black; } button, input, label, textarea { display: block; outline: none; } label { margin-top: 1rem; } .error { color: red; } input.error, textarea.error { border: 1px solid red; } .form-error { color: red; background-color: lavenderblush; padding: 1rem; display: inline-block; } .form-error ul { list-style-type: disc; margin: 1rem; padding: 1rem; } .form-error li { display: list-item; } .flex-between { display: flex; justify-content: space-between; } .flex-between button { display: inline; }这些规则中的.error、.form-error、.flex-between等类名是为教程后续章节中的表单与列表交互预留的.error把错误文本与错误输入框标红.form-error以淡粉色背景突出整体错误提示块.flex-between则让工具栏之类的行内容两端对齐。你可以完全按喜好增删或忽略这些样式但需要注意后续章节的截图均基于这份基础样式不同样式下页面观感可能略有差异。应用这份样式后首页从浏览器默认排版升级为更易读的布局教程后续的构建体验会顺畅不少。小结至此你已完成 Redwood 教程的第一个里程碑通过yarn redwood generate page home /一键生成页面组件、测试与 Storybook 文件并自动注册路由理解了web/src/Routes.{js,tsx}中Route的声明式路由、页面自动导入与NotFoundPage兜底机制通过web/src/index.css建立了贯穿整个教程的基础视觉样式。接下来教程将进入 Redwood 的核心领域Cell、GraphQL 与 Service 层而你已经掌握了承载这一切的第一个页面。【免费下载链接】redwoodRedwoodGraphQL项目地址: https://gitcode.com/gh_mirrors/re/redwood创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考