💎 بررسی مقدار عددی یک ورودی
برای اینکه بررسی کنید آیا ورودی کاربر عدد است یا خیر، میتونید از تابع بالا استفاده کنید.
#utils

🌐 @pieceJS

💎 دو عامل باعث ایجاد رندر مجدد در ریکت میشود

1️⃣ تغییر State
2️⃣ تغییر Props

هیچ وقت نباید مقدار دو را مستقیماً داد چون در این صورت ریکت نمیتواند تغییر آن ها را پیگیری کند در نتیجه رندر مجدد صورت نمیگیرد و این باعث شروع فصل جدیدی از باگ ها در پروژه شما خواهد شد.
#reactjs

🌐 @pieceJS

💎 تفاوت import با require چیست؟

💬 دیاگرام بالا کمک میکنه که تفاوت کلی این دو را متوجه شوید.

🟣 یکی از تفاوت های آنها این است که import به صورت نامتقارن (بدون اینکه صبر کند تا import های قبلی کامل اجرا شود) پردازش میشود اما require به صورت متقارن (گام به گام) اجرا می شود.

🟣 با require باید کتابخانه را به طور کامل به پروژه اضافه کنید اما با استفاده از import می توانید در صورت نیاز فقط قسمت مورد استفاده از کتابخانه مورد نظر را به پروژه اضافه کنید و باعث افزایش پرفورمنس و کاهش حجم باندل پروژه می شود.

🟣 متد require به طور خودکار فولدر node_modules را اسکن می کند ولی import که از ES6 به بعد به جاوااسکریپت اضافه شده است خودکار این فولدر را اسکن نمی کند.

💬 برای اکثر برنامه نویس ها که با استفاده از babel پروژه خودشون رو کامپایل می کنند تفاوت چندانی میان import و require احساس نمی کنند. چون babel تا حدزیادی این تفاوت ها را کاهش داده است

🌐 @pieceJS

💎 چگونه پروژه ام را فایل بندی کنم؟

سوال یکی از دوستان که به نظرم سوال خیلی از برنامه نویسان جوان هم هست، اینکه مثلا من میخوام صفحه ای به نام سبد خرید رو کدنویسی کنم، چطور باید فایل بندیش رو انجام بدم؟
💬 نکته مهم اینکه، این مورد بسیار سلیقه ای هست اما تلاش کنید تا جایی که مقدوره برای اینکه خوانا تر بنویسید، هر اسکریپت (یا هر کامپوننت در ریکت و یا هر ماژول در نود جی اس) را طوری قرار دهید که فقط یک عمل را انجام بدهد مثلا یک فایل فقط عمل حذف محصول رو انجام بدهد یک فایل فقط اضافه کردن محصول و... .
و ابتدا اصلا فکر این نباشید که فایل بندی عالی ای را انجام دهید، تمام کد ها را در یک فایل بنویسید پس از آنکه به پایان رسید، ری فکتورش کنید.

پ.ن: منظور کل پروژه نیست مثلا قسمت سبد خرید رو کامل در یک فایل بنویسید بعد از اتمام، اجزای مختلف آن را ریفکتور کنید.

💬 ممنون میشوم دوستان هم تجارب خودشون رو در خصوص نحوه صحیح فایل بندی پروژه بنویسند.

🌐 @pieceJS

💎 آموزش آرایه ها به زبان ساده اما مفهومی

🎬 https://www.youtube.com/watch?v=q3Sw3DflxAA
——————
⏱ 8 min
——————
🗣 MohammadReza Azimi Fard


🌐 @pieceJS

#موقت
چون این پست به محتوای کانال مربوط نمیشه، پیشاپیش از تمامی دوستان عذرخواهی میکنم.
خواستم دو کلام در خصوص حق ناشر یا تولید کننده نرم افزار ها یا کانتنت های غیررایگان فارسی صحبتی با هم داشته باشیم.
به وفور عزیزانی رو می بینیم که تو گروه های تلگرامی به دنبال دریافت رایگان دوره های آکادمی x یا y هستند و رایجاً سه توجیه برای این موضوع دارند

⭕️ اول اینکه چرا ناشر میاد این دوره رو به صورت نامحدود میفروشه
⭕️ دوم اینکه دوره های فارسی بدرد نمی خوره (درواقع اگه تونستم از این دوره کسب درآمد کنم یعنی بدردم خورده و برمیگردم پولش رو هم میدم)
⭕️ و سوم اینکه این دوره خیلی گرونه!!! اینقدر نمیرزه!

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

در مورد اینکه کانتنت فارسی بدرد نمیخوره که باید بگم برادر جان، پس دلیل استفادت از کانتنتی که بدرد نمی خوره چیه؟ میخوای بعد از گذروندن 100 ساعت دوره به خودت اثبات کنی که دیدی بدرد نمی خورده؟!

و در مورد فلسفه آخر عزیزانی که میگن گرونه و اینقدر نمیرزه! و حالا که نمیرزه میرم رایگان پیدا و دانلودش میکنم!!! سوالی پیش میاد، تصورش رو بکنید رفتید یه لپ تاپ بخرید فروشنده میگن 40 میلیون قیمتشه! آیا برمیگردید به خودتون بگید نه بابا این لپتاپ اینقدر نمیرزه بجاش امشب میام میدزدمش؟؟؟ (البته دور از جون همتون)

ببخشید دل پری داشتم خوشحال میشم نظر شما دوستان رو هم در این مورد بدونم

💎 بررسی آنلاین بودن یوزر
با استفاده از این تیکه کد به سادگی می توانید بررسی کنید که آیا یوزرتون آنلاین هست یا خیر 😇

🌐 @pieceJs

💎 حذف دیتا از آرایه
برای حذف دیتا از #آرایه در جاوا اسکریپت میتونید از متد splice استفاده کنید این متد با حذف دیتا از آرایه باعث ایجاد تغییر در آرایه میشه.
بدین منظور با استفاده از متد indexOf، شماره ایندکس دیتای مورد نظر رو در آرایه پیدا کنید سپس با استفاده از splice آن را از آرایه حذف کنید.

💬 این متد دو تا ورودی میگیره، ورودی اول، شماره ایندکس دیتای مورد نظر است و ورودی دوم تعداد عنصر هایی که مایلید از شماره ایندکس مورد نظر به بعد حذف بشود خواهد بود.

🌐 @pieceJS

💎 استفاده از Async و Await در هوک useEffect در ریکت

جهت استفاده از async و await درون هوک useEffect می بایست درون تابعی که به عنوان Effect در این هوک تعریف می کنید یک تابع دیگر تعریف کنید و آن تابع را از نوع async قرار دهید. سپس مجدداً آن تابع را صدا بزنید

💬 نکته مهم این است که شما نمی توانید تابعی که به عنوان افکت تعریف می کنید را از نوع async قرار بدهید چراکه ریکت به شما خطا می دهد.

🟡 علت: هوک useEffect پس از Unmount شدن کامپوننت، به صورت خودکار عملیات پاک سازی توابع صدا زده شده را انجام می دهد در صورتی که تابعی که به عنوان افکت قرار داده اید را از نوع async قرار بدهید باعث ایجاد باگ در عملکرد Cleanup Function این هوک شده و ریکت به شما خطا نمایش میدهد.

#ریکت #هوک_ها #useEffect

🌐 @pieceJS

💎 بررسی خالی بودن مقدار یک آبجکت

حتماً شما هم برای اینکه بررسی کنید آیا یک آرایه دارای مقدار هست یا خیر از پراپرتی length استفاده می کنید.
برای بررسی مقدار یک آبجکت، میتونید از متد Object.keys استفاده کنید این متد آرایه ای از نام پراپرتی های آبجکت مورد نظر را return می کند در این صورت میتوانید از پراپرتی length استفاده و طول آن را برگردانید.

#آبجکت

🌐 @pieceJS

💎 روشی دیگر جهت استفاده از state ها در کامپوننت های نوع تابعی در ریکت

در تصویر بالا روشی دیگه جهت تعریف state ها در کامپوننت های نوع تابعی ریکت معرفی کردیم که در برخی موارد بسیار باعث افزایش خوانایی و همچنین کاهش شلوغی کد ها خواهد شد.

🟡 نکته ای که باید در این روش رعایت کنید آن است که هنگام setState حواستان به state هایی که تغییر نمی کنند باشد. به عنوان مثال قصد دارید مقدار firstname رو از milad به hasan تغییر دهید بدین منظور میتونید به صورت زیر setState تان را تعریف کنید:

setState({...state, firstname:'hasan'})

🌐 @pieceJS

💎 تعریف مقدار پیشفرض props در کامپوننت های ریکت

با استفاده از استاتیک پراپرتی defaultProps میتونید مقادیر پیشفرض را برای پراپ های ورودی یک کامپیوننت تعیین کنید.

🟣 نکته: defaultProps برای هر دو کامپوننت های تابعی و کلاسی قابل استفاده می باشد

🌐 @pieceJS

💎 در مورد useRef در ریکت

از این هوک جهت دسترسی به المنت های درون صفحه JSX استفاده می شود مشابه این موضوع در وانیلا جاوااسکریپت (getElementByID و...) نیز داریم.
از دیگر استفاده هایی که این هوک دارد، توانایی ذخیره سازی State های قبلی می باشد بدین ترتیب می توانید یک useRef بسازید و مقدار قبلی استیت مورد را در هوک useEffect در useRef خود ذخیره سازی کنید.

یکی دیگر از مزیت های دیگر این هوک، آپدیت شدن مقدار آن بدون رندر شدن مجدد صفحه می باشد.

⁉️ یکی از سوالات مصاحبه استخدامی دولوپر ریکت می تواند این باشد که چطور تعداد رندر های مجدد صفحه را شمارش کنیم. که در اینجا می توانید از useRef استفاده کنید و مقدار آن را در useEffect بدون وابستگی تغییر بدید.

#هوک #ریکت

🌐 @pieceJS

💎 در مورد useMemo در ریکت

از این هوک جهت جلوگیری از رندر های مجدد و افزایش پرفورمنس اپ استفاده می شود. یکی از عواملی که باعث رندر مجدد یک کامپوننت در اپ ریکتی میشود آپدیت state ها هست که موجب رندر کامل کامپوننت شما میشود اما در اکثر مواقع ما نیاز نداریم که کل اپ مجدداً رندر شود و فقط نیازه که بخش های وابسه به اون state رو رندر کنیم در اینجا از useMemo استفاده می کنیم.
این هوک، سینتکسی دقیقاً شبیه useEffect رو داره که یک کالبک میگیره و یک دیپندنسی.

useMemo( ()=>{

 }
,[ ])

یکی از کاربرد های این هوک که ممکنه از آن غافل باشید، جلوگیری از ایجاد مجدد آبجکت ها می باشد. همانطور که می دانید دو آبجکت در صورتی که با هم برابر هستند که علاوه بر مقدار، دارای خانه یکسان در حافظه نیز باشند. وقتی کامپوننت شما مجدد رندر میشه کل آبجکت ها مجدد ساخته و در خانه جدیدی از حافظه ذخیره سازی میشود که این موجب افزایش مصرف حافظه توسط اپ شما می شود. با استفاده از useMemo میتونید از رندر مجدد آبجکت ها جلوگیری کنید

🌐 @pieceJS

💎 پشت پرده رندر مجدد یک کامپوننت در ریکت

⁉️ یکی از سوالات مهم مصاحبه استخدامی دوولوپر ریکت این است که چگونه ریکت متوجه می شود که باید کامپوننت رو مجدد رندر کنه؟!

همانطور که میدونید با تغییر props یا state یه کامپوننت مجدداً رندر میشه در هر بار تغییر یکی از این دو پارامتر، در پشت پرده متد object.is اجرا و مقدار قبلی و جدید state یا props با هم مقایسه میشود در صورتی که یکی از شروط زیر برقرار نبود، کامپوننت مجدداً رندر میشه.

🔸هر دو مقدار undefined یا null باشد
🔸هر دو مقدار true یا false باشد
🔸هر دو مقدار از نوع String و دارای کاراکتر های یکسان، طول برابر و ترتیتب یکسان باشد
🔸هر دو مقدار از نوع Number و دارای مقدار یکسان یا NaN باشد
🔸هر دو مقدار از نوع Object و دارای خانه یکسان در مموری باشد

بدین ترتیب اگر مقدار یک state یا props تغییر پیدا کرد ولی با مقدار قبلیش همچنان برابر بود رندر مجددی صورت نمیگیرد چون مقدار زیر true خواهد بود
Object.is(newState,PrevState) === true
اما نکته مهم اینه که اگر یک state یا props از نوع آبجکت باشد و مقدار آن تغییر پیدا کند، ولو با مقدار قبلیش برابر باشد، کامپوننت شما مجدداً رندر میشود چرا که مقدار جدید اون آبجکت در خانه جدیدی از حافظه ایجاد شده پس آخرین شرط از شروط بالا رو نقض و رندر مجدد صورت میگیره.

#ریکت #سوال_استخدامی

🌐 @pieceJS

💎 در مورد هوک useLayoutEffect در ریکت

هوک useLayoutEffect از جمله هوک های مهم ریکته (البته احتمالاً خیلی کم بهش احتیاج پیدا خواهید کرد) که عملکردی دقیقاً شبیه useEffect رو داره با این تفاوت که به صورت synchronize اجرا می شه. به عبارتی قبل از اینکه تغییرات دام، در صفحه چاپ بشود این هوک اجرا سپس تغییرات نمایش داده می شود.

نکته: در هوک useEffect ابتدا دام رندر و در صفحه چاپ می شد سپس این هوک اجرا می شد اما در اینجا دام رندر میشه هوک useLayoutEffect صدا زده میشه و پس از آن دام در صفحه چاپ میشه.

#ریکت #هوک
🌐 @pieceJS

💎 معضل دو بار رندر شدن useEffect در هنگام استفاده از StrickMode

شاید شما هم توجه شده باشید پس از انتشار ورژن 18 ریکت، StrickMode باعث رندر شدن دوباره useEffect میشد این موضوع خیلیا رو شاکی کرد اما حالا این مسئله معضل هست یا چی؟!
اولین موردی که باید بدانید این است که StrickMode فقط در نسخه Development پروژه اجرا میشه و در ورژن Production هیچ تاثیری نداره پس رندر مجدد useEffect رو تو این ورژن نداریم و هیچ جای نگرانی نیست 😉

⁉️ اما حالا چرا رندر مجدد میشه ؟
همانطور که میدونید StrickMode جهت بررسی خطاهای احتمالی مورد استفاده قرار میگیره زمانی که در نسخه Development پروژه رو ران می کنید StrickMode یکبار useEffect رو Mount میکنه، مجددا unMount میکنه که بررسی کنه آیا پس از unMount شدن، CleanUp صورت میگیره یا خیر. اگه صورت میگیره که مجدداً useEffect رو Mount میکنه.

🟡 نکته: در صورت unMount نکردن، امکان رخدادن خطای Memory Leak افزایش می یابد.

🌐 @pieceJS

#مثبت_برنامه_نویس
#معرفی_نرم_افزار
🟨 داکیومنت های آفلاین با نرم افزار Zeal


- از طریق 🔗 لینک وارد سایت Zeal بشید و برنامه Zeal رو دانلود کنید.
- بعد از دانلود و نصب، از طریق منوی
Tools > Docsets > Available
میتونید داکیومنت مربوط به زبان دلخواهتون رو یکبار برای همیشه دانلود و بصورت آفلاین استفاده کنید.


💬 البته نه فقط جاوا بلکه، داکیومنت هر زبونی که بخواید رو داره و میتونید برای همیشه بصورت آفلاین داشته باشید. :)

~موفق باشید❤️

☕️@PIECEJAVA

🟣 اگه احیانا داکیومنت مدنظرتون داخل Docset وجود نداشت(مثلا three.js یا... )، از طریق آدرس زیر:

https://zealusercontributions.herokuapp.com/

لینک یکی از پکیج های XML یا JSON مربوط به زبان رو کپی کنید و از بخش Docset از طریق گزینه Add Feed آدرس پکیج رو به برنامه بدید تا دانلود رو شروع کنه.

🌐 @pieceJS

💎 مدیا کوئری ها در جاوا اسکریپت

از مدیا کوئری ها برای بررسی سایز و اندازه طول و عرض صفحه نمایش مورد استفاده قرار میگیره و از اصلی ترین مواردیست که ریسپانسیویتی سایت بر آن استوار است و قطعاً اسمش رو در CSS شنیدید.
در جاوا اسکریپت هم میتونید از مدیا کوئری ها استفاده کنید.

⁉️ به چه صورت؟
تو کلاس window یه متدی داریم به نام matchMedia که میتونید سایز مد نظر صفحه رو به اون بدید و پاسخ رو به صورت آبجکت دریافت کنید.

💬 نکته مهم اینکه حتماً حداقل عرض رو باید درون پرانتز بنویسید.

#جاوا_اسکریپت #مدیا_کوئری

🌐 @pieceJS