建你的第一個(gè)頁(yè)面（generate page 與路由）)
Redwood 教程第 1 章創(chuàng)建你的第一個(gè)頁(yè)面generate page 與路由【免費(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址: https://gitcode.com/gh_mirrors/re/redwood本篇指南以 Redwood 教程 Chapter 1「Our First Page」為核心講解如何用yarn redwood generate page腳手架命令快速生成頁(yè)面組件及其測(cè)試、Storybook 文件并自動(dòng)注冊(cè)路由。你將掌握web/src/Routes.{js,tsx}中Route的聲明式路由用法、NotFoundPage兜底機(jī)制以及如何通過(guò)web/src/index.css為應(yīng)用添加基礎(chǔ)樣式最終搭建出第一個(gè)可訪問(wèn)、可導(dǎo)航的 Redwood 頁(yè)面。從歡迎頁(yè)到第一個(gè)頁(yè)面generate page命令Redwood 項(xiàng)目初始化后Web 端默認(rèn)展示的是內(nèi)置的歡迎頁(yè)splash screen。為了讓用戶看到真正屬于我們自己的內(nèi)容Redwood 提供了 CLI 腳手架命令來(lái)生成頁(yè)面yarn redwood generate page home /這條命令在底層由 packages/cli/src/commands/generate/page/page.js 實(shí)現(xiàn)它會(huì)依次完成四件事創(chuàng)建頁(yè)面組件web/src/pages/HomePage/HomePage.{js,tsx}。Redwood 會(huì)取page之后的第一個(gè)參數(shù)將其 PascalCase 化如home→Home再拼接上后綴Page構(gòu)成組件名即HomePage。從源碼看這個(gè)后綴由COMPONENT_SUFFIX Page常量定義而文件目錄統(tǒng)一落在REDWOOD_WEB_PATH_NAME pages下。創(chuàng)建配套測(cè)試文件web/src/pages/HomePage/HomePage.test.{js,tsx}其中包含一個(gè)開箱即過(guò)的基礎(chǔ)渲染測(cè)試renders successfully。創(chuàng)建 Storybook 文件web/src/pages/HomePage/HomePage.stories.{js,tsx}用于以組件驅(qū)動(dòng)的方式單獨(dú)開發(fā)和組織 UI。關(guān)于 Storybook 的完整用法會(huì)在教程第 5 章中展開。在web/src/Routes.{js,tsx}中注冊(cè)路由將路徑/映射到HomePage。其中第 1~3 步對(duì)應(yīng)源碼中的files()函數(shù)——它通過(guò)templateForComponentFile依次加載page.tsx.template、test.tsx.template與stories.tsx.template三個(gè)模板位于 packages/cli/src/commands/generate/page/templates/分別生成頁(yè)面、測(cè)試與 Story 文件第 4 步則對(duì)應(yīng)routes()函數(shù)它拼接出Route path/ page{HomePage} namehome /并交由addRoutesToRouterTask寫入路由文件。如果你生成的是 TypeScript 項(xiàng)目CLI 會(huì)直接輸出.tsx文件如果是 JavaScript 項(xiàng)目則會(huì)通過(guò)transformTSToJS將模板內(nèi)容轉(zhuǎn)換為.jsx。生成的頁(yè)面模板大致如下省略 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注意模板頂部引入了一個(gè)Metadata組件用于設(shè)置頁(yè)面的title與description這是 Redwood 內(nèi)置的 SEO 基礎(chǔ)設(shè)施。命令執(zhí)行完畢后CLI 還會(huì)打印一條提示建議參考搜索引擎官方文檔撰寫優(yōu)質(zhì)標(biāo)題與摘要。頁(yè)面生成后瀏覽器會(huì)自動(dòng)熱更新HMR你立刻就能在http://localhost:8910/看到默認(rèn)的 HomePage 渲染結(jié)果——雖然還比較樸素但已經(jīng)是自己的頁(yè)面了。打開頁(yè)面文件改幾段文字并保存瀏覽器會(huì)再次自動(dòng)刷新顯示新內(nèi)容。路由Route與自動(dòng)導(dǎo)入打開web/src/Routes.{js,tsx}你會(huì)看到如下結(jié)構(gòu)以 JS 為例TS 僅擴(kuò)展名不同import { Router, Route } from redwoodjs/router const Routes () { return ( Router Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) } export default Routes幾個(gè)要點(diǎn)值得注意頁(yè)面組件的自動(dòng)導(dǎo)入HomePage雖然在Routes文件中沒有任何import語(yǔ)句卻能被直接引用。這是因?yàn)?Redwood 會(huì)自動(dòng)導(dǎo)入web/src/pages下的所有頁(yè)面從而避免在路由文件頂部堆積一長(zhǎng)串 import 聲明。這正是 Redwood 約定優(yōu)于配置 理念的體現(xiàn)。Route的三個(gè)關(guān)鍵屬性pathURL 路徑例如/或/hello。它支持動(dòng)態(tài)參數(shù)如{id}甚至帶類型的參數(shù)如{id:Int}CLI 會(huì)據(jù)此生成帶類型 props 的頁(yè)面page要渲染的頁(yè)面組件name路由的命名標(biāo)識(shí)供routes.home()這類命名路由輔助函數(shù)使用。Route notfound當(dāng)沒有路由能匹配當(dāng)前 URL 時(shí)Redwood 會(huì)渲染NotFoundPage作為兜底頁(yè)面。從源碼層面看Route與Router分別定義在 packages/router/src/Route.tsx 和 packages/router/src/router.tsx 中路由上下文則由 packages/router/src/router-context.tsx 提供。只要存在一個(gè)path/的路由你就永遠(yuǎn)不會(huì)再看到 Redwood 初始?xì)g迎頁(yè)。不妨做個(gè)實(shí)驗(yàn)把路由改成Route path/hello page{HomePage} namehome /保存后訪問(wèn)http://localhost:8910/歡迎頁(yè)會(huì)重新出現(xiàn)并列出應(yīng)用中所有可用 URL訪問(wèn)/hello則能看到 HomePage。記得在繼續(xù)之前把path改回/。簡(jiǎn)單樣式web/src/index.css為了在后續(xù)教程中看得更舒服Redwood 教程建議向web/src/index.css粘貼一份基礎(chǔ)樣式表它負(fù)責(zé)切換到操作系統(tǒng)系統(tǒng)字體、為列表和表單元素添加間距、弱化標(biāo)題鏈接樣式等。完整內(nèi)容如下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; }這些規(guī)則中的.error、.form-error、.flex-between等類名是為教程后續(xù)章節(jié)中的表單與列表交互預(yù)留的.error把錯(cuò)誤文本與錯(cuò)誤輸入框標(biāo)紅.form-error以淡粉色背景突出整體錯(cuò)誤提示塊.flex-between則讓工具欄之類的行內(nèi)容兩端對(duì)齊。你可以完全按喜好增刪或忽略這些樣式但需要注意后續(xù)章節(jié)的截圖均基于這份基礎(chǔ)樣式不同樣式下頁(yè)面觀感可能略有差異。應(yīng)用這份樣式后首頁(yè)從瀏覽器默認(rèn)排版升級(jí)為更易讀的布局教程后續(xù)的構(gòu)建體驗(yàn)會(huì)順暢不少。小結(jié)至此你已完成 Redwood 教程的第一個(gè)里程碑通過(guò)yarn redwood generate page home /一鍵生成頁(yè)面組件、測(cè)試與 Storybook 文件并自動(dòng)注冊(cè)路由理解了web/src/Routes.{js,tsx}中Route的聲明式路由、頁(yè)面自動(dòng)導(dǎo)入與NotFoundPage兜底機(jī)制通過(guò)web/src/index.css建立了貫穿整個(gè)教程的基礎(chǔ)視覺樣式。接下來(lái)教程將進(jìn)入 Redwood 的核心領(lǐng)域Cell、GraphQL 與 Service 層而你已經(jīng)掌握了承載這一切的第一個(gè)頁(yè)面?！久赓M(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址: https://gitcode.com/gh_mirrors/re/redwood創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Redwood 教程第 1 章：創(chuàng)建你的第一個(gè)頁(yè)面（generate page 與路由）
Redwood 教程第 1 章創(chuàng)建你的第一個(gè)頁(yè)面generate page 與路由【免費(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址: https://gitcode.com/gh_mirrors/re/redwood本篇指南以 Redwood 教程 Chapter 1「Our First Page」為核心講解如何用yarn redwood generate page腳手架命令快速生成頁(yè)面組件及其測(cè)試、Storybook 文件并自動(dòng)注冊(cè)路由。你將掌握web/src/Routes.{js,tsx}中Route的聲明式路由用法、NotFoundPage兜底機(jī)制以及如何通過(guò)web/src/index.css為應(yīng)用添加基礎(chǔ)樣式最終搭建出第一個(gè)可訪問(wèn)、可導(dǎo)航的 Redwood 頁(yè)面。從歡迎頁(yè)到第一個(gè)頁(yè)面generate page命令Redwood 項(xiàng)目初始化后Web 端默認(rèn)展示的是內(nèi)置的歡迎頁(yè)splash screen。為了讓用戶看到真正屬于我們自己的內(nèi)容Redwood 提供了 CLI 腳手架命令來(lái)生成頁(yè)面yarn redwood generate page home /這條命令在底層由 packages/cli/src/commands/generate/page/page.js 實(shí)現(xiàn)它會(huì)依次完成四件事創(chuàng)建頁(yè)面組件web/src/pages/HomePage/HomePage.{js,tsx}。Redwood 會(huì)取page之后的第一個(gè)參數(shù)將其 PascalCase 化如home→Home再拼接上后綴Page構(gòu)成組件名即HomePage。從源碼看這個(gè)后綴由COMPONENT_SUFFIX Page常量定義而文件目錄統(tǒng)一落在REDWOOD_WEB_PATH_NAME pages下。創(chuàng)建配套測(cè)試文件web/src/pages/HomePage/HomePage.test.{js,tsx}其中包含一個(gè)開箱即過(guò)的基礎(chǔ)渲染測(cè)試renders successfully。創(chuàng)建 Storybook 文件web/src/pages/HomePage/HomePage.stories.{js,tsx}用于以組件驅(qū)動(dòng)的方式單獨(dú)開發(fā)和組織 UI。關(guān)于 Storybook 的完整用法會(huì)在教程第 5 章中展開。在web/src/Routes.{js,tsx}中注冊(cè)路由將路徑/映射到HomePage。其中第 1~3 步對(duì)應(yīng)源碼中的files()函數(shù)——它通過(guò)templateForComponentFile依次加載page.tsx.template、test.tsx.template與stories.tsx.template三個(gè)模板位于 packages/cli/src/commands/generate/page/templates/分別生成頁(yè)面、測(cè)試與 Story 文件第 4 步則對(duì)應(yīng)routes()函數(shù)它拼接出Route path/ page{HomePage} namehome /并交由addRoutesToRouterTask寫入路由文件。如果你生成的是 TypeScript 項(xiàng)目CLI 會(huì)直接輸出.tsx文件如果是 JavaScript 項(xiàng)目則會(huì)通過(guò)transformTSToJS將模板內(nèi)容轉(zhuǎn)換為.jsx。生成的頁(yè)面模板大致如下省略 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注意模板頂部引入了一個(gè)Metadata組件用于設(shè)置頁(yè)面的title與description這是 Redwood 內(nèi)置的 SEO 基礎(chǔ)設(shè)施。命令執(zhí)行完畢后CLI 還會(huì)打印一條提示建議參考搜索引擎官方文檔撰寫優(yōu)質(zhì)標(biāo)題與摘要。頁(yè)面生成后瀏覽器會(huì)自動(dòng)熱更新HMR你立刻就能在http://localhost:8910/看到默認(rèn)的 HomePage 渲染結(jié)果——雖然還比較樸素但已經(jīng)是自己的頁(yè)面了。打開頁(yè)面文件改幾段文字并保存瀏覽器會(huì)再次自動(dòng)刷新顯示新內(nèi)容。路由Route與自動(dòng)導(dǎo)入打開web/src/Routes.{js,tsx}你會(huì)看到如下結(jié)構(gòu)以 JS 為例TS 僅擴(kuò)展名不同import { Router, Route } from redwoodjs/router const Routes () { return ( Router Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) } export default Routes幾個(gè)要點(diǎn)值得注意頁(yè)面組件的自動(dòng)導(dǎo)入HomePage雖然在Routes文件中沒有任何import語(yǔ)句卻能被直接引用。這是因?yàn)?Redwood 會(huì)自動(dòng)導(dǎo)入web/src/pages下的所有頁(yè)面從而避免在路由文件頂部堆積一長(zhǎng)串 import 聲明。這正是 Redwood 約定優(yōu)于配置 理念的體現(xiàn)。Route的三個(gè)關(guān)鍵屬性pathURL 路徑例如/或/hello。它支持動(dòng)態(tài)參數(shù)如{id}甚至帶類型的參數(shù)如{id:Int}CLI 會(huì)據(jù)此生成帶類型 props 的頁(yè)面page要渲染的頁(yè)面組件name路由的命名標(biāo)識(shí)供routes.home()這類命名路由輔助函數(shù)使用。Route notfound當(dāng)沒有路由能匹配當(dāng)前 URL 時(shí)Redwood 會(huì)渲染NotFoundPage作為兜底頁(yè)面。從源碼層面看Route與Router分別定義在 packages/router/src/Route.tsx 和 packages/router/src/router.tsx 中路由上下文則由 packages/router/src/router-context.tsx 提供。只要存在一個(gè)path/的路由你就永遠(yuǎn)不會(huì)再看到 Redwood 初始?xì)g迎頁(yè)。不妨做個(gè)實(shí)驗(yàn)把路由改成Route path/hello page{HomePage} namehome /保存后訪問(wèn)http://localhost:8910/歡迎頁(yè)會(huì)重新出現(xiàn)并列出應(yīng)用中所有可用 URL訪問(wèn)/hello則能看到 HomePage。記得在繼續(xù)之前把path改回/。簡(jiǎn)單樣式web/src/index.css為了在后續(xù)教程中看得更舒服Redwood 教程建議向web/src/index.css粘貼一份基礎(chǔ)樣式表它負(fù)責(zé)切換到操作系統(tǒng)系統(tǒng)字體、為列表和表單元素添加間距、弱化標(biāo)題鏈接樣式等。完整內(nèi)容如下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; }這些規(guī)則中的.error、.form-error、.flex-between等類名是為教程后續(xù)章節(jié)中的表單與列表交互預(yù)留的.error把錯(cuò)誤文本與錯(cuò)誤輸入框標(biāo)紅.form-error以淡粉色背景突出整體錯(cuò)誤提示塊.flex-between則讓工具欄之類的行內(nèi)容兩端對(duì)齊。你可以完全按喜好增刪或忽略這些樣式但需要注意后續(xù)章節(jié)的截圖均基于這份基礎(chǔ)樣式不同樣式下頁(yè)面觀感可能略有差異。應(yīng)用這份樣式后首頁(yè)從瀏覽器默認(rèn)排版升級(jí)為更易讀的布局教程后續(xù)的構(gòu)建體驗(yàn)會(huì)順暢不少。小結(jié)至此你已完成 Redwood 教程的第一個(gè)里程碑通過(guò)yarn redwood generate page home /一鍵生成頁(yè)面組件、測(cè)試與 Storybook 文件并自動(dòng)注冊(cè)路由理解了web/src/Routes.{js,tsx}中Route的聲明式路由、頁(yè)面自動(dòng)導(dǎo)入與NotFoundPage兜底機(jī)制通過(guò)web/src/index.css建立了貫穿整個(gè)教程的基礎(chǔ)視覺樣式。接下來(lái)教程將進(jìn)入 Redwood 的核心領(lǐng)域Cell、GraphQL 與 Service 層而你已經(jīng)掌握了承載這一切的第一個(gè)頁(yè)面?！久赓M(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址: https://gitcode.com/gh_mirrors/re/redwood創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考