ডকুমেন্টেশন/ফ্রেমওয়ার্ক পার্থক্য

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__/vite.ts, তাই এটি সম্পাদনা করবেন না।

লিখুন Preact

একটি Preact উপাদান একটি প্রতিক্রিয়া-শৈলী ফাংশন। পার্থক্যগুলি এখানে গুরুত্বপূর্ণ:

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

দ্বীপপুঞ্জ

সার্ভার মোডে, একটি .nexy ফাইলে আমদানি করা একটি Preact উপাদান হল একটি দ্বীপ।

আমদানি করা হচ্ছে

.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");

ইউআরএল অ্যাক্সেস

• usePathname(): বর্তমান পথ
• useParams(): গতিশীল সেগমেন্ট
• useSearchParams(): ক্যোয়ারী স্ট্রিং
• useLocation(): সম্পূর্ণ অবস্থান বস্তু

পরবর্তী পদক্ষেপ

• ভিউ: একটি পৃষ্ঠা ব্যবহার করতে পারে এমন বিন্যাসের তুলনা করুন
• ফ্রন্টএন্ড: Vite এবং ক্লায়েন্ট বিল্ড

পাতাটি Markdown হিসেবে কপি করুন GitHub-এ সম্পাদনা করুন