ساختار فایل در React

آیا راه توصیه شده‌ای برای سازماندهی پروژه‌های React وجود دارد؟

ری اکتی نظری در مورد اینکه چگونه فایل ها را درون فولدرها قرار دهید ارائه نکرده است. هرچند روش‌های رایج و پرطرفدارای در این اکوسیستم وجود دارد که می‌توانید آنها را مد نظر داشته باشید.

گروه بندی بر اساس قابلیت‌ها یا مسیرها

یک راه رایج جهت سازماندهی پروژه ها، قرار دادن CSS و JS و تست ها با هم داخل فولدارهای گروه بندی شده بر اساس قابلیت‌ها یا مسیرها می‌باشد.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

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

گروه بندی بر اساس نوع فایل

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

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

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

از سطح بندی زیاد خودداری کنید

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

بیش از حد فکر نکنید

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

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit