Docs/Diferencias marco

React

Nexy renderiza React 19 componentes en el servidor, luego React los hidrata en el navegador. Las páginas, diseños, islas y acciones son las mismas en todos los marcos: esta página cubre la configuración y luego las partes que difieren de los contratos compartidos.

iniciar un proyecto

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

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

La plantilla es un proyecto en modo servidor con React islas. Ejecute nx new my-app sin una plantilla para responder a las indicaciones: el enrutador, el tipo de proyecto, si se utilizará el enrutamiento del lado del cliente y luego el marco.

Habilitar React en un proyecto existente

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 escribe este archivo; Nexy escribe __nexy__/vite.ts por sí mismo, así que no lo edites.

Reglas

• Un marco por proyecto. useFF toma exactamente un marco; useFF = [react(), vue()] detiene el servidor al inicio.

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

Islas

En modo servidor, un componente React importado a un archivo .nexy es una isla.

Importando

Importe componentes en la portada del archivo .nexy:

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

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

Directivas de hidratación

Utilice el accesorio directive para controlar cuándo se hidrata la isla:

• client:load (predeterminado): inmediatamente
• client:idle: cuando el navegador está inactivo
• client:visible: cuando se desplaza a la vista
• client:media: cuando la consulta de medios coincide

Acciones y navegación

Llamar a acciones

Utilice el gancho useAction para administrar el estado de una llamada a la acción:

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>

Navegación

Utilice el componente Link para transiciones del lado del cliente:

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

Para navegación programática, use el gancho useRouter:

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

acceso URL

• usePathname(): ruta actual
• useParams(): segmentos dinámicos
• useSearchParams(): cadena de consulta
• useLocation(): objeto de ubicación completa

Próximos pasos

• Vistas: compara los formatos que puede usar una página
• Frontend: Vite y la compilación del cliente

Copiar la página como Markdown Editar en GitHub