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

Preact

Nexy سرور پر Preact 10 اجزاء پیش کرتا ہے، پھر Preact انہیں براؤزر میں لے جاتا ہے۔ صفحات، ترتیب، جزیرے اور اعمال ہر فریم ورک میں ایک جیسے ہیں: یہ صفحہ سیٹ اپ کا احاطہ کرتا ہے، پھر وہ حصے جو مشترکہ معاہدوں سے مختلف ہوتے ہیں۔

ایک پروجیکٹ شروع کریں۔

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

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

ٹیمپلیٹ ایک سرور موڈ پروجیکٹ ہے جس میں Preact جزائر ہیں۔ اس کے بجائے اشارے کا جواب دینے کے لیے بغیر کسی ٹیمپلیٹ کے nx new my-app چلائیں: روٹر، پروجیکٹ کی قسم، آیا کلائنٹ سائیڈ روٹنگ استعمال کرنا ہے، پھر فریم ورک۔

موجودہ پروجیکٹ میں Preact کو فعال کریں۔

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

import { defineConfig } from "vite";import preact from "@preact/preset-vite";import nexy from "./__nexy__/vite"; export default defineConfig({  plugins: [nexy(), preact()],  customLogger: nexy.log(),});

nx new اس فائل کو لکھتے ہیں۔ Nexy خود __nexy__/vite.ts لکھتا ہے، اس لیے اس میں ترمیم نہ کریں۔

لکھیں Preact

A Preact جز ایک React طرز کا فنکشن ہے۔ اختلافات جو یہاں اہم ہیں:

import { useState } from "preact/hooks"; export default function Counter({ start = 0 }: { start?: number }) {  const [count, setCount] = useState(start);  return <button class="counter" onClick={() => setCount(count + 1)}>{count}</button>;}

• ہکس preact/hooks سے آتے ہیں، جیسے ComponentChildren preact سے۔
• HTML اوصاف لکھیں: class، for، charset۔ Link اپنی کلاسیں class سے پڑھتا ہے۔

قواعد

• فی پروجیکٹ ایک فریم ورک useFF بالکل ایک فریم ورک لیتا ہے۔ useFF = [preact(), react()] شروع ہونے پر سرور کو روکتا ہے۔ useFF = preact() کے ساتھ، ہر .tsx فائل Preact ہے۔

• ایک .mdx صفحہ سے درآمد کرتا ہے۔ "preact". Nexy ایک .mdx فائل کو Preact کے ساتھ مرتب کرتا ہے جب وہ اس درآمد کو دیکھتا ہے، مثال کے طور پر import { h } from "preact"، اور دوسری صورت میں React کے ساتھ۔ دیکھیں Markdown اور MDX۔

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 { ComponentChildren } from "preact"; export default function RootLayout({ children }: { children: ComponentChildren }) {  return (    <html>      <body>        <header>My app</header>        <main>{children}</main>      </body>    </html>  );}

جزائر

سرور موڈ میں، ایک Preact جز میں درآمد کیا جاتا ہے۔ .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 جز کا استعمال کریں۔ نوٹ کریں کہ Preact className کی بجائے class استعمال کرتا ہے:

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

پروگرامیٹک نیویگیشن کے لیے، useRouter ہک استعمال کریں:

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

URL تک رسائی

• usePathname(): موجودہ راستہ
• useParams(): متحرک طبقات
• useSearchParams(): استفسار کی تار
• useLocation(): مکمل مقام آبجیکٹ

اگلے اقدامات

• آراء: ان فارمیٹس کا موازنہ کریں جو صفحہ استعمال کر سکتا ہے۔
• فرنٹ اینڈ : Vite اور کلائنٹ کی تعمیر

صفحہ Markdown کے طور پر کاپی کریں GitHub پر ترمیم کریں