| کانال توسعه‌دهندگان جاوااسکریپت

| کانال توسعه‌دهندگان جاوااسکریپت |

🤝 اگر تو پروژه‌های React هنوز برای data fetching از useEffect + fetch استفاده می‌کنی، زمان آشنایی با TanStack Query (react-query) رسیده.

این لایبرری مشکل مدیریت state سرور (data از API) رو حل می‌کنه؛ مثل:
• کش‌کردن requestها
• refetch خودکار داده‌ها
• مدیریت loading / error
• همگام‌سازی دیتا بین تب‌ها و کامپوننت‌ها

نتیجه؟ کد کمتر، باگ کمتر، UX روان‌تر. مخصوصاً تو dashboardها، panelهای ادمین، یا هر جایی که چندین API call داری.

نصب:

npm install @tanstack/react-query

نمونه استفاده ساده:

import { QueryClient, QueryClientProvider,
  useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function Todos() {
  const { data, isLoading, error } = useQuery(['todos'], () =>
    fetch('/api/todos').then(r => r.json())
  );

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error!</span>;
  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  );
}

مستندات رسمی و مثال‌های بیشتر:
Docs
GitHub

امتحانش کن تو پروژه بعدی‌ات؛ مخصوصاً جاهایی که چند بار از یک API استفاده می‌کنی یا نیاز به refetch هوشمند داری. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #TanStack_Query #Frontend #State_Management

👤 Developix

💎 Channel: @DevelopixJavascript

🔥11

2.62K views18:00

| کانال توسعه‌دهندگان جاوااسکریپت |

🚀 ساخت یک TODO List ساده با Vanilla JavaScript (بدون فریم‌ورک)

گاهی برای تمرین مفاهیم modern JS لازم نیست سراغ React یا Vue رفت؛ یک TODO List ساده با Vanilla JavaScript می‌تواند کلی چیز مثل DOM، event handling و localStorage را روشن کند 🤓

این ایده بر اساس مثال‌های رسمی DOM و Storage در MDN است:
MDN querySelector
MDN localStorage

در این مینی‌پروژه:

✅ با querySelector و addEventListener کار می‌کنی
✅ آیتم‌ها را در localStorage نگه می‌داری تا با رفرش صفحه نپرند
✅ یک ساختار کد تمیز و قابل‌گسترش می‌سازی

ایدهٔ سناریو 📝
فرض کن می‌خواهی کارهای روزانه‌ات را روی مرورگر ثبت کنی؛ اضافه‌کردن task، حذف‌کردن، و این‌که با بستن تب همه چیز نپره. همین.

نمونه کد مینیمال (index.html + script.js در یک فولدر بگذار):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Todo Vanilla JS</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { margin-right: 8px; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <input id="todo-input" placeholder="New task..." />
  <button id="add-btn">Add</button>
  <ul id="todo-list"></ul>

  <script>
    const input = document.querySelector("#todo-input");
    const addBtn = document.querySelector("#add-btn");
    const list = document.querySelector("#todo-list");

    let todos = JSON.parse(localStorage.getItem("todos") || "[]");

    function save() {
      localStorage.setItem("todos", JSON.stringify(todos));
    }

    function render() {
      list.innerHTML = "";
      todos.forEach((text, index) => {
        const li = document.createElement("li");
        li.textContent = text;

        const removeBtn = document.createElement("button");
        removeBtn.textContent = "x";
        removeBtn.addEventListener("click", () => {
          todos.splice(index, 1);
          save();
          render();
        });

        li.prepend(removeBtn);
        list.appendChild(li);
      });
    }

    addBtn.addEventListener("click", () => {
      const value = input.value.trim();
      if (!value) return;
      todos.push(value);
      input.value = "";
      save();
      render();
    });

    render();
  </script>
</body>
</html>

چند نکته‌ی کاربردی 💡

• JSON.parse و JSON.stringify این‌جا برای تبدیل آرایه به string و برعکس استفاده شده؛ دقیقا مطابق چیزی که MDN برای localStorage پیشنهاد می‌دهد.
• همیشه قبل از push، مقدار input را .trim() کن تا task خالی ذخیره نشود.
• با جداکردن تابع‌های save و render، بعدا راحت می‌شود featureهایی مثل edit یا checkbox برای completed اضافه کرد.

این الگوی کوچک، بیس خیلی از appهای واقعی است: گرفتن input کاربر، update کردن state، sync با UI و نگه‌داشتن داده در storage. یک بار از اول تا آخر با حوصله بساز، بعدش هر فریم‌ورکی را راحت‌تر می‌فهمی ✨

امتحانش روی یک فایل ساده HTML حس خوبی از «چیزی که خودم ساختم و کار می‌کند» می‌دهد؛ اگر دوست داشتی گسترشش بده و برای بقیهٔ devها بفرست 🌱

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #localStorage #Vanilla_JS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

🔥7❤3

1.81K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

✨ ساخت یک Todo List ساده با JavaScript خالص (بدون Framework)

خیلی وقت‌ها برای تمرین JavaScript و DOM، یک پروژه کوچیک و واقعی مثل Todo List بهترین گزینه‌ست. هم رویدادها رو لمس می‌کنی، هم کار با DOM و هم مدیریت state ساده رو.

یکی از بهترین رفرنس‌ها برای کار با DOM و رویدادها، مستندات MDN هست:
MDN DOM Introduction

در این تمرین، با چند مفهوم مهم سر و کار داریم:

✅ گرفتن elementها با querySelector
✅ گوش دادن به eventها مثل submit و click
✅ جلوگیری از refresh فرم با event.preventDefault()
✅ دستکاری DOM با createElement و appendChild

مثال زیر یک Todo List خیلی ساده ولی عملی است. کافی‌ست یک فایل index.html بسازی و این کد را داخلش قرار بدهی و در مرورگر باز کنی:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Simple Todo</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; }
    form { display: flex; gap: 8px; }
    ul { padding: 0; list-style: none; }
    li { display: flex; justify-content: space-between; margin: 4px 0; }
    button { cursor: pointer; }
  </style>
</head>
<body>
  <h1>Todo List</h1>
  <form id="todo-form">
    <input id="todo-input" placeholder="New task..." required />
    <button type="submit">Add</button>
  </form>
  <ul id="todo-list"></ul>

  <script>
    const form = document.querySelector('#todo-form');
    const input = document.querySelector('#todo-input');
    const list = document.querySelector('#todo-list');

    form.addEventListener('submit', function (event) {
      event.preventDefault();
      const text = input.value.trim();
      if (!text) return;

      const li = document.createElement('li');
      const span = document.createElement('span');
      span.textContent = text;

      const removeBtn = document.createElement('button');
      removeBtn.textContent = 'x';

      removeBtn.addEventListener('click', function () {
        list.removeChild(li);
      });

      li.appendChild(span);
      li.appendChild(removeBtn);
      list.appendChild(li);

      input.value = '';
      input.focus();
    });
  </script>
</body>
</html>

نکته‌های ریز 👇

• استفاده از trim() جلوی اضافه شدن تسک خالی را می‌گیرد.
• با event.preventDefault() فرم صفحه را reload نمی‌کند و کنترل دست ما می‌ماند.
• با addEventListener روی خود دکمه حذف کار می‌کنیم تا ساختار کد تمیزتر بماند.

این تمرین پایه خوبی برای قدم‌های بعدی مثل ذخیره‌سازی در localStorage، اضافه کردن فیلتر (Completed / Active) یا بعداً پیاده‌سازی همین ایده در React یا Vue است.

امتحانش روی یک فایل ساده لوکال حس خوبی از «کار کردن کد» می‌دهد و درک DOM را خیلی محکم‌تر می‌کند. اگر به درد دوستی می‌خورد که تازه JavaScript را شروع کرده، برایش بفرست 💚

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #DOM #Todo #Frontend #ES6 #VanillaJS

👤 Developix

💎 Channel: @DevelopixJavascript

🔥6❤2

1.4K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

کتابخونه 🐻 Zustand یه state manager مینیمال برای React هست که بدون ceremony اضافی، state سراسری رو برات حل می‌کنه.

مزیتش نسبت به Redux و بقیه چیه؟
• API خیلی ساده و مستقیم
• بدون providerهای تو در تو؛ فقط یک store
• performance عالی با رندر کم‌تر کامپوننت‌ها
• پشتیبانی از TypeScript بدون دردسر

یه مثال ساده:

npm install zustand

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))

function Counter() {
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)

  return <button onClick={increase}>Bears: {bears}</button>
}

برای پروژه‌هایی که Redux براشون زیادی سنگینه، Zustand گزینه‌ایه که هم کد رو تمیز نگه می‌داره هم مقیاس‌پذیره. مخصوصاً برای dashboardها، panelهای ادمین و appهای data-heavy خیلی جواب می‌ده.

مستندات و سورس:
GitHub
Docs

یک بار تو یه پروژه واقعی تستش کن، معمولاً بعدش برگردوندنش به عقب سخته 😄

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #Zustand #State_Management #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

👍4

1.73K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

⏱ جلوگیری از اجرای اضافی event با debounce ساده

تو پروژه‌های فرانت، eventهایی مثل scroll و input می‌تونن تو هر ثانیه ده‌ها بار فایر بشن و باعث لگ، مصرف CPU و رندر اضافه بشن. یک تکنیک ساده برای کنترل این ماجرا، استفاده از debounce هست. 😉

ایده: تا وقتی کاربر داره پشت‌سرهم تایپ یا اسکرول می‌کنه، تابع اصلی اجرا نشه؛ فقط وقتی یک مدت کوتاه هیچ eventی نیومد، تابع رو صدا بزن.

function debounce(fn, delay) {
  let timeoutId;
  return function (...args) {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const handleSearch = debounce((event) => {
  console.log("Search:", event.target.value);
}, 400);

const input = document.querySelector("#search");
input.addEventListener("input", handleSearch);

💡 این کار تعداد requestهای سرچ، رندر مجدد و لاگ‌ها رو به‌شدت کم می‌کنه و UX نرم‌تری می‌سازه.

مرجع بیشتر در مورد timing ها و eventها:
MDN - setTimeout

امتحانش روی inputهای سرچ یا resize و scroll نتیجه خیلی ملموسی می‌دهد. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #debounce #performance #events #frontend

👤 Developix

💎 Channel: @DevelopixJavascript

👍5❤1

1.29K views17:00

| کانال توسعه‌دهندگان جاوااسکریپت |

ساخت TODO List یکی از بهترین تمرین‌های واقعی برای جا افتادن مفاهیم DOM، event ها و ذخیره داده‌ها در مرورگر است. این بار بدون React و فریم‌ورک، فقط با Vanilla JS و LocalStorage 💪

منبع اصلی ایده و توضیحات: آموزش MDN درباره Web Storage API و مستندات DOM Manipulation.

ایده کلی 👇
یک فرم ساده داریم برای اضافه‌کردن task ها، لیست را با JS توی DOM رندر می‌کنیم و هر تغییری که کاربر می‌دهد را در localStorage ذخیره می‌کنیم تا بعد از refresh هم از بین نرود.

نکته خوبش این است که با همین مثال ساده، چند تا چیز مهم جا می‌افتد:

• کار با querySelector و ساخت element های جدید
• مدیریت event ها مثل submit و click
• تبدیل array به string و برعکس با JSON.stringify و JSON.parse
• sync نگه‌داشتن UI با state ذخیره‌شده در localStorage

یک اسکلت ساده از کد 👇

<!-- index.html -->
<form id="todo-form">
  <input id="todo-input" placeholder="کار جدید..." />
  <button type="submit">اضافه کن</button>
</form>

<ul id="todo-list"></ul>

<script src="app.js"></script>

و فایل جاوااسکریپت:

// app.js
const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

const STORAGE_KEY = "jsdev_todos";
let todos = loadTodos();
render();

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;

  todos.push({ id: Date.now(), text });
  input.value = "";
  saveTodos();
  render();
});

list.addEventListener("click", (e) => {
  if (!e.target.matches("button[data-id]")) return;
  const id = Number(e.target.dataset.id);
  todos = todos.filter((t) => t.id !== id);
  saveTodos();
  render();
});

function loadTodos() {
  const raw = localStorage.getItem(STORAGE_KEY);
  try {
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}

function saveTodos() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
}

function render() {
  list.innerHTML = "";
  todos.forEach((todo) => {
    const li = document.createElement("li");
    li.textContent = todo.text + " ";

    const btn = document.createElement("button");
    btn.textContent = "حذف";
    btn.dataset.id = todo.id;

    li.appendChild(btn);
    list.appendChild(li);
  });
}

چند نکته ریز ولی مهم 🧠
• همیشه روی داده localStorage یک try...catch بگذار که اگر خراب شد (مثلاً دستی ویرایش شده بود) اپ کرش نکند.
• از یک key ثابت مثل jsdev_todos استفاده کن تا اگر بعداً چند بخش دیگر هم اضافه شد، تداخل نداشته باشند.
• برای id ها اینجا از Date.now() استفاده شده، که برای پروژه‌های کوچک کافی است.

با همین ساختار پایه می‌شود بعدها checkbox برای completed، فیلتر، و حتی sync ساده با backend هم اضافه کرد. یک بار این نمونه را تا انتها بساز، بعد هر جای اپ‌های واقعی که state و UI sync می‌شوند خیلی قابل فهم‌تر به نظر می‌رسد ⚡️

اگر ساختی و کمی شخصی‌سازی‌اش کردی، نسخه‌ات را برای بقیه بچه‌های جاوااسکریپت هم بفرست؛ همین مثال‌های کوچک کم‌کم تبدیل به component و pattern های جدی‌تر می‌شوند.

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #LocalStorage #DOM #VanillaJS #Frontend

👤 Developix

💎 Channel: @DevelopixJavascript

❤6👍2

1.26K views17:00

About

Blog

Apps

Platform