दस्तावेज़/ढाँचे में अंतर

React

नेक्सी सर्वर पर 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__/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");

यूआरएल पहुंच

• usePathname(): वर्तमान पथ
• useParams(): गतिशील खंड
• useSearchParams(): क्वेरी स्ट्रिंग
• useLocation(): पूर्ण स्थान वस्तु

अगले चरण

• दृश्य: उन स्वरूपों की तुलना करें जिनका उपयोग पृष्ठ कर सकता है
• फ्रंटएंड: Vite और क्लाइंट बिल्ड

पृष्ठ को Markdown के रूप में कॉपी करें GitHub पर संपादित करें