ری‌اکت انتخاب بسیار خوبی برای ساخت اپلیکیشنی زیبا همراه با رابط کاربری تعاملی است.کامپوننت‌های ری‌اکت راه بسیار خوبی برای ایجاد بلاک‌های ایزوله شده، همراه با قابلیت استفاده مجدد برای اپلیکیشن‌های مختلف دیگری هستند.
در حالیکه رویکردهای مختلفی برای ایجاد اپلیکیشن‌های بهتری در ری‌اکت وجود دارد اما استفاده کردن از ابزارهای درست نیز می‌توانند پروسه توسعه را بسیار سریع‌تر بکنند. در اینجا می‌توانید ۵ ابزار مفید را که برای سرعت بخشی به روند توسعه کامپوننت‌های اپلیکیشن‌تان استفاده می‌شود را مشاهده کنید.
1. Bit
Bit یک پلتفرم متن باز برای ساخت اپلیکیشن از طریق کامپوننت‌ها است. با استفاده از Bit می‌توانید کامپوننت‌ها را بدون نیاز به باسازی آن‌ها از اپلیکیشن‌ها و پروژه‌های مختلف استخراج کنید و آن را به اشتراک بگذارید، یا اینکه در یک پروژه دیگر از آن‌ها استفاده نمایید.
کامپوننت‌های به اشتراک گذاری شده از طریق Bit به صورت خودکار قابلیت نصب از طریق NPM/Yarn را پیدا می‌کند. این کار باعث می‌شود که بتوانید از طریق پروژه‌های مختلف کامپوننت های متفاوتی را برای توسعه به خدمت بگیرید.
2. StoryBook/Styleguidist
Storybook and Styleguidist محیط‌های توسعه‌ای هستند که فرایند توسعه رابط کاربری در ری‌اکت را برای شما سریع‌تر می‌کنند.
چند تفاوت مهم نیز در رابطه با این دو ابزار وجود دارد. با در نظر گرفتن این موارد و توانایی ترکیب دو ابزار با همدیگر مطمئنا سیستم توسعه کاملی خواهید داشت.
با استفاده از Storybook شما داستان‌هایی را در فایل جاوااسکریپت‌تان می‌نویسید اما با Styleguidist شما نمونه‌هایی را در یک فایل Markdown قرار میدهید. در حالیکه Storybook تنها یک نوع از یک کامپوننت را هر بار نمایش می‌دهد، Styleguidist می‌تواند به شما انواع مختلفی را از کامپوننت‌های متفاوت نشان دهد. Storybook برای نمایش وضعیت کامپوننت‌ها مناسب است و Styleguidist برای مستندسازی و پیشنمایش کامپوننت‌های متفاوت مفید است.
بیایید هر کدام را به صورت مختصری معرفی کنیم:
Storybook یک محیط توسعه سریع برای کامپوننت‌های رابط کاربری است. این ابزار به شما اجازه می‌دهد تا در یک کتابخانه از کامپوننت‌ها جستجو کنید، وضعیت‌های مختلف هر کدام از کامپوننت‌ها را مشاهده نمایید و به صورت تعاملی کامپوننت‌ها را توسعه داده و تست کنید.
StoryBook به شما کمک می‌کند تا کامپوننت‌ها را به صورت ایزوله شده از اپلیکیشن توسعه دهید، به همین دلیل قابلیت استفاده مجدد و تست‌پذیری کامپوننت بالا می‌رود.
.gif)
می‌توانید کامپوننت‌ها را از طریق کتابخانه‌تان جستجو کنید، از خصوصیات آن بهره ببرید و… . می‌توانید چند مثال کلی راجع به این حالت را در این لینک مشاهده کنید.
استفاده از پلاگین های متفاوت می‌تواند روند توسعه‌تان را حتی سریع‌تر نیز بکند، بنابراین شما می‌توانید سیکل کوتاه‌تری را بین کدنویسی و خروجی بصری منتظر بمانید. StoryBook همچنین از ری‌اکت نیتیو و ویوجیاس پشتیبانی می‌کند.
Styleguidist یک محیط توسعه کامپوننت است که قابلیت hot reloaded و live editing را ارائه می‌دهد.
این ابزار از ES6, Flow و تایپ‌اسکریپت پشتیبانی می‌کند، همچنین به صورت پیشفرض با Create React App کار می‌کند.
3. React devTools
افزونه رسمی React Chrome Devtools به شما این قابلیت را می‌دهد تا با کامپوننت‌های ری‌اکت از طریق ابزارهای توسعه کروم یا همان Chrome Developer Tools تعامل داشته باشید. این مورد برای فایرفاکس نیز موجود است.
با استفاده از React devTools می‌توانید خاصیت‌ها و ضعیت هر کدام از کامپوننت‌ها را بدست بیاورید و آن‌ها را ویرایش کنید. این کار در زمانی اتفاق می‌افتد که شما می‌توانید در ساختار درختی کامپوننت‌ها به راحتی جستجو کنید. این ویژگی به شما این قابلیت را می‌دهد که بتوانید تاثیر تغییرات یک کامپوننت روی دیگر کامپوننت‌ها را مشاهده کنید.
قسمت نوار جستجو ابزار به شما این قابلیت را می‌دهد تا بتوانید نام کامپوننت‌ها را با سرعت بیشتری جستجو کنید و آن‌ها را بدست بیاورید.
4. Redux devTools
این افزونه کروم (و فایرفاکس) یک پکیج توسعه زمان است که ویژگی‌های قدرتمندی را به محیط توسعه Redux می‌آورد. این ابزار به شما اجازه می‌دهد که هر قسمت و هر وضعیت از کنش‌ها و تعاملات در اپلیکیشن را بررسی کنید.
می‌توانید ویژگی‌های این افزونه را با هر ساختاری که وضعیت‌ها را مدیریت می‌کند ترکیب کنید. می‌توانید در این محیط storeهای مختلفی را همراه با نمونه متفاوتی از وضعیت محلی هر کامپوننت ری‌اکت در اختیار داشته باشید.
5. Boilerplates & Kick-Starters
در حقیقت این موارد ابزارهای توسعه نیستند، ما داریم به مواردی اشاره می‌کنیم که با استفاده از آن‌ها می‌توانید اپلیکیشن ری‌اکت خودتان را در سریع‌ترین زمان ممکن پیاده‌سازی کنید. در این حالت در ابتدای کار نیازی به هیچگونه پیکربندی ندارید. در حالیکه کیت‌های Starter بسیاری برای ری‌اکت وجود دارد، اما در زیر می‌توانید بهترین موارد را مشاهده کنید:
Create React App (50k stars)
این مورد محبوب‌ترین کیت برای شروع یک پروژه است. در حقیقت شاید بهینه‌ترین راه نیز باشد. در این کیت پیکربندی‌های (Babel, Webpack و…) نیز پیاده‌سازی شده است، بنابراین در ابتدای کار وقت بسیاری را می‌توانید با این پیکربندی‌ها ذخیره کنید.
برای اینکه اپلیکیشن جدیدی را ایجاد کنید تنها کافی‌ست که دستور زیر را وارد نمایید:
npx create-react-app my-app
این دستور دایرکتوری با نام my-app را در داخل پوشه کنونی ایجاد می‌کند. در داخل دایرکتوری نیز ساختار اولیه پروژه همراه با پیکربندی‌های آن ایجاد می‌شود.
React Boilerplate (18k stars)
React boilerplate کیتی است که توسط Max Stoiber ارائه شده است. در ساخت این کیت سعی شده که کارایی و مقیاس‌پذیری در نظر گرفته شود.
React Slingshot (8.5k stars)
این مورد پروژه عالی است که توسط Cory House ایجاد شده است و در آن به صورت پیشفرض مواردی مانند Babel, hot reloading,testing و… پیاده‌سازی شده است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید