教程：使用 `yarn redwood generate page` 創(chuàng)建第一個頁面與路由)
后端前端Web框架開發(fā)工具【免費下載鏈接】redwoodRedwoodGraphQL項目地址https://gitcode.com/gh_mirrors/re/redwood點擊查看免費下載本篇文章基于 Redwood 官方教程第 4 版version-4.x第一章內(nèi)容圍繞yarn redwood generate page home /這一條命令完整講解 Redwood 中頁面Page的生成機制、Routes路由文件的自動更新、NotFoundPage兜底規(guī)則以及基礎(chǔ)樣式引入。你將掌握頁面文件、測試文件、Storybook 文件如何被一次性生成路由如何被自動注入以及如何用一小段 CSS 讓默認頁面立即可讀。文中所有代碼與命令均以當前倉庫gh_mirrors/re/redwood中實際存在的源碼、模板與測試為佐證。為什么從第一個頁面開始在完成 Redwood 項目初始化后瀏覽器打開的是官方歡迎頁Welcome Page。本章的目標是讓我們自己動手創(chuàng)建一個真實的頁面替換掉這個歡迎頁。Redwood 提供了命令行腳手架工具來替我們完成大部分重復(fù)勞動頁面生成就是其中最典型的一個入口。先執(zhí)行yarn redwood generate page home /這條命令做了四件事創(chuàng)建頁面組件文件web/src/pages/HomePage/HomePage.{js,tsx}。Redwood 會把page后面的第一個參數(shù)做 PascalCase 處理再追加后綴Page來構(gòu)造組件名例如home變成HomePage。創(chuàng)建配套的測試文件web/src/pages/HomePage/HomePage.test.{js,tsx}其中包含一個可以通過的冒煙測試組件能否正常渲染。創(chuàng)建配套的 Storybook 文件web/src/pages/HomePage/HomePage.stories.{js,tsx}用于在 Storybook 中獨立開發(fā)和預(yù)覽該組件。在web/src/Routes.{js,tsx}中新增一條Route把路徑/映射到新的HomePage。執(zhí)行完命令后頁面其實已經(jīng)在線了——瀏覽器會自動熱更新。此時看到的還只是一個樸素的原生 HTML 頁面但它已經(jīng)是我們自己的頁面了。打開文件、改幾處文字、保存瀏覽器會立刻刷新出新內(nèi)容。頁面生成器的四個產(chǎn)物源碼級拆解從源碼看頁面生成器位于 packages/cli/src/commands/generate/page/page.js它按照固定模板產(chǎn)出三個文件頁面、測試、Storybook并單獨處理路由注入COMPONENT_SUFFIX Page固定追加的組件名后綴REDWOOD_WEB_PATH_NAME pages頁面統(tǒng)一存放在web/src/pages/下files()函數(shù)依次通過page.tsx.template、test.tsx.template、stories.tsx.template生成內(nèi)容當路由帶參數(shù)時Storybook 使用stories.tsx.parameters.template以便在故事中傳入?yún)?shù)示例routes()函數(shù)構(gòu)造Route path... page{XxxPage} namexxx /隨后由addRoutesToRouterTask寫回路由文件。生成后的頁面模板 page.tsx.template 大致如下以 TypeScript 為例const HomePage () { return ( Metadata titleHome descriptionHome page / h1HomePage/h1 p Find me in codeweb/src/pages/HomePage/HomePage.tsx/code /p / ) } export default HomePage幾個值得注意的實現(xiàn)細節(jié)模板頂部自動引入了Metadata組件redwoodjs/web用于設(shè)置頁面標題與描述。生成器在收尾步驟還會輸出一條提示提醒開發(fā)者Metadata對 SEO 的重要性。測試模板 test.tsx.template 使用redwoodjs/testing/web的render對頁面做一次渲染斷言渲染不拋錯這是新頁面的最低保障測試。測試與 Storybook 文件是否生成受命令行參數(shù)和項目配置雙重控制。在 page.js 中可以看到當tests/stories未顯式傳入時會讀取getConfig().generate.tests/getConfig().generate.stories即redwood.toml中的默認開關(guān)。如果你沒有特別傳參那么頁面 測試 Storybook三件套默認都會生成——教程里那句 Youdowrite tests for your components, *dont you?? 就是 Redwood 腳手架默認行為的最佳注腳。路由文件的自動更新與頁面自動導(dǎo)入打開web/src/Routes.{js,tsx}你會看到生成器寫入的這條路由import { Router, Route } from redwoodjs/router const Routes () { return ( Router Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) } export default Routes注意我們在 Routes 文件中直接引用了HomePage但文件頂部并沒有import HomePage from src/pages/HomePage/HomePage這樣的語句。這是 Redwood 的刻意設(shè)計——Routes 文件會自動導(dǎo)入所有頁面避免在路由文件頂部堆出長長一串 import 聲明。從倉庫中的 fixture 可以看到這一機制的實際效果packages/internal/src/tests/fixtures/nestedPages/web/src/Routes.js 中每個頁面都有獨立 import且支持非默認導(dǎo)出與重命名導(dǎo)入如import BazingaJobProfilePageWithFunnyName from src/pages/Jobs/JobProfilePage說明頁面的自動發(fā)現(xiàn)與導(dǎo)入由 Redwood 內(nèi)部工具鏈在構(gòu)建/類型生成階段完成。Route的三個關(guān)鍵屬性屬性含義示例path匹配的 URL 路徑/、/hellopage渲染該路徑的頁面組件HomePagename路由的命名引用供routes.home()生成鏈接homepath與page是必填項。路由校驗邏輯在 packages/router/src/route-validators.ts 的測試中體現(xiàn)得很清楚缺少path會拋出Route element for xxx is missing required props: path缺少page會拋出... is missing required props: page普通路由缺少name同樣會報錯。而notfound路由是特例它不需要path任何未匹配的 URL 都由它接管但必須有page。NotFoundPage 與 Splash Screen 的切換規(guī)則只要路由表中存在path/的路由Redwood 的初始歡迎頁Splash Screen就再也不會出現(xiàn)。而NotFoundPage承擔的是兜底職責當請求的 URL 匹配不到任何路由時Route notfound page{NotFoundPage} /會被渲染。在 packages/router/src/tests/analyzeRoutes.test.tsx 中路由分析結(jié)果會單獨暴露NotFoundPage并被斷言為有效的 React 元素說明兜底頁是路由系統(tǒng)的第一等公民。動手驗證把首頁換成別的路徑把路由改成Route path/hello page{HomePage} namehome /保存后訪問 http://localhost:8910/根路徑你會發(fā)現(xiàn) Splash Screen 又出現(xiàn)了——因為此刻根路徑下已經(jīng)沒有任何頁面路由Redwood 在根路徑展示了一個應(yīng)用內(nèi)路由列表列出當前應(yīng)用所有可用的 URL。而訪問/hello則能看到 HomePage 的內(nèi)容。這個實驗很好地說明了path與page的解耦關(guān)系頁面組件不綁定路徑路徑只是路由表里的一行配置。做完實驗記得把路徑改回/否則后續(xù)章節(jié)的鏈接都會指向錯誤的地址?；A(chǔ)樣式讓默認頁面不那么素之前的教程為了聚焦代碼刻意不做任何樣式但一個完全沒有樣式的站點實在影響觀感。這里提供一份極簡的基礎(chǔ)樣式表直接粘貼進web/src/index.cssbody { 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; }這段樣式的效果是正文改用操作系統(tǒng)的系統(tǒng)字體-apple-system、Segoe UI、Roboto等元素之間保留適度留白列表去掉圓點并橫向排列表單控件縱向堆疊同時預(yù)置了.error、.form-error等表單錯誤態(tài)類名——這些類名會在后續(xù)章節(jié)的表單與表單校驗示例中直接復(fù)用。CSS 是建議性的你可以按喜好增刪調(diào)整甚至完全忽略、繼續(xù)使用瀏覽器默認樣式。但需要知道的是本教程后續(xù)截圖都是基于這份基礎(chǔ)樣式表渲染的如果改動較大界面觀感可能與截圖略有出入。小結(jié)至此你已經(jīng)完成 Redwood 的第一個里程碑用一條generate page命令創(chuàng)建了頁面組件、測試與 Storybook 文件理解了路由文件的自動注入與頁面自動導(dǎo)入機制知道了NotFoundPage的兜底規(guī)則并為后續(xù)章節(jié)準備了基礎(chǔ)樣式。下一步可以順著本教程繼續(xù)深入路由與頁面鏈接的使用routes.home()與Link、Storybook 與組件測試chapter5/storybook.md、以及 Redwood 的數(shù)據(jù)層Service 與 GraphQL。這些內(nèi)容會建立在你已經(jīng)擁有一個屬于自己的首頁這個前提之上。贊分享后端前端Web框架開發(fā)工具【免費下載鏈接】redwoodRedwoodGraphQL項目地址https://gitcode.com/gh_mirrors/re/redwood點擊查看免費下載相關(guān)推薦Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接generate page 與 Link 實戰(zhàn)Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接generate page 與 Link 實戰(zhàn) 本篇教程承接 Redwood 全棧框架RedwoodG后端前端Web框架開發(fā)工具Redwood 教程用 generate page 創(chuàng)建第二個頁面并通過 Link 與命名路由打通頁面導(dǎo)航Redwood 教程用 generate page 創(chuàng)建第二個頁面并通過 Link 與命名路由打通頁面導(dǎo)航 本篇教程是 Redwood 官方教程第一章的延續(xù)后端前端Web框架開發(fā)工具Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接About 頁面實戰(zhàn)Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接About 頁面實戰(zhàn) 本篇技術(shù)指南來自 Redwood 官方教程第一章講解如何用 redwood gen后端前端Web框架開發(fā)工具上一篇終極指南Apache Airflow監(jiān)控告警體系構(gòu)建完整的數(shù)據(jù)工作流監(jiān)控解決方案下一篇Tilix高級功能揭秘同步輸入、觸發(fā)器與自動配置文件切換創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Redwood 實戰(zhàn)教程：使用 `yarn redwood generate page` 創(chuàng)建第一個頁面與路由
后端前端Web框架開發(fā)工具【免費下載鏈接】redwoodRedwoodGraphQL項目地址https://gitcode.com/gh_mirrors/re/redwood點擊查看免費下載本篇文章基于 Redwood 官方教程第 4 版version-4.x第一章內(nèi)容圍繞yarn redwood generate page home /這一條命令完整講解 Redwood 中頁面Page的生成機制、Routes路由文件的自動更新、NotFoundPage兜底規(guī)則以及基礎(chǔ)樣式引入。你將掌握頁面文件、測試文件、Storybook 文件如何被一次性生成路由如何被自動注入以及如何用一小段 CSS 讓默認頁面立即可讀。文中所有代碼與命令均以當前倉庫gh_mirrors/re/redwood中實際存在的源碼、模板與測試為佐證。為什么從第一個頁面開始在完成 Redwood 項目初始化后瀏覽器打開的是官方歡迎頁Welcome Page。本章的目標是讓我們自己動手創(chuàng)建一個真實的頁面替換掉這個歡迎頁。Redwood 提供了命令行腳手架工具來替我們完成大部分重復(fù)勞動頁面生成就是其中最典型的一個入口。先執(zhí)行yarn redwood generate page home /這條命令做了四件事創(chuàng)建頁面組件文件web/src/pages/HomePage/HomePage.{js,tsx}。Redwood 會把page后面的第一個參數(shù)做 PascalCase 處理再追加后綴Page來構(gòu)造組件名例如home變成HomePage。創(chuàng)建配套的測試文件web/src/pages/HomePage/HomePage.test.{js,tsx}其中包含一個可以通過的冒煙測試組件能否正常渲染。創(chuàng)建配套的 Storybook 文件web/src/pages/HomePage/HomePage.stories.{js,tsx}用于在 Storybook 中獨立開發(fā)和預(yù)覽該組件。在web/src/Routes.{js,tsx}中新增一條Route把路徑/映射到新的HomePage。執(zhí)行完命令后頁面其實已經(jīng)在線了——瀏覽器會自動熱更新。此時看到的還只是一個樸素的原生 HTML 頁面但它已經(jīng)是我們自己的頁面了。打開文件、改幾處文字、保存瀏覽器會立刻刷新出新內(nèi)容。頁面生成器的四個產(chǎn)物源碼級拆解從源碼看頁面生成器位于 packages/cli/src/commands/generate/page/page.js它按照固定模板產(chǎn)出三個文件頁面、測試、Storybook并單獨處理路由注入COMPONENT_SUFFIX Page固定追加的組件名后綴REDWOOD_WEB_PATH_NAME pages頁面統(tǒng)一存放在web/src/pages/下files()函數(shù)依次通過page.tsx.template、test.tsx.template、stories.tsx.template生成內(nèi)容當路由帶參數(shù)時Storybook 使用stories.tsx.parameters.template以便在故事中傳入?yún)?shù)示例routes()函數(shù)構(gòu)造Route path... page{XxxPage} namexxx /隨后由addRoutesToRouterTask寫回路由文件。生成后的頁面模板 page.tsx.template 大致如下以 TypeScript 為例const HomePage () { return ( Metadata titleHome descriptionHome page / h1HomePage/h1 p Find me in codeweb/src/pages/HomePage/HomePage.tsx/code /p / ) } export default HomePage幾個值得注意的實現(xiàn)細節(jié)模板頂部自動引入了Metadata組件redwoodjs/web用于設(shè)置頁面標題與描述。生成器在收尾步驟還會輸出一條提示提醒開發(fā)者Metadata對 SEO 的重要性。測試模板 test.tsx.template 使用redwoodjs/testing/web的render對頁面做一次渲染斷言渲染不拋錯這是新頁面的最低保障測試。測試與 Storybook 文件是否生成受命令行參數(shù)和項目配置雙重控制。在 page.js 中可以看到當tests/stories未顯式傳入時會讀取getConfig().generate.tests/getConfig().generate.stories即redwood.toml中的默認開關(guān)。如果你沒有特別傳參那么頁面 測試 Storybook三件套默認都會生成——教程里那句 Youdowrite tests for your components, *dont you?? 就是 Redwood 腳手架默認行為的最佳注腳。路由文件的自動更新與頁面自動導(dǎo)入打開web/src/Routes.{js,tsx}你會看到生成器寫入的這條路由import { Router, Route } from redwoodjs/router const Routes () { return ( Router Route path/ page{HomePage} namehome / Route notfound page{NotFoundPage} / /Router ) } export default Routes注意我們在 Routes 文件中直接引用了HomePage但文件頂部并沒有import HomePage from src/pages/HomePage/HomePage這樣的語句。這是 Redwood 的刻意設(shè)計——Routes 文件會自動導(dǎo)入所有頁面避免在路由文件頂部堆出長長一串 import 聲明。從倉庫中的 fixture 可以看到這一機制的實際效果packages/internal/src/tests/fixtures/nestedPages/web/src/Routes.js 中每個頁面都有獨立 import且支持非默認導(dǎo)出與重命名導(dǎo)入如import BazingaJobProfilePageWithFunnyName from src/pages/Jobs/JobProfilePage說明頁面的自動發(fā)現(xiàn)與導(dǎo)入由 Redwood 內(nèi)部工具鏈在構(gòu)建/類型生成階段完成。Route的三個關(guān)鍵屬性屬性含義示例path匹配的 URL 路徑/、/hellopage渲染該路徑的頁面組件HomePagename路由的命名引用供routes.home()生成鏈接homepath與page是必填項。路由校驗邏輯在 packages/router/src/route-validators.ts 的測試中體現(xiàn)得很清楚缺少path會拋出Route element for xxx is missing required props: path缺少page會拋出... is missing required props: page普通路由缺少name同樣會報錯。而notfound路由是特例它不需要path任何未匹配的 URL 都由它接管但必須有page。NotFoundPage 與 Splash Screen 的切換規(guī)則只要路由表中存在path/的路由Redwood 的初始歡迎頁Splash Screen就再也不會出現(xiàn)。而NotFoundPage承擔的是兜底職責當請求的 URL 匹配不到任何路由時Route notfound page{NotFoundPage} /會被渲染。在 packages/router/src/tests/analyzeRoutes.test.tsx 中路由分析結(jié)果會單獨暴露NotFoundPage并被斷言為有效的 React 元素說明兜底頁是路由系統(tǒng)的第一等公民。動手驗證把首頁換成別的路徑把路由改成Route path/hello page{HomePage} namehome /保存后訪問 http://localhost:8910/根路徑你會發(fā)現(xiàn) Splash Screen 又出現(xiàn)了——因為此刻根路徑下已經(jīng)沒有任何頁面路由Redwood 在根路徑展示了一個應(yīng)用內(nèi)路由列表列出當前應(yīng)用所有可用的 URL。而訪問/hello則能看到 HomePage 的內(nèi)容。這個實驗很好地說明了path與page的解耦關(guān)系頁面組件不綁定路徑路徑只是路由表里的一行配置。做完實驗記得把路徑改回/否則后續(xù)章節(jié)的鏈接都會指向錯誤的地址?；A(chǔ)樣式讓默認頁面不那么素之前的教程為了聚焦代碼刻意不做任何樣式但一個完全沒有樣式的站點實在影響觀感。這里提供一份極簡的基礎(chǔ)樣式表直接粘貼進web/src/index.cssbody { 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; }這段樣式的效果是正文改用操作系統(tǒng)的系統(tǒng)字體-apple-system、Segoe UI、Roboto等元素之間保留適度留白列表去掉圓點并橫向排列表單控件縱向堆疊同時預(yù)置了.error、.form-error等表單錯誤態(tài)類名——這些類名會在后續(xù)章節(jié)的表單與表單校驗示例中直接復(fù)用。CSS 是建議性的你可以按喜好增刪調(diào)整甚至完全忽略、繼續(xù)使用瀏覽器默認樣式。但需要知道的是本教程后續(xù)截圖都是基于這份基礎(chǔ)樣式表渲染的如果改動較大界面觀感可能與截圖略有出入。小結(jié)至此你已經(jīng)完成 Redwood 的第一個里程碑用一條generate page命令創(chuàng)建了頁面組件、測試與 Storybook 文件理解了路由文件的自動注入與頁面自動導(dǎo)入機制知道了NotFoundPage的兜底規(guī)則并為后續(xù)章節(jié)準備了基礎(chǔ)樣式。下一步可以順著本教程繼續(xù)深入路由與頁面鏈接的使用routes.home()與Link、Storybook 與組件測試chapter5/storybook.md、以及 Redwood 的數(shù)據(jù)層Service 與 GraphQL。這些內(nèi)容會建立在你已經(jīng)擁有一個屬于自己的首頁這個前提之上。贊分享后端前端Web框架開發(fā)工具【免費下載鏈接】redwoodRedwoodGraphQL項目地址https://gitcode.com/gh_mirrors/re/redwood點擊查看免費下載相關(guān)推薦Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接generate page 與 Link 實戰(zhàn)Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接generate page 與 Link 實戰(zhàn) 本篇教程承接 Redwood 全棧框架RedwoodG后端前端Web框架開發(fā)工具Redwood 教程用 generate page 創(chuàng)建第二個頁面并通過 Link 與命名路由打通頁面導(dǎo)航Redwood 教程用 generate page 創(chuàng)建第二個頁面并通過 Link 與命名路由打通頁面導(dǎo)航 本篇教程是 Redwood 官方教程第一章的延續(xù)后端前端Web框架開發(fā)工具Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接About 頁面實戰(zhàn)Redwood 教程創(chuàng)建第二個頁面與命名路由鏈接About 頁面實戰(zhàn) 本篇技術(shù)指南來自 Redwood 官方教程第一章講解如何用 redwood gen后端前端Web框架開發(fā)工具上一篇終極指南Apache Airflow監(jiān)控告警體系構(gòu)建完整的數(shù)據(jù)工作流監(jiān)控解決方案下一篇Tilix高級功能揭秘同步輸入、觸發(fā)器與自動配置文件切換創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考