پروژه ری اکتی را شروع کنید

اگر می خواهید یک برنامه جدید یا یک وبسایت با استفاده از ری اکت بسازید، توصیه می کنیم یکی از فریمورک های مبتی بر ری اکت را انتخاب کنید که در جامعه برنامه نویسان ری اکت محبوب هستند.

می توانید بدون استفاده از فریمورک از ری‌اکت استفاده کنید، با این حال ما متوجه شدیم که اکثر برنامه ها و سایت ها در نهایت راه‌حل‌هایی برای مشکلات رایج مانند تقسیم کد، مسیریابی، واکشی داده ها و تولید HTML ایجاد می کنند. این مشکلات برای همه کتابخانه های رابط کاربری مشترک است ، نه فقط ری اکت.

با استفاده از فریمورک ، شما می توایند خیلی سریع ری اکت را شروع کنید، و از ساختن فریمورک خود در آینده اجتناب کنید.

Deep Dive

آیا میتوانم ری اکت را بدون فریمورک استفاده کنم؟

مطمئنا می توانید از ری اکت بدون فریمورک استفاده کنید—به این تریتیب میتوانید از ری اکت برای بخشی از صفحه خود استفاده کنید. با این حال، اگر یک برنامه جدید یا یک سایت به طور کامل با ری اکت میسازید، توصیه می کنیم از یک فریمورک استفاده کنید.

چرا ؟

حتی اگر در ابتدا به مسیریابی (routing) یا دریافت داده نیاز نداشته باشید، احتمالاً بخواهید برخی کتابخانه‌ها را برای آنها اضافه کنید. هرچه باندل جاوا اسکریپت شما با افزودن ویژگی‌های جدید بزرگ‌تر می‌شود، ممکن است بخواهید روش تقسیم کد را برای هر مسیر به صورت جداگانه بررسی کنید. هرچه نیازهای دریافت داده شما پیچیده‌تر شود، احتمالاً با شکل‌گیری شکل‌آبشاری ( waterfalls ) شبکه سرور-کلاینت روبرو می‌شوید که باعث کندی برنامه شما می‌شود. همچنین اگر مخاطب شما (شامل بیشتر کاربران) با شرایط اینترنت ضعیف و دستگاه‌های ضعیف تر باشد، احتمالاً شما بخواهید که HTML از کامپوننت های خود دریافت کنید و آن را نمایش دهید چه در سرور چه در موقع ساختن (build).

این مشکلات مختص ری اکت نیست. به همین دلیل است که Svelte با Vue ، SvelteKit با Nuxt و غیره … را حل هایی دارند. برای حل این مشکلات، شما نیاز خواهید داشت که باندلر خود را با مسیردهنده و کتابخانه دریافت داده خود یکپارچه کنید. ایجاد اولیه آن دشوار نیست، اما در تولید یک برنامه که با افزایش اندازه همچنان به سرعت بارگذاری شود، جزئیات بسیار زیادی وجود دارد. شما می‌خواهید کمترین مقدار کد برنامه را ارسال کنید، اما این کار را در یک سفر رفت و برگشت بین کلاینت و سرور انجام دهید، به‌صورت موازی با هر داده‌ای که برای صفحه مورد نیاز است، احتمالاً می‌خواهید صفحه قبل از اینکه کد جاوااسکریپت شما اجرا شود، تعامل‌پذیر باشد تا از ارتقاء تدریجی پشتیبانی کند. ممکن است بخواهید یک پوشه از فایل‌های HTML کاملاً استاتیک برای صفحات بازاریابی خود تولید کنید که می‌تواند در هر مکانی میزبانی شود و حتی بدون جاوااسکریپت نیز کار کند. ساخت این قابلیت‌ها به تنهایی نیاز به کار واقعی دارد.

فریمورک های موجود ری اکت در این صفحه به طور پیش فرض این مشکلات را حل می کنند، بدون نیاز به کار اضافی از سمت شما. این فریم‌ورک‌ها به شما امکان می‌دهند که پروژه خود را بسیار سبک شروع کنید و سپس برنامه خود را با توجه به نیازهایتان مقیاس‌پذیر کنید. هر فریم‌ورک ری‌اکت دارای یک جامعه است، بنابراین پیدا کردن پاسخ به سوالات و ارتقاء ابزارها آسان‌تر است. فریم‌ورک‌ها همچنین به کد شما ساختار می‌دهند و به شما و دیگران کمک می‌کنند تا محتوا و مهارت‌های خود را در پروژه‌های مختلف حفظ کنید. از طرف دیگر، با یک تنظیم دلخواه، به راحتی ممکن است روی نسخه‌های وابستگی پشتیبانی‌نشده گیر کنید و در نهایت یک فریم‌ورک اختصاصی برای خود ایجاد کنید—البته یکی که هیچ جامعه یا مسیر ارتقایی ندارد (و اگر شبیه به فریم‌ورک‌هایی باشد که ما در گذشته ساخته‌ایم، طراحی آن پراکنده‌تر خواهد بود).

اگر برنامه شما داری محدودیت هایی است که نمی توانید این چارچوب ها به خوبی ارائه نمی شود، یا ترجیح میدهید خودتان این مشکلات را حل کنید، می توانید تنظیمات سفارشی خود را انجام دهید. react و react-dom را از npm دریافت کنید، فرآیند ساخت سفارشی خود را با باندلرهایی مثل Vite یا Percel راه اندازی کنید و ابزارهای دیگری را در صورت نیاز برای مسیریابی، تولید استاتیک یا رندر سمت سرور و موارد دیگر اضافه کنید.

Add React to an Existing Project

این فریمورک ها تمام ویژگی‌هایی را که نیاز دارید برای استقرار و مقیاس‌پذیری برنامه خود در محیط تولید پشتیبانی می‌کنند و به سمت پشتیبانی از دیدگاه معماری full-stack ما حرکت می‌کنند. تمام فریمورک هایی که ما توصیه می‌کنیم از جوامع فعال برای پشتیبانی آماده هستند و می‌توانند بر روی سرور خود یا ارائه دهنده میزبانی استقرار یابند. اگر شما یک نویسنده فریمورک هستید که علاقه‌مند به اضافه شدن به این لیست هستید، لطفا به ما اطلاع دهید.

Next.js

Next.js’ Pages Router یک فریمورک full stack ری اکتی است. به شما این امکان را می دهد که برنامه های ری اکتی را بر هر مقایسی اجرا کیند - از یک وبلاگ عمدتا استاتیک تا یک برنامه پیجیده پویا. برای ایجاد یک پروژه Next.js جدید، در ترمینال خود دستور زیر را اجرا کنید:

Terminal

npx create-next-app@latest

اگر Next.js برای شما جدید است، دوره یاد گرفتن Next.js را بررسی کنید.

Next.js توسط Vercel نگهداری می‌شود. شما می‌توانید یک برنامه Next.js را به هر سرور Node.js یا serverless، یا به سرور خودتان دیپلوی کنید. Next.js همچنین از خروجی استاتیک پشتیبانی می‌کند که نیازی به سرور ندارد.

Remix

Remix یک فریمورک full stack ری اکتی با مسیریابی تو در تو است. Remix به شما امکان می دهد برنامه خود را به بخش های تو در تو تقسیم کنید که باعث میشود داده ها را به صورت موازی دریافت کنید و در پاسخ به اقدامات کاربر به روز شوید. برای ایجاد یک پروژه Remix جدید، در ترمینال خود دستور زیر را اجرا کنید:

Terminal

npx create-remix

اگر Remix برای شما جدید است، آموزش Remix (کوتاه مدت) و آموزش (بلند مدت) را بررسی کنید.

Remix توسط Shopify نگهداری می‌شود. وقتی یک پروژه Remix ایجاد می‌کنید، باید هدف انتشار خود را انتخاب کنید. می‌توانید یک برنامه Remix را با استفاده از یک آداپتور یا نوشتن آداپتور، بر روی هر سرور Node.js یا serverless انتشار دهید.

Gatsby

Gatsby یک فریم‌ورک ری‌اکت برای وب‌سایت‌های سریع با پشتیبانی CMS است. اکوسیستم غنی پلاگین‌های آن و لایه داده GraphQL، ادغام محتوا، APIها ، سرویس‌ها را در یک وب‌سایت ساده می‌کند. برای ایجاد یک پروژه جدید Gatsby، دستور زیر را در ترمینال اجرا کنید:

Terminal

npx create-gatsby

اگر Gatsby برای شما جدید است، دوره Gatsby را بررسی کنید.

Gatsby توسط Netlify نگهداری می شود.شما می‌توانید یک وب‌سایت کاملاً استاتیک Gatsby را بر روی هر سروری استاتیک انتشار دهید. اگر انتخاب کنید از ویژگی‌های فقط سرور استفاده کنید، مطمئن شوید که ارائه‌دهنده سرور شما این ویژگی‌ها را برای Gatsby پشتیبانی می‌کند.

Expo (for native apps)

Expo یک فریمورک ری اکتی است که به شما امکان می دهد برنامه اندروید، و ios و وب را با رابط کاربری ایجاد کنید. این یک SDK برای React Native ارائه می کند که استفاده از بخش های native را آسان تر می کند. برای ایجاد یک پروژه Expo جدید، دستور زیر را در ترمینال اجرا کنید:

Terminal

npx create-expo-app

اگر Expo برای شما جدید است، آموزش Expo را بررسی کنید.

Expo توسط Expo(شرکت) نگهداری می شود. ساخت اپلیکیشن با Expo رایگان است و می توانید بدون محدودیت آن را به فروشگاه های اپلیکیشن گوگل و اپل ارسال کنید. Expo علاوه بر این، خدمات ابری پولی هم ارائه می دهد.

Bleeding-edge React frameworks

همانطور که نحوه ادامه بهبود ری اکت را بررسی کردیم، متوجه شدیم که ادغام کردن ری اکت با فریمورک ها (مخصوصاً با فناوری‌های مسیریابی، باندل کردن و سرور) بزرگترین فرصت ما برای کمک به کاربران ری اکت برای ساخت برنامه‌های بهتر است. تیم Next.js موافقت کرده است که با ما در تحقیق، توسعه، ادغام و آزمایش ویژگی‌های bleeding-edge-react-frameworks مانند React Server Components با ما همکاری کند.

این ویژگی‌ها هر روز به آماده شدن برای تولید نزدیک‌تر می‌شوند و ما با سایر توسعه‌دهندگان باندلر و فریم‌ورک درباره ادغام آنها در حال مذاکره بوده‌ایم. امید ما این است که در یک یا دو سال دیگر، همه فریمورک های لیست شده در این صفحه از این ویژگی ها پشتیبانی کامل داشته باشند. (اگر نویسنده فریمورک هستید که علاقه مند به همکاری با ما برای آزمایش این ویژگی ها هستید، لطفاً به ما اطلاع دهید!)

Next.js (App Router)

Next.js’s App Router بازطراحی شده است تا به دیدگاه تیم ری‌اکت برای معماری فول‌استک دست یابد. این قابلیت به شما اجازه می‌دهد تا داده‌ها را در کامپوننت‌های غیرهمزمانی که بر روی سرور اجرا می‌شوند یا حتی در طول فرآیند ساخت، واکشی کنید.

Next.js توسط Vercel نگهداری می‌شود. شما می‌توانید یک برنامه Next.js را بر روی هر سروری Node.js یا serverless، یا بر روی سرور خود دیپلوی کنید. همچنین Next.js از static export پشتیبانی می‌کند که نیازی به سرور ندارد.

Deep Dive

کدام ویژگی‌ها دیدگاه معماری full-stack تیم ری اکت را تشکیل می‌دهند؟

باندلر App Router Next.js به طور کامل مشخصات رسمی React Server Components را پیاده سازی می کند. این به شما امکان می دهد کامپوننت زمان ساخت، فقط سرور و تعاملی را در یک درخت ری اکت ترکیب کند.

به عنوان مثال، می توانید در یک سرور کامپوننت ری اکتی یک تابع async بنویسد که از یک پایگاه داده فایل می خواند، سپس می توانید از داده در کامپوننت حود استفاده کنید:

// این کامپوننت *فقط* روی سرور (یا در حین ساخت) اجرا می شود
async function Talks({ confId }) {
// 1. شما در سرور هستید، بنابراین می توانید با لایه داده خود صحبت کنید. API endpoint مورد نیاز نیست
  const talks = await db.Talks.findAll({ confId });

  // 2. هر مقدار منطق رندر را اضافه کنید. این باندل جاوا اسکریپت شما را بزرگتر نمی کند
  const videos = talks.map(talk => talk.video);

  // 3. داده ها را به اجزایی که در مرورگر اجرا می شوند منتقل کنید
  return <SearchableVideoList videos={videos} />;
}

App Router Next.js همچنین واکشی داده ها را با Suspense ادغام می کند. این به شما امکان می دهد یک وضعیت بارگذاری (مانند یک مکان نگهدارنده skeleton) را برای بخش های مختلف رابط کاربری خود مستقیماً در درخت ری اکت خود مشخص کنید:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

سرور کامپوننت ها و Suspense ویژگی‌های React هستند، نه ویژگی‌های Next.js. با این حال، پذیرش آن‌ها در سطح فریم‌ورک نیاز به حمایت و کار اجرایی پیچیده‌ای دارد. در حال حاضر، App Router Next.js کامل‌ترین پیاده‌سازی را ارائه می‌دهد. تیم React با توسعه‌دهندگان باندلر کار می‌کند تا اجرای این ویژگی‌ها را در نسل بعدی فریم‌ورک‌ها آسان‌تر کند.

PreviousInstallation

NextAdd React to an Existing Project