50_PROJECTS_FOR_REACT_AND_THE_STATIC_WEB__1688732575.pdf
25.6 MB
50 projects for React and the static web
#react
#react
اگر نمیخواید از کتابخانههای آماده برای debounce استفاده کنید ، با همین کدی که توی تصویر میبینید ، میتونید پیادهسازیش کنید. یکیش برای فانکشن کامپوننتهای ریکته ، یکیش برای کلاس کامپوننتها.
اگر هم از چیزی جز ریکت استفاده میکنید ، میتونید همین کانسپت رو ببرید توی اون محیط با توجه به ویژگیهای خودش پیادهسازی کنید چون در نهایت این کار ، جاوا اسکریپتی داره اتفاق میافته.
توضیح debounce:
فرض کن سرچ اینپوتی دارید که به ازای کلمهای که وارد میکنید یکبار سرویس متناظرش رو کال میکنه. اگر قرار باشه به ازای تایپ هر حرف یکبار سرویس کال اتفاق بیفته فشار زیادی به مرورگر میاره و یوزر کندی احساس میکنه. برای همین میان با استفاده از مفهومی به نام debounce یک تاخیر مثلا ۵۰۰ میلی ثانیهای میذارن که اگر از آخرین کاراکتری که کاربر تایپ کرده بود ۵۰۰ میلی ثانیه گذشت ، سرویس کال بشه.
@alithecodeguy #debounce #js #react
اگر هم از چیزی جز ریکت استفاده میکنید ، میتونید همین کانسپت رو ببرید توی اون محیط با توجه به ویژگیهای خودش پیادهسازی کنید چون در نهایت این کار ، جاوا اسکریپتی داره اتفاق میافته.
توضیح debounce:
فرض کن سرچ اینپوتی دارید که به ازای کلمهای که وارد میکنید یکبار سرویس متناظرش رو کال میکنه. اگر قرار باشه به ازای تایپ هر حرف یکبار سرویس کال اتفاق بیفته فشار زیادی به مرورگر میاره و یوزر کندی احساس میکنه. برای همین میان با استفاده از مفهومی به نام debounce یک تاخیر مثلا ۵۰۰ میلی ثانیهای میذارن که اگر از آخرین کاراکتری که کاربر تایپ کرده بود ۵۰۰ میلی ثانیه گذشت ، سرویس کال بشه.
@alithecodeguy #debounce #js #react
در جاوا اسکریپت ، وقتی دارید از fetch استفاده میکنید ، یادتون نره از AbortController استفاده کنید.
تصویر از کدای ریکته. برای باقی کتابخانه و فریمورکها هم مفهوم کلی همینه.
#js #react #fetch @alithecodeguy
تصویر از کدای ریکته. برای باقی کتابخانه و فریمورکها هم مفهوم کلی همینه.
#js #react #fetch @alithecodeguy
تمام لایفسایکلهای ریکت در یک نگاه.
اگر ریکت کار میکنید پیشنهاد میکنم به این یه سایت حتما یه سر بزنید. روی بخشهای مختلفش هم میشه کلیک کرد.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
توضیحات همراه با مثال هم اینجا میتونید پیدا کنید:
https://www.w3schools.com/react/react_class.asp
#react #webprogramming #js @alithecodeguy
اگر ریکت کار میکنید پیشنهاد میکنم به این یه سایت حتما یه سر بزنید. روی بخشهای مختلفش هم میشه کلیک کرد.
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
توضیحات همراه با مثال هم اینجا میتونید پیدا کنید:
https://www.w3schools.com/react/react_class.asp
#react #webprogramming #js @alithecodeguy
سوال مصاحبهای ریکت:
یک کامپوننت در چه شرایطی ریرندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy
یک کامپوننت در چه شرایطی ریرندر میشه؟
جوابش ساده به نظر میاد ولی قبل از جواب دادن ، بیشتر بهش فکر کنید.
#react #interview #js @alithecodeguy
میدونیم که استیت آپدیتها توی ریکت آسینک هستن. یعنی نمیتونیم مطمن باشیم که چه زمانی انجام میشن. به عبارت دیگه اگر دو خط کد بزنید که یکیش استیت آپدیت باشه نمیتونید مطمن بشید که کدوم خط اول انجام میشه.
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه میتونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.
#tip #react #js @alithecodeguy
اگر میخواید که این موضوع رو هندل کنید و فرآیند اجرای کد رو منتظر نگه دارید تا استیت آپدیت مدنظرتون تموم بشه میتونید از
flushSync
استفاده کنید.
نکته : چیزی نیست که بخواید در حالت معمول استفاده کنید و تا جایی که میشه ازش استفاده نکنید.
#tip #react #js @alithecodeguy
اگر از react-router استفاده میکنید ، الزامی وجود نداره که حتما از کانتکست خود ریکت استفاده کنید.
میتونید از کانتکست ریکت روتر استفاده کنید.
لینک:
https://reactrouter.com/en/main/hooks/use-outlet-context
#react #tip @alithecodeguy
میتونید از کانتکست ریکت روتر استفاده کنید.
لینک:
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 #nextjs #swr
@alithecodeguy
https://youtu.be/rYt-S_iGuFI?si=Vu5R1TtrJgoXZiKG
YouTube
اجرای ترتیبی سرویسکالها با SWR
در این ویدیو میبینیم که چه جوری میشه سرویسهایی که به دیتای همدیگه نیاز دارن تا کال بشن رو به هم متصل کنیم تا همشون درست درست کال بشن.
مطالب بیشتر در کانال رقصنده با کد :
https://t.iss.one/alithecodeguy
مطالب بیشتر در کانال رقصنده با کد :
https://t.iss.one/alithecodeguy
همچنان معتقدم که ریداکس با اختلاف زیادی از بقیه استیت منیجرها بهتره که بخشی از این مزیتش به خاطر ابزارهای جانبیشه از جمله آرتیکی-کویری.
ولی اگر فقط به چشم استیت منیجر بخوایم بهش نگاه کنیم ، توی یک سناریوی خاص (که کم ممکنه براتون پیش بیاد) از زوستند (یا هر تلفط دیگهای که ازش میگن) کم میاره و اون وقتیه که دیتاهاتون مرتبا و احتمالا سرعت بالایی آپدیت میشه. مثلا وقتی که یک جدول کارگزاری ایجاد میکنید ممکنه توی یک ثانیه تا دهها آپدیت دریافت کنید. عملا ریداکس شدید کم میاره و فریز میشه چند ثانیه (اگر نخواید دستی تغییرش بدید یا خود جدولی که استفاده میکنید آپشنشو نداشته باشه) ولی همونجور که توی داکیومنتهای زوستند مشاهده میکنید ، راه حل این موضوع وجود داره.
لینک:
https://lnkd.in/dU6T2ehe
#zustand #redux #react #js #programming
ولی اگر فقط به چشم استیت منیجر بخوایم بهش نگاه کنیم ، توی یک سناریوی خاص (که کم ممکنه براتون پیش بیاد) از زوستند (یا هر تلفط دیگهای که ازش میگن) کم میاره و اون وقتیه که دیتاهاتون مرتبا و احتمالا سرعت بالایی آپدیت میشه. مثلا وقتی که یک جدول کارگزاری ایجاد میکنید ممکنه توی یک ثانیه تا دهها آپدیت دریافت کنید. عملا ریداکس شدید کم میاره و فریز میشه چند ثانیه (اگر نخواید دستی تغییرش بدید یا خود جدولی که استفاده میکنید آپشنشو نداشته باشه) ولی همونجور که توی داکیومنتهای زوستند مشاهده میکنید ، راه حل این موضوع وجود داره.
لینک:
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
دو تا راه داره که این موضوع رو هندل کنید. یکیش با 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://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
و این یعنی چرخه زندگی ریکت به دو قسمت قبل از کامپایلر اختصاصی و بعد از اون تقسیم میشه.
پیشنهاد میکنم لینک زیر رو از وبلاگ خودش بخونید:
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
#react