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