DocsDifférences de cadre

React

Nexy restitue React 19 composants sur le serveur, puis React les hydrate dans le navigateur. Les pages, mises en page, îlots et actions sont les mêmes dans tous les frameworks : cette page couvre la configuration, puis les parties qui diffèrent des contrats partagés.

Mode	`nexyconfig.py`	Les pages sont	React est
Serveur (par défaut)	`useCSR = False`	`.nexy` fichiers	îles à l'intérieur de ces pages
Client	`useCSR = True`	`.tsx` fichiers	la page entière, avec mises en page et un routeur client

Avec le routeur modulaire, les composants React sont des îlots à l'intérieur des .nexy vues renvoyées par un contrôleur : il n'y a pas de fichier d'échange ni de routeur client.

Démarrer un projet

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

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

Le modèle est un projet en mode serveur avec React îles. Exécutez nx new my-app sans modèle pour répondre aux invites : le routeur, le type de projet, l'utilisation ou non du routage côté client, puis le framework.

Activer React dans un projet existant

nexyconfig.py

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

vite.config.ts

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 écrit ce fichier ; Nexy écrit lui-même __nexy__/vite.ts, alors ne le modifiez pas.

Forfait	La version `nx new` écrit
`react`, `react-dom`	`^19.2.5`
`@vitejs/plugin-react`	`^5.2.0`
`@types/react`, `@types/react-dom`	dépendances de développement

Règles

Un framework par projet. useFF prend exactement un framework ; useFF = [react(), vue()] arrête le serveur au démarrage.

Les pages sont .tsx. React possède .tsx et .jsx pour les composants, mais seul un fichier .tsx sous src/routes/ devient une page.
Les composants se trouvent à l'extérieur de src/routes/, généralement dans src/components/, ce ne sont donc pas des pages.
Un projet en mode serveur n'a pas de page .tsx, et un projet en mode client n'a pas de page .nexy : Nexy refuse de démarrer et nomme le fichier. Voir modes.

Les composants résident dans src/components/ et une vue les importe sous forme d'îlots.

Pages

En mode client (useCSR = True), une page est un fichier .tsx.

Composant de page

Une page est l'exportation par défaut du fichier. Si aucune exportation par défaut n'existe, Nexy sélectionne la première exportation nommée.

src/routes/index.tsx

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

Segments dynamiques

Les paramètres d'URL sont disponibles via le hook useParams :

src/routes/blog/[slug].tsx

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

Mises en page

Mise en œuvre

La disposition racine définit le shell du document. Les mises en page imbriquées enveloppent le contenu en dessous d'elles.

src/routes/layout.tsx

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

Îles

En mode serveur, un composant React importé dans un fichier .nexy est un îlot.

Importation

Importez des composants dans le frontmatter du fichier .nexy :

src/routes/index.nexy

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

src/apps/home_view.nexy

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

Directives d'hydratation

Utilisez l'accessoire directive pour contrôler le moment où l'île s'hydrate :

client:load (par défaut) : immédiatement
client:idle : lorsque le navigateur est inactif
client:visible : lorsqu'il défile dans la vue
client:media : lorsque la requête média correspond

Appeler des actions

Utilisez le hook useAction pour gérer l'état d'un appel à l'action :

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>

Utilisez le composant Link pour les transitions côté client :

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

Pour la navigation par programmation, utilisez le hook useRouter :

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

Accès aux URL

usePathname() : chemin actuel
useParams() : segments dynamiques
useSearchParams() : chaîne de requête
useLocation() : objet de localisation complet

Prochaines étapes

Vues : comparez les formats qu'une page peut utiliser
Frontend : Vite et la build client

Modifier sur GitHub