دستاویزات/فریم ورک کے اختلافات

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 پر ترمیم کریں