شروع پروژه جدید با React
اگر می‌خواهید اپلیکیشن یا وب‌سایت جدیدی را به طور کامل با React بسازید، ما توصیه می‌کنیم یکی از فریم‌ورک‌های قدرتمند React که محبوب جامعه برنامه نویسان است را انتخاب کنید.
شما می‌توانید بدون فریمورک از React استفاده کنید، با این حال بیشتر اپلیکیشن‌ها و وب‌سایت‌ها در نهایت راه‌حل‌هایی برای مشکلات رایج مانند تقسیم کد، مسیریابی، بازیابی داده‌ها و تولید HTML باید پیدا کنند. این مشکلات برای تمام کتابخانه‌های UI مشترک است، نه فقط برای React.
با شروع کار با یک فریمورک، می‌توانید به سرعت با React شروع کنید و از ساخت فریمورک شخصی خود در آینده اجتناب کنید.
آیا می‌توانم بدون فریمورک از React استفاده کنم؟
شما قطعاً می‌توانید بدون فریمورک از React استفاده کنید--دقیقن مانند زمانی که شما برای بخشی از یک صفحه از React استفاده می‌کنید. با این حال، اگر یک اپلیکیشن یا وب‌سایت جدید را به‌طور کامل با React می‌سازید، استفاده از یک فریمورک را توصیه می‌کنیم.
دلایل زیر می توانند به تصمیم شما در شروع کار با یک فریم ورک کمک کنند:
حتی اگر در ابتدا به مسیریابی یا دریافت داده‌ها از ای پی آی نیاز ندارید، احتمالاً بخواهید برخی کتابخانه‌های مربوط به آن ها را به پروژه اضافه کنید. وقتی بسته جاوااسکریپت شما با هر ویژگی جدید بزرگتر می‌شود، ممکن است مجبور شوید برای هر مسیر به‌طور جداگانه کد را تقسیم کنید. وقتی دریافت داده های پروژه از ای پی آی پیچیده‌تر می‌شود، احتمالاً با انبوهی از درخواست های سرور-کلاینت روبرو خواهید شد که باعث کند شدن اپلیکیشن شما می شود. وقتی مخاطبان شما شامل کاربران بیشتری با سرعت دانلود پایین و دستگاه‌های قدیمی می‌شوند، شما احتمالاً نیازمند تولید HTML از کامپوننت‌های شوید تا محتوا با سرعت بیشتری به کاربر نمایش داده شود--یا در سرور، یا در زمان بیلد برنامه. تغییر تنظیمات برای اجرای برخی از کدها در سرور یا در زمان بیلد می‌تواند بسیار دشوار باشد.
این مشکلات خاص React نیستند. به همین دلیل است که SvelteKit برای Svelte و Nuxt برای Vue درست شده اند. برای حل این مشکلات ، شما نیازمند یکپارچه کردن بنادلر مورد استفاده با کتابخانه مسیریابی (Routing) و دریافت داده (Data fetching) خود هستید. درست کردن اولیه یک برنامه کار سختی نیست، اما در ساخت یک اپلیکیشن که به سرعت لود می‌شود حتی با وجود رشد برنامه به مرور زمان، نکات زیادی وجود دارد. شما باید برای نمایش هر صفحه حداقل مقدار کد و داده مورد نیاز آن صفحه را در یک درخواست به سمت کاربر ارسال کنید. احتمالاً بخواهید قبل از اجرای کد جاوااسکریپت، صفحه به صورت تعاملی قابل استفاده باشد تا از بهبود تدریجی پشتیبانی کند. ممکن است بخواهید از بخشی از برنامه به صورت فایل‌های HTML کاملاً ایستا، تولید کنید که بتوانند در هر مکانی میزبان شوند و حتی در صورت غیرفعال بودن جاوااسکریپت در مرورگر کاربر کار کنند. ساخت این قابلیت‌ها به خودی خود کار واقعی می‌طلبد.
فریم‌ورک‌های React پیشنهادی در این صفحه مشکلات مطرح شده را بدون نیاز به کار اضافی از سمت شما حل میکنند. آنها به شما اجازه می‌دهند که کار خود را بسیار کم‌حجم شروع کنید و سپس برنامه را برای نیازهایی که در آینده با آنها روبرو می شوید، بزرگ کنید. هر فریمورک React دارای جامعه‌ای است که کار شما را برای پیدا کردن پاسخ سؤالات و بهروزرسانی ابزارها آسان‌تر می کند. فریمورکها همچنین ساختاری مشخص به کد می‌دهند تا شما و دیگران، برای کار در پروژه‌های مختلف بار شناختی کمتری را متحمل شوید. برعکس فریم ورک، در صورت استفاده از ستاپ سفارشی، ممکن است راحت‌تر در دام مشکلات مربوط به تداخل نسخه های واسبتگی ها گیر کنید، و در نهایت مجبور به نوشتن فریمورک خود شوید—فریم ورکی که نه جامعه ای برای حل مشکلات دارد و نه بروزرسانی ها برای حل مشکلات به کمک شما می آیند (و اگر مشابه فریم‌ورک‌هایی که ما در گذشته ساخته‌ایم باشد، طراحی درهم و برهمی خواهد داشت).
اگر اپلیکیشن شما محدودیت‌های غیرمعمولی دارد که این فریمورکها به خوبی آنها را برطرف نمی‌کنند، یا ترجیح می‌دهید که این مشکلات را به تنهایی حل کنید، می‌توانید تنظیمات سفارشی خود را با React بسازید. react و react-dom را از npm دریافت کرده، فرآیند ساخت سفارشی خود را با یک باندلر مانند Vite یا Parcel تنظیم کنید و ابزارهای دیگر را به محض نیاز خود برای مسیریابی، تولید ایستا یا رندرینگ سمت سرور و غیره اضافه کنید.
فریم‌ورک‌های React برای استفاده در محیط عملیاتی
این فریمورکها تمام ویژگی‌هایی را که برای استقرار و مقیاس‌دهی اپلیکیشن خود نیاز دارید، پشتیبانی میکنند و همچنین از چشم‌انداز معماری full-stack تیم React پیروی می کنند. تمام فریم‌ورک‌هایی که ما توصیه می‌کنیم متن باز و دارای جوامع فعال برای پشتیبانی هستند و می‌توانند بر روی سرور شما یا سرویسهای میزبانی مستقر و اجرا شوند. اگر شما فریم‌ورکی نوشته اید و علاقه مند اضافه شدن به این لیست هستید، لطفاً به ما اطلاع دهید.
فریم ورک Next.js
مسیریاب صفحات Next.js این فریمورک چندکاره به شما اجازه می‌دهد اپلیکیشن‌های React با هر اندازه ای --از یک وبلاگ عمدتاً ایستا تا یک اپلیکیشن پیچیده و دینامیک-- را بسازید. برای ایجاد یک پروژه جدید Next.js، در ترمینال دستورات زیر را اجرا کنید:
npx create-next-app@latest
اگر تازه‌کار هستید، براش شره کار با نکست، دوره یادگیری Next.js را مطالعه کنید.
فریم ورک Next.js بوسیله Vercel نگهداری می شود. اپلیکیشن Next.js را در سرورهای که از Node.js پشتیبانی میکنند، هاستینگ های سرورلس یا سرور خودتان اجرا کنید. Next.js همچنین از تولید صفحات ایستا که به سرور با نرم افزار خاصی نیاز ندارند، پشتیبانی می‌کند.
فریم ورک Remix
فریم ورک این فریمورک به شما اجازه می‌دهد اپلیکیشن خود را به بخش‌های تو در تو تقسیم کنید تا داده‌ها را به‌طور موازی لود کرده و تا در پاسخ به درخواست های کاربر بهروزرسانی شوند. برای ایجاد یک پروژه جدید Remix، دستورات زیر را در ترمینال اجرا کنید:
npx create-remix
اگر تازه‌کار هستید، بلاگ آموزشی Remix (کوتاه) و آموزش اپلیکیشن (طولانی) را مطالعه کنید.
فریم ورک Remix بوسیله Shopify نگهداری می شود. هنگام ایجاد پروژه Remix، باید هدف استقرار خود را انتخاب کنید. شما می‌توانید یک اپلیکیشن Remix را روی هر سروری که از Node.js پشتیبانی می کند یا سرویس های سرورلس با استفاده از یک آداپتور یا نوشتن یک آداپتور اختصاصی مستقر و اجرا کنید.
فریم ورک Gatsby
فریم ورک اکوسیستم غنی پلاگین و لایه داده GraphQL آن، یکپارچه سازی محتوا، APIها و خدمات را برای یک وب‌سایت ساده می‌کند. برای ایجاد یک پروژه جدید Gatsby، دستورات زیر را در ترمینال اجرا کنید:
npx create-gatsby
اگر تازه‌کار هستید، آموزش Gatsby را مطالعه کنید.
فریم ورک Gatsby بوسیله Netlify نگهداری می شود. شما می‌توانید یک سایت Gatsby کاملاً ایستا را در هر میزبان فایل های ایستا مستقر کنید. اگر تصیمیم به استفاده از ویژگی‌های سمت سرورفریم ورک گرفته اید، مطمئن شوید که سرویس هاستینگ مورد نظر از Gatsby پشتیبانی می‌کند.
فریم ورک Expo (برای اپلیکیشن‌های بومی)
فریم ورک این فریمورک یک SDK برای React Native ارائه می‌دهد که استفاده از بخش‌های نیتیو را آسان‌تر می‌کند. برای ایجاد یک پروژه جدید Expo، اجرا کنید:
npx create-expo-app
اگر تازه‌کار هستید، آموزش Expo را مطالعه کنید.
فریم ورک Expo بوسیله Expo (شرکت) نگهداری می شود. ساخت اپلیکیشن با Expo رایگان است و می‌توانید آنها را بدون محدودیت به اپ استورهای Google و Apple ارسال کنید. Expo همچنین خدمات ابری پرداختی را به‌صورت اختیاری ارائه می‌دهد.
فریم‌ورک‌های پیشرفته React
در زمان بررسی روشهای بهبود React، متوجه شدیم که یکپارچگی React با فریمورکها (به‌ویژه با مسیریابی، باندلینگ و تکنولوژی‌های سمت سرور) بزرگ‌ترین فرصت ما برای کمک به کاربرانی است که می‌خواهند اپلیکیشن‌های بهتری بسازند. برای همین تیم Next.js با تحقیق، توسعه، یکپارچگی و آزمایش ویژگی‌های پیشرفته React، مانند کامپوننت‌های سرور React.، که با فریمورکها نیز سازگار هستند، موافقت کرده است.
این ویژگی‌ها هر روز بهره برداری و استفاده در محیط عملیاتی نزدیک‌تر می‌شوند و ما در حال گفت‌وگو با توسعه‌دهندگان باندلرها و فریمورک های دیگر برای یکپارچگی با آنها هستیم. امیدواریم که در یک یا دو سال، تمام فریم‌ورک‌های ذکر شده در این صفحه از این ویژگی‌ها به‌طور کامل پشتیبانی کنند. (اگر شما نویسنده فریم‌ورکی هستید که به همکاری با ما برای آزمایش این ویژگی‌ها علاقه دارید، لطفاً به ما اطلاع دهید!)
فریم ورک Next.js (مسیریاب اپلیکیشن)
مسیریاب اپلیکیشن Next.js این فریمورک به شما اجازه می‌دهد که داده‌ها را در کامپوننت‌های غیرهمزمان که روی سرور یا حتی در زمان ساخت اجرا می‌شوند، دریافت کنید.
فریم ورک Next.js بوسیله Vercel نگهداری می شود. شما می‌توانید یک اپلیکیشن Next.js را بر روی هر سرور Node.js یا میزبانی سرور لس یا سرور خودتان مستقر کنید. Next.js همچنین از گرفتن خروجی ایستا که به سرور با نرم افزار خاصی نیاز ندارد، پشتیبانی می‌کند.
ویژگی‌های چشم‌انداز معماری full-stack تیم React کدامند؟
باندلر مسیریاب اپلیکیشن Next.js به‌طور کامل مشخصات کامپوننت‌های سمت سرور React که به صورت رسمی منتشر شده است را پیاده‌سازی می‌کند. این به شما اجازه می‌دهد که در زمان بیلد، کامپوننت‌های فقط سمت سرور و کامپوننت‌های تعاملی را در یک درخت واحد React ترکیب کنید.
به عنوان مثال، شما می‌توانید یک کامپوننت React فقط سمت سرور را به صورت یک تابع async بنویسید و از پایگاه داده یا از یک فایل بوسیله آن دیتایی را بخوانید. سپس می‌توانید داده‌ها را از آن به کامپوننت‌های تعاملی خود منتقل کنید:
// این کامپوننت فقط سمت سرور اجرا می شود
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} />;
}
مسیریاب اپلیکیشن Next.js همچنین از دریافت داده‌ها با Suspense را پشتیبانی می کند. این قابلیت امکان نمایش وضعیت لود (مانند نمایش اسکلت صفحه یا کامپوننت) برای قسمت‌های مختلف رابط کاربری به صورت مستقیم در کد React را برای شما فراهم می کند:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
کامپوننت‌های سرور و Suspense ویژگی‌های React هستند، نه ویژگی‌های Next.js. با این حال، استفاده از آنها در سطح فریمورک نیاز به پذیرش و پیاده‌سازی پیچیده‌ای دارد. در حال حاضر، App Router در Next.js کامل‌ترین پیاده‌سازی را ارائه می‌دهد. تیم React در حال همکاری با توسعه‌دهندگان باندلرهاست تا این ویژگی‌ها را در نسل بعدی فریمورکها پیاده‌سازی و استفاده از آنها را آسان‌تر کند.