کار کردن با تقویم شمسی همیشه دردسرساز بود ولی پکیج React Multi Date Picker این مشکل رو حل کرده.
پکیجی که مشکل‌های اساسی رو حل کرده و قابلیت شخصی سازی بالایی داره از انتخاب بازه‌ای تاریخ گرفته تا شخصی سازی نمایش تقویم، تازه ریسپانسیو هم هست!
این پکیج رو شهاب یزدی عزیز زحمتش رو کشیده که میتونید توی گیت هاب بهش استار بدید یا در صورت تمایل در روند توسعه بهش کمک کنید👌

توی لینک زیر میتونید دمو تقویم رو ببینید
🌐 https://shahabyazdi.github.io/react-multi-date-picker/fa/

#calendar #reactjs #reactjs_package

Channel | Group | YouTube

چطوری یه پروژه Next.js رو Dockerize کنیم؟
اگه میخواید پروژه رو روی سرور دپلوی کنید Docker میتونه یه راه حل سریع و حرفه‌ای باشه. برای اینکه اول از همه شما باید یه فایل با نام Dockerfile در پوشه اصلی پروژه بسازید (بدون پیشوند و با حرف D بزرگ) و نمونه خیلی ساده ای براتون قرار میدم که کد رو داخلش بذارید و استفاده کنید البته این یه چیز ثابتی نیس و ممکنه بسته به پروژه نیاز به تغییر باشه ولی میتونه نمونه خوبی برای شروع باشه.

FROM node:20-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

COPY . .

# Build the Next.js app
RUN npm run build

# Expose the port Next.js app is running on
EXPOSE 3000

# Command to run the Next.js app
CMD ["npm", "start"]

💢 با اجرای دستور زیر میتونید پروژه رو بیلد کنید

docker build -t nextjs-app .

💢 و با دستور run میتونید کانتینر رو اجرا کنید

docker run -p 3000:3000 nextjs-app

#docker #reactjs #nextjs

Channel | Group | YouTube

♨️ سوال مصاحبه‌ای: چطوری یک کامپوننت ری‌اکت رو memo کنیم؟

در حقیقت memo بهمون این امکان رو میده تا از رندر مجدد (Re-Render) اضافی کامپوننت تا زمانیکه پراپ (props) اون تغییری نکرده، جلوگیری کنیم.

💠 توی کد تصویر بالا، ما کامپوننت Product رو اصطلاحا memoize کردیم. که خروجیش میشه یه کامپوننت جدید به اسم MProduct.

🔆 کامپوننت MProduct با خود کامپوننت Product کاملا یکسانه فقط فرقش اینه که MProduct فقط یه بار رندر میشه و تا زمانی که پراپ هاش تغییر نکنه re-render نمیشه. اما کامپوننت Product هر بار render میشه.
#reactjs #سوال_مصاحبه

Channel | Group | YouTube

♨️ قابلیت CSR (Client Side Rendering) چیست؟
ما در React داده ها را از سرور گرفته و در سمت کلاینت (مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه (Render) استفاده میکنیم.
شما میتوانید برای درک این موضوع به وبسایتی بروید که با React نوشته شده است. اگر سورس کد این وب سایت را از مرورگر خود باز کنید (view page source) میبینید که صفحه هیچ خاصی ندارد. چرا؟ به دلیل اینکه در این گونه وبسایت ها ما صفحات واقعی نداریم بلکه آنها با جاوااسکریپت و به صورت پویا ایجاد میشوند.

قابلیت CSR مزایا و معایبی دارد که باید بسته به نیاز استفاده از آن انتخاب شود.

💠 مزایا:
- عدم ریفرش شدن صفحه و سریع بودن در جابه‌جایی بین صفحات

💠 معایب:
- لودینگ نسبتا طولاتی در هنگام اولین مراجعه کاربر به صفحه
- مشکلات سئو و بهینه نبودن برای موتورهای جستجو

🔆 در صورتی که سوالات یا تجربه‌ای در این زمینه دارید لطفا در گروه با ما به اشتراک بگذارید...

#reactjs #nextjs

Channel | Group | YouTube

♨️ سوال مصاحبه‌ای: چرا نباید در ری‌اکت state رو مستقیما آپدیت کنیم؟
اگه بخواین یه state رو مستقیما آپدیت کنید متوجه میشین کامپوننت شما مجددا رندر (Rerender) نمیشه.
به جای اینکه مستقیما state رو آپدیت کنیم باید از متد setter اون در هوک useState استفاده کنیم. این متدها یک آپدیت در شی state رو برنامه‌ریزی و مدیریت میکنن و وقتی تغییر انجام شد کامپوننت شما re-render خواهد شد.

#reactjs #سوال_مصاحبه‌ای

Channel | Group | YouTube

♨️ یک ویدیو پلیر تمام عیار!
توی html درسته ما video پلیر پیشفرضی داریم که کارمون رو راه میندازه ولی بعضی وقتا نیاز به پلیر حرفه‌ای، جذاب و کاربردی داریم.

پکیج plyr یه ویدیو پلیر خوب برای وب هستش که اکثر نیازهامون رو برطرف میکنه و قابلیت شخصی سازی بسیار زیادی داره.
💢 این پکیج از پرتکل های استریم مثل hls و قابلیت چند زبانی و کلی قابلیت خفن دیگه پشتیبانی میکنه.
برای ریکت و بقیه فریمورک ها هم پلاگین داره😍
برای مشاهده قابلیت ها و استفاده ازش میتونید به گیت‌هابش یه سر بزنید

https://github.com/sampotts/plyr

#reactjs #Tools

Channel | Group | YouTube

♨️ سوال مصاحبه‌ای: در ری‌اکت پارامترهای key چیکار می‌کنن و مزایای استفاده از اونا توی حلقه‌ها چیه؟
پارامتر key یه attribute خاص است وقتی به دردمون میخوره که بخوایم آرایه‌ای از المان ها رو ایجاد کنیم. این پارامتر رو باید به المان پدر به عنوان یه prop پاس بدیم.

این key ها به ری‌اکت در مواقع اضافه،حذف و یا آپدیت کردن المان لیست ها کمک میکنه.

اکثرا از id یا دیتای یونیک به عنوان key استفاده میکنند.
💠 پند شیخ: از ایندکس آرایه برای key استفاده نکنید
#reactjs #سوال_مصاحبه‌ای

Channel | Group | YouTube

♨️ وب‌پک (Webpack) چیست؟ چرا باید ازش استفاده کنیم؟
فرض کنید یه اسکریپتی به پروژه اضافه کردید و توش از کتابخونه جی‌کوئری استفاده شده ولی چون اسکریپتتون رو بالا تر از ایمپورت جی‌کوئری ایمپورت کردید خطا گرفتید و کد اجرا نشده یا مرورگر کد جاوااسکریپت رو کش کرده و تغییراتی که توی کد دادید اعمال نمیشه.
تا حالا شده از یه قابلیت پیشرفته جاوااسکریپت بخواین استفاده کنید ولی نگران این هستین که همه مرورگر ها ساپورتش نکنن؟
حالا هرچی پروژه بزرگتر باشه مدیریت کردن اینجور مسائل هم سختتر میشه

💠 کار وب‌پک باندل (بسته‌بندی) و مدیریت کردن فایل های استایل، عکس، اسکریپت و فونت هستش یکی از مهمترین مزیت هاش پشتیبانی از پلاگین‌های مختلفه که کارهایی مثل مینیفای کردن یا تبدیل فایل های sass و less به css رو براتون انجام میده.

#reactjs #bundler #Tools

🌐 https://webpack.js.org

Channel | Group | YouTube

♨️ ری‌اکت ورژن 19 به صورت بتا منتشر شد!
فعلا به صورت بتا منتشر شده تا بتونن فیدبک بگیرن و پکیج ها خودشون آپدیت کنند و ما هم وقتو از دست نمیدیم و یه نگاهی بهش میکنیم...

💠 کامپوننت سمت سرور
بالاخره بعد از مدت ها انتظار سرور کامپوننت ها به خود ری‌اکت اضافه شدن اگه با Nextjs کار کرده باشید با این ویژگی و مزایاش آشنایید.

💠 امکان استفاده از metadata
یکی از مشکلاتی که ری‌اکت نبود ابزاری مناسب برای metadata ها بوده ولی حالا توی ری‌اکت 19 به خاطر کامپوننت matadata اینکار ساده تر شده.

💠 لود بهینه asset ها
توی نسخه جدید asset های ما یعنی عکس و فونت و... در پشت صحنه بارگذاری میشن و اینطوری سرعت لود ما میره بالا

💠 رفع مشکل re-render های اضافه
در نسخه جدید دیگه لازم نیست از هوک هایی مثل useCallback یا useMemo استفاده کنیم و اینکارو به صورت اتوماتیک خود ری‌اکت انجام میده و مشکل re-render ها تا حدودی حل میشه.

کلی ویژگی و بهینه سازی های دیگه وجود داره که میتونید به مقاله اصلی یه سر بزنید و کامل تر در جریان جزئیات قرار بگیرید.
🌐 https://react.dev/blog/2024/04/25/react-19

#reactjs

Channel | Group | YouTube

♨️ ری‌اکت کوئری (React Query) چیه و چرا باید ازش استفاده کنیم؟
یکی از قدرتمند ترین کتابخونه‌های React هست که به ما در زمینه Data-Fetching (دریافت اطلاعات از سرور) و state management (مدیریت استیت) کمک میکنه البته قابلیت های خیلی خفن دیگه ای مثل کش کردن اطلاعات یا بروزرسانی داده‌های سمت سرور رو هم داره.

💠 مزایای استفاده از React Query
- بهبود performance اپلیکیشن به دلیل کش کردن اطلاعات
- امکان مدیریت خطاها
- سازگاری با NextJs و تایپ اسکریپت
- بروزرسانی اطلاعات موجود در سرور در بکگراند
- استفاده آسان

یکی از اصلی ترین کارهای فرانت‌اند کارها همین data fetching هست و اگه برای اینکار از کتابخونه های حرفه‌ای مثل React query استفاده کنیم هم کارمون ساده تر میشه هم کد بهینه تر خواهد بود.

🔆 اگر شما هم تجربه‌ای در این زمینه دارید در گروه تلگرامی‌مون با ما در میان بذارید...

🌐 https://tanstack.com/query/latest

#reactjs #Tools

Channel | Group | YouTube

♨️ بدون توجه به تجربه طراحی خود، وب سایت های زیبایی بسازید.
این شعار کتابخونه Next UI برای react هست که زیبایی، سرعت و مدرنیته رو در یک قالب ارائه میده
این کتابخونه انیمیشن‌های خیلی نرم و جذابی داره. اکثر کامپوننت هایی که نیاز دارید از دکمه های زیبا گرفته تا modal های ریسپانسیوش در خودش جای داده.
اگه دنبال این نیستید که دونه دونه کامپوننت ها رو خودتون بزنید یا نیاز به کامپوننت های کاستوم ندارید این کتابخونه میتونه روند توسعه رو سریع تر کنه.
با شخصی سازی بالایی که داره میتونید کامپوننت هاش رو باب میل خودتون کنید.

💠 راستی از Next js هم به خوبی پشتیبانی میکنه...

🔅 پس منتظر چی هستید برید یه بار تستش کنید و از قابلیت هاش لذت ببرید.

🌐 https://nextui.org

#reactjs #packages #ui_library

Channel | Group | YouTube

♨️ قابلیت SSG چیست و چه کاربردی دارد؟
قابلیت SSG یا همون Static Site Generation برای صفحاتی که استاتیک هستند و قرار نیست اطلاعاتشون بعدا تغییر کنه مورد استفاده قرار میگیرند. در این صورت در زمان build پروژه اطلاعات رو دریافت و اون صفحه رو به صورت استاتیک برامون ساخته میشه و دیگه لازم نیست هر بار که کاربر صفحه رو باز میکنه اون صفحه ساخته بشه و هم زمان لود و هم فشار به سرور کمتر میشه.
💠 پس باید برای صفحات و پروژه هایی ازش استفاده بشه که محتواش قرار نیس عوض بشه مثل صفحات تماس با ما یا درباره ما. در حالت SSG چون صفحه ما قبلا بیلد شده موتورهای جستجو به راحتی قادر به بررسی صفحات ما خواهند بود.

#nextjs #reactjs

Channel | Group | YouTube

♨️ یه کتابخونه UI همه کاره
یکی از کارهایی که وقت فرانت‌کار ها رو میگیره طراحی کامپوننت هایی مثل Modal ها یا نوتیفیکیشن و امثالهم هستش. حالا راه حل این مشکل استفاده از یه کتابخونه UI هستش تا بتونیم از کامپوننت‌های آماده اون توی پروژه‌مون استفاده کنیم.
همونطور که میدونید کتابخونه های زیادی برای اینکار هست ولی میشه گفت معروف‌ترینش Ant Design هست که شاید بشناسیدش
این کتابخونه تقریبا همه کامپوننت‌های لازم برای طراحی وب رو در اختیار شما قرار میده از button بگیر تا message و input پس میتونید توی پنل‌های ادمین یا هر پروژه دیگه‌ای ازش استفاده کنید.
💠 میتونید تو آدرس زیر مثال‌هایی از کامپوننت‌های زیباش ببینید...👌
🔅 اگر شما هم کتابخونه UI خوبی میشناسید و ازش استفاده میکنید توی کامنت یا گروه بهمون بگید

🌐 https://ant.design/components/overview

#reactjs #nextjs #packages #Tools

Channel | Group | YouTube

♨️ کتابخونه SWR چیست و چه کاربردی دارد؟
این کتابخونه یکی از بهترین و قدرتمندترین کتابخونه‌ها در زمینه Data Fetching هستش که هر روز داره محبوب تر میشه.
خود SWE یه هوک کاربردی داره به اسم useSWR که کار رو ساده و راحت میکنه. قابلیت های زیادی مثل کش کردن داده ها اعتبار سنجی مجدد، pagination، Preloading و ... داره که واقعا برای پروژه های بزرگ و متوسط بسیار کاربردیه

💠 چطوری ازش استفاده کنیم؟

 const { data, error } = useSWR(key, fetcher); 

در کد بالا آرگما اول key هستش که معمولا خود API Endpoint رو میدیم یا هر اسمی که دوست داریم. (با این کلید کش میکنه)

آرگمان دوم fetcher هست که یه فانکشن async میگیره و عملیات دریافت داده رو انجام میده که دو تا مقدار بر میگردونه که اولی data هستش که اطلاعات دریافت شده از سرور رو شما میشه میشه و دومی هم error هستش که اگه اروری باشه مقدار دهی میشه

🔅 شما از چه کتابخونه ای برای Data fetching استفاده میکنید؟ تجربیاتتون رو با ما در کامنت ها یا در گروه به اشتراک بذارید...

🌐 https://swr.vercel.app

#reactjs #nextjs

Channel | Group | YouTube

♨️ پکیج احراز هویت در Next js
یکی از مهمترین مسائل یک سایت بحث امنیت کاربران است اما گاها پیاده سازی روشی مطمئن و امن برای احراز هویت در Next js چالش برانگیز میشود. راه‌های زیادی برای طراحی این بخش وجود دارد که میتوان به صورتی دستی نیز اینکار را انجام داد ولی مستعد خطا و زمانبر خواهد بود.
ما در Next js میتوانیم از پکیج Next Auth استفاده کنیم که بسیاری از پیچیدگی‌های این مسیر مثل سشن ها یا ورود و خروج را سادتر کرده و با راه حل‌های مناسب و یکپارچه‌ای را در دسترس ما قرار میدهد.

🌐 https://next-auth.js.org

#reactjs #Tools #nextjs

Channel | Group | YouTube