سه فریم‌ورک #مدرن این روزهای فرانت‌اند، انگولار، ری‌اکت و ویو هستن. هر سه فریم‌ورک بسیار قدرتمندی هستن. اما توی شرایط مختلف!

از فریم‌ورک‌ها برای افزایش سرعت و کیفیت برنامه استفاده میشه. اما نکته مهم اینه که هر فریم‌ورکی برای هر پروژه‌ای مناسب نیست و باید بسته به نیاز پروژه استفاده بشه تا از مشکلات ناخواسته مثل زیاد شدن بی‌دلیل حجم پروژه و فرآیند سخت توسعه برنامه جلوگیری بشه.

توی مقاله زیر این سه فریم‌ورک جاوا اسکریپت رو مقایسه می‌کنیم و بررسی می‌کنیم کدوم فریم‌ورک برای کدوم پروژه بهتره:

http://ditty.ir/p/J2ga5

#vue #react #angular

🔺نوبتی هم باشه نوبت ری‌اکته!

- یک لیست از کلی ابزار و پلاگین و فریم‌ورک و ... برای #ری‌اکت:

https://github.com/enaqx/awesome-react

#react #links

🔺بیشتر از 300 سوال مصاحبه ری‌اکت (PDF) 👌😎

#react

🔺آیا وسط گذاشتن یک div براتون یک چالشه؟ آیا ابزاری ساختین که کل دنیا دارن ازش استفاده می‌کنن، ولی توضیح دادن کاربرد اون سخته؟

- مصاحبه فنی Dan Abramov رو ببینین تا یکم به خودتون امیدوار بشین 😂

https://www.youtube.com/watch?v=XEt09iK8IXs

پ.ن:‌ Dan Abramov یکی از اعضای اصلی تیم ری‌اکت و سازنده Redux هست. توی این ویدئو، مصاحبه با یک انسان عادی مثل خودمون رو می‌بینیم که از چیزها و چالش‌هایی حرف میزنه که همه‌مون باهاش مواجه هستیم

#react

🔺چیزهایی که از JSX ری‌اکت لازمه بدونیم!

اولین مقاله‌ٔ ری‌اکتی دیتی برای شما 😉
https://ditty.ir/posts/react-jsx/JmwWn

#react

🔺ـ Context API ری‌اکت به زبان ساده

- با این ویژگی خیلی راحت می‌تونیم به کامپوننت‌های داخلی اطلاعات پاس بدیم

- اگه کامپوننت‌های تو در تو داریم و می‌خوایم بطور مستقیم و به دور از دردسرهای props های متوالی به کامپوننت‌های داخلی اطلاعات پاس بدیم، خیلی راحت می‌تونیم از قابلیت Context ها استفاده کنیم 👌

- با این ویژگی از اینجا آشنا بشین:
https://ditty.ir/posts/react-context-api/naBlX

#react

🔺همه چیز از Fragment های ری‌اکت

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

- با Fragment ها می‌تونیم به یک کامپوننت چندین المنت اضافه کنیم بدون اینکه مجبور باشیم یک المنت محصورکنندهٔ اضافی بسازیم

- از اینجا با این ویژگی آشنا بشین:
ditty.ir/472

#react

🔺قبل از ری‌اکت چقدر جاوااسکریپت باید بدونیم؟ 🤔

- کار کردن با ابزارهای جذاب دنیای فرانت‌اند، بدون دانش جاوااسکریپت، مثل خوندن آثار شکسپیر بدون دانش زبان انگلیسی هست

- ری‌اکت یک کتابخونه مبتنی بر جاوااسکریپت هست و قبل از شروع کار با اون لازمه بعضی از ویژگی‌های مهم جاوااسکریپت رو خوب درک کرده باشیم

- توی این پست به چند تا از مهمترین ویژگی‌های جاوااسکریپت اشاره کردیم که درک اونها برای کار با ری‌اکت ضروری هست:
ditty.ir/473

#react 💯

🔺ـHOF چیه؟ 🤔

ــ HOF مخفف Higher-order function هست و به تابعی گفته میشه که یکی از ویژگی‌های زیر رو داشته باشه:
۱. بتونه یک تابع رو به عنوان ورودی (آرگومان) بگیره
۲. بتونه یک تابع رو به عنوان خروجی return کنه

- توی زبان‌هایی که از این قابلیت پشتیبانی می‌کنن می‌تونیم Functional Programming انجام بدیم

- توی جاوااسکریپت متدهایی مثل map و filter که یک تابع رو به عنوان ورودی می‌گیرن HOF به حساب میان

- توی ری‌اکت هم یک اصطلاح داریم به اسم HOC که مخفف Higher-order component هست که به کامپوننتی گفته میشه که یک کامپوننت رو به عنوان ورودی می‌گیره یا یک کامپوننت دیگه رو به خروجی میده

#tips #react

🔺وبسایت رسمی جدید ری‌اکت

- تقریباً یک هفته میشه که ری‌اکت از وبسایت جدیدش react.dev رونمایی کرده که توی اون همه چیز، از جمله مستندات رنگ و روی تازه گرفتن

- جزییات بیشتر:
https://react.dev/blog/2023/03/16/introducing-react-dev


#react

🔺یه نکتهٔ ریز ری‌اکتی که دوست داشتم براتون به اشتراک بذارم

- همونطور که می‌دونیم وقتی توی یک کامپوننت والد تغییری رخ میده (مثلاً State بروز میشه)، باعث میشه کامپوننت‌های فرزند Re-render بشن. برای جلوگیری از این اتفاق می‌تونیم از React.memo تو کامپوننت فرزند استفاده کنیم


- کامپوننتی که از React.memo استفاده می‌کنه، فقط زمانی Re-render میشه که تغییری توی Props اون رخ بده


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


- دلیل این اتفاق اینه که توی Re-render هایی که برای یک کامپوننت رخ میده، تمام State ها از نو ساخته میشن و بنابراین اگه یک State از نوع آبجکت داشته باشیم، اون آبجکت توی رندر اولیه کاملاً متفاوت هست با آبجکتی که توی رندرهای بعدی داریم. گرچه ممکنه تغییری توی ظاهر آبجکت رخ نده، می‌دونیم که دو آبجکت با ظاهر یکسان با هم برابر نیستن


- بنابراین اگه یک کامپوننت فرزند داره از React.memo استفاده می‌کنه و در صورتی که داریم یک آبجکت یا تابع (توابع هم نوعی آبجکت هستن) رو به اون کامپوننت پاس می‌دیم، با Re-render شدن کامپوننت والد، کامپوننت فرزند باز هم Re-render میشه. چون React.memo می‌بینه که پراپرتی‌ها با هم برابر نیستن {} ==! {}


- اینجاست که هوک‌های useCallback و useMemo به کارمون میان. این هوک‌ها تضمین می‌کنن که توی رندرهای متعدد، مقدارها و توابع ما بدون تغییر باقی می‌مونن و توی هر رندر دقیقاً همون مقدار پیشین رو برمی‌گردونن (از useRef هم میشه استفاده کرد)


- بنابراین، اگه جایی از برنامه پرفورمنس برامون اهمیت داره و به کامپوننت‌های فرزند داریم مقادیر غیر Primitive (آبجکت، آرایه، تابع کال‌بک) پاس می‌دیم، بهتره به این نکته توجه کنیم


- مثال عملی رو می‌تونید از اینجا ببینید:
https://bit.ly/3O9oTIm


پ.ن: این فقط یکی از کاربردهای useMemo هست. کاربرد اصلی اون کش کردن خروجی توابع هست.
#react #tricks

🔺ـReact Strict DOM چیه؟ 🤔

- اگه تجربه توسعه برنامه‌های موبایلی با React Native رو داشته باشین، می‌دونین که استفاده از کامپوننت‌های ری‌اکت نسخه وب توی نِیتیو خیلی هم ساده نیست. و باید از یک‌سری کامپوننت‌های خاص استفاده کرد

- مثلاً توی نیتیو نمی‌تونیم از div استفاده کنیم و بجاش باید از المنت View استفاده کرد

- اما فیسبوک این پکیج (که فعلاً آزمایشی هست) رو چند روز پیش منتشر کرده که اجازه میده کامپوننت‌هایی داشته باشیم که به قول معروف Universal و عمومی‌تر هستن و کمک می‌کنن راحت‌تر بتونیم از کامپوننت‌های موجود بین برنامه‌های وب و نیتیو استفاده کنیم

- برای مثال بجای استفاده از <div> و یا <View>، از یک المنت مشترک به اسم <html.div> استفاده می‌کنیم. و این ابزار پشت پرده کار تبدیل رو به‌صورت خودکار انجام میده

🔗 مشاهده نمونه
#react

🔺ترفند ری‌اکتی

- توی ری‌اکت وقتی از useState استفاده می‌کنیم، برای مقدار اولیه اون، بجای پاس دادن مقدار به‌صورت مستقیم می‌تونیم اون رو توی یک تابع محصور کنیم (مثل عکس)

- توی عکس همونطور که می‌بینیم، تابعی داریم به اسم heavyCalculation که مثلاً کار سنگینی انجام میده و می‌خوایم خروجی اون رو به عنوان مقدار useState قرار بدیم

- می‌تونستیم این کار رو بدون استفاده از تابع هم انجام بدیم، که توی این حالت باید بدونیم که هر بار که این کامپوننت رندر میشه، تابع پاس داده‌شده هم مجدد اجرا میشه. که اگه عملیات ما سنگین باشه باعث افت عملکرد کامپوننت میشه

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

- از این ترفند بهتره زمانی استفاده کنیم که واقعاً عملیات سنگینی داریم که هر بار اجرای اون، عملکرد کامپوننت رو تحت تأثیر قرار میده

- مشاهدهٔ نمونه عملی

#react

درود دوستان و همراهان خوب دیتی 👋

- من بعد از مدت زیادی که بسیار مشغله داشتم برگشتم و قصد دارم طبق روال قبل مرتب فعالیت داشته باشم و براتون چیزهای خوب خوب بنویسم

- مدتیه که پست‌های آموزشی ری‌اکت رو دارم منتشر می‌کنم که شامل پست‌های آموزشی کوتاه میشه حاصل تجارب شخصی من از محیط کاری و همچنین مصاحبه‌ها هست، و تا الان ۱۴ قسمت از اون منتشر شده و البته که قسمت‌های جذاب زیادی از اون هم توی راهه 💥

- پست‌ها رو می‌تونید از اینجا ببینید:
https://ditty.ir/series/react-101

- این پست‌ها رو طوری نوشتم که بتونید ازشون برای آمادگی مصاحبه‌ها استفاده کنین

#react

🔺بایدها و نبایدهای memo توی #ری‌اکت

- توی دنیای توسعه #نرم‌افزار تکنیک‌های بهینه‌سازی یک شمشیر دولبه هستن و استفاده نادرست ازشون ممکنه نتیجه عکس بده و برنامه رو غیر بهینه و توسعه رو پیچیده‌تر کنه!

- توی ری‌اکت شاید memo ویژگی خیلی قدرتمندی به حساب بیاد و کمک ‌کنه از رندرهای اضافی جلوگیری کنیم، اما قبل از استفاده از اون باید نکته‌هایی رو در نظر داشته باشیم، که توی این پست اونها رو بررسی می‌کنیم:
ditty.ir/567

#react

🔺جزییات و نکات پیاده‌سازی تکنیک‌های Debounce و Throttle توی ری‌اکت

- این دو از تکنیک‌های پرکاربرد بهینه‌سازی و افزایش سرعت و کیفیت هر برنامه‌ای هستن و به قول معروف برای Rate Limiting به کار میرن

- تکنیک Debounce تضمین می‌کنه یک قطعه کد زمانی اجرا بشه که یک مدت زمان مشخصی از آخرین تلاش برای اجرای اون گذشته باشه. مثلاً یک تابع ده بار پشت سر هم فراخونی میشه، اما می‌خوایم اجرای واقعی اون موقعی باشه که ۵ ثانیه از آخرین فراخونی گذشته باشه.
آشنایی با این تکنیک:
ditty.ir/577

- تکنیک Throttle هم تضمین می‌کنه که کدهای ما توی یک بازه زمانی مشخص فقط یک بار اجرا بشن. مثلاً می‌خوایم یک تابع توی هر بازه زمانی ۵ ثانیه فقط یک بار اجرا بشه. پیاده‌سازی این تکنیک:
ditty.ir/573

#react

یه نویسندهٔ جدید و خوش ذوق به دیتی اضافه شده به اسم امیررضا 😉🔥

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

- هرچیزی که باید از کاستوم هوک ها بدونیم
- هدف از ساخت Suspense کامپوننت‌ها چیه؟
- هرچیزی که باید از هوک useDeferredValue بدونیم
- چه روش‌هایی برای دیباگ کردن برنامه ری‌اکتی می‌شناسین؟

#react