快速开始
本指南将帮助您快速上手 Remix,从零开始创建一个基础项目,掌握其关键概念和基本操作。
🚀 安装和初始化项目
📁 创建名为 my-remix-app 的脚手架项目并且运行
-
创建新项目
在命令行中运行以下命令来创建名为
my-remix-app
的项目:bashnpx create-remix@latest my-remix-app
-
选择安装选项
在安装过程中,您需要选择:
- 目标环境:
Remix App Server
(或选择Express
,Vercel
,Netlify
等部署平台) - 类型:
TypeScript
(推荐) - 包管理器:
npm
,yarn
或pnpm
(推荐使用pnpm
以获得更快的性能)
- 目标环境:
-
运行项目
进入项目目录并启动开发服务器:
bashcd my-remix-app npm run dev
-
访问项目
在浏览器中打开 http://localhost:3000 以查看您的 Remix 应用程序。
📄 创建一个页面和一个新 API 路由
-
创建页面
在
app/routes/
目录下,创建一个新的页面文件,例如about.tsx
:tsx// app/routes/about.tsx export default function AboutPage() { return ( <div> <h1>关于我们</h1> <p>欢迎来到"关于我们"页面,这是一个演示的静态页面。</p> </div> ); }
访问 http://localhost:3000/about 即可看到新的页面。
-
创建 API 路由
在
app/routes/api/
目录中,创建一个名为data.ts
的新文件:tsx// app/routes/api/data.ts export function loader() { return new Response(JSON.stringify({ message: "Hello from the API!" }), { headers: { "Content-Type": "application/json" }, }); }
访问 http://localhost:3000/api/data 即可查看返回的 JSON 数据:
json{ "message": "Hello from the API!" }
🔄 创建获取加载远程数据和缓存机制
-
加载远程数据
使用 Remix 的
loader
函数来加载远程数据:tsx// app/routes/posts.tsx import { json } from "@remix-run/node"; import { useLoaderData } from "@remix-run/react"; export async function loader() { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await response.json(); return json(posts); } export default function PostsPage() { const posts = useLoaderData(); return ( <div> <h1>博客文章</h1> <ul> {posts.map(post => ( <li key={post.id}> <h2>{post.title}</h2> <p>{post.body}</p> </li> ))} </ul> </div> ); }
访问 http://localhost:3000/posts 即可看到从远程接口加载的博客文章列表。
-
缓存机制(可选)
为了避免多次重复请求,您可以在
loader
中实现简单的内存缓存:tsx// app/routes/posts.tsx let cache = null; export async function loader() { if (!cache) { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); cache = await response.json(); } return new Response(JSON.stringify(cache), { headers: { "Content-Type": "application/json" }, }); }
这样,第一次请求将加载数据并将其存储在内存中,后续的请求将使用缓存中的数据。
注意:这是一个简单的内存缓存示例,通常生产环境中使用 Redis、Memcached 或其他持久性缓存解决方案。
🗄️ 存储数据到本地文件 log.txt
-
安装 fs-extra 模块
bashnpm install fs-extra
-
编写写入日志的逻辑
在
app/utils/logger.ts
中创建一个简单的日志记录函数:tsximport fs from 'fs-extra'; export async function writeLog(message: string) { const logPath = './log.txt'; const timestamp = new Date().toISOString(); const logMessage = `[${timestamp}] ${message}\n`; await fs.appendFile(logPath, logMessage); }
-
使用日志功能
在
app/routes/api/data.ts
中使用日志函数:tsximport { writeLog } from '~/utils/logger'; export async function loader() { await writeLog('API /api/data 被调用'); return new Response(JSON.stringify({ message: "Hello from the API!" }), { headers: { "Content-Type": "application/json" }, }); }
🔗 从 index
页面跳转到 about
页面
-
修改
app/routes/index.tsx
文件tsximport { Link } from "@remix-run/react"; export default function IndexPage() { return ( <div> <h1>欢迎来到 Remix 应用程序</h1> <Link to="/about">关于我们</Link> </div> ); }
-
查看效果
在浏览器中访问 http://localhost:3000,单击"关于我们"链接,将跳转到
/about
页面。