frontend-interview-questions

1. چه بهترین روش‌هایی را هنگام نوشتن کد React در یک محیط تیمی دنبال می‌کنید؟

• سازمان‌دهی کامپوننت‌ها: من از ساختار پوشه مبتنی بر ویژگی (مثل src/features/Todo/) برای گروه‌بندی کامپوننت‌ها، استایل‌ها و تست‌های مرتبط استفاده می‌کنم که مدولاریتی و قابلیت نگهداری را بهبود می‌بخشد.
• نام‌گذاری کامپوننت‌ها: استفاده از نام‌های واضح و توصیفی برای کامپوننت‌ها و هوک‌ها (UserCard، useFetchUser)، و پیروی از PascalCase برای کامپوننت‌ها و camelCase برای متغیرها/توابع.
• مدیریت وضعیت: وضعیت را تا حد ممکن محلی نگه می‌دارم. برای وضعیت جهانی، ابزارهایی مثل Redux Toolkit، Zustand یا React Context را بر اساس پیچیدگی انتخاب می‌کنم.
• اجتناب از Prop Drilling: برای کامپوننت‌های عمیقاً تودرتو، منطق را به زمینه یا هوک‌های سفارشی استخراج می‌کنم.
• هوک‌ها و استفاده مجدد از منطق: منطق تجاری به هوک‌های سفارشی (useForm، useDebounce) منتقل می‌شود برای استفاده مجدد و تست‌پذیری.
• فرهنگ بررسی کد: من از بررسی‌های منظم PR با لینتینگ/تست‌های اجباری CI برای اطمینان از کیفیت کد و هم‌راستایی تیم حمایت می‌کنم.

2. چگونه اطمینان حاصل می‌کنید که کد React شما تمیز، خوانا و مطابق با استانداردهای ثابت است؟

رویکرد:

• لینتینگ و قالب‌بندی: من از ESLint (با پیکربندی Airbnb یا سفارشی) و Prettier در جریان کاری توسعه (CI + IDE) استفاده می‌کنم تا سینتکس و قالب‌بندی ثابت را اعمال کنم.
• تایپ‌اسکریپت: من به شدت تایپ‌اسکریپت را ترجیح می‌دهم تا وضوح را بهبود بخشیده و از باگ‌های زمان اجرا از طریق تایپ‌بندی استاتیک جلوگیری کنم.

کامپوننت‌های تابعی و هوک‌ها: کامپوننت‌ها را به‌عنوان توابع خالص می‌نویسم و از کامپوننت‌های کلاسی جز در موارد ضروری برای کد قدیمی اجتناب می‌کنم.

• اصل مسئولیت واحد: هر کامپوننت یک نگرانی واحد را مدیریت می‌کند. اگر کامپوننت بیش از حد بزرگ شود، رابط کاربری/منطق را به زیرکامپوننت‌ها یا هوک‌های سفارشی بازسازی می‌کنم.
• نام‌گذاری و معناشناسی: نام‌گذاری توصیفی، HTML معنایی (<section>، <article>) و ویژگی‌های ARIA برای دسترسی‌پذیری.

مثال:

const UserList = ({ users }: { users: User[] }) => (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

تمیز، تایپ‌شده و ساده.

3. چگونه کنترل نسخه و همکاری در یک پروژه React با چندین توسعه‌دهنده را مدیریت می‌کنید؟

روش‌ها:

• جریان کاری Git: من از Git Flow یا GitHub Flow پیروی می‌کنم، با شاخه‌های ویژگی کوتاه‌مدت (feature/login-page)، درخواست‌های کشیدن و بررسی‌های کد.
• محافظت از شاخه و CI: اعمال بررسی‌های PR، تست‌های خودکار و لینتینگ قبل از ادغام از طریق ابزارهایی مثل GitHub Actions یا CircleCI.
• مالکیت کد: کامپوننت‌ها و ویژگی‌ها توسط توسعه‌دهندگان یا گروه‌های خاص مالکیت می‌شوند. مالکیت ابهام را کاهش داده و بررسی‌ها را تسریع می‌کند.
• مستندسازی: APIهای کامپوننت و الگوهای استفاده را از طریق Storybook یا مستندات داخلی مستند می‌کنم تا همکاری و ورود به تیم را آسان کنم.
• تعارض‌های ادغام: به‌طور منظم از main یا develop pull و rebase می‌کنم تا از تعارض‌های بزرگ و شگفتی‌های ادغام جلوگیری شود.

4. چگونه با آخرین تغییرات در React و توسعه فرانت‌اند به‌روز می‌مانید؟

استراتژی‌ها:

• کانال‌های رسمی: دنبال کردن وبلاگ React، بحث‌های GitHub و RFCها برای ویژگی‌های آینده و جهت‌گیری (مثل React Server Components).
• خبرنامه‌های گزینش‌شده: اشتراک در React Status، Frontend Focus و JavaScript Weekly.
• جوامع: مشارکت در توییتر توسعه‌دهندگان، Stack Overflow و Reddit برای به‌روز ماندن با ابزارهای اکوسیستم (مثل Vite، TanStack، SWR).
• آزمایش: من به‌طور منظم با کتابخانه‌ها یا الگوهای جدید در پروژه‌های جانبی یا آزمایش‌های Codesandbox نمونه‌سازی می‌کنم.
• کنفرانس‌ها و سخنرانی‌ها: تماشای سخنرانی‌ها از ReactConf، JSConf و ملاقات‌های محلی. همچنین گاهی اوقات یافته‌ها را به تیم ارائه می‌دهم.

5. چگونه اطمینان حاصل می‌کنید که کامپوننت‌های React شما قابل استفاده مجدد و قابل نگهداری هستند؟

تکنیک‌های کلیدی:

• جداسازی نگرانی‌ها: من کامپوننت‌های نمایشی (احمق) و کانتینر (هوشمند) را جدا می‌کنم. کامپوننت‌های نمایشی تمام داده‌ها را از طریق پراپ‌ها دریافت می‌کنند.
• هوک‌های سفارشی: منطق مشترک را به هوک‌ها استخراج می‌کنم. مثال: useFormValidation، usePagination و غیره.
• پراپ‌های ترکیبی: استفاده از پراپ‌هایی مثل renderItem، children یا as برای انعطاف‌پذیر کردن کامپوننت‌ها.

مثال:

const List = ({
  items,
  renderItem,
}: {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}) => <ul>{items.map(renderItem)}</ul>;

• پراپ تایپ‌ها و پیش‌فرض‌ها: استفاده از رابط‌های تایپ‌اسکریپت و پیش‌فرض‌های منطقی برای خود-مستندسازی کامپوننت‌ها.
• اجتناب از انتزاع بیش از حد: کامپوننت‌ها فقط زمانی باید عمومی شوند که یک مورد استفاده مجدد واضح وجود داشته باشد، و از عمومی‌سازی زودهنگام جلوگیری می‌کنم.
• تست: هر کامپوننت قابل استفاده مجدد با تست‌های واحد با استفاده از React Testing Library پوشش داده می‌شود تا اطمینان حاصل شود که در موارد مختلف به‌درستی کار می‌کند.

This site is open source. Improve this page.