ساخت یک برنامه ری‌اکت از ابتدا

گام 1: نصب یک ابزار ساخت

اولین گام نصب یک ابزار ساخت مانند vite، parcel یا rsbuild است. این ابزارهای ساخت قابلیت‌هایی را برای بسته‌بندی و اجرای کد منبع، ارائه یک سرور توسعه برای توسعه محلی و یک دستور ساخت برای استقرار برنامه شما در یک سرور تولید فراهم می‌کنند.

Vite

Vite یک ابزار ساخت است که هدف آن ارائه یک تجربه توسعه سریع‌تر و سبک‌تر برای پروژه‌های وب مدرن است.

Vite دارای نظر قطعی است و با تنظیمات پیش‌فرض منطقی از ابتدا ارائه می‌شود. Vite دارای یک اکوسیستم غنی از پلاگین‌ها برای پشتیبانی از بازسازی سریع، JSX، Babel/SWC و سایر قابلیت‌های رایج است. برای شروع، پلاگین React یا پلاگین React SWC و پروژه نمونه React SSR را ببینید.

Vite در حال حاضر به عنوان یک ابزار ساخت در یکی از فریم‌ورک‌های توصیه شده ما استفاده می‌شود: React Router.

Parcel

Parcel تجربه توسعه عالی از ابتدا را با معماری مقیاس‌پذیری ترکیب می‌کند که می‌تواند پروژه شما را از شروع تا برنامه‌های تولیدی بزرگ هدایت کند.

Parcel از بازسازی سریع، JSX، TypeScript، Flow و استایل‌دهی از ابتدا پشتیبانی می‌کند. برای شروع، دستور العمل React Parcel را ببینید.

Rsbuild

Rsbuild یک ابزار ساخت مبتنی بر Rspack است که تجربه توسعه یکپارچه‌ای برای برنامه‌های ری‌اکت فراهم می‌کند. این ابزار با تنظیمات پیش‌فرض دقیق و بهینه‌سازی‌های عملکرد آماده استفاده ارائه می‌شود.

Rsbuild شامل پشتیبانی داخلی برای قابلیت‌های ری‌اکت مانند بازسازی سریع، JSX، TypeScript و استایل‌دهی است. برای شروع، راهنمای React Rsbuild را ببینید.

گام 2: ساخت الگوهای رایج برنامه

ابزارهای ساخت ذکر شده در بالا با یک برنامه تک‌صفحه‌ای (SPA) فقط سمت کلاینت شروع می‌شوند، اما راه‌حل‌های بیشتری برای عملکردهای رایج مانند مسیریابی، واکشی داده یا استایل‌دهی ارائه نمی‌دهند.

اکوسیستم ری‌اکت شامل بسیاری از ابزارها برای این مشکلات است. ما چند مورد که به طور گسترده به عنوان نقطه شروع استفاده می‌شوند را فهرست کرده‌ایم، اما اگر ابزارهای دیگری برای شما بهتر کار می‌کنند، آزادانه از آنها استفاده کنید.

مسیریابی

مسیریابی تعیین می‌کند که چه محتوا یا صفحاتی هنگامی که کاربر از یک URL خاص بازدید می‌کند، نمایش داده شود. شما باید یک مسیریاب راه‌اندازی کنید تا URLها را به بخش‌های مختلف برنامه خود نگاشت کنید. همچنین باید مسیرهای تو در تو، پارامترهای مسیر و پارامترهای پرس‌وجو را مدیریت کنید. مسیریاب‌ها می‌توانند در کد شما پیکربندی شوند یا بر اساس ساختار پوشه و فایل کامپوننت شما تعریف شوند.

مسیریاب‌ها بخش اصلی برنامه‌های مدرن هستند و معمولاً با واکشی داده (از جمله پیش‌واکشی داده برای یک صفحه کامل برای بارگذاری سریع‌تر)، تقسیم کد (برای به حداقل رساندن اندازه بسته کلاینت) و رویکردهای رندر صفحه (برای تصمیم‌گیری در مورد نحوه تولید هر صفحه) یکپارچه می‌شوند.

ما پیشنهاد می‌کنیم از موارد زیر استفاده کنید:

• React Router
• Tanstack Router

واکشی داده

واکشی داده از یک سرور یا منبع داده دیگر بخش کلیدی اکثر برنامه‌ها است. انجام صحیح این کار نیاز به مدیریت وضعیت‌های بارگذاری، وضعیت‌های خطا و ذخیره‌سازی داده‌های واکشی شده دارد، که می‌تواند پیچیده باشد.

کتابخانه‌های واکشی داده هدفمند، کار سخت واکشی و ذخیره‌سازی داده را برای شما انجام می‌دهند و به شما اجازه می‌دهند تا روی داده‌هایی که برنامه شما نیاز دارد و نحوه نمایش آنها تمرکز کنید. این کتابخانه‌ها معمولاً مستقیماً در کامپوننت‌های شما استفاده می‌شوند، اما می‌توانند در لودرهای مسیریابی برای پیش‌واکشی سریع‌تر و عملکرد بهتر، و همچنین در رندر سرور یکپارچه شوند.

توجه داشته باشید که واکشی داده مستقیماً در کامپوننت‌ها می‌تواند به دلیل آبشارهای درخواست شبکه منجر به زمان‌های بارگذاری کندتری شود، بنابراین ما توصیه می‌کنیم تا حد امکان داده را در لودرهای مسیریاب یا در سرور پیش‌واکشی کنید! این اجازه می‌دهد داده‌های یک صفحه همه با هم واکشی شوند زمانی که صفحه در حال نمایش است.

اگر داده را از اکثر بک‌اندها یا APIهای سبک REST واکشی می‌کنید، ما پیشنهاد می‌کنیم از موارد زیر استفاده کنید:

• React Query
• SWR
• RTK Query

اگر داده را از یک API GraphQL واکشی می‌کنید، ما پیشنهاد می‌کنیم از موارد زیر استفاده کنید:

• Apollo
• Relay

تقسیم کد

تقسیم کد فرآیند شکستن برنامه شما به بسته‌های کوچکتری است که می‌توانند در صورت نیاز بارگذاری شوند. اندازه کد یک برنامه با هر قابلیت جدید و وابستگی اضافی افزایش می‌یابد. برنامه‌ها می‌توانند کند شوند زیرا تمام کد برای کل برنامه باید قبل از استفاده ارسال شود. ذخیره‌سازی، کاهش قابلیت‌ها/وابستگی‌ها و انتقال برخی کدها برای اجرا در سرور می‌تواند به کاهش بارگذاری کند کمک کند اما راه‌حل‌های ناقصی هستند که در صورت استفاده بیش از حد می‌توانند عملکرد را فدا کنند.

به طور مشابه، اگر به برنامه‌هایی که از فریم‌ورک شما استفاده می‌کنند برای تقسیم کد متکی باشید، ممکن است با مواردی مواجه شوید که بارگذاری کندتر از زمانی است که هیچ تقسیم کدی انجام نمی‌شد. به عنوان مثال، بارگذاری تنبل یک نمودار، ارسال کد مورد نیاز برای رندر نمودار را به تأخیر می‌اندازد و کد نمودار را از بقیه برنامه جدا می‌کند. Parcel از تقسیم کد با React.lazy پشتیبانی می‌کند. با این حال، اگر نمودار داده‌های خود را پس از رندر اولیه بارگذاری کند، اکنون دو بار منتظر می‌مانید. این یک آبشار است: به جای واکشی همزمان داده‌های نمودار و ارسال کد برای رندر آن، باید منتظر تکمیل هر مرحله یکی پس از دیگری باشید.

تقسیم کد بر اساس مسیر، هنگامی که با بسته‌بندی و واکشی داده یکپارچه می‌شود، می‌تواند زمان بارگذاری اولیه برنامه شما و زمان رندر بزرگترین محتوای قابل مشاهده برنامه را کاهش دهد (Largest Contentful Paint).

برای دستورالعمل‌های تقسیم کد، به اسناد ابزار ساخت خود مراجعه کنید:

• بهینه‌سازی‌های ساخت Vite
• تقسیم کد Parcel
• تقسیم کد Rsbuild

بهبود عملکرد برنامه

از آنجا که ابزار ساخت انتخابی شما فقط از برنامه‌های تک‌صفحه‌ای (SPA) پشتیبانی می‌کند، باید الگوهای رندر دیگری مانند رندر سمت سرور (SSR)، تولید سایت استاتیک (SSG) و/یا کامپوننت‌های سرور ری‌اکت (RSC) را پیاده‌سازی کنید. حتی اگر در ابتدا به این قابلیت‌ها نیاز ندارید، در آینده ممکن است برخی مسیرها از SSR، SSG یا RSC بهره‌مند شوند.

• برنامه‌های تک‌صفحه‌ای (SPA) یک صفحه HTML واحد را بارگذاری می‌کنند و به صورت پویا صفحه را هنگام تعامل کاربر با برنامه به‌روز می‌کنند. SPAها شروع آسان‌تری دارند، اما می‌توانند زمان بارگذاری اولیه کندتری داشته باشند. SPAها معماری پیش‌فرض برای اکثر ابزارهای ساخت هستند.

• رندر سمت سرور با استریمینگ (SSR) یک صفحه را در سرور رندر می‌کند و صفحه کاملاً رندر شده را به کلاینت ارسال می‌کند. SSR می‌تواند عملکرد را بهبود بخشد، اما راه‌اندازی و نگهداری آن می‌تواند پیچیده‌تر از یک برنامه تک‌صفحه‌ای باشد. با افزودن استریمینگ، SSR می‌تواند بسیار پیچیده برای راه‌اندازی و نگهداری باشد. راهنمای SSR Vite را ببینید.

• تولید سایت استاتیک (SSG) فایل‌های HTML استاتیک را برای برنامه شما در زمان ساخت تولید می‌کند. SSG می‌تواند عملکرد را بهبود بخشد، اما راه‌اندازی و نگهداری آن می‌تواند پیچیده‌تر از رندر سمت سرور باشد. راهنمای SSG Vite را ببینید.

• کامپوننت‌های سرور ری‌اکت (RSC) به شما امکان می‌دهد کامپوننت‌های زمان ساخت، فقط سرور و تعاملی را در یک درخت ری‌اکت واحد ترکیب کنید. RSC می‌تواند عملکرد را بهبود بخشد، اما در حال حاضر نیاز به تخصص عمیق برای راه‌اندازی و نگهداری دارد. نمونه‌های RSC Parcel را ببینید.

استراتژی‌های رندر شما باید با مسیریاب شما یکپارچه شوند تا برنامه‌های ساخته شده با فریم‌ورک شما بتوانند استراتژی رندر را در سطح مسیر انتخاب کنند. این امکان استراتژی‌های رندر مختلف را بدون نیاز به بازنویسی کل برنامه فراهم می‌کند. به عنوان مثال، صفحه اصلی برنامه شما ممکن است از تولید استاتیک (SSG) بهره‌مند شود، در حالی که یک صفحه با فید محتوا ممکن است با رندر سمت سرور بهترین عملکرد را داشته باشد.

استفاده از استراتژی رندر مناسب برای مسیرهای مناسب می‌تواند زمان لازم برای بارگذاری اولین بایت محتوا (Time to First Byte)، اولین قطعه محتوا برای رندر (First Contentful Paint) و بزرگترین محتوای قابل مشاهده برنامه برای رندر (Largest Contentful Paint) را کاهش دهد.

و بیشتر…

اینها فقط چند نمونه از قابلیت‌هایی هستند که یک برنامه جدید هنگام ساخت از ابتدا باید در نظر بگیرد. بسیاری از محدودیت‌هایی که با آنها مواجه خواهید شد می‌توانند حل آنها دشوار باشد زیرا هر مشکل با دیگری مرتبط است و ممکن است نیاز به تخصص عمیق در زمینه‌های مشکلی داشته باشد که ممکن است با آنها آشنا نباشید.

اگر نمی‌خواهید این مشکلات را به تنهایی حل کنید، می‌توانید با یک فریم‌ورک شروع کنید که این قابلیت‌ها را از ابتدا ارائه می‌دهد.