اگر با React برنامه می‌سازید، باید یاد بگیرید که چگونه از چند کتابخانه مفید استفاده کنید که اضافه کردن آپشن های مورد نیازتان را آسان‌تر می‌کند.

به عنوان مثال، برای گفت ن آپشن های ی مانند احراز هویت یا یک ظاهر طراحی، باید یک کتابخانه شخص ثالث خوب برای مدیریت آن پیدا کنید.

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

فهرست مطالب

React Framework

مدیر بسته

کتابخانه های CSS و UI

مدیریت دولتی

واکشی داده ها

مسیریابی

احراز هویت

پایگاه داده و ORM

تاریخ و زمان

تشکیل می دهد

کشیدن و رها کردن

برنامه های موبایل

گسترش

TypeScript

یک توسعه دهنده Pro React شوید

🛠️ React Framework

اول از همه، چگونه برنامه React خود را در سال 2024 ایجاد کنیم؟

اگر می‌خواهید یک پروژه React ارائه‌شده توسط کلاینت داشته باشید، بهترین انتخاب شما Vite است که ابزار منسوخ Create React App را جایگزین کرده است.

اگر به ساخت یک پروژه React رندر شده یا فول استک علاقه مند هستید، Next.js کامل ترین و محبوب ترین فریم ورک React فول استک است.

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

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

اگر برنامه‌ای می‌سازید که می‌خواهید سریع بارگیری کنید و تا حد زیادی محتوای ثابت را ارائه کنید، یکی دیگر از گزینه‌های عالی Astro است. Astro به شما امکان می دهد از React در کنار سایر فریم ورک ها مانند Vue و Svelte استفاده کنید (به این معنی که "چارچوب آگنوستیک" است) و به گونه ای طراحی شده است که کمترین مقدار جاوا اسکریپت لازم را برای مشتری ارسال کند که منجر به بارگذاری بسیار سریع می شود.

📦 مدیر بسته

برای نصب تمام این کتابخانه های فهرست شده در این راهنما، به چیزی به نام مدیر بسته نیاز دارید.

اگر Node.js را نصب کرده‌اید، که برای اجرای یک پروژه React به صورت محلی روی رایانه‌تان ضروری است، می‌توانید به سادگی از NPM استفاده کنید، که هنوز در سال 2024 یک انتخاب عالی است. جایگزین‌های دیگری برای NPM، از جمله Yarn و PNPM وجود دارد.

جدیدترین جایگزین که به سرعت در دنیای جاوا اسکریپت بسیار محبوب می شود، Bun است. Bun هم یک زمان اجرا جاوا اسکریپت مانند Node و هم یک مدیریت بسته است و به عنوان یک جایگزین سریعتر برای Node و NPM به بازار عرضه می شود.

🎨 کتابخانه های CSS و UI

اکنون که پروژه خود را راه اندازی کرده اید و کتابخانه های خود را نصب کرده اید، چگونه می خواهید به پروژه های React خود سبک دهید؟

همه فریم ورک هایی که در بالا ذکر کردم شامل پشتیبانی اولیه CSS می شوند. اگر می‌خواهید پروژه‌های React خود را با CSS ساده طراحی کنید، در سال 2024 کاملاً خوب است.

شما می توانید از شیوه نامه های CSS یا ماژول های CSS استفاده کنید، اما شاید محبوب ترین انتخاب در حال حاضر از نظر استایل خالص استفاده از Tailwind CSS باشد. Tailwind CSS با چند مرحله راه‌اندازی همراه است، اما به شما امکان می‌دهد کلاس‌های از پیش ساخته شده را با هم زنجیره‌ای کنید تا به سرعت سبک‌ها را مستقیماً در فایل‌های کامپوننت خود اضافه کنید.

ShadCN یک کتابخانه UI بسیار محبوب برای سال 2024 است که Tailwind CSS را با یک کتابخانه مؤلفه به نام Radix UI ترکیب می کند. کتابخانه‌های مؤلفه‌ای مانند Radix به شما این امکان را می‌دهند که به راحتی مؤلفه‌ها را بدون کدنویسی خودتان اضافه کنید.

ShadCN به دلیل کنترل بیشتر بر ظاهر اجزای شما با کمک Tailwind CSS محبوب شده است.

مجموعه ای از کتابخانه های مؤلفه های کاربردی بسیار محبوب دیگر نیز وجود دارد. رابط کاربری Material همچنان محبوب است، و همچنین موارد دیگری مانند Mantine و Chakra UI . اینکه کدامیک را انتخاب می‌کنید واقعاً به نحوه ظاهر برنامه نهایی شما بستگی دارد. من توصیه می‌کنم تعدادی از این کتابخانه‌های رابط کاربری را امتحان کنید و ببینید کدام یک را بیشتر دوست دارید.

💽 مدیریت دولتی

React دارای ابزارهای داخلی مانند useState و useReducer برای مدیریت وضعیت برنامه شما در برنامه های اصلی است. اگر از Next.js استفاده می‌کنید، مدیریت حالت هنگام کار با اجزای سرور به URL منتقل شده است . با وجود این گزینه‌ها، ممکن است به راهی برای مدیریت وضعیت به روشی دقیق‌تر نیاز داشته باشید.

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

کتابخانه‌هایی مانند Zustand ، Recoil و Jotai که همگی بسیار شبیه به هم هستند، به شما اجازه می‌دهند که وضعیت را به سادگی با اعلام ویژگی‌ها و روش‌ها روی یک شی مدیریت کنید. این در نهایت ساده ترین راه برای مدیریت وضعیت در اجزای برنامه شما است.

اگر بخواهم در سال 2024 یک کتابخانه مدیریت دولتی را برای همه پروژه های React خود انتخاب کنم، Zustand را انتخاب می کنم. یادگیری نحوه استفاده از آن تقریباً زمان نمی برد. همچنین نیازی به اضافه کردن یک مؤلفه ارائه دهنده به برنامه خود ندارد، که استفاده از آن را در هر مؤلفه ای که دوست دارید بسیار راحت می کند.

🐕 واکشی داده ها

مدیریت دولتی و واکشی داده ها اغلب دست به دست هم می دهند. اگر در حال ساخت یک برنامه React رندر شده توسط مشتری هستید، احتمالاً به یک کتابخانه واکشی داده نیاز خواهید داشت.

بهترین راه برای واکشی داده ها از سرور در برنامه React در سال 2024، React Query یا Tanstack Query است که اکنون نامیده می شود. TanStack Query به شما کنترل دقیقی را بر روی نه تنها واکشی داده ها، زمان واکشی و واکشی مجدد، کش کردن، همه از طریق قلاب های سفارشی راحت، و همچنین به راحتی تغییر یا جهش داده ها را به شما می دهد.

جایگزین قوی دیگر SWR است که یک قلاب سفارشی برای رسیدگی به پرس و جوها و جهش ها نیز ارائه می دهد، اما از نظر آنچه ارائه می دهد بسیار ساده تر است. با انتخاب یکی و واکشی داده ها و انجام درخواست های HTTP خود با fetch API نمی توانید اشتباه کنید.

در اینجا مقاله ای وجود دارد که شما را با برخی از محبوب ترین روش های واکشی داده در React (از جمله Tanstack Query و SWR) آشنا می کند.

🧭 مسیریابی

اگر از چارچوبی مانند Next.js، Remix یا Astro استفاده می‌کنید، مسیریابی شما قبلاً مراقبت شده است. همه آنها با روش های داخلی برای ایجاد مسیرها یا صفحات در پروژه شما ارائه می شوند.

با یک برنامه React ارائه شده توسط مشتری، مانند برنامه ای که با Vite یا Create React App ساخته شده است، باید یک کتابخانه مسیریابی انتخاب کنید. روتر React همچنان محبوب ترین انتخاب است. تمام نیازهای مسیریابی شما را برطرف می کند. همچنین به دلیل ویژگی های بارگذاری داده ها با پایه loader بسیار پیشرفته است. پروپ loader به شما امکان می دهد تا بدون استفاده از کتابخانه خارجی مانند React Query، داده ها را برای یک مسیر مشخص واکشی کنید.

یک کتابخانه رو به رشد که به نظر می رسد ویژگی های به همان اندازه خوبی دارد Tanstack Router است. روتر Tanstack به گونه ای ساخته شده است که کاملاً از نظر نوع ایمن باشد و پیش فرض های عالی برای واکشی داده ها را درست مانند React Router نسخه 6 ارائه می دهد.

در حالی که Tanstack Router کمی جدیدتر است، شما واقعاً نمی توانید با هر یک از گزینه ها اشتباه کنید، و اگر قبلاً از Tanstack Query یا SWR در برنامه های خود استفاده می کنید، یک جفت عالی است.

🔒 احراز هویت

در حالی که احراز هویت چیزی است که توسط سمت سرور پروژه‌های ما انجام می‌شود، ارزش آن را دارد که بدانیم چه کتابخانه‌هایی با پروژه‌های React به بهترین وجه ادغام می‌شوند، هم روی کلاینت و هم در سرور.

در سال 2024، Supabase به عنوان یک راه حل احراز هویت بسیار قوی ظاهر شد و ادغام آسان با برنامه های React را، هم بر روی سرور، مثلاً در پروژه Next.js، و هم روی مشتری، ارائه می دهد. در سال‌های گذشته، Firebase به دلایل مشابه انتخاب شد، اما ادغام آن در سمت سرور کارها سخت‌تر است.

اگر از Next.js استفاده می‌کنید، گزینه‌های زیادی مانند NextAuth ، Clerk و Lucia تازه وارد در دسترس شم است. مایه تاسف است که در حال حاضر یک کتابخانه اعتبار داخلی برای Next.js وجود ندارد، اما شاید در آینده یک کتابخانه وجود داشته باشد.

در عین حال، من شخصاً از Supabase استفاده خواهم کرد و به شما توصیه می کنم آنها را از طریق اسناد آنها نیز تحلیل کنید.

🥞 پایگاه داده و ORM

مانند احراز هویت، پایگاه داده شما چیزی است که تا حد زیادی با کد سمت سرور شما صحبت می کند و باید صحبت کند.

پایگاه های داده مانند Supabase و Firebase نیازی به داشتن سرور ندارند. می‌توانید داده‌ها را مستقیماً در کلاینت دریافت و تغییر دهید، و می‌توانید قوانین امنیتی را در داشبورد خود اضافه کنید تا مطمئن شوید که انواع خاصی از درخواست‌ها با توجه به وضعیت و نقش تأیید هویت کاربران مجاز هستند یا مجاز نیستند.

خارج از این دو گزینه، اگر از یک سرور سنتی یا یک چارچوب فول استک استفاده می کنید، گزینه های بی شماری وجود دارد. در سال 2024، اولویت کلی به وضوح برای پایگاه های داده SQL مانند MySQL یا PostgreSQL نسبت به پایگاه های داده NoSQL مانند MongoDB یا Firebase است.

با پایگاه داده خود، برای صحبت با پایگاه داده خود، از SQL ساده یا ORM استفاده خواهید کرد که به شما امکان می دهد از یک زبان پرس و جو سفارشی استفاده کنید. گزینه های محبوب برای ORM ها عبارتند از Prisma یا Drizzle . هر دوی آنها به شما این امکان را می دهند که کدهای ایمن تولید کنید تا بدانید چه داده هایی برگردانده می شوند و هر دو به خوبی با پایگاه داده های SQL یا NoSQL مورد نظر شما ادغام می شوند.

🕰️ تاریخ و زمان

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

گزینه های زیادی وجود دارد، اما من تمایل دارم به date-fns یا day.js گرایش پیدا کنم. هر دو کتابخانه بسیار کوچک اما گسترده ای هستند که به شما امکان می دهند تاریخ های جاوا اسکریپت را چه در مرورگر یا در قسمت پشتی آن دستکاری کنید. شما نمی توانید با هیچ کدام اشتباه کنید.

📋 فرم ها

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

اگر در حال ساخت چیزی پیچیده‌تر هستید و فرم‌های زیادی دارید، React Hook Form یک کتابخانه فرم کاملاً برجسته است که به شما امکان می‌دهد ورودی فرم را تأیید کنید و خطاها را با حداقل کد نمایش دهید.

سایر کتابخانه های فرم مانند Formik و React Final Form عملکرد مشابهی را در اختیار شما قرار می دهند، اما React Hook Form کمی بهتر است زیرا API مدرن تری بر اساس قلاب ها دارد و معمولاً به کد کمتری نیاز دارد.

☔️ کشیدن و رها کردن

وقتی نوبت به اضافه کردن کشیدن و رها کردن به برنامه شما می رسد، تقریباً مطمئناً به یک کتابخانه شخص ثالث نیاز دارید. محبوب ترین انتخاب در گذشته React Beautiful DnD بوده است. از سال 2024، دیگر به روز رسانی منظم دریافت نمی کند.

در آینده، یک جایگزین محکم برای کشیدن و رها کردن، استفاده از DnD Kit است. سبک وزن است، بسیار منعطف است، و مستندات شامل مجموعه ای از نمونه های فوق العاده مفید است که هر موردی را که ممکن است هنگام اجرای کشیدن و رها کردن داشته باشید، پوشش می دهد.

📱 اپلیکیشن های موبایل

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

Expo ابزاری شبیه Vite است ، اما برای ساخت اپلیکیشن‌های React برای موبایل. دارای ویژگی های فوق العاده ای مانند تازه سازی سریع است و با Expo Go می توانید به راحتی پروژه خود را در حین توسعه آن بر روی دستگاه خود اجرا کنید. Expo دریافت کد تلفن همراه شما و همچنین استقرار آن در وب را آسان تر می کند.

این هدف نهایی پروژه‌های دیگری مانند Tamagui است که اگر می‌خواهید یک برنامه بومی واقعی بسازید که بر روی Android، iOS و وب اجرا می‌شود، باید آن را نیز تحلیل کنید.

اگر یک برنامه React دارید که قبلاً برای اجرای آن در مرورگر نوشته‌اید، سریع‌ترین راه برای اجرای آن به‌عنوان یک برنامه بومی و راه‌اندازی آن در فروشگاه App Apple یا Google Play Store استفاده از Capacitor.js است.

🚀 استقرار

راه های بیشتری برای استقرار برنامه React شما وجود دارد. Vercel احتمالاً ساده‌ترین پلتفرم برای استقرار برنامه React شما است ، چه رندر شده توسط مشتری یا ارائه شده توسط سرور. آنها تقریباً از هر چارچوبی که فکرش را بکنید پشتیبانی می کنند، از جمله زبان های غیر جاوا اسکریپت. آنها یک برنامه سرگرمی سخاوتمندانه دارند و رقبای موجود در همان فضا عبارتند از Netlify و Cloudflare Pages.

راه‌اندازی صفحات Cloudflare ممکن است کمی پیچیده‌تر باشد، مخصوصاً اگر یک پروژه React تمام پشته دارید، اما از نظر قیمت، سخاوتمندانه‌ترین آنها در بین همه این گزینه‌ها است. اگر مشکلی برای پرداخت هزینه برای سرور ندارید، می توانید از چیزی مانند Railway یا Render استفاده کنید، که اگر سروری جدا از برنامه React خود دارید، نصب آن عالی است.

✨ شماره 1 کتابخانه برای دانستن

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

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

من به شدت توصیه می کنم زمانی را برای یادگیری TypeScript اختصاص دهید. این ضروری ترین و پرتقاضاترین ابزاری است که باید به عنوان یک توسعه دهنده React بدانید و می تواند کیفیت کلی کد شما را تا حد زیادی بهبود بخشد.

🏆 یک توسعه دهنده React حرفه ای شوید

به دنبال منبع نهایی برای یادگیری React از ابتدا تا انتها هستید؟

✨ معرفی: React Bootcamp

بوت کمپ دارای هر منبعی است تا به شما در موفقیت در React کمک کند:

🎬 200+ ویدیوی عمیق

🕹️ بیش از 100 چالش عملی React

🛠️ 5+ پروژه نمونه کارها چشمگیر

📄 10+ چیت شیت ضروری React

🥾 یک بوت کمپ کامل Next.js

🖼️ مجموعه کاملی از ویدیوهای متحرک

روی زیر کلیک کنید تا React Bootcamp را برای خودتان امتحان کنید.

به React Bootcamp کلیک کنید" width="600" height="400" loading="lazy">
برای شروع کلیک کنید

خبرکاو