سلام، من Muhire Ighor یک توسعه دهنده react هستم، در این وبلاگ در مورد ساختار مناسب یک برنامه React صحبت خواهم کرد.
بسیاری از مردم اغلب با مشکل ساختار ضعیف پایه کد برنامه React خود مواجه می شوند.
من این ساختار را در حدود 7 بخش اصلی خلاصه کرده ام:
صفحات،اجزاء،قلاب ها،کاربردها،طرح بندی ها،داده ها،متن نوشته،سبک ها،دارایی های
از نسخه فعلی react 18.2
هر پروژه عمدتاً در پوشه src پیچیده می شود:
در بالا ساختار فایل واکنش عمومی پیوست شده است
صفحات
در پوشه pages این جایی است که صفحه نهایی را برای نمایش در مرورگر در نقطه پایانی مشخصی قرار می دهید:
به عنوان مثال، ممکن است یک صفحه اصلی در “localhost:3000/” بگویید.
اجزاء
سپس در صفحه اصلی ممکن است مولفه Navbar را داشته باشد
مولفه Navbar به پوشه Components می رود.
چیدمان
ما ممکن است مانند طرح Auth داشته باشیم که در آن از آنجایی که ثبت نام و ورود به سیستم ممکن است همگی دارای پاورقی باشند، بنابراین برای تکرار فایده ای ندارد، می توانیم یک AuthLayout در پوشه layout ایجاد کنیم که در آن با استفاده از جزء خروجی از “react-router-dom”، کامپوننت outlet به ما اجازه می دهد تا صفحات مختلفی را داشته باشیم، اما با برخی از اجزای رایج مطابق با مسیرهایی که در فایل مسیریابی مشخص شده است، مانند مثال من:
می‌توانید مشاهده کنید که ما مؤلفه HomeLayout داریم که می‌توان یک فرزند خاص را با توجه به مسیری که مانند نقطه پایانی اصلی “https://dev.to/” می‌پذیرد، بپذیرد.
ما MainComponent را برای نقطه پایانی “https://dev.to/” خواهیم داشت،
مخاطبین برای نقطه پایانی “/pages/contact”،
و مؤلفه Aboutus برای «/pages/discover…» و سپس مؤلفه Notfoundpage برای هر یک از مسیرهایی که مشخص نشده است.
قلاب
در قلاب ها در بخش ما برخی از توابع سفارشی را در آنجا قرار می دهیم که در بسیاری از اجزای ما استفاده می شوند اما با استفاده از آرگومان های مختلف.
در این بخش توصیه می شود که عملکرد خود را با استفاده از ” شروع کنیداستفاده کنیدکلمه کلیدی به عنوان مثال: “useSignup”
سبک ها
در پوشه** Styles** یکی استایلینگ های css خود را قرار می دهد.
داده ها
در پوشه داده می‌توانید داده‌های ساختگی را قرار دهید تا در صورتی که پشتیبان فعالی نداشته باشد که بتواند داده‌ها را از آن واکشی کند.
Utils
در کاربردها پوشه‌ای که در آنجا چند توابع قرار می‌دهیم تا روی برخی از ورودی‌ها کار کنند، مانند مثال من یک تابع قالب‌بندی نقدی برای قالب‌بندی ارز محصولات اضافه‌شده در سبد خرید ساختم.
