۲۲ ابزار مهم برای توسعه دهندگان React – فهرست کاربردی

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

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

در این مقاله 22 مورد از ابزارهای مهم برای ساختن اپلیکیشن‌های React را فهرست کرده‌ایم.

1. Webpack Bundle Analyzer

اگر تاکنون کنجکاو شده‌اید که کدام پکیج‌ها یا بخش‌های اپلیکیشن فضای زیادی اشغال می‌کنند می‌توانید از Webpack Bundle Analyzer (+) استفاده کنید. این پکیج به شناسایی فایل‌های خروجی که فضای زیادی اشغال می‌کنند کمک می‌کند.

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

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

در تصویر فوق به وضوح می‌بینید که پکیج‌های PDF اغلب فضای اپلیکیشن را اشغال کرده‌اند. چون بیشترین فضای صفحه را نیز اشغال کرده‌اند. این ابزار بسیار مفید است.

با این حال تصویر فوق گویا نیست. چون می‌توانید گزینه‌های مفید دیگری نیز به این ابزار ارسال کنید تا جزییات بیشتری را ببینید. مثلاً می‌توانید با ارسال گزینه generateStatsFile: true یک فایل استاتیک HTML برای خود ایجاد کنید که در خارج از محیط توسعه است و در ادامه جزییاتش را ببینید.

2. React-Proto

React-Proto (+) یک ابزار ساخت پروتوتایپ برای توسعه‌دهندگان و طراحان است. React-Proto یک نرم‌افزار دسکتاپ است و از این رو باید آن را دانلود و نصب کنید تا بتوانید از آن استفاده کنید. در ادامه تصویری از این نرم‌افزار را می‌بینید:

این اپلیکیشن امکان اعلان props و نوع آن‌ها می‌دهد، می‌توانید محیط خود را در یک درخت مشاهده کنید، یک تصویر پس‌زمینه ایمپورت کنید، آن‌ها را به صورت «باحالت» یا «بی‌حالت» تعریف کنید، کامپوننت‌های والد احتمالی‌شان را تعریف کنید، بزرگنمایی/کوچک‌نمایی کنید و پروتوتایپ خود را به یک پروژه جدید یا موجود اکسپورت کنید. این اپلیکیشن بیشتر مناسب کاربران مک به نظر می‌رسد، اما برای کاربران ویندوز نیز به خوبی کار می‌کند.

زمانی که کار نگاشت اینترفیس‌های کاربری به پایان رسید، می‌توانید آن را به یک پروژه موجود یا جدید اکسپورت بگیرید. اگر گزینه اکسپورت به پروژه موجود را انتخاب کنید و دایرکتوری root آن را انتخاب کنید، به صورت زیر به مسیر /src/components اکسپورت خواهد شد.

در ادامه تصویری از یکی از کامپوننت‌هایی که در این مثال داریم می‌بینید:

React-Proto بیش از 2000 ستاره گیت‌هاب دارد. با این حال این اپلیکیشن به مقداری به‌روزرسانی و کار بیشتر نیاز دارد به خصوص که قلاب‌های React نیز انتشار یافته‌اند. همچنین در صورتی که تصویر پس‌زمینه داشته باشید، امکان بزرگنمایی نمی‌دهد. به بیان دیگر اگر یک تصویر پس‌زمینه را ایمپورت کنید، کوچک‌نمایی کنید و سپس تصویر پس‌زمینه را حذف کنید امکان بزرگنمایی دیگر وجود نخواهد داشت، زیرا دکمه‌های مربوطه از کار می‌افتند.

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

3. Why Did You Render

Why Did You Render (+) به عنوان وصله‌ای برای React است که در مورد مواقعی که می‌توانید از رندر مجدد اجتناب کنید به شما اطلاع می‌دهد. این ابزار بسیار مفید است زیرا نه تنها ما را در مسیر اصلاح‌های عملکردی پروژه‌ها یاری می‌کند، بلکه به درک طرز کار ری‌اکت نیز کمک می‌کند. وقتی هم که درک بهتری از طرز کار ری‌اکت به دست آورید می‌توان توسعه‌دهنده بهتری باشید.

می‌توانید با اعلان یک مشخصه استاتیک اضافی به نام whyDidYouRender با مقدار true، یک شنونده به هر کامپوننت سفارشی الصاق کنید:

پس از این که این کار را انجام دادید، کنسول مرورگر با تعداد زیادی از هشدارهای آزاردهنده پر می‌شود:

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

4. Create React App

همه می‌دانند که Create React App (+) سریع‌ترین روش برای آغاز توسعه یک پروژه React است و قابلیت‌های مدرن را به صورت آماده عرضه می‌کند. دیگر چه چیزی می‌تواند آسان‌تر از اجرای دستور زیر باشد؟!

npx create-react-app <name>

اما آن چیزی که شاید برخی از افراد ندانند این است که می‌توانند با استفاده از این دستور یک پروژه تایپ اسکریپت نیز بسازند. تنها کاری که باید انجام دهید این است که ‎–typescript را به انتهای دستور اضافه کنید:

npx create-react-app <name> — typescript

بدین ترتیب دردسر افزودن دستی تایپ اسکریپت به پروژه‌های ایجادشده با این دستور را نخواهید داشت.

5. React Lifecycle Visualizer

React Lifecycle Visualizer (+) یک پکیج npm برای ردگیری و بصری‌سازی چرخه عمر متدهای کامپوننت‌های دلخواه React است. موقع استفاده از React Lifecycle Visualizer به طور مشابه با Why Did You Render می‌توانید هر کامپوننت را بسته به انتخاب خود فعال کنید و وارد بصری‌سازی چرخه عمر آن شوید:

کد فوق یک بصری‌سازی مانند زیر به دست می‌دهد:

با این حال عیب این ابزار آن است که در حال حاضر تنها برای کامپوننت‌های کلاس کار می‌کند و از این رو هنوز از قلاب‌ها پشتیبانی نمی‌کند.

6. Guppy

Guppy (+) یک ابزار مدیریت اپلیکیشن و task runner آسان برای ری‌اکت است که روی دسکتاپ اجرا می‌شود. به نظر می‌رسد اولویت توسعه‌دهندگان این ابزار کسانی بوده است که به تازگی کار با ری‌اکت را آغاز کرده‌اند. با این حال برای توسعه‌دهندگان پیشرفته نیز می‌تواند مفید باشد.

این ابزار یک واسط کاربری گرافیکی برای بسیاری از وظایف معمولی که توسعه‌دهندگان ری‌اکت به طور مکرر با آن مواجه می‌شوند ارائه می‌کند و شامل ایجاد پروژه‌های جدید، اجرای وظایف و مدیریت وابستگی‌ها می‌شود. پشتیبانی از ویندوز نیز از تاریخ آگوست 2018 اضافه شده است و از این رو می‌توانید مطمئن باشید که چند پلتفرمی است. ظاهر آن مانند تصویر زیر است:

7. react-testing-library

react-testing-library (+) بسیار محبوب است زیرا زمانی که تست‌های unit را می‌نویسید بسیار به کار می‌آید. این پکیج برخی ابزارهای کاربردی تست React DOM ارائه می‌کند که استفاده از رویه‌های مناسب تست را تشویق می‌کنند. این راه‌حل با هدف حل مشکل تست کردن جزییات پیاده‌سازی ارائه شده است و به جای آن به تست کردن ورودی/خروجی کامپوننت‌های ری‌اکت چنان که کاربر آن‌ها را خواهد دید، می‌پردازیم. جزییات پیاده‌سازی تست یک روش مؤثر برای تضمین این نکته است که اپلیکیشن مطابق انتظار کار می‌کند.

فیلم آموزش تست نویسی در ری اکت React + پیاده سازی و پروژه در فرادرس

کلیک کنید

بدین ترتیب می‌توانیم مطمئن باشیم که داده‌های مورد نیاز کامپوننت را چگونه به دست می‌آوریم، کدام متد را استفاده می‌کنیم و مواردی از این دست. با این حال اگر روش پیاده‌سازی را تغییر دهید و به یک پایگاه داده متفاوت اشاره کنید، تست‌های unit شکست می‌خورند، زیرا جزییات پیاده‌سازی با منطق اپلیکیشن توأم هستند. این مشکلی است که کتابخانه react-testing-library حل می‌کند، زیرا در شرایط ایده‌آل می‌خواهیم اینترفیس کاربر عملیاتی شده و در نهایت به صورت صحیحی ارائه شود. این که داده‌ها چگونه در اختیار این کامپوننت‌ها قرار می‌گیرند تا زمانی که خروجی مورد نظر را ارائه کنند، اهمیت چندانی ندارند. در کد مثال زیر می‌توان تست‌ها را با استفاده از این کتابخانه پیاده کرد:

8. React Developer Tools

React Developer Tools (+) یک اکستنشن است که امکان بازرسی سلسله‌مراتب کامپوننت‌های ری‌اکت را در بخش ابزارهای توسعه‌دهنده مرورگر کروم و همچنین فایرفاکس فراهم می‌سازد. این مشهورترین اکستنشن در فهرست ما محسوب می‌شود و یکی از مفیدترین ابزارها نیز محسوب می‌شود، زیرا توسعه‌دهندگان ری‌اکت می‌توانند به وسیله آن اپلیکیشن‌های خود را دیباگ کنند.

9. Bit

Bit (+) یک جایگزین مناسب برای استفاده از کتابخانه‌های کامپوننت مانند Material-UI یا Semantic UI React است. Bit امکان بررسی هزاران کامپوننت اوپن‌سورس را فراهم می‌کند و می‌توانید از آن‌ها برای ساخت پروژه‌های خود استفاده کنید.

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

10. Storybook

اگر با Storybook (+) آشنا نیستید پیشنهاد می‌کنیم در صورتی که می‌خواهید تجربه آسان‌تری در زمان ساخت کامپوننت‌های UI داشته باشید شروع به استفاده از آن بکنید. این ابزار یک سرور توسعه زنده آغاز می‌کند که از بارگذاری مجدد درجا پشتیبانی می‌کند و می‌توانید کامپوننت‌های ری‌اکت خود را به صورت همزمان و مستقل از هم توسعه دهید. نکته مناسب دیگر در مورد این ابزار این است که می‌توانید روی افزونه‌های موجود کنونی نیز از آن استفاده کنید تا تجربه توسعه خود را به سطح کاملاً جدیدی ارتقا دهید.

برای نمونه با بهره‌گیری از پکیج Storybook README (+) می‌توانید مستندات README را در زمان توسعه کامپوننت‌های ری‌اکت برای محیط پروداکشن در همان صفحه ایجاد کنید. این وضعیت برای ارائه به عنوان یک صفحه مستندات نرمال کفایت می‌کند:

11. React Sight

آیا تاکنون خواسته‌اید اپلیکیشنتان مانند یک فلوچارت به نظر برسد؟ در این صورت React Sight (+) امکان بصری‌سازی اپلیکیشن‌های ری‌اکت را با ارائه یک درخت سلسله‌مراتب کامپوننتی زنده از کل اپلیکیشن فراهم می‌سازد.

این کتابخانه از react-router, Redux و همچنین React Fiber نیز پشتیبانی می‌کند. با بهره‌گیری از این ابزار می‌توانید روی گره‌هایی حرکت کنید که به کامپوننت‌های مستقیماً مرتبط با آن‌ها لینک شده‌اند. اگر در دیدن نتایج دشواری دارید می‌توانید عبارت chrome:extensions را در نوار آدرس مرورگر کروم وارد کرده و به دنبال کادر React Sight box بگردید و روی سوئیچ Allow access to file URLs مانند تصویر زیر کلیک کنید:

12. React Cosmos

React Cosmos (+) یک ابزار توسعه برای ایجاد کامپوننت‌های ری‌اکت با قابلیت استفاده مجدد است. این ابزار پروژه را به دنبال کامپوننت‌ها اسکن کرده و امکان کارهای زیر را فراهم می‌سازد:

1. رندر کردن کامپوننت‌ها با هر ترکیبی از props ،context و state
2. شبیه‌سازی هر وابستگی خارجی (مانند پاسخ‌های API ،localStorage و غیره)
3. مشاهده تغییرات حالت اپلیکیشن به صورت زنده و در زمان تأمل با وهله‌های اجرایی

13. CodeSandbox

CodeSandbox مجموعه‌ای از بهترین ابزارهای موجود برای افزایش سرعت کار با اپلیکیشن‌های React است. این ابزار به نام CodeSandbox (+) یک ادیتور آنلاین است که امکان ایجاد وب‌اپلیکیشن‌ها را از پروتوتایپ تا توزیع فراهم کرده و همه این مراحل روی وب‌سایت انجام می‌گیرد.

CodeSandbox در مراحل ابتدایی تنها از ری‌اکت پشتیانی می‌کرد، اما اینک به قالب‌های استارتر دیگری برای کتابخانه‌هایی مانند Vue و انگولار نیز بسط یافته است. این ابزار همچنین از طریق ایجاد پروژه‌هایی با تولیدکننده‌های سایت استاتیک رایج مانند Gatsby یا Next.js از آغاز سریع پروژه‌های وب React پشتیبانی می‌کند. در مورد CodeSandbox می‌توان به نکات عالی زیادی اشاره کرد، اما شاید مهم‌ترین نکته این باشد که به طرز شگفت‌انگیزی فعال است.

اگر می‌خواهید برای راحتی کار خود به دنبال پروژه‌های آماده بگردید، می‌توانید روی explore کلیک کنید تا به نمونه کدهای زیادی که به تسهیل ساخت پروژه‌هایتان کمک می‌کنند دسترسی بیابید.

زمانی که شروع به ویرایش یک پروژه بکنید، به زودی می‌فهمید که در واقع مشغول استفاده از VS Code هستید که یک ادیتور قدرتمند است. در مورد CodeSandbox می‌توان یک مقاله کامل نوشت. بنابراین در این بخش به همین مقدار توضیحات بسنده می‌کنیم.

14. React Bits

React Bits (+) مجموعه‌ای از الگوها، تکنیک‌ها، نکات و ترفندهای ری‌اکت است که همگی در قالب شبه سند آنلاین نوشته شده‌اند. به این ترتیب می‌توان به سرعت به الگوها و تکنیک‌های طراحی مختلف و همچنین ضد الگوها، استایل‌بندی، نسخه‌های UX و دیگر موارد مفید مرتبط با ری‌اکت دسترسی یافت و همه این‌ها در یک زبانه مرورگر صورت می‌گیرند. این ابزار یک ریپوی گیت‌هاب (+) نیز دارد که در حال حاضر 10370 ستاره دارد.

برخی مثال‌ها شامل مفاهیمی از قبیل پراکسی کردن props، ترکیب‌بندی برای مدیریت UX-های مختلف در سناریوهای گوناگون و حتی افشای برخی gotcha-هایی است که هر توسعه‌دهنده React باید از آن‌ها مطلع باشد. صفحه‌های این وب‌سایت به صورت زیر هستند. چنان که می‌بینید در منوی کناری سمت چپ اطلاعات زیادی وجود دارند:

15. Folderize

Folderize (+) یک اکستنشن VS Code است که به تازگی انتشار یافته است. این اکستنشن امکان تبدیل یک فایل کامپوننت به ساختار پوشه کامپوننت را فراهم می‌سازد. بدین ترتیب کامپوننت ری‌اکت شما همچنان یک کامپوننت باقی خواهد ماند، اما به یک دایرکتوری تبدیل می‌شود. برای نمونه فرض کنید می‌خواهیم یک کامپوننت ری‌اکت بسازیم که فایل‌ها را به عنوان props می‌گیرد تا اطلاعات مفیدی از قبیل متا دیتای آن‌ها را نمایش دهد.

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

بدین ترتیب باید FileView.js و FileMetadata.js را در یک ساختار دایرکتوری مانند Apples قرار دهیم. به خصوص اگر می‌خواهیم کامپوننت‌های دیگر به فایل‌ها مانند FileScanner.js اضافه کنیم. این کاری است که Folderize انجام می‌دهد و می‌توانید ساختاری مانند زیر به دست آورید:

16. React Starter Projects

این ابزار (+) یک لیست از پروژه‌های آغازین ری‌اکت است که می‌توانید همه آن‌ها را در یک صفحه ببینید. بنابراین اگر از آن نوع از افراد هستید که علاقه‌مند هستید لیست عظیمی از گزینه‌ها را همزمان و یک جا ببینید این وب‌سایت مناسب شما است.

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

17. Highlight Updates

Highlight Updates (+) یک ابزار بسیار مهم برای هر کس است و باید در کیت ابزار هر توسعه‌دهنده‌ای وجود داشته باشد. Highlight Updates یکی از قابلیت‌های اکستنشن React DevTools است که با استفاده از آن می‌توانید ببینید کدام کامپوننت‌ها در صفحه به صورت غیرضروری رندر مجدد می‌شوند:

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

18. React Diff Viewer

React Diff Viewer (+) یک نمایشگر تفاوت متنی ساده و زیبا است که با استفاده از Diff و React ساخته شده است. این ابزار از ویژگی‌هایی همچون افراز صفحه نمایش، نمایش درون‌خطی، تفاوت کلمات، هایلایت کردن خطوط و غیره پشتیانی می‌کند. این ابزار در مواردی که بخواهید این قابلیت را در یادداشت‌های خود وارد کرده و آن را برای اپلیکیشن خود سفارشی‌سازی کنید مفید خواهد بود.

19. JS.coach

این وب‌سایت (+) به طور عمده برای به دست آوردن موارد مرتبط با React به کار می‌آید. در این وب‌سایت تقریباً هر چیزی که برای کار خود نیاز دارید را پیدا کنید. JS.coach یک وب سایت سریع و ساده و با به‌روزرسانی مرتب است که در زمان گشتن به دنبال مواد مختلف برای پروژه‌تان شما را ناامید نمی‌کند. زبانه React VR که اخیراً اضافه شده است، شگفت‌انگیز است.

20. Awesome React

Awesome React (+) یک ریپازیتوری اوپن‌سورس گیت‌هاب است که فهرستی از موارد جالب مرتبط با ری‌اکت را ارائه می‌کند. حتی اگر به هیچ وب‌سایت دیگری مراجعه نکنید هم تنها با استفاده از همین صفحه می‌توانید کلاً ری‌اکت را بیاموزید. همچنین منابع خوب زیادی در این صفحه مشاهده می‌کنید که مطمئناً به ساخت اپلیکیشن‌های عالی ری‌اکت کمک می‌کنند.

21. Proton Native

Proton Native (+) یک محیط ری‌اکت برای ساخت اپلیکیشن‌های دسکتاپ چند پلتفرمی در اختیار شما قرار می‌دهد. این محیط معادل Electron است و برخی ویژگی‌های جالب شامل موارد زیر دارد:

• ساختار مشابه ری‌اکت نیتیو دارد.
• با کتابخانه‌های موجود ری‌اکت مانند ریداکس کار می‌کند.
• چند پلتفرمی است.
• کامپوننت‌های نیتیو دارد و بنابراین دیگر نیازی به الکترون ندارید.
• با همه پکیج‌های Node.js سازگار است.

اگر به یادگیری آن علاقه‌مند شدید، می‌توانید به صفحه مستنداتش (+) مراجعه کنید.

22. Devhints React.js Cheatsheet

این وب‌سایت (+) یک راهنمای سریع خوب برای یادگیری ری‌اکت محسوب می‌شود، اما متأسفانه به بحث قلاب‌های ری‌اکت نپرداخته است.

سخن پایانی

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

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش React.js در کمتر از ۵ دقیقه — از صفر تا صد
• ری اکت (React) — راهنمای جامع برای شروع به کار
• تعریف حلقه روی آرایه ها در React — راهنمای کاربردی

==