ایجاد یک اپلیکیشن ریاکت – React
اگر میخواهید یک اپلیکیشن یا وبسایت جدید با ریاکت بسازید، توصیه میکنیم کار خود را با یک فریمورک شروع کنید.
اگر اپلیکیشن شما محدودیتهایی دارد که توسط فریمورکهای موجود به خوبی پوشش داده نمیشوند، یا ترجیح میدهید فریمورک خودتان را بسازید، یا فقط میخواهید اصول اولیه یک اپلیکیشن ریاکت را یاد بگیرید، میتوانید یک اپلیکیشن ریاکت را از پایه بسازید.
فریمورکهای فولاستک
این فریمورکهای پیشنهادی از تمام قابلیتهایی که برای دیپلوی و مقیاسدهی اپلیکیشن خود در محیط پروداکشن نیاز دارید پشتیبانی میکنند. آنها جدیدترین قابلیتهای ریاکت را ادغام کردهاند و از معماری ریاکت بهره میبرند.
نکته
فریمورکهای فولاستک به سرور نیاز ندارند.
تمام فریمورکهای معرفیشده در این صفحه از رندر سمت کلاینت (CSR)، اپلیکیشنهای تکصفحهای (SPA) و تولید سایت استاتیک (SSG) پشتیبانی میکنند. این اپلیکیشنها میتوانند بدون نیاز به سرور روی یک CDN یا سرویس میزبانی استاتیک مستقر شوند. علاوه بر این، این فریمورکها به شما اجازه میدهند که در صورت نیاز، رندر سمت سرور را به صورت انتخابی و در سطح هر مسیر اضافه کنید.
این موضوع به شما امکان میدهد که کار را با یک اپلیکیشن صرفاً کلاینتی شروع کنید، و اگر نیازهای شما بعداً تغییر کرد، بتوانید برای مسیرهای مشخصی ویژگیهای سمت سرور را فعال کنید، بدون آنکه نیاز به بازنویسی کل اپلیکیشن داشته باشید. برای پیکربندی استراتژی رندر، به مستندات فریمورک خود مراجعه کنید.
Next.js (App Router)
App Router در Next.js یک فریمورک ریاکت است که از معماری ریاکت به طور کامل بهره میبرد تا اپلیکیشنهای فولاستک ریاکت را امکانپذیر کند.
npx create-next-app@latest
Next.js توسط Vercel نگهداری میشود. شما میتوانید یک اپلیکیشن Next.js را مستقر کنید روی هر ارائهدهندهی میزبانی که از Node.js یا کانتینرهای Docker پشتیبانی کند، یا روی سرور خودتان. Next.js همچنین از خروجی استاتیک پشتیبانی میکند که به سرور نیازی ندارد.
React Router (v7)
React Router محبوبترین کتابخانه مسیردهی برای ریاکت است و میتواند همراه با Vite برای ایجاد یک فریمورک فولاستک ریاکت استفاده شود. این فریمورک بر استفاده از APIهای استاندارد وب تأکید دارد و چندین قالب آماده برای استقرار روی محیطها و پلتفرمهای مختلف جاوااسکریپت ارائه میدهد.
برای ایجاد یک پروژهی جدید فریمورک React Router، دستور زیر را اجرا کنید:
npx create-react-router@latest
React Router توسط Shopify نگهداری میشود.
Expo (برای اپلیکیشنهای نیتیو)
Expo یک فریمورک ریاکت است که به شما اجازه میدهد اپلیکیشنهای یونیورسال اندروید، iOS و وب را با رابطهای کاربری واقعاً نیتیو بسازید. این فریمورک یک SDK برای React Native فراهم میکند که استفاده از بخشهای نیتیو را سادهتر میسازد. برای ایجاد یک پروژهی جدید با Expo، دستور زیر را اجرا کنید:
npx create-expo-app@latest
اگر در Expo تازهکار هستید، آموزش Expo را بررسی کنید.
Expo توسط شرکت Expo نگهداری میشود. ساخت اپلیکیشن با Expo رایگان است، و شما میتوانید اپها را بدون هیچ محدودیتی در فروشگاههای Google و Apple منتشر کنید. علاوه بر این، Expo سرویسهای ابری پولی اختیاری نیز ارائه میدهد.
سایر فریمورکها
فریمورکهای دیگری نیز وجود دارند که در حال حرکت به سمت چشمانداز فولاستک ریاکت هستند:
- TanStack Start (نسخه بتا): فریمورک TanStack Start یک فریمورک فولاستک ریاکت است که توسط TanStack Router پشتیبانی میشود. این فریمورک رندر سمت سرور (SSR) کامل، استریمینگ، فانکشنهای سمت سرور، باندلینگ و امکانات بیشتر را با استفاده از ابزارهایی مانند Nitro و Vite فراهم میکند.
- RedwoodJS: فریمورک Redwood یک فریمورک فولاستک ریاکت است که با تعداد زیادی پکیج و پیکربندی از پیش نصبشده ارائه میشود و ساخت اپلیکیشنهای وب فولاستک را آسان میکند.
مرور عمیق
چه ویژگیهایی چشمانداز معماری فولاستک تیم ریاکت را تشکیل میدهند؟
باندلر App Router در Next.js مشخصات رسمی کامپوننتهای سمت سرور ریاکت را به طور کامل پیادهسازی کرده است. این ویژگی به شما اجازه میدهد که کامپوننتهای زمان-بیلد، صرفاً-سمت-سرور، و تعاملی را در یک درخت ریاکت ترکیب کنید.
برای مثال، میتوانید یک کامپوننت صرفاً-سمت-سرور را به صورت یک تابع async بنویسید که از پایگاه داده یا یک فایل بخواند. سپس میتوانید دادهها را به کامپوننتهای تعاملی خود انتقال دهید:
// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
// 1. You're on the server, so you can talk to your data layer. API endpoint not required.
const talks = await db.Talks.findAll({ confId });
// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
const videos = talks.map(talk => talk.video);
// 3. Pass the data down to the components that will run in the browser.
return <SearchableVideoList videos={videos} />;
}
App Router در Next.js همچنین واکشی داده همراه با Suspense را یکپارچه میکند. این ویژگی به شما اجازه میدهد برای بخشهای مختلف رابط کاربری خود، مستقیماً در درخت ریاکت حالت بارگذاری (مانند یک اسکلتنمایشگر) مشخص کنید:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Server Components و Suspense ویژگیهای خود ریاکت هستند، نه Next.js. با این حال، پیادهسازی آنها در سطح فریمورک نیازمند همکاری و کار غیرسادهای است. در حال حاضر، App Router در Next.js کاملترین پیادهسازی این قابلیتها را دارد. تیم ریاکت در حال همکاری با توسعهدهندگان باندلرها است تا این ویژگیها را در نسل بعدی فریمورکها سادهتر کنند.
شروع از صفر
اگر اپلیکیشن شما محدودیتهایی دارد که توسط فریمورکهای موجود بهخوبی پشتیبانی نمیشوند، یا ترجیح میدهید فریمورک مخصوص به خود را بسازید، یا فقط میخواهید اصول اولیه یک اپلیکیشن ریاکت را یاد بگیرید، گزینههای دیگری برای شروع یک پروژه ریاکت از صفر وجود دارد.
شروع از صفر انعطافپذیری بیشتری به شما میدهد، اما مستلزم آن است که خودتان انتخاب کنید از چه ابزارهایی برای روتینگ، واکشی داده و الگوهای رایج دیگر استفاده کنید. این کار بسیار شبیه ساختن فریمورک خودتان است، به جای استفاده از یک فریمورک آماده. فریمورکهایی که ما توصیه میکنیم راهحلهای داخلی برای این مسائل دارند.
اگر میخواهید راهحلهای خودتان را بسازید، به راهنمای ما برای ساخت یک اپلیکیشن ریاکت از صفر مراجعه کنید تا با نحوه راهاندازی یک پروژه ریاکت جدید با استفاده از ابزاری مانند Vite، Parcel یا RSbuild آشنا شوید.
اگر شما نویسنده یک فریمورک هستید و علاقهمندید که نامتان در این صفحه ذکر شود، به ما اطلاع دهید.