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

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

#react

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

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

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

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

#react

🔺ـ Syntactic Sugar یعنی چی؟ 🤔

- توی زبان‌های برنامه‌نویسی، Syntactic Sugar به کدی گفته میشه که خوانایی و استفاده از یک کد دیگه رو راحت‌تر می‌کنه

- برای مثال توی جاوااسکریپت، استفاده از حلقهٔ for...of برای مصارف عادی مناسب‌تر و راحت‌تر از حلقه for معمولی هست. بنابراین for...of یک Syntactic Sugar برای حلقه for معمولی به حساب میاد

- در واقع از کلمه Sugar میشه اینطور برداشت کرد که کدنویسی رو شیرین‌تر می‌کنه :))

- ترجمه تحت‌اللفظی گوگل هم جالبه :))
#tips

یادتون رو «ما» زنده نگه می‌داریم ❤️

#iWillLightACandleToo

🔺توی سال ۲۰۲۱ کدوم پروژه‌های جاوااسکریپتی بیشترین Star رو توی گیت‌هاب گرفتن؟ 🤔

- آمار و جزییات بیشتر رو از اینجا ببینین:
https://risingstars.js.org/2021/en

#statistics

🔺‌ شاید از faker.js استفاده کرده باشین که یک کتابخونه هست بود برای تولید کردن دیتای فِیک توی جاوااسکریپت

- این کتابخونه با اینکه دانلودهای میلیونی هفتگی داشت، چند روز پیش، سازندهٔ اون ناگهانی و بنا به دلایل نامعلوم، کل این کتابخونه رو از گیت‌هاب و npm حذف کرد!

- اگه می‌خواین از این کتابخونه استفاده کنین، این ریپو رو ببینین که برای ادامه‌دادن پکیج اصلی درست شده:
https://github.com/faker-js/faker

#links

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

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

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

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

#react

🔺عجیب اما واقعی!

- اگه توی صفحه HTML یک المنت با یک id خاص داشته باشین، یک متغیر سراسری به اسم همون id توی جاوااسکریپت در دسترسه که مقدارش همون المنت هست

- این ویژگی برمی‌گرده به دوران قدیم (IE اون موقع‌ها) و مرورگرهای جدید برای سازگار بودن با کدهای قدیمی مجبور به پیاده‌سازی این ویژگی شدن

- پیشنهاد میشه علاوه‌بر اینکه روی این ویژگی حساب نکنین، حتی مواظب متغیرهای سراسری که به این صورت ساخته میشن باشین!

» جزییات بیشتر
Credits: Amir Pourhadi

#html

🔺از تگ picture استفاده کنین تا بتونین توی سایزهای متفاوت صفحه، تصاویر متفاوتی رو نشون بدین

- معمولاً توی صفحه‌های وب برای هر عکس ورژن و سایزهای متفاوتی وجود داره و می‌خوایم هنگام طراحی صفحه‌های Responsive براساس سایزهای مختلف صفحه، سایز متفاوتی از عکس رو نمایش بدیم

- تگ picture این امکان رو میده که براساس شرایط مختلف، عکس متفاوتی نمایش داده بشه تا از هدر رفت منابع و پهنای‌باند جلوگیری بشه 👌

- توی این تگ برای هر ورژن از تصویر یک تگ source قرار می‌دیم و مشخص می‌کنیم که این تصویر توی چه شرایطی باید نمایش داده بشه

- انتهای اون هم یک تگ img می‌ذاریم که زمانی نمایش داده میشه که هیچکدوم از شرایط برقرار نباشه

- مرورگر به صورت خودکار تصمیم می‌گیره که کدوم از تصاویر باید دانلود و نمایش داده بشه

#html

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

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

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

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

#react 💯

🔺یه ویژگی جالب به CSS اضافه شده به اسم Clamp که کمک می‌کنه خیلی ساده‌تر عناصر توی صفحه رو Responsive کنیم

- برای مثال اگه می‌خوایم اندازه یک عکس بر اساس سایز صفحه انعطاف‌پذیر اما کنترل‌شده باشه چنین دستوری می‌نویسیم:
width: clamp(200px, 100%, 400px);

- با توجه به این کد، عرض تصویر ۱۰۰٪ هست، اما این عرض هیچوقت از ۴۰۰ پیکسل بیشتر و از ۲۰۰ پیکسل کمتر نمیشه. در واقع عرض تصویر بین ۲۰۰ و ۴۰۰ پیکسل شناور هست

- این تابع می‌تونه جایگزینی برای توابعی مثل min و max و همچنین Media Query هایی باشه که برای Responsive کردن عناصر توی صفحه استفاده می‌شد

- تابع Clamp یک قابلیت جدید CSS هست (پشتیبانی مرورگرها)

#css