文档/框架差异

React

Nexy 在服务器上渲染 React 19 个组件，然后 React 在浏览器中对它们进行水合。每个框架中的页面、布局、岛和操作都是相同的：此页面涵盖设置，然后是与共享合约不同的部分。

开始一个项目

nx new my-app --template web-fbr-react

nx new my-app --template web-modular-react

该模板是一个带有 React 岛屿的服务器模式项目。在没有模板的情况下运行 nx new my-app 来回答提示：路由器、项目类型、是否使用客户端路由，然后是框架。

在现有项目中启用 React

from nexy.core.models import NexyConfigModelfrom nexy.frontend import react  class NexyConfig(NexyConfigModel):    useFF = react()    useAliases = {"@": "src"}

import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), react()],  customLogger: nexy.log(),});

nx new 写入此文件； Nexy 自己编写 __nexy__/vite.ts，因此请勿编辑它。

规则

• 每个项目一个框架。 useFF 只需要一个框架； useFF = [react(), vue()] 在启动时停止服务器。

export default function Home() {  return <h1>Hello</h1>;}

import { useParams } from "@nexy/client"; export default function Post() {  const { slug } = useParams<{ slug: string }>();  return <h1>{slug}</h1>;}

import type { ReactNode } from "react"; export default function RootLayout({ children }: { children: ReactNode }) {  return (    <html>      <body>{children}</body>    </html>  );}

岛屿

在服务器模式下，导入到 .nexy 文件中的 React 组件是一个岛。

导入

在 .nexy 文件的 frontmatter 中导入组件：

---from "@/components/Counter.tsx" import Counter---<Counter start=3 />

---from "@/components/Counter.tsx" import Counter---<Counter start=3 />

补水指令

使用 directive 道具来控制岛屿何时水合：

• client:load（默认）：立即
• client:idle：当浏览器空闲时
• client:visible：当它滚动到视图中时
• client:media：当媒体查询匹配时

操作和导航

调用动作

使用 useAction 钩子来管理操作调用的状态：

import { useAction } from "@nexy/client";import { add_todo } from "@nexy/actions"; const { run, pending, error, data } = useAction(add_todo);// ...<button onClick={() => run({ title: "New Task" })}>Add</button>

导航

使用 Link 组件进行客户端转换：

import { Link } from "@nexy/client"; <Link href="/about">About</Link>

对于编程式导航，请使用 useRouter 挂钩：

import { useRouter } from "@nexy/client"; const router = useRouter();router.push("/dashboard");

网址访问

• usePathname()：当前路径
• useParams()：动态段
• useSearchParams()：查询字符串
• useLocation()：完整位置对象

后续步骤

• 视图：比较页面可以使用的格式
• 前端：Vite 和客户端构建

以 Markdown 复制本页 在 GitHub 上编辑