در دنیای توسعهی فرانتاند مدرن، فقط دانستن React کافی نیست؛ آنچه یک پروژهی واقعی را قابلمدیریت، مقیاسپذیر و حرفهای میکند، نحوهی مدیریت state است.
در این قسمت از دوره Redux Toolkit، مسیر را از پایه و بهدرستی شروع میکنید. ابتدا با Vite بهعنوان سریعترین و استانداردترین ابزار راهاندازی پروژههای React آشنا میشوید، سپس React را با استفاده از آن نصب و اجرا میکنید. بعد از آمادهسازی پروژه، وارد دنیای Redux Toolkit میشوید تا مدیریت state را به شکل اصولی، تمیز و مطابق با استانداردهای روز پیادهسازی کنید.
هدف این دوره، ساختن یک دید عملی و واقعی از Redux است؛ بهگونهای که بعد از پایان آن، بتوانید state پروژههای React را با اطمینان و ساختار درست مدیریت کنید.
نصب Redux Toolkit
برای شروع، کافی است در گوگل عبارت Redux Toolkit را جستوجو کنید. با ورود به وبسایت رسمی این ابزار، در صفحه اصلی گزینه Get Started را انتخاب میکنیم تا وارد مستندات اصلی (Documentation) شویم. در صفحه مستندات، مجموعهای از ویژگیهای Redux Toolkit معرفی شده است که بهصورت کلی با آنها آشنا هستیم. در این مرحله، بدون ورود به جزئیات، به سراغ بخش نصب (Installation) میرویم.
در بخش نصب، مستندات توضیح میدهند که میتوان از Create React App برای راهاندازی پروژه استفاده کرد. این روش به شما امکان میدهد تا بهصورت پیشفرض، تنظیمات اولیه Redux انجام شده و یک تمپلیت آماده Redux در اختیار داشته باشید.
برای این کار، میتوانید هنگام ایجاد پروژه، از تمپلیت Redux استفاده کنید. کافی است در دستور ایجاد پروژه، گزینه مربوط به Redux را مشخص کنید تا تنظیمات و کانفیگهای اولیه Redux Toolkit بهصورت خودکار برای شما انجام شوند.
معرفی Vite برای نصب React
نکتهای که در این قسمت به آن توجه میکنیم این است که این بار، برای نصب React از Vite استفاده میکنیم.
اگر عبارت Vite را در گوگل جستوجو کنید، وارد وبسایت رسمی این ابزار میشوید. Vite قرار است بهعنوان ابزاری در اختیار ما باشد تا فرآیند توسعه را سریعتر و سادهتر انجام دهیم. همانطور که در ادامه و هنگام نصب React مشاهده میکنید، این ابزار سرعت بسیار بالایی در راهاندازی پروژه دارد.
Vite در معرفی رسمی خود، بهعنوان یک Next Generation Frontend Tooling شناخته میشود؛ به این معنا که یک ابزار مدرن برای توسعه فرانتاند است که برای آینده طراحی شده است.
این ابزار، یک محیط توسعه (Development Environment) در اختیار ما قرار میدهد که کمک میکند پروژهها را با سرعت بالا ایجاد کرده و فرآیند توسعه را به شکل بهینهتری پیش ببریم.
در بخشهای بعدی سایت، مجموعهای از ویژگیها (Features) و پلاگینهای مختلف Vite معرفی شدهاند. پیشنهاد میشود در ادامه، خودتان وارد این بخشها شوید و با قابلیتهای متنوع این ابزار بیشتر آشنا شوید.
در این آموزش، تمرکز ما فعلاً روی راهاندازی پروژه است.
در این مرحله، به سراغ نصب پروژه با کمک Vite میرویم. در صفحه اصلی سایت، با انتخاب گزینه Get Started وارد صفحه مربوط به شروع کار میشویم. در این صفحه مشاهده میکنید که Vite از تمپلیتها و فریمورکهای مختلفی پشتیبانی میکند؛ از جمله:
- React
- Vue
- Preact
- و سایر فریمورکها
نصب React با استفاده از Vite
در ادامه مستندات، نحوه نصب یک پروژه جدید توضیح داده شده است. در این بخش مشخص میشود که برای ایجاد یک برنامه جدید، باید از دستور معرفیشده استفاده کنیم که در ادامه آن را اجرا خواهیم کرد.
در این مرحله، میتوانید پس از دستور نصب، عبارت template-- را اضافه کرده و تمپلیت موردنظر خود را مشخص کنید.
روش دیگر این است که خط اول دستور را کپی کرده و وارد پوشهای شوید که قصد دارید پروژه در آن ایجاد شود. برای دسترسی به ترمینال:
- میتوانید از CMD استفاده کرده و به مسیر موردنظر پروژه بروید.
- یا اگر از ویندوز 11 استفاده میکنید، داخل پوشه موردنظر راستکلیک کرده و گزینه Open in Terminal / Open Command Window Here را انتخاب کنید تا ترمینال مستقیماً در همان مسیر باز شود.
پس از اجرای دستور و انجام عمل Paste، سیستم از شما میخواهد نام پروژه را وارد کنید. در این آموزش، نام پروژه را SokanAcademy قرار میدهیم. با فشردن کلید Enter، مجموعهای از گزینهها نمایش داده میشود و از شما میپرسد که قصد دارید از کدام فریمورک استفاده کنید. با استفاده از کلیدهای بالا و پایین کیبورد، میتوانید گزینه موردنظر را انتخاب کنید.
پس از انتخاب React، از شما پرسیده میشود که پروژه با JavaScript ایجاد شود یا TypeScript.در این مرحله، گزینه JavaScript را انتخاب میکنیم.
پس از تأیید این انتخاب، مشاهده میکنید که پروژه با چه سرعت بالایی ساخته میشود.
بعد از ایجاد پروژه، وارد پوشه آن میشویم. در ادامه، مراحل لازم بهصورت خودکار نمایش داده میشوند. در این مرحله، باید دستور npm install را اجرا کنیم تا تمام پکیجهای موردنیاز در فایل package.json نصب شوند.
اجرای پروژه React
پس از اتمام نصب پکیجها، بهراحتی میتوانیم پروژه را اجرا کنیم. برای این کار، دستور زیر را اجرا میکنیم:
npm run dev
در خروجی مشاهده میکنیم که پروژه با استفاده از Vite نسخه 3.1.4 و در حدود ۵۰۰ میلیثانیه اجرا شده است. این موضوع نشان میدهد که Vite با چه سرعت بالایی محیط توسعه را برای ما آماده میکند و پروژه React بدون دردسر اجرا میشود.
حتماً مستندات رسمی Vite را مطالعه کنید. هدف ما در این بخش، آشنایی شما با این ابزار قدرتمند است و در ادامه آموزش نیز بیشتر با آن کار خواهیم کرد.
نصب Redux Toolkit و React Redux
در ادامه، دستور مربوط به نصب Redux Toolkit را از مستندات کپی کرده و وارد پوشه پروژه میشویم. سپس ترمینال را در همان مسیر باز کرده و دستور را اجرا میکنیم.در این مرحله، توجه داشته باشید که Redux Toolkit فرآیند کار با Redux را بسیار سادهتر کرده است؛ اما در کنار آن، به پکیج اصلی Redux و همچنین React Redux نیز نیاز داریم. بنابراین، هر دو پکیج زیر را نصب میکنیم
- Redux Toolkit
- React Redux
Redux Toolkit استفاده از Redux را سادهتر کرده و تمام قابلیتهای موردنیاز را در اختیار ما قرار میدهد. در ادامه پروژه نیز بیشتر ایمپورتهای ما از React Redux خواهد بود.
با فشردن کلید Enter، فرآیند نصب آغاز میشود و پس از اتمام، مشاهده میکنیم که پکیجها با موفقیت نصب شدهاند.
در ادامه با این برنامه کار خواهیم کرد.