🔵 کوییز #React_js

🟣 موضوع : ‏نمایش پیشرفت بارگذاری (Progress)

🟢 سوال :

‏کدام ویژگی React برای نمایش پیشرفت بارگذاری مناسب است؟

گزینه 1:
useState
گزینه 2:
useEffect
گزینه 3:
useRef
گزینه 4:
useProgress

🔵 گزینه صحیح: 1

🟢 توضیح :

‏`useState` برای مدیریت حالت، از جمله پیشرفت بارگذاری، مناسب است.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏JSX: سینتکس و قوانین نوشتاری

🟢 سوال :

‏در JSX برای بازگرداندن چند عنصر مجزا در یک تابع چه باید کرد؟

گزینه 1:
‏آن‌ها را با کاما جدا کرد
گزینه 2:
‏یک حلقه for روی عناصر نوشت
گزینه 3:
‏داخل یک تگ <span> قرار داد
گزینه 4:
‏از یک عنصر والد یکتا یا Fragment استفاده کرد

🔵 گزینه صحیح: 4

🟢 توضیح :

‏JSX باید یک عنصر ریشه داشته باشد؛ می‌توان از Fragment یا یک عنصر والد یکتا استفاده کرد


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏اجرای کوئری و Mutation در Apollo

🟢 سوال :

‏پارامتر variables در هوک useQuery چه کاربردی دارد؟

گزینه 1:
‏تعیین هدرهای HTTP
گزینه 2:
‏ارسال داده‌های ورودی برای کوئری
گزینه 3:
‏پیکربندی کش
گزینه 4:
‏مدیریت تاریخ انقضا

🔵 گزینه صحیح: 2

🟢 توضیح :

‏متغیرهای query در پارامتر variables به سرور ارسال می‌شوند.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏استفاده از `memo` برای جلوگیری از رندر مجدد

🟢 سوال :

‏کدام عامل باعث رندر مجدد کامپوننت ممویی می‌شود؟

گزینه 1:
‏ارسال callback جدید به عنوان props
گزینه 2:
‏ثابت بودن props
گزینه 3:
‏عدم تغییر state
گزینه 4:
‏عدم استفاده از context

🔵 گزینه صحیح: 1

🟢 توضیح :

‏هر بار ارسال تابع جدید به عنوان props باعث تغییر سطحی و رندر مجدد می‌شود


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏Lifecycle Methods در کامپوننت‌های کلاسی

🟢 سوال :

‏کدام متد lifecycle وظیفه رندر کردن خروجی کامپوننت را بر عهده دارد؟

گزینه 1:
componentDidMount
گزینه 2:
componentWillUnmount
گزینه 3:
render
گزینه 4:
componentDidUpdate

🔵 گزینه صحیح: 3

🟢 توضیح :

‏متد `render` وظیفه برگرداندن JSX که نمایانگر ساختار کامپوننت است را دارد.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏محافظت از مسیرها (Protected Routes)

🟢 سوال :

‏کدام یک از روش‌های زیر برای پیاده‌سازی Protected Routes مناسب‌تر است؟

گزینه 1:
‏استفاده از localStorage
گزینه 2:
‏استفاده از Redux
گزینه 3:
‏استفاده از یک کامپوننت HOC سفارشی یا یک کامپوننت Router سفارشی
گزینه 4:
‏استفاده از cookie ها

🔵 گزینه صحیح: 3

🟢 توضیح :

‏کامپوننت‌های HOC سفارشی یا کامپوننت‌های Router سفارشی، امکان کنترل دقیق‌تری بر اساس شرایط مختلف را فراهم می‌کنند.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏مدیریت درخواست‌های HTTP با Axios

🟢 سوال :

‏برای رهگیری پاسخ‌های دریافتی در Axios از کدام متد استفاده می‌شود؟

گزینه 1:
axios.interceptors.request.use
گزینه 2:
axios.interceptors.use
گزینه 3:
axios.interceptors.response.use
گزینه 4:
axios.use

🔵 گزینه صحیح: 3

🟢 توضیح :

‏برای رهگیری و تغییر پاسخ‌ها قبل از رسیدن به بلوک then از interceptors.response.use استفاده می‌شود.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏استقرار (Deployment) برنامه‌ی React روی Netlify/Vercel

🟢 سوال :

‏برای فعال شدن خودکار HTTPS روی Netlify چه کاری باید انجام شود؟

گزینه 1:
‏خرید جداگانه گواهی SSL
گزینه 2:
‏اتصال یک دامنه (پیش‌فرض یا سفارشی)
گزینه 3:
‏نصب بسته ssl
گزینه 4:
‏اضافه کردن فایل .ssl در ریشه

🔵 گزینه صحیح: 2

🟢 توضیح :

‏با اتصال دامنه، Netlify به‌صورت خودکار SSL را فعال می‌کند.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏بارگذاری پویا (Dynamic Imports)

🟢 سوال :

‏در webpack برای نام‌گذاری chunk های لیزی چه چیزی به import اضافه می‌کنیم؟

گزینه 1:
/* webpackInclude */
گزینه 2:
/* webpackExclude */
گزینه 3:
/* webpackPrefetch */
گزینه 4:
/* webpackChunkName */

🔵 گزینه صحیح: 4

🟢 توضیح :

‏با /* webpackChunkName */ می‌توان اسامی دلخواه برای chunk ها تعیین کرد.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏طراحی Responsive با Media Queries

🟢 سوال :

‏در Tailwind CSS برای تعریف استایل واکنش‌گرا از چه پیشوندی استفاده می‌شود؟

گزینه 1:
md:
گزینه 2:
sm:
گزینه 3:
xl:
گزینه 4:
lg:

🔵 گزینه صحیح: 2

🟢 توضیح :

‏در Tailwind پیشوند sm: برای حالت‌های با حداقل عرض 640px استفاده می‌شود.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏Redirect و Navigate در React Router

🟢 سوال :

‏کدام هوک در React Router v6 برای انجام ریدایرکت به صورت برنامه‌نویسی استفاده می‌شود؟

گزینه 1:
`useHistory`
گزینه 2:
`useRedirect`
گزینه 3:
`useLocation`
گزینه 4:
`useNavigate`

🔵 گزینه صحیح: 4

🟢 توضیح :

‏`useNavigate` یک هوک است که یک تابع `navigate` برمی‌گرداند که می‌توانید برای ریدایرکت کردن برنامه‌نویسی کاربر استفاده کنید.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏React.Fragment و کوتاه‌شده‌ی آن (`<>…</>`)

🟢 سوال :

‏چه زمانی از React.Fragment استفاده می‌کنیم؟

گزینه 1:
‏وقتی نیاز به یک wrapper div داریم
گزینه 2:
‏وقتی می‌خواهیم استایل‌دهی خاصی اعمال کنیم
گزینه 3:
‏وقتی می‌خواهیم بدون افزودن DOM اضافی، چند عنصر را برگردانیم
گزینه 4:
‏وقتی می‌خواهیم state را مدیریت کنیم

🔵 گزینه صحیح: 3

🟢 توضیح :

‏استفاده از Fragment از ایجاد DOM غیرضروری جلوگیری می‌کند و ساختار HTML تمیزتری ایجاد می‌کند.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏Middleware در Redux (مثل Redux Thunk)

🟢 سوال :

‏Middleware ها در Redux در کجای چرخه حیات Action قرار دارند؟

گزینه 1:
‏قبل از dispatch شدن Action به Reducer
گزینه 2:
‏بعد از dispatch شدن Action به Reducer
گزینه 3:
‏به جای Reducer
گزینه 4:
‏همزمان با کامپوننت‌ها

🔵 گزینه صحیح: 1

🟢 توضیح :

‏Middleware ها قبل از رسیدن Action به Reducer وارد عمل می‌شوند و می‌توانند Action را تغییر دهند یا آن را به تعویق بیندازند.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏مقدمه‌ای بر React.js و تاریخچه‌ی آن

🟢 سوال :

‏کدام ابزار برای مدیریت state در React.js استفاده می‌شود؟

گزینه 1:
Angular
گزینه 2:
Vue
گزینه 3:
Redux
گزینه 4:
jQuery

🔵 گزینه صحیح: 3

🟢 توضیح :

‏Redux یک ابزار محبوب برای مدیریت state در برنامه‌های React.js است.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏دسترسی‌پذیری (Accessibility) در کامپوننت‌ها

🟢 سوال :

‏ویژگی `aria-label` برای چه منظوری در React استفاده می شود؟

گزینه 1:
‏ارائه استایل به المان
گزینه 2:
‏افزودن متن جایگزین برای تصاویر
گزینه 3:
‏تعیین نقش یک المان برای screen reader ها
گزینه 4:
‏ایجاد انیمیشن

🔵 گزینه صحیح: 3

🟢 توضیح :

‏ویژگی `aria-label` نقش یک المان را برای screen reader ها تعیین می کند و به کاربران کم بینا کمک می کند.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏استفاده از ESLint و Prettier برای کیفیت کد

🟢 سوال :

‏مزیت استفاده از Prettier نسبت به فرمت‌دهی دستی کد چیست؟

گزینه 1:
‏سریع‌تر و دقیق‌تر است
گزینه 2:
‏کد را امن‌تر می‌کند
گزینه 3:
‏باعث کاهش حجم فایل می‌شود
گزینه 4:
‏باعث افزایش سرعت اجرای کد می‌شود

🔵 گزینه صحیح: 1

🟢 توضیح :

‏Prettier فرمت‌بندی کد را به صورت خودکار و یکنواخت انجام می‌دهد، که سریع‌تر و دقیق‌تر از فرمت‌دهی دستی است.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏پارامترها و کوئری‌استرینگ در React Router

🟢 سوال :

‏کدام گزینه بهترین روش برای ارسال داده‌ها از طریق URL در React Router است؟

گزینه 1:
‏استفاده از پارامترها برای داده‌های ضروری، استفاده از کوئری‌استرینگ برای داده‌های اختیاری
گزینه 2:
‏استفاده از کوئری‌استرینگ برای همه داده‌ها
گزینه 3:
‏استفاده از پارامترها برای همه داده‌ها
گزینه 4:
‏استفاده از state در `Link` component

🔵 گزینه صحیح: 1

🟢 توضیح :

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


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏Suspense برای Data Fetching (آزمایشی)

🟢 سوال :

‏برای مشخص کردن به‌روزرسانی‌های غیرضروری و جلوگیری از بلاک کردن UI، از کدام API استفاده می‌شود؟

گزینه 1:
useEffect
گزینه 2:
startTransition
گزینه 3:
useMemo
گزینه 4:
useReducer

🔵 گزینه صحیح: 2

🟢 توضیح :

‏تابع startTransition آپدیت‌های کم‌اولویت را علامت‌گذاری می‌کند تا UI بلوک نشود.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏طراحی Responsive با Media Queries

🟢 سوال :

‏کدام دستور برای بررسی شرطی در JS هنگام تغییر اندازه صفحه مناسب است؟

گزینه 1:
window.matchMedia('(max-width: 768px)').matches
گزینه 2:
window.onresize === true
گزینه 3:
useResize hook
گزینه 4:
CSS pixelRatio

🔵 گزینه صحیح: 1

🟢 توضیح :

‏window.matchMedia(...).matches برای بررسی انطباق media query در JS استفاده می‌شود.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir

🔵 کوییز #React_js

🟣 موضوع : ‏کامپوننت‌های کلاسی (Class Components)

🟢 سوال :

‏کدام یک از موارد زیر روش صحیح برای به‌روزرسانی state در یک کامپوننت کلاسی است؟

گزینه 1:
this.state = newState
گزینه 2:
this.setState(newState)‎
گزینه 3:
this.updateState(newState)‎
گزینه 4:
this.changeState(newState)‎

🔵 گزینه صحیح: 2

🟢 توضیح :

‏برای به‌روزرسانی state باید از متد `this.setState()` استفاده کرد.


ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

لطفا ما رو به دیگران هم معرفی کنید...

آدرس کانال اصلی :
https://t.me/Tu_24

آدرس وبسایت:
https://Tutorial24.ir