تمام لایف‌سایکل‌های ریکت در یک نگاه.
اگر ریکت کار میکنید پیشنهاد میکنم به این یه سایت حتما یه سر بزنید. روی بخش‌های مختلفش هم میشه کلیک کرد.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

توضیحات همراه با مثال هم اینجا می‌تونید پیدا کنید:
https://www.w3schools.com/react/react_class.asp

#react #webprogramming #js @alithecodeguy

کامپوننت Stopwatch در React با استفاده از Ref

#react #ref

سوال مصاحبه‌ای ریکت:
یک کامپوننت در چه شرایطی ری‌رندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy

میدونیم که استیت آپدیت‌ها توی ریکت آسینک هستن. یعنی نمی‌تونیم مطمن باشیم که چه زمانی انجام میشن. به عبارت دیگه اگر دو خط کد بزنید که یکیش استیت آپدیت باشه نمیتونید مطمن بشید که کدوم خط اول انجام میشه.
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه می‌تونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.

#tip #react #js @alithecodeguy

اگر از react-router استفاده میکنید ، الزامی وجود نداره که حتما از کانتکست خود ریکت استفاده کنید.
می‌تونید از کانتکست ریکت روتر استفاده کنید.
لینک:
https://reactrouter.com/en/main/hooks/use-outlet-context

#react #tip @alithecodeguy

توی این ویدیو با هم میبینیم با استفاده از ویژگی‌های خود swr چطوری میشه سرویس کال‌ها رو‌ طوری نوشت که دیتاهاشونو بتونیم توی همدیگه استفاده کنیم بدون اینکه خطا بخوریم.

#react #nextjs #swr
@alithecodeguy

https://youtu.be/rYt-S_iGuFI?si=Vu5R1TtrJgoXZiKG

پاس دادن استایل‌ها به عنوان پروپز در ریکت با تایپ‌اسکریپت
#react #ts #nextjs #js

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

لینک:
https://lnkd.in/dU6T2ehe

#zustand #redux #react #js #programming

احتمالا شما هم برای نمایش نوتیفیکیشن از react-toastify استفاده می‌کنید و احتمالا دیدید که نوتیف تکراری چه قدر روی مخه.
دو تا راه داره که این موضوع رو هندل کنید. یکیش با ref که در واقع دارید لقمه رو دور سرتون میچرخونید ، یکی دیگه با استفاده از toastId که خیلی ساده این کار رو انجام میده. فقط کافیه با توجه به دیتای خاصی که دارید هندلش می‌کنید ، یه آیدی منحصر به فرد قرار بدید:

toast("I cannot be duplicated!", {
toastId: customId
});

#react #js #tip #react_toastify

دوره مقدماتی و یک روزه ریکت
اطلاعات بیشتر در تصویر
(دوره نکست جی‌اس مقدماتی ، بعد از این دوره تشکیل خواهد شد)

آدرس کانال رقصنده با کد:
https://t.iss.one/+6qj3zj0u8bw5M2I0

#react #js #nextjs #programming #course #free

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

پیشنهاد میکنم لینک زیر رو از وبلاگ خودش بخونید:
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

#react

متوجه نکته جالبی توی ریکت شدم.
البته شاید قبلا بوده ولی الآن بهش توجه کردم.

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

پاورقی: خود کتابخانه ریکت چیزی به اسم لینتر نداره و اینها ابزارهای جانبی‌ان. ولی ابزاری که ریکت خودش رو بهش وابسته میبینه و اون قدری مهم بوده که توی داکیومنتش بگه لینتر رو فعال کنید (یا بذارید فعال بمونه) ، بهش گوش کنید و به هوک‌هایی مثل
useEffectEvent
اشاره کنه.

#react

توی فارسی برای تبلت ، کلمه رایانک مالشی رو انتخاب کردن. با همین فرمون ، این هم میشه دکمه مالشی برای ریکت 😁
فقط برای ایده گرفتن گذاشتمش. به سلیقه خودتون تغییرش بدید.
سورس روی گیت‌هاب:
https://github.com/alithecodeguy/react_swipe_button

مطالب بیشتر در کانال رقصنده با مد:
https://t.iss.one/+6qj3zj0u8bw5M2I0

#react #programming #css

اگر حوصلتون شد، این دو تا لینک رو بخونید.
به زبان ساده توضیح میده immutablity چیه و چرا برای ریکت و ریداکس مهمه.

https://daveceddia.com/why-not-modify-react-state-directly/
https://daveceddia.com/react-redux-immutability-guide/#react-prefers-immutability

#redux #react

یکی از سوالات ساده ریکت که توی مصاحبه‌ها می‌پرسن و باوجود بلد بودن ممکنه یادمون نیاد این هستش:

Three JSX rules:
1. Return a single root element
2. Close all the tags
3. CamelCase most of the things! (actually not every thing!)

#react #interview

Boilerplate project :
NextJs + ReduxToolkit + RTK + Commitizen + Lint-staged , Prettier + Tailwind + TypeScript

https://github.com/alithecodeguy/boilerplate

امیدوارم مفید باشه.
#react #js #ts #nextjs

ارسال ایمیل با ریکت

https://youtube.com/shorts/pEuHO_KAxhc?si=7XoIEgKMhspwviI8

انجین React Fiber چیه؟

فایبر همون موتور جدید رندر در React هست که از نسخه ۱۶ به بعد ساخته شد. کارش اینه که وقتی state یا props تغییر می‌کنه، تصمیم بگیره کدوم بخش‌های UI دوباره آپدیت بشن و چطوری این کار رو انجام بده.
قبل از Fiber، ریکت از یک الگوریتم ساده‌تر استفاده می‌کرد که بهش Stack Reconciler می‌گفتن. مشکل اون این بود که آپدیت‌های سنگین رو نمی‌شد به‌صورت قابل‌مدیریت اجرا کرد، و UI می‌تونست قفل بشه.

مشکل قبل از Fiber :

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

ایده‌ی Fiber :

فایبر این مشکل رو حل کرد با سه کار مهم:
1. تقسیم کار: آپدیت‌ها رو به تکه‌های کوچیک تقسیم می‌کنه.
2. توقف و ادامه: وسط کار می‌تونه آپدیت رو متوقف کنه و بعداً ادامه بده.
3. اولویت‌بندی: کارهای فوری مثل تایپ یا کلیک کاربر رو جلوتر از کارهای سنگین اجرا می‌کنه.

چطور کار می‌کنه؟

• هر کامپوننت در React یک Fiber Node داره (مثل یک آبجکت ساده).
• این node اطلاعات کامپوننت (props, state, type) رو نگه می‌داره.
• ریکت با استفاده از این nodeها تصمیم می‌گیره کدوم قسمت‌ها تغییر کرده و باید دوباره رندر بشه.

نتیجه :

• رابط کاربری خیلی روان‌تر میشه.
• حتی وقتی آپدیت‌های بزرگ داری، کاربر حس لگ یا قفل شدن نمی‌کنه.
• این ساختار زمینه‌ساز قابلیت‌های جدید مثل Concurrent Rendering و Suspens هم هست.

#interview #react

https://t.iss.one/danceswithcode

توی ویدیو‌هایی که ویژگی‌های جدید ریکت رو بررسی میکنن ، این ویدیو به نظر جالب بود. مختصر مفید با مثال همه چی رو میگه :
https://www.youtube.com/watch?v=1aP0HEatAyQ

#react