♨️ سوال مصاحبه‌ای: چطوری یک کامپوننت ری‌اکت رو memo کنیم؟

در حقیقت memo بهمون این امکان رو میده تا از رندر مجدد (Re-Render) اضافی کامپوننت تا زمانیکه پراپ (props) اون تغییری نکرده، جلوگیری کنیم.

💠 توی کد تصویر بالا، ما کامپوننت Product رو اصطلاحا memoize کردیم. که خروجیش میشه یه کامپوننت جدید به اسم MProduct.

🔆 کامپوننت MProduct با خود کامپوننت Product کاملا یکسانه فقط فرقش اینه که MProduct فقط یه بار رندر میشه و تا زمانی که پراپ هاش تغییر نکنه re-render نمیشه. اما کامپوننت Product هر بار render میشه.
#reactjs #سوال_مصاحبه

Channel | Group | YouTube

♨️ قابلیت CSR (Client Side Rendering) چیست؟
ما در React داده ها را از سرور گرفته و در سمت کلاینت (مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه (Render) استفاده میکنیم.
شما میتوانید برای درک این موضوع به وبسایتی بروید که با React نوشته شده است. اگر سورس کد این وب سایت را از مرورگر خود باز کنید (view page source) میبینید که صفحه هیچ خاصی ندارد. چرا؟ به دلیل اینکه در این گونه وبسایت ها ما صفحات واقعی نداریم بلکه آنها با جاوااسکریپت و به صورت پویا ایجاد میشوند.

قابلیت CSR مزایا و معایبی دارد که باید بسته به نیاز استفاده از آن انتخاب شود.

💠 مزایا:
- عدم ریفرش شدن صفحه و سریع بودن در جابه‌جایی بین صفحات

💠 معایب:
- لودینگ نسبتا طولاتی در هنگام اولین مراجعه کاربر به صفحه
- مشکلات سئو و بهینه نبودن برای موتورهای جستجو

🔆 در صورتی که سوالات یا تجربه‌ای در این زمینه دارید لطفا در گروه با ما به اشتراک بگذارید...

#reactjs #nextjs

Channel | Group | YouTube

♨️ سوال مصاحبه‌ای: چرا نباید در ری‌اکت state رو مستقیما آپدیت کنیم؟
اگه بخواین یه state رو مستقیما آپدیت کنید متوجه میشین کامپوننت شما مجددا رندر (Rerender) نمیشه.
به جای اینکه مستقیما state رو آپدیت کنیم باید از متد setter اون در هوک useState استفاده کنیم. این متدها یک آپدیت در شی state رو برنامه‌ریزی و مدیریت میکنن و وقتی تغییر انجام شد کامپوننت شما re-render خواهد شد.

#reactjs #سوال_مصاحبه‌ای

Channel | Group | YouTube

♨️ یک ویدیو پلیر تمام عیار!
توی html درسته ما video پلیر پیشفرضی داریم که کارمون رو راه میندازه ولی بعضی وقتا نیاز به پلیر حرفه‌ای، جذاب و کاربردی داریم.

پکیج plyr یه ویدیو پلیر خوب برای وب هستش که اکثر نیازهامون رو برطرف میکنه و قابلیت شخصی سازی بسیار زیادی داره.
💢 این پکیج از پرتکل های استریم مثل hls و قابلیت چند زبانی و کلی قابلیت خفن دیگه پشتیبانی میکنه.
برای ریکت و بقیه فریمورک ها هم پلاگین داره😍
برای مشاهده قابلیت ها و استفاده ازش میتونید به گیت‌هابش یه سر بزنید

https://github.com/sampotts/plyr

#reactjs #Tools

Channel | Group | YouTube

♨️ سوال مصاحبه‌ای: در ری‌اکت پارامترهای key چیکار می‌کنن و مزایای استفاده از اونا توی حلقه‌ها چیه؟
پارامتر key یه attribute خاص است وقتی به دردمون میخوره که بخوایم آرایه‌ای از المان ها رو ایجاد کنیم. این پارامتر رو باید به المان پدر به عنوان یه prop پاس بدیم.

این key ها به ری‌اکت در مواقع اضافه،حذف و یا آپدیت کردن المان لیست ها کمک میکنه.

اکثرا از id یا دیتای یونیک به عنوان key استفاده میکنند.
💠 پند شیخ: از ایندکس آرایه برای key استفاده نکنید
#reactjs #سوال_مصاحبه‌ای

Channel | Group | YouTube

♨️ وب‌پک (Webpack) چیست؟ چرا باید ازش استفاده کنیم؟
فرض کنید یه اسکریپتی به پروژه اضافه کردید و توش از کتابخونه جی‌کوئری استفاده شده ولی چون اسکریپتتون رو بالا تر از ایمپورت جی‌کوئری ایمپورت کردید خطا گرفتید و کد اجرا نشده یا مرورگر کد جاوااسکریپت رو کش کرده و تغییراتی که توی کد دادید اعمال نمیشه.
تا حالا شده از یه قابلیت پیشرفته جاوااسکریپت بخواین استفاده کنید ولی نگران این هستین که همه مرورگر ها ساپورتش نکنن؟
حالا هرچی پروژه بزرگتر باشه مدیریت کردن اینجور مسائل هم سختتر میشه

💠 کار وب‌پک باندل (بسته‌بندی) و مدیریت کردن فایل های استایل، عکس، اسکریپت و فونت هستش یکی از مهمترین مزیت هاش پشتیبانی از پلاگین‌های مختلفه که کارهایی مثل مینیفای کردن یا تبدیل فایل های sass و less به css رو براتون انجام میده.

#reactjs #bundler #Tools

🌐 https://webpack.js.org

Channel | Group | YouTube

♨️ ری‌اکت ورژن 19 به صورت بتا منتشر شد!
فعلا به صورت بتا منتشر شده تا بتونن فیدبک بگیرن و پکیج ها خودشون آپدیت کنند و ما هم وقتو از دست نمیدیم و یه نگاهی بهش میکنیم...

💠 کامپوننت سمت سرور
بالاخره بعد از مدت ها انتظار سرور کامپوننت ها به خود ری‌اکت اضافه شدن اگه با Nextjs کار کرده باشید با این ویژگی و مزایاش آشنایید.

💠 امکان استفاده از metadata
یکی از مشکلاتی که ری‌اکت نبود ابزاری مناسب برای metadata ها بوده ولی حالا توی ری‌اکت 19 به خاطر کامپوننت matadata اینکار ساده تر شده.

💠 لود بهینه asset ها
توی نسخه جدید asset های ما یعنی عکس و فونت و... در پشت صحنه بارگذاری میشن و اینطوری سرعت لود ما میره بالا

💠 رفع مشکل re-render های اضافه
در نسخه جدید دیگه لازم نیست از هوک هایی مثل useCallback یا useMemo استفاده کنیم و اینکارو به صورت اتوماتیک خود ری‌اکت انجام میده و مشکل re-render ها تا حدودی حل میشه.

کلی ویژگی و بهینه سازی های دیگه وجود داره که میتونید به مقاله اصلی یه سر بزنید و کامل تر در جریان جزئیات قرار بگیرید.
🌐 https://react.dev/blog/2024/04/25/react-19

#reactjs

Channel | Group | YouTube

♨️ ری‌اکت کوئری (React Query) چیه و چرا باید ازش استفاده کنیم؟
یکی از قدرتمند ترین کتابخونه‌های React هست که به ما در زمینه Data-Fetching (دریافت اطلاعات از سرور) و state management (مدیریت استیت) کمک میکنه البته قابلیت های خیلی خفن دیگه ای مثل کش کردن اطلاعات یا بروزرسانی داده‌های سمت سرور رو هم داره.

💠 مزایای استفاده از React Query
- بهبود performance اپلیکیشن به دلیل کش کردن اطلاعات
- امکان مدیریت خطاها
- سازگاری با NextJs و تایپ اسکریپت
- بروزرسانی اطلاعات موجود در سرور در بکگراند
- استفاده آسان

یکی از اصلی ترین کارهای فرانت‌اند کارها همین data fetching هست و اگه برای اینکار از کتابخونه های حرفه‌ای مثل React query استفاده کنیم هم کارمون ساده تر میشه هم کد بهینه تر خواهد بود.

🔆 اگر شما هم تجربه‌ای در این زمینه دارید در گروه تلگرامی‌مون با ما در میان بذارید...

🌐 https://tanstack.com/query/latest

#reactjs #Tools

Channel | Group | YouTube

♨️ بدون توجه به تجربه طراحی خود، وب سایت های زیبایی بسازید.
این شعار کتابخونه Next UI برای react هست که زیبایی، سرعت و مدرنیته رو در یک قالب ارائه میده
این کتابخونه انیمیشن‌های خیلی نرم و جذابی داره. اکثر کامپوننت هایی که نیاز دارید از دکمه های زیبا گرفته تا modal های ریسپانسیوش در خودش جای داده.
اگه دنبال این نیستید که دونه دونه کامپوننت ها رو خودتون بزنید یا نیاز به کامپوننت های کاستوم ندارید این کتابخونه میتونه روند توسعه رو سریع تر کنه.
با شخصی سازی بالایی که داره میتونید کامپوننت هاش رو باب میل خودتون کنید.

💠 راستی از Next js هم به خوبی پشتیبانی میکنه...

🔅 پس منتظر چی هستید برید یه بار تستش کنید و از قابلیت هاش لذت ببرید.

🌐 https://nextui.org

#reactjs #packages #ui_library

Channel | Group | YouTube

♨️ قابلیت SSG چیست و چه کاربردی دارد؟
قابلیت SSG یا همون Static Site Generation برای صفحاتی که استاتیک هستند و قرار نیست اطلاعاتشون بعدا تغییر کنه مورد استفاده قرار میگیرند. در این صورت در زمان build پروژه اطلاعات رو دریافت و اون صفحه رو به صورت استاتیک برامون ساخته میشه و دیگه لازم نیست هر بار که کاربر صفحه رو باز میکنه اون صفحه ساخته بشه و هم زمان لود و هم فشار به سرور کمتر میشه.
💠 پس باید برای صفحات و پروژه هایی ازش استفاده بشه که محتواش قرار نیس عوض بشه مثل صفحات تماس با ما یا درباره ما. در حالت SSG چون صفحه ما قبلا بیلد شده موتورهای جستجو به راحتی قادر به بررسی صفحات ما خواهند بود.

#nextjs #reactjs

Channel | Group | YouTube

♨️ یه کتابخونه UI همه کاره
یکی از کارهایی که وقت فرانت‌کار ها رو میگیره طراحی کامپوننت هایی مثل Modal ها یا نوتیفیکیشن و امثالهم هستش. حالا راه حل این مشکل استفاده از یه کتابخونه UI هستش تا بتونیم از کامپوننت‌های آماده اون توی پروژه‌مون استفاده کنیم.
همونطور که میدونید کتابخونه های زیادی برای اینکار هست ولی میشه گفت معروف‌ترینش Ant Design هست که شاید بشناسیدش
این کتابخونه تقریبا همه کامپوننت‌های لازم برای طراحی وب رو در اختیار شما قرار میده از button بگیر تا message و input پس میتونید توی پنل‌های ادمین یا هر پروژه دیگه‌ای ازش استفاده کنید.
💠 میتونید تو آدرس زیر مثال‌هایی از کامپوننت‌های زیباش ببینید...👌
🔅 اگر شما هم کتابخونه UI خوبی میشناسید و ازش استفاده میکنید توی کامنت یا گروه بهمون بگید

🌐 https://ant.design/components/overview

#reactjs #nextjs #packages #Tools

Channel | Group | YouTube

♨️ کتابخونه SWR چیست و چه کاربردی دارد؟
این کتابخونه یکی از بهترین و قدرتمندترین کتابخونه‌ها در زمینه Data Fetching هستش که هر روز داره محبوب تر میشه.
خود SWE یه هوک کاربردی داره به اسم useSWR که کار رو ساده و راحت میکنه. قابلیت های زیادی مثل کش کردن داده ها اعتبار سنجی مجدد، pagination، Preloading و ... داره که واقعا برای پروژه های بزرگ و متوسط بسیار کاربردیه

💠 چطوری ازش استفاده کنیم؟

 const { data, error } = useSWR(key, fetcher); 

در کد بالا آرگما اول key هستش که معمولا خود API Endpoint رو میدیم یا هر اسمی که دوست داریم. (با این کلید کش میکنه)

آرگمان دوم fetcher هست که یه فانکشن async میگیره و عملیات دریافت داده رو انجام میده که دو تا مقدار بر میگردونه که اولی data هستش که اطلاعات دریافت شده از سرور رو شما میشه میشه و دومی هم error هستش که اگه اروری باشه مقدار دهی میشه

🔅 شما از چه کتابخونه ای برای Data fetching استفاده میکنید؟ تجربیاتتون رو با ما در کامنت ها یا در گروه به اشتراک بذارید...

🌐 https://swr.vercel.app

#reactjs #nextjs

Channel | Group | YouTube

♨️ پکیج احراز هویت در Next js
یکی از مهمترین مسائل یک سایت بحث امنیت کاربران است اما گاها پیاده سازی روشی مطمئن و امن برای احراز هویت در Next js چالش برانگیز میشود. راه‌های زیادی برای طراحی این بخش وجود دارد که میتوان به صورتی دستی نیز اینکار را انجام داد ولی مستعد خطا و زمانبر خواهد بود.
ما در Next js میتوانیم از پکیج Next Auth استفاده کنیم که بسیاری از پیچیدگی‌های این مسیر مثل سشن ها یا ورود و خروج را سادتر کرده و با راه حل‌های مناسب و یکپارچه‌ای را در دسترس ما قرار میدهد.

🌐 https://next-auth.js.org

#reactjs #Tools #nextjs

Channel | Group | YouTube

♨️ قبول دارین با آیکون‌های درست و مناسب اپ‌ها زیباتر میشن؟ 5200 تا آیکون جذاب!
اگه توی وب‌اپلیکیشن‌ هاتون میخواین از آیکون‌های شکیل و جذاب استفاده کنید میتونید به سایت tabler icons مراجعه کنید که هم پکیج Reactjs داره هم میتونید آیکون ها رو از سایتش با فرمت PNG یا SVG دانلودش کنید. سرچ خیلی خوب و تقریبا هوشمندی داره و با سرچ کلمات کلیدی میتونید آیکون مورد نظر رو پیدا کنید.
🔅 شما از چه پکیج یا سایتی برای آیکون هاتون استفاده میکنید؟ تجربه‌اتون رو با ما در کامنت‌ها یا گروه به اشتراک بذارید

🌐 https://tabler.io/icons

#reactjs #packages #Tools

Channel | Group | YouTube

♨️ چرا در ریکت از مقدار index در متد map برای key استفاده نمیکنیم؟
شاید خیلی جاها دیدید یا خودتون از index به عنوان یک شناسه منحصر به فرد برای key در متد map استفاده کردید ولی اینکار اصلا از هیچ لحاظی درست نیس و ممکنه باگ‌هایی رو به وجود بیاره.
چون اگر ترتیب آیتم ها تغییر کنه (مثلا sort انجام بشه) ری‌اکت توی رندر به مشکل میخوره. بهترین مقدار برای key میتونه مقادیری باشه که بک‌اند میان و یونیک هستند مثل id یا امثالهم.
مثلا میخواین لیست محصولاتی که از بک اند میاد رو توی لیستی نشون بدید میتونید از id محصول برای key استفاده کنید چون یونیک هستش.

🔆 شما چه مقادیری برای key استفاده میکنید؟ اگر توصیه در این زمینه دارید با ما در گروه یا کامنت به اشتراک بذارید...
#reactjs #nextjs

Channel | Group | YouTube

♨️ دام مجازی (Virtual DOM) چیست و چگونه کار میکند؟
خب Virtual DOM یک کپی از DOM اصلی در حافظه است که همیشه با DOM اصلی صفحه همگام سازی میشود که در مرحله فراخوانی تابع رندر و نمایش المنت ها توی صفحه اتفاق میفته.

♨️ به چه دردی میخوره؟ چرا ریکت ازش استفاده میکنه؟
ویرایش DOM اصلی زمان بر هست و باعث کاهش پرفورمنس و بازدهی میشه چون برای هر تغییر کل DOM باید بررسی و تغییر روش انجام بشه اما ری‌اکت میاد روی Virtual DOM تغییراتش رو انجام میده وقتی کارش تموم شد با DOM اصلی مقایسه میکنه و فقط تغییرات رو توی DOM اصلی اعمال میکنه و صفحه آپدیت میشه. اینطوری افت پرفورنسی که گفتم به وجود نمیاد.

#reactjs

Channel | Group | YouTube

♨️ آشنایی با Routing در Next js و چگونگی استفاده از آن
مثل هر فریمورک دیگه‌ای نکست هم سیستم روتینگ مختص به خودش رو داره که قابلیت‌های زیادی رو در اختیارمون قرار میده. سیستم روتینگ نکست فولدربیس هست یعنی روتینگ ما بر اساس شاخه ها و نامگذاری فولدرها انجام میشه.👌

💠 در حالت app router که پیشفرض خود نکست هستش ما یه فولدر به نام app داریم که هر فولدر ساخته شده داخل اون شامل روتینگ ما میشه مثل تصویری که میبینید. داخل هر پوشه اما باید یک فایل با نام page.jsx یا page.tsx داشته باشیم تا هنگام ارسال درخواست به روتینگ مورد نظرمون اون صفحه لود بشه که اینکار خود نکست انجام میده.

💠 داخل این فولدرهای سیستم روتینگ ما میتونیم از فایل‌های از پیش تعریف شده خاصی استفاده کنیم مثل layout.tsx که همونطور که از اسمش پیداست یک دربرگیرنده یا wrapper برای صفحه ما هستش که میتونیم یک لایه تعریف کنیم تا هم در همون صفحه و هم در صفحات داخلی وجود داشته باشه و ما رو از تکرار کد معاف میکنه.

🔅 نظر شما در مورد این سیتسم چیه؟ مزایا و معایبش رو میدونید؟

#nextjs #reactjs

Channel | Group | YouTube

♨️ سیستم Link و Navigating در نکست چگونه کار میکند؟
توی پست آشنایی با Routing رو در Nextjs این سیستم رو بررسی کردیم. حالا باید ببینیم چطوری باید بین صفحاتمون مختلف جا به جا بشیم و چه کارایی میشه در این سیستم انجام داد.

ما سه تا راه برای navigating یا ناوبری یا همون جابه‌جایی داریم:
💠 استفاده از کامپوننت <Link>
💠 استفاده از هوک useRouter (برای کلاینت کامپوننت‌ها)
💠 استفاده از تابع redirect (برای سرور کامپوننت‌ها)

🔆 استفاده از کامپوننت <Link>
در این روش از Link که یک built-in component یا کامپوننت داخلی خود نکست هستش، استفاده میشه. که در واقع در پس‌زمینه از همون تگ a خود html استفاده میکنه که یه سری ویژگی‌های جذابی بهش اضافه کرده مثل قابلیت prefetching که میاد اون route که وارد کردید رو پیش‌بارگذاری یا preload میکنه با اینکار وقتی کاربر اون لینک رو باز میکنه صفحه سریع‌تر بارگذاری خواهد شد (میتونید غیرفعالش کنید)

💢 در تصویر بالا میتونید نمونه کدش رو ببینید.

برای دیدن پست‌های بیشتر در این زمینه و ادامه دار بودنش پست رو 👍 کنید...

#nextjs #reactjs

Channel | Group | YouTube

♨️ هوک useRouter در Nextjs چه کاربردی دارد؟
در پست قبلی با کامپوننت Link در Nextjs آشنا شدیم. امروز میخوایم در مورد هوک useRouter در نکست بدونیم و یادش بگیریم.
این هوک یکی از روش های ناوبری یا navigation در نکست هستش که میتونیم توی کلاینت کامپوننت ها ازش استفاده کنیم.
استفاده ازش هم خیلی آسونه ما میتونیم با متد push که داره کاربر رو به مسیر دلخواه هدایت کنیم یا میتونیم مسیری که الان داخلش هستیم رو بگیریم و هر چیزی که برای سیستم navigating لازمه رو داخل خودش داره.

#reactjs #nextjs

Channel | Group | YouTube

♨️ آموزش ایجاد Loading برای کامپوننت‌ها در Next js

در پست آشنایی با Routing در Nextjs گفتیم که میتونید در سیستم App Router از فایل های از پیش تعریف شده‌ای مثل layout.jsx استفاده کنیم یکی دیگر از این نوع فایل ها loading.jsx می‌باشد. ما این فایل را در کنار فایل page.jsx داشته باشیم. با ایجاد این فایل نکست از قابلیت React Suspense استفاده میکند. با اینکار تا زمانی که اطلاعات ما به صورت کامل از سمت سرور دریافت نشده باشد، محتوای فایل loading.jsx نمایش داده خواهد شد که باعث بهبود سیستم UX و حتی SEO سایت خواهد شد.

🔅 همچین میتونید از این قابلیت روی edge runtimes و Node.js هم استفاده بکنید. اگه در این مورد نیاز به اطلاعت بیشتر داشتید میتونید در کامنت ها یا گروه مطرح کنید.

🌐 منبع (nextjs.org)
#nextjs #reactjs

Channel | Group | YouTube