Документация/Различия в фреймворках

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>  );}

Острова

В режиме сервера компонент React, импортированный в файл .nexy, является островом.

Импорт

Импортируйте компоненты в начале файла .nexy:

---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");

URL-доступ

• usePathname(): текущий путь
• useParams(): динамические сегменты
• useSearchParams(): строка запроса
• useLocation(): объект полного местоположения

Следующие шаги

• Просмотры: сравните форматы, которые может использовать страница.
• Фронтенд: Vite и клиентская сборка

Скопировать страницу как Markdown Изменить на GitHub