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

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

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

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

1. Webpack Bundle Analyzer

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

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

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

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

2. React-Proto

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

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

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

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

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

3. Why Did You Render

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

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

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

4. Create React App

npx create-react-app <name>

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

npx create-react-app <name> — typescript

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

5. React Lifecycle Visualizer

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

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

6. Guppy

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

7. react-testing-library

فیلم آموزش تست‌نویسی در React در فرادرس

کلیک کنید

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

8. React Developer Tools

9. Bit

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

10. Storybook

11. React Sight

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

12. React Cosmos

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

13. CodeSandbox

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

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

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

14. React Bits

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

15. Folderize

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

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

16. React Starter Projects

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

17. Highlight Updates

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

18. React Diff Viewer

19. JS.coach

20. Awesome React

21. Proton Native

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

22. Devhints React.js Cheatsheet

سخن پایانی

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

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

کلیک کنید

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

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

==