NPX ایجاد react19-app@آخرین APP: یک برنامه چند صفحه ای (مسیریابی مبتنی بر پرونده) SSR React 19 برنامه

من این دستور را ایجاد کرده ام (npx create-react19-app@latest my-app) برای ایجاد یک برنامه چند صفحه ای (مسیریابی مبتنی بر پرونده) SSR React 19. این دستور پروژه ای مانند این را ایجاد می کند.

اگر به جای آن می خواهید یک برنامه SPA React 19 را بدون برنامه SSR ایجاد کنید ، می توانید گزینه را منتقل کنید --nossr به دستور: npx create-react19-app@latest --nossr my-spaبشر این پروژه مانند این یک پروژه ایجاد می کند.

اگر می خواهید بدانید که چه کاری انجام می دهد ، این خود این فرمان است. این مجموعه یک مخزن git ، مجدداً git را مجدداً انجام می دهد ، یک تعهد اولیه را انجام می دهد و وابستگی ها را نصب می کند. بنابراین آنچه شما می گیرید یک پروژه آماده برای شروع توسعه است npm run devبشر

در README هر یک از پروژه های ایجاد شده با دستور می توانید توضیحی در مورد خود پروژه پیدا کنید ، بنابراین می توانید آن را درک کرده و با آن توسعه دهید. شما کنترل کامل دارید ، هیچ چیز به عنوان یک ماژول گره پنهان نیست ، setup پوشه هر یک از پروژه ها جایی است که جادو اتفاق می افتد و شما در src پوشه همانطور که می گویم ، همه اینها توضیح داده شده است که در readme هر یک از دو پروژه (SSR چند صفحه ای React 19 و React 19 SPA بدون SSR).

این نمونه ای از ساختار پوشه با برنامه مسیریابی مبتنی بر فایل چند صفحه ای SSR React 19 است:

همانطور که می بینید وجود دارد page.tsx پرونده و index.html پرونده برای هر یک از مسیرها.

این پروژه ها (این دو) با تغییر دادن پسوند ، آماده توسعه با TypeScript یا JavaScript هستند page.tsx پرونده به .jsx یا .js (در برنامه مسیریابی مبتنی بر فایل چند صفحه ای SSR React 19 برنامه) یا گسترش app.tsx پرونده به .jsx یا .js در مورد REACT 19 SPA بدون برنامه SSR.

این ساختار پرونده REACT 19 SPA بدون پروژه SSR است:

همانطور که می بینید تفاوت با پروژه دیگر این است که این پرونده به نام app.tsx به جای page.tsxبشر

این نمونه ای از کد در app.tsx پرونده:

"use client";

import Suspense from "react-enhanced-suspense";
import Counter from "./counter";
import serverFunction from "./server-function";

export default function App() {
  return (
    <>
      <h1>Hello you!</h1>
      <Counter />
      <Suspense fallback="Loading...">{serverFunction()}</Suspense>
    </>
  );
}

کجا serverFunction است:

"use server";

export default function () {
  return new Promise<string>((res) => setTimeout(() => res("Done"), 4000));
}

و این نمونه ای از کد در page.tsx:

"use client";

import Counter from "./counter";
import Suspense from "react-enhanced-suspense";

export default function Page({
  params,
}: {
  params: { [key: string]: string | undefined };
}) {
  return (
    <>
      <Suspense fallback={<div>Loading...</div>}>
        {new Promise((resolve) => setTimeout(() => resolve("Loaded"), 3000))}
      </Suspense>
      <h1>Hello you!</h1>
      <Counter />
    </>
  );
}

در مثالهایی که استفاده می کنم Suspense از React-enhed-suspense اما می توانید از React استفاده کنید Suspense اگر می خواهید. اگر از غرفه های اضافی استفاده نکنید ، یکسان است Suspense از react-enhanced-suspense پیشنهادات ، و در مثالهای نشان داده شده از آنها استفاده نمی کنیم. بنابراین همین است.

اطلاعات بیشتر در مورد readme هر یک از پروژه ها. از توجه شما متشکرم