#libarary #reactjs #javascript

● معرفی لایبرری react hook form ●

توی این ویدیو به طور کامل بهتون توضیح دادم که این لایبرری دقیقا چیکار میکنه و چه مزایایی داره ⚡

https://www.instagram.com/reel/C7HCXB4sfK0/?igsh=ZHRjcHVpY2ZrbG92

Channel | YouTube | Instagram

#libarary #reactjs #react_helmet

● معرفی لایبرری React Helmet ●

لایبرری React Helmet یک کتابخانه برای مدیریت head در سند HTML در اپلیکیشن‌های React است. با استفاده از React Helmet، می‌تونید به سادگی عنوان صفحه، متا تگ‌ها، و سایر عناصر موجود در head سایت را بر اساس وضعیت فعلی اپلیکیشن تنظیم کنید.
این ابزار برای بهبود SEO، مدیریت اطلاعات متا تگ ها، و به‌روزرسانی داینامیک تگ‌های HTML در اپلیکیشن‌های تک‌صفحه‌ای (SPA) بسیار مفید است. همچنین، React Helmet به شما اجازه می‌دهد که این تغییرات را در هر کامپوننتی از اپلیکیشن خود اعمال کنید، بدون نیاز به دسترسی مستقیم به HTML.

مثال 🚀

import React from 'react';
import { Helmet } from 'react-helmet';

function MyComponent() {
  return (
    <div>
      <Helmet>
        <title>My Page Title</title>
        <meta name="description" content="This is a description of my page" />
      </Helmet>
      <h1>Hello, World!</h1>
      <p>Welcome to my React app with dynamic title and meta tags!</p>
    </div>
  );
}

✅ میتونید برای کسب اطلاعات بیشتر به داکیومنت React Helmet در Npm یا GitHub مراجعه کنید.

Channel | Group | YouTube | Instagram

#libarary #storybook

● معرفی لایبرری StoryBook ●

لایبرری Storybook یک ابزار متن‌باز برای توسعه و تست کامپوننت‌های UI به‌صورت مستقل است. این ابزار به شما اجازه می‌دهد تا کامپوننت‌ها را جدایی از برنامه اصلی توسعه داده و بررسی کنید و همچنین این لایبرری با فریمورک‌های مختلف مثل React، Vue و Angular سازگار است ⚡

✅ ویژگی ها

➊ امکان مشاهده و تست کامپوننت‌ها در حالت‌های مختلف را فراهم می‌کند.

➋ برای کامپوننت ها داکیومنت خودکار ایجاد می‌کند.

➌ این ابزار همکاری بین تیم‌های طراحی و توسعه را بهبود می‌بخشد.

➍ افزونه‌های متعددی برای تست بصری و دسترس‌پذیری دارد.

➎ تغییرات کامپوننت‌ها را سریع ارزیابی می‌کند.

➏ برای پروژه‌های بزرگ و تیم‌های توسعه‌دهنده بسیار مفید است.

مثال عملی 🚀

// Button.stories.js
import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  variant: 'secondary',
};

توی این کد دو نوع دکمه Primary و Secondary را در Storybook ایجاد کردیم.

✅ در کل با استفاده از Storybook می‌توانید به سرعت UI خود را تست و بهبود دهید.

داکیمونت رسمی stoorybook 🔗

Channel | Group | YouTube | Instagram

#libarary #apexcharts

● معرفی لایبرری ApexCharts.js ●

لایبرری ApexCharts.js یک کتابخانه‌ی جاوااسکریپتی است که برای ایجاد نمودارهای تعاملی و ریسپانسیو استفاده میشه و بهتون اجازه میده تا به راحتی انواع مختلفی از نمودارها رو مانند نمودارهای خطی، میله‌ای، دایره‌ای، و‌... رو ایجاد کنید.

ویژگی های کلیدی ✅

１سفارشی‌سازی بالا : امکان تغییر رنگ‌ها، استایل‌ها، و انیمیشن‌ها و....

２ ریسپانسیو بودن : نمودارهای ایجاد شده با ApexCharts به طور خودکار با اندازه‌ی صفحه نمایش تطبیق پیدا می‌کنند.

３ پشتیبانی از داده‌های داینامیک : می‌توانید داده‌های خود را از API‌ها دریافت کنید و در لحظه تو نمودارها نمایش دهید.

４ پشتیبانی از فریم ورک ها : برای react, vue و angular پکیج داره ولی برای استفاده تو فریم ورک های دیگه جاوااسکریپتی میتونید خیلی ساده از وانیلا جی ‌اس  استفاده کنید

مثال عملی 🚀

import React from 'react';
import Chart from 'react-apexcharts';

const SalesChart = () => {
  const options = {
    chart: {
      type: 'line',
      height: 350,
    },
    xaxis: {
      categories: ['ژانویه', 'فوریه', 'مارس', 'آوریل', 'مه', 'ژوئن', 'ژوئیه'],
    },
    title: {
      text: 'نمودار فروش ماهانه',
      align: 'center',
    },
  };

  const series = [
    {
      name: 'فروش',
      data: [10, 20, 15, 30, 40, 35, 50],
    },
  ];

  return <Chart options={options} series={series} type="line" height={350} />;
};

export default SalesChart;

وبسایت رسمی apexcharts.js 🔗

Channel | Group | YouTube

توی این پست یکی از بهترین کتابخانه های ساخت نمودار تو جاوااسکریپت رو بهتون معرفی کردم

نکته مهمی که در مورد این لایبرری وجود داره اینه که برای react, vue و angular پکیج اختصاصی داره و میتونید توی پروژه های خودتون به سادگی ازش استفاده کنید 😁⚡

https://www.instagram.com/p/C-nqRFTMjBc

#NEWPost | #libarary

🚀 @coolycode

#libarary #lodash

●● معرفی کتابخانه Lodash ●●

یک لایبرری جاوا اسکریپتیه که مجموعه‌ای از توابع کمکی (Utility Functions) رو بهتون میده برای ساده‌سازی کار با آبجکت ها و آرایه ها، مثل فیلتر کردن، مرتب‌سازی و خیلی موراد دیگه

به دلیل بهینه سازی هایی که روی این لایبرری صورت گرفته بهتون کمک میکنه تا کدهای تمیزتر، خواناتر و کارآمدتری بنویسید 🚀

Channel | Group | YouTube

●● تفاوت بین فریم‌ورک و لایبرری ●●

🔸 کنترل و مدیریت جریان برنامه ⚡

فریم‌ورک : فریم‌ورک کنترل جریان اجرای برنامه رو در دست داره و کد شما رو به زمان و شیوه‌ای که تعیین کرده اجرا می‌کنه.

لایبرری : لایبرری به شما کنترل کامل بر جریان برنامه رو می‌ده و خودتون تصمیم می‌گیرید که چه زمانی و چگونه از لایبرری استفاده کنید.

🔸 ساختار و معماری 🌀

فریم‌ورک : فریم‌ورک‌ها معماری و چهارچوب مشخصی رو تحمیل می‌کنند و شما باید برنامه‌ی خودتون رو مطابق با اونها تنظیم کنید.

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

🔸 انعطاف‌پذیری در توسعه  🔄

فریم‌ورک :ممکنه فریم‌ورک‌‌ها انعطاف‌پذیری شما رو محدود کنند چون باید از روش‌ها و الگوهای خاص اونها پیروی بکنید.

لایبرری : لایبرری‌ها به شما آزادی بیشتری می‌دن تا بتونید به روش دلخواه خودتون از اونها بهره‌برداری بکنید.

🔸 مقیاس‌پذیری و اندازه پروژه 📈

فریم‌ورک : فریم‌ورک‌ها برای پروژه‌های بزرگ و پیچیده طراحی شده‌اند که نیاز به ساختاردهی و مدیریت بهتر دارند.

لایبرری : لایبرری‌ها بیشتر برای انجام وظایف خاص و مشخص به کار می‌رن که ممکنه نیاز به مقیاس‌پذیری بالا نداشته باشند.

🔸 وابستگی و تأثیرات تغییر 🔗

فریم‌ورک : فریم‌ورک‌ها معمولاً بخش‌های زیادی از برنامه زو به خودشون وابسته می‌کنند و تغییر فریم‌ورک ممکنه نیاز به تغییرات زیادی در برنامه داشته باشه.

لایبرری : استفاده از لایبرری‌ها معمولاً به صورت مستقل است و تغییر یا حذف آنها تأثیر زیادی بر روی سایر بخش‌های برنامه ندارد.

✅ جمع بندی

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

- اگر پروژه‌ات بزرگه و نیاز به ساختار منظم و یکپارچه داری، فریم‌ورک بهتره چون کلیات کار رو مدیریت می‌کنه و بهت کمک می‌کنه سریع‌تر به نتیجه برسی.

- اگر پروژه‌ات کوچیک‌تره یا فقط نیاز به انجام یک وظیفه خاص رو داری، لایبرری بهتره چون بهت آزادی عمل بیشتری می‌ده تا فقط همون کاری که می‌خوای رو انجام بدی.

#️⃣ #framework #libarary #vs
🆔 Channel | Group | YouTube

💎 معرفی لایبرری Framer Motion 💎

🔸 لایبرری Framer Motion یک انتخاب عالی برای ساخت انیمیشن‌های جذاب و پیچیده در پروژه‌های React‌ای هستش و باهاش میتونید هر انیمیشنی که بخواید رو پیاده‌‌سازی کنید

نکته مهمش اینجاست که با قابلیت هایی که داره بهتون اجازه میده تا انیمیشن های فوق العاده تعامل‌پذیر، با کنترل دقیق بر روی ترنزیشن‌ها رو به سادگی پیاده سازی کنید :)

#️⃣ #libarary #WhatsThat

🆔 Channel | Group | YouTube

#libarary | #reactjs

💎 معرف لایبرری Styled Components 💎

با استفاده از Styled Components میتونی داخل ReactJS به صورت CSS-in-JS کدهای CSSای بنویسی و از ویژگی‌هایی مثل تم‌ها، استایل‌دهی پویا با props و پشتیبانی کامل از CSS مدرن استفاده کنی.

با Styled Components میتونید مدیریت بهتر و ساده‌تری رو استایل ها داشته باشید و از تداخل استایل‌ها جلوگیری کنید. ⚡

نمونه استفاده از Styled Components ✅

const Button = styled.button`
  color: ${props => props.primary ? 'red' : 'blue'};
  font-size: 1.5em;
  padding: 0.25em 1em;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

🌐 مشاهده داکیومنت Styled Components

اگر دوست داشتی ری‌اکشن و شیر یادت نره 😉⚡

🚀 @coolycode

💎 معرفی کتابخانه Tailwind Variants 💎

کتابخانه Tailwind Variants یک ابزار جانبی برای Tailwind CSS هستش که به شما کمک می‌کنه تا مدیریت کلاس‌های CSSای به شکل ساده تری انجام بشه و از شلوغی کد شما‌ جلوگیری میکنه 💥

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

توی پست های بعدی به بررسی قابلیت های این کتابخانه جذاب میپردازیم ✅

🌐 داکیومنت Tailwind Variants

#️⃣ #WhatsThat | #libarary | #tailwind

🚀 @coolycode

👾 ساخت ربات تلگرام با JavaScript 🤖

برای ساخت ربات تلگرام با جاوا اسکریپت، می‌تونیم از کتابخانه node-telegram-bot-api استفاده کنیم که یکی از محبوب‌ترین راه‌ها برای ساخت ربات تلگرام با Node.js هستش و به شما این اجازه رو ‌میده تا به راحتی ربات‌های تعاملی ایجاد کنید 💥

مزایای استفاده از این کتابخانه ✅

➊ سادگی و سرعت در توسعه: با چند خط کد میتونید ربات تلگرام خودتونو بسازید.

➋ پشتیبانی از API تلگرام: به تمامی امکانات API تلگرام دسترسی دارید.

➌ منابع زیاد و مستندات خوب: یادگیری و توسعه با این کتابخانه به دلیل پشتیبانی مستندات کامل خیلی سادس.

نحوه نصب کتابخانه 🔰

اول از همه باید Node.js رو سیستمون نصب باشه !

حالا با استفاده از npm کتابخانه node-telegram-bot-api رو با استفاده از دستور زیر نصب کنید 🔻

npm install node-telegram-bot-api

ساخت یک ربات ساده تلگرام 🚀

توی این مثال میخوایم یه ربات بسازیم که به دستور /start جواب میده و به کاربر خوشامد می‌گه.

1️⃣ گرفتن توکن API از BotFather

اول باید از BotFather در تلگرام توکن API خود را دریافت کنید. ( آموزش )

2️⃣ نوشتن کد ربات

بعد از دریافت توکن، می‌تونید کد ربات رو با جاوا اسکریپت بنویسید.

برای این کار یک فایل با نام bot.js ایجاد میکنیم و کد زیر رو داخلش قرار میدیم 🔻

const TelegramBot = require('node-telegram-bot-api');

// ایجاد شیء ربات با توکن
const bot = new TelegramBot('YOUR_BOT_TOKEN', { polling: true });

// پاسخ به دستور /start
bot.onText(/\/start/, (msg) => {
  bot.sendMessage(msg.chat.id, 'Hey, cooly coder 😎');
});

3️⃣ اجرای ربات

برای اجرای ربات کافیه با Node.js فایلی که ساختیم رو اجرا کنیم 🔻

node bot.js

حالا ربات شما فعاله و اگر در تلگرام دستور /start زو ارسال کنید برای ربات، پیام خوشامدگویی رو دریافت میکنید.

این ربات یک مثال خیلی ساده بود و خودتون میتونید با افزودن ویژگی‌های بیشتر مثل پاسخ به پیام‌ها یا ارسال data به API، ربات‌های خفن تری بسازید 💥


🌐 داکیومنت رسمی node-telegram-bot-api

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #bot #nodejs #libarary

🚀 @coolycode

کتابخونه Material-UI چیه دقیقا ؟ Ⓜ️

کتابخانه Material-UI (یا همون MUI) یکی از محبوب‌ترین کتابخونه‌های ری‌اکتی برای ساخت رابط کاربریه که بر اساس استانداردهای Material Design گوگل طراحی شده. این کتابخونه یه سری کامپوننت آماده داره که بهتون کمک می‌کنه سریع‌تر و راحت‌تر رابط های کاربری تعاملی بسازید، بدون اینکه لازم باشه از صفر پیاده سازی کنید

✅ مزایای Material-UI

🎨 طراحی حرفه‌ای و استاندارد
چون این کتابخونه از Material Design پیروی می‌کنه، باعث می‌شه رابط کاربری نرم‌افزار مدرن، شیک و کاربرپسند باشه.

⚡ کامپوننت‌های قوی و انعطاف‌پذیر
همه‌ی اجزای MUI ماژولار، با قابلیت سفارشی‌سازی بالا هستن، یعنی هر کامپوننت رو می‌تونی مطابق نیاز خودت تغییر بدی و چندین بار استفاده کنی.

🚀 افزایش سرعت توسعه
با داشتن کلی کامپوننت آماده، لازم نیست وقتتو روی طراحی و پیاده سازی از صفر تلف کنی، که یعنی توسعه سریع‌تر و کم‌هزینه‌تر!

🏗 سازگار با معماری‌های مدرن
کامپوننت‌های MUI کاملاً با اصول مهندسی نرم‌افزار و معماری‌های مبتنی بر کامپوننت هماهنگ هستن، پس توسعه و نگهداری پروژه‌های بزرگ رو آسون‌تر می‌کنن.

🌙 پشتیبانی از DarkMode و تمینگ پیشرفته
این کتابخونه به‌صورت پیش‌فرض از Dark Mode و سیستم تمینگ انعطاف‌پذیر پشتیبانی می‌کنه، که برای یه تجربه کاربری حرفه‌ای خیلی مهمه.

❌ مشکلات و محدودیت‌های Material-Ui

📦 حجم بالا و تأثیر روی عملکرد یه کتابخونه
بزرگه و استفاده ازش می‌تونه باعث افزایش حجم باندل نهایی بشه که روی سرعت بارگذاری سایت تأثیر می‌ذاره، مخصوصاً تو پروژه‌های سنگین.

🎨 نیاز به سفارشی‌سازی زیاد
استایل‌های پیش‌فرض MUI تو بعضی پروژه‌ها ممکنه زیادی شبیه به هم باشن، و تغییر دادن بعضی از اون‌ها هم کار راحتی نیست و نیازمند تایم بیشتریه.

📚 نیازمند یادگیری بیشتر برای تنظیمات
پیشرفته استفاده از کامپوننت‌های آماده خیلی ساده‌ست، ولی اگه بخوای تنظیمات پیشرفته مثل سیستم تم، sx و styled-components رو یاد بگیری، باید یه مقدار وقت بذاری.

🎯 جمع‌بندی

در کل Material-UI یه گزینه‌ی قوی و پرطرفدار برای طراحی رابط کاربری تو ری‌اکت محسوب می‌شه. با داشتن طراحی استاندارد، کامپوننت‌های انعطاف‌پذیر و معماری قوی، می‌تونه کلی توی سرعت توسعه کمکتون کنه.

اما اگه روی عملکرد و حجم باندل حساس هستید یا استایل خاصی رو برای پروژه مدنظر دارید، شاید مجبور بشید وقت بیشتری برای بهینه‌سازی بذارید و یا حتی میتونه گزینه بهتر استفاده از ui-kit های دیگه مثل shadcn باشه، که سعی میکنیم توی پست های دیگه بهشون بپرداریم.

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #WhatsThat #libarary

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

بررسی لایبرری React Hook Form 🚀

مدیریت فرم‌ها همیشه چالش‌های خاص خودش رو داشته، مخصوصاً وقتی بخوایم اعتبارسنجی انجام بدیم یا مقدار فیلدها رو کنترل کنیم.

لایبرری React Hook Form یه کتابخونه خیلی کم‌حجم و سریع برای مدیریت فرم‌ها در React هست که نیاز به کنترل دستی مقدار فیلدها رو از بین می‌بره و کار با فرم‌ها رو خیلی ساده‌تر می‌کنه.

ویژگی‌های کلیدی ✅

➊ بهینه و سریع

این لایبرری از Uncontrolled Components استفاده می‌کنه، یعنی مستقیماً به DOM متصل می‌شه و رندرهای غیرضروری رو کاهش می‌ده. این باعث می‌شه سرعت اپلیکیشن بیشتر بشه، مخصوصاً وقتی تعداد فیلدهای فرم زیاد باشه.

➋ اعتبارسنجی داخلی و انعطاف‌پذیر

از Validation داخلی پشتیبانی می‌کنه و می‌تونی با register فیلدها رو اعتبارسنجی کنی و همچنین از کتابخونه‌های Yup و Zod برای اعتبارسنجی پیشرفته پشتیبانی می‌کنه که واقعا خفن و حرفه ایه 👌

➌ مدیریت خیلی ساده خطاها

به سادگی می‌تونید از formState.errors برای گرفتن خطاهای فیلدها استفاده کنی و پیام خطا رو هر جوری که میخوای نمایش بدی.

➍ پشتیبانی خیلی خوب از فیلدهای سفارشی

اگر از Componentهای شخصی‌سازی‌شده مثل React Select استفاده کنی، Controller بهت کمک می‌کنه که راحت با اون‌ها به صورت ماژولار کار بکنی و هر نوع دیتایی که میخوای رو به صورت کاستوم هندل کنی.

این قابلیت به شدت خفن و جالبه و رسما شما میتونید دیتاهای پیچیده تر رو به سادگی به شکلی که میخواید هندل بکنید.

➎ سازگاری با Typescript

از TypeScript پشتیبانی خیلی خوبی داره و می‌تونید نوع داده‌های ورودی و خروجی فرم رو مشخص کنید و البته خیلی حرفه از از جنریک تایپ ها استفاده کنید.

📌 نتیجه‌گیری

در کل React Hook Form یه کتابخونه سبک، سریع و قدرتمند برای مدیریت فرم‌ها توی React هستش و اگه دنبال یه راهکار ساده و بهینه برای هندل کردن فرم‌ها هستی که هم سرعت بالایی داشته باشه و هم قابلیت اعتبارسنجی و کنترل فرم‌ها رو ساده کنه، این کتابخونه یکی از بهترین گزینه‌هاست!

#libarary #reactjs

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣