نحوه ایجاد اپلیکیشن React در سال 2024

شناسهٔ خبر: 445865 - تاریخ: ژانویه 26, 2024

در سال 2024، راه‌های بیشتری برای شروع پروژه‌های React شما وجود دارد. اما کدام یک را باید انتخاب کنید؟

در این مقاله، من قصد دارم تمام روش‌های اصلی را که می‌توانید برای ایجاد یک برنامه React استفاده کنید و اینکه کدام یک را باید بر اساس نیازهای پروژه خود انتخاب کنید، شرح دهم.

من همچنین یک راهنمای سریع را در پایان قرار خواهم داد تا دقیقاً به شما نشان دهم که چگونه از بین هر کدام با توجه به نوع پروژه ای که می سازید انتخاب کنید.

بیا شروع کنیم!

❌ چرا نباید از برنامه Create React استفاده کنید

در سال 2023، ابزار Create React App منسوخ شد، به این معنی که دیگر نگهداری نمی شد. Create React App راه حلی برای ایجاد یک پروژه جدید React بوده است، اما با تعدادی از گزینه‌های مختلف از قدرت خارج شده است.

به همین دلیل، Create React App گزینه ای نیست که من برای ایجاد یک پروژه جدید React در سال 2024 توصیه می کنم.

💨 نحوه ایجاد اپلیکیشن React با Vite

ممکن است بپرسید "جایگزین خوبی برای Create React App چیست؟" آن گزینه Vite است.

Vite برای ساخت پروژه های React رندر شده توسط مشتری که منحصراً در مرورگر اجرا می شوند ایده آل است.

برای چرخاندن یک پروژه React جدید با Vite، فقط باید یک دستور را اجرا کنید:

دیگر اخبار

قیمت برنج هاشمی اعلام شد/ امسال چند تن برنج وارد شد؟

 npm create vite@latest my-react-app -- --template react

نکته مهم در مورد Vite این است که همانطور که از نام آن مشخص است، تقریباً از هر جایگزینی سریعتر است. جایی که Vite واقعاً می درخشد سرعت توسعه آن است.

با این حال، Vite نامعلوم است، به این معنی که احتمالاً باید مجموعه‌ای از کتابخانه‌های شخص ثالث را برای عملکردهای اولیه، مانند مسیریابی و واکشی داده، نصب کنید.

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

علاوه بر این، Vite با فایل پیکربندی خاص خود، vite.config.js ارائه می‌شود که ممکن است برای پیکربندی مواردی مانند متغیرهای محیط، گزینه‌های ساخت و گزینه‌های تصویر، به خواندن اسناد نیاز داشته باشد.

🥞 نحوه ایجاد اپلیکیشن React با Next.js

اگر به دنبال راهی برای ساختن یک برنامه React هستید که تجربه یک اپلیکیشن تک صفحه ای (SPA) اما با رندر سمت سرور و اجزای سرور را به شما بدهد، Next.js انتخاب شم است.

Next.js تنها گزینه‌ای است که در حال حاضر با اجزای سرور همراه است، که به شما امکان می‌دهد یک جزء را به‌عنوان async علامت‌گذاری کنید و در برخی عملیات‌ها روی سرور await .

 async function getData() { const res = await fetch('https://api.example.com/...'); return res.json(); } export default async function Page() { const data = await getData(); return <main>{data}</main>; }

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

اجزای سرور نیاز به داشتن یک سرور دارند، اما این بدان معناست که نمی‌توان آن را به سادگی یک برنامه React ارائه‌شده توسط کلاینت با Vite اجرا کرد.

Next.js قدرتمند است زیرا دارای تعداد زیادی ویژگی داخلی است، مانند مسیریابی مبتنی بر فایل، بهینه سازی تصویر، و بارگذاری فونت.

Next.js همچنین به شما امکان می‌دهد تا به عملکردهای سرور ضربه بزنید، که یک ویژگی جدید React است که به شما امکان می‌دهد کد سرور را با فراخوانی یک تابع اجرا کنید.

 // Server Component export default function Page() { // Server Action async function create() { 'use server' // ... } return ( // ... ) }

Next.js همچنین دارای کنترلرهای مسیر است که به شما امکان می دهد درخواست های HTTP را به نقطه پایانی API ارسال کنید. این چیزی است که برنامه های React ارائه شده توسط مشتری نمی توانند انجام دهند، زیرا سروری وجود ندارد.

با تمام مزایای Next.js، منحنی یادگیری تندتری دارد. تعدادی از مفاهیم خاص Next.js وجود دارد که ممکن است به نظر برسد با برخی از مفاهیم React که قبلاً آموخته اید مخالف هستند.

به عنوان مثال، در اجزای سرور، نمی توانید از React Hooks استفاده کنید. این به این معنی است که شما باید به الگوهایی مانند ذخیره وضعیت در URL تکیه کنید.

با وجود منحنی یادگیری، Next.js محبوب‌ترین فریم ورک React است و برای ساخت برنامه‌های React چشمگیر که استارت‌آپ‌های کوچک را به شرکت‌های Fortune 500 نیرو می‌دهد، بر آن تکیه می‌شود.

اگر می‌خواهید با React چیزی چشمگیر بسازید، مطمئناً می‌توانید آن را با Next.js انجام دهید.

💿 نحوه ایجاد اپلیکیشن React با Remix

Remix، مانند Next.js، یک چارچوب مبتنی بر React است که تمرکز متفاوتی بر استانداردهای وب دارد تا تجربه کاربری بهتری را ارائه دهد. Remix به شما امکان می دهد کد React سرور و کلاینت را نیز بنویسید.

ریمیکس به ارائه محتوای ثابت و پویا سریعتر از Next.js افتخار می کند. این بدان معناست که به همان اندازه در ساخت برنامه های فول پشته و همچنین وب سایت های استاتیک خوب است.

به جای اجزای سرور و اقدامات سرور، Remix به سادگی دارای اقدامات است. Actions به شما امکان می دهد جهش داده ها را در سرور خود مدیریت کنید، که هر چیزی است که درخواست GET نیست. اکشن ها فقط توابع ساده با نام اکشن هستند.

بیشتر بخوانید

“این یک نشت نیست” – Mullvad VPN ادعای نقض حساب ها را رد می کند

برای دریافت داده ها، از توابع ساده ای به نام لودر استفاده می کنید. React Remix از React Router در زیر کاپوت استفاده می کند. پس اگر با React Router راحت هستید، احتمالاً با Remix نیز احساس راحتی خواهید کرد.

 export async function loader() { return json(await fakeGetTodos()); } export default function Todos() { const data = useLoaderData<typeof loader>(); return ( <div> <TodoList todos={data} /> <Form method="post"> <input type="text" name="title" /> <button type="submit">Create Todo</button> </Form> </div> ); }

Remix کمی پایدارتر از Next.js است و منحنی یادگیری با شیب کمتری دارد، همچنان به شما امکان می‌دهد تا برنامه‌های کاربردی را به همان اندازه چشمگیر بسازید، تنها نقطه ضعف آن این است که تقریباً به اندازه Next.js محبوب نیست. پس پشتیبانی جامعه و کتابخانه های اطراف خود را ندارد.

اما اگر چیزی با رندر سمت سرور و رندر سمت کلاینت می‌خواهید، Remix همچنان یک گزینه عالی برای ساخت پروژه بعدی React شما است.

🚀 نحوه ایجاد اپلیکیشن React با Astro

جدیدترین راه برای ساخت یک پروژه React قطعاً کارآمدترین است. برنامه های React را می توان با استفاده از چارچوبی به نام Astro نیز ساخت.

هدف Astro ارائه سریع محتوا به کاربران از طریق چیزی به نام "معماری جزیره" است.

به طور خلاصه، این بدان معنی است که جاوا اسکریپت تنها زمانی بارگذاری می شود که کاربر به آن نیاز داشته باشد و تجربه کاربری بسیار بهینه تری را برای کاربر ایجاد می کند. اگر می خواهید سریع ترین وب سایت ممکن را داشته باشید، من به شدت توصیه می کنم به Astro نگاه کنید.

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

Astro همچنین بسیار منعطف است زیرا حتی به React وابسته نیست. برای ساخت اپلیکیشن Astro نیازی به استفاده از React ندارید و می توانید از React در کنار سایر فریمورک ها مانند Vue و Svelte در همان برنامه استفاده کنید.

اگر وب‌سایتی می‌سازید که دارای پست‌ها یا محتوایی است که از markdown یا MDX استفاده می‌کند، Astro باید بهترین انتخاب شما باشد. از قابلیتی به نام «مجموعه‌ها» برای توصیف تمام داده‌های درون فایل‌های نشانه‌گذاری شما استفاده می‌کند تا دقیقاً بدانید قرار است چه محتوایی در مؤلفه‌های React شما ارائه شود.

Astro به سرعت در حال افزایش محبوبیت است، و اگر به ایجاد یک وب سایت ثابت که نیازی به پایگاه داده یا احراز هویت ندارد، یا وب سایتی که تا حد زیادی ثابت است، علاقه مند هستید، احتمالاً بهترین انتخاب است.

🤔 پس چه چیزی را انتخاب کنم؟

اگر تا این مرحله مطالعه کرده اید و هنوز در تلاش هستید تا بفهمید کدام فریم ورک برای ساخت یک پروژه React در سال 2024 برای شما بهترین است، خلاصه در اینجا آمده است:

اگر تازه شروع کرده‌اید و اصول React را یاد می‌گیرید، اما می‌خواهید یک پروژه ساده یا متوسط بسازید، از Vite استفاده کنید.

اگر می خواهید یک فریم ورک تمام پشته با همه زنگ ها و سوت ها، مانند اجزای سرور، داشته باشید و برایتان مهم نیست که وقت خود را برای یادگیری مفاهیم اضافی صرف کنید، Next.js را تحلیل کنید.

اگر Next.js را امتحان کرده اید و درک برخی از مفاهیم آن دشوار است، اما همچنان می خواهید یک برنامه React تمام پشته بسازید، حتما Remix را تحلیل کنید.

در نهایت، اگر یک وب سایت ثابت یا محتوا محور دارید و واقعاً به پایگاه داده یا تأیید اعتبار نیاز ندارید، استفاده از Astro را به شدت توصیه می کنم.