React

اگر در زمان ست کردن پروکسی در فایل package.json با خطای زیر مواجه شدید: When specified, "proxy" in package.json must be a string. [1] Instead, the type of "proxy" was "object". [1] Either remove "proxy" from package.json, or make it a string. مربوط به ...

در React، ویژگی key برای شناسایی و مدیریت مؤلفه‌ها در هنگام به‌روزرسانی‌ها و تغییرات در DOM استفاده می‌شود. این ویژگی به‌طور خودکار توسط ری اکت مورد استفاده قرار می‌گیرد و به همین دلیل در this.props در دسترس نیست. برای دسترسی به یک مقدار key، می‌توانید از ...

استفاده از تابع پیکانی در سازنده‌ی یک کامپوننت React موضوعی است که به دو نگرش مختلف ارائه می‌شود. در اینجا به بررسی دو روش معمول برای تعریف متدها در کلاس‌های React می‌پردازیم و مزایا و معایب هر یک را بیان می‌کنیم. دو روش متداول 1 استفاده از : class Test ...

روش نوشتن کامپوننت‌ها در React می‌تواند تأثیر زیادی بر عملکرد و قابل فهم بودن کد داشته باشد. یکی از مسائلی که در توسعه نرم‌افزار با React مطرح می‌شود، تعریف کامپوننت های تابعی در داخل تابع render است. برخی از توسعه دهندگان این کار را به عنوان یک ضد الگو ...

تفاوت‌های اصلی رندر مجدد بزرگ‌ترین تفاوت بین useState و useRef این است که استفاده از useState باعث رندر مجدد کامپوننت می‌شود، در حالی که useRef چنین تاثیری ندارد. وقتی که یک وضعیت با useState تغییر کند، کامپوننت دوباره رندر می‌شود و این ممکن است برای ...

در React، برای مدیریت وضعیت checkbox و تعیین مقدار پیش‌فرض آن، روش‌های مختلفی وجود دارد که استفاده از defaultChecked یکی از این روش‌هاست. اگر بخواهید یک checkbox را با مقدار پیش‌فرض checked بسازید و در عین حال بتوانید با کلیک بر روی آن وضعیت آن را تغییر ...

فرض کنید سایت ما منویی دارد که می خواهیم کاربر با ورود به صفحات سایت، لینک مربوط به صفحه مورد نظر در منو به حالت فعال دربیاید. برای مثال وقتی کاربر در صفحه اصلی سایت است لینک خانه (Home) به‌صورت پیش‌فرض فعال باشد. در React-Router نسخه 4 به بعد ، برای ...

برای تشخیص زمان رسیدن کاربر به انتهای یک div، می‌توانید از ویژگی‌های scrollHeight، scrollTop و clientHeight در JavaScript استفاده کنید. این خصوصیات به شما اجازه می‌دهند تا مقدار ارتفاع اسکرول شده را با مقادیر دیگر مقایسه کنید. برای پیاده‌سازی در React، ...

در React 16، امکانی اضافه شده است که اتریبیوتهای تگ ها به DOM پاس داده می شوند. این مسئله منجر به این پرسش شده که آیا می‌توان از "class" به جای "className" استفاده کرد یا خیر و آیا مزایای استفاده از "className" نسبت به "class" وجود دارد یا خیر. نخستین ...

اگر در زمان بیلد کردن پروژه React با خطای زیر مواجه شدید: Module not found: Can't resolve './path/to/module' in '/x' خطا ممکن است ناشی از اشتباه در مسیر فایل‌ها باشد. در React، هنگام استفاده از import، معمولاً مسیرهای نسبی استفاده می‌شود. فرض کنید که می ...

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

فرض کنید، شما در حال استفاده از یک کلاس React به شکل زیر هستید و می‌خواهید تابعی به نام onToggleLoop را برای تغییر وضعیت loopActive در هنگام کلیک روی یک دکمه فراخوانی کنید. مشکلی که با آن مواجه هستید این است که "this" در این تابع undefined است. این مساله ...

در React، برای ارتباط بین فرزندان و والدین و به‌روزرسانی حالت والد از طریق فرزندان، معمولاً بهترین روش استفاده از توابع است. در این روش، یک تابع برای به‌روزرسانی حالت والد به فرزندان پاس داده می‌شود و فرزندان می‌توانند از این تابع برای تغییر وضعیت والد ...

در ES6 و React، تابع‌های پیکان (arrow functions) به شیوه‌های متفاوتی می‌توانند نوشته شوند، که یکی از سوالات متداول در این زمینه این است که چرا برخی از این توابع از آکولاد و برخی دیگر از پرانتز استفاده می‌کنند. در واقع، انتخاب بین آکولاد و پرانتز به نوع ...

برای دسترسی به یک عنصر DOM در React، از مفهوم "ref" استفاده می‌شود که به شما امکان می‌دهد به عناصر خاصی از کامپوننت‌ها دسترسی پیدا کنید. به‌جای استفاده از روش‌های سنتی همچون document.getElementById()، می‌توانید از مراجع (refs) استفاده کنید که راهی بهینه و ...

فرض کنید که حالتی برایتان پیش آمده که می خواهید کامپوننتی را در React بر اساس تغییر یک وضعیت خارج از کامپوننت مجدد رندر کنید. چون در حالت عادی، یک کامپوننت با تغییر وضعیت داخلی خود، مجدد رندر می شود. برای این کار در کامپوننت‌های کلاسی، شما می‌توانید از ...

تشخیص اینکه آیا یک کلیک خارج از یک کامپوننت React رخ داده است، یکی از چالش‌های رایج در کار با React است. برای این کار می‌توان از ترکیب ویژگی‌های React و DOM استفاده کرد. در اینجا چند روش برای انجام این کار توضیح داده می‌شود. روش استفاده از هوک (Hooks) یک ...

کد زیر را در نظر بگیرید: function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(prevTime => prevTime + 1); // <-- Change this line! }, 1000); return () => { ...

در صورتی که در هنگام دریافت اطلاعات جی سان از سرور با خطای زیر روبرو شدید: SyntaxError: Unexpected token < in JSON at position 0 به این معنی است که شما به جای دریافت داده‌های JSON از سرور، یک فایل HTML (یا XML) دریافت کرده‌اید و شما سعی در پارس کردن آن ...

در هنگام توسعه یک برنامه با React، یکی از هشدارهای شایع که ممکن است با آن روبه‌رو شوید خطای "Can't perform a React state update on an unmounted component" است. این پیام هشدار می‌دهد که شما در حال تلاش برای بروزرسانی state یک کامپوننت هستید که به تازگی از ...

چند دلیل برای دوبار فراخوانی شدن تابع useEffect در React وجود دارد که می‌تواند به توضیح مسئله کمک کند: React.StrictMode: یکی از دلایل رایج این مشکل فعال بودن StrictMode در برنامه‌های React است. این حالت به طور عمدی کامپوننت‌ها را دو بار رندر می‌کند تا ...

برای ارسال داده‌های فرم بوسیله Axios، بهتر است از FormData استفاده کنید. FormData به شما این امکان را می‌دهد که داده‌ها را به صورت چندقطعه‌ای (multipart) ارسال کنید. به عنوان مثال: var bodyFormData = new FormData(); bodyFormData.append('userName', ...

برای دسترسی به متدهای کامپوننت فرزند از داخل والد، معمولاً توصیه می‌شود که از روش‌های معمول در React استفاده کنید. یکی از بهترین راه‌ها این است که عملکردها را به کامپوننت فرزند به وسیله props پاس دهید و از کامپوننت فرزند به وسیله رویدادها (Events) یا ...

در ReactJS برای ارسال داده از یک کامپوننت فرزند به والد، می‌توانیم از یک تابع ارسال‌ شده به عنوان props استفاده کنیم. در اینجا نحوه انجام این کار با یک مثال عملی آورده شده است. ساختار کامپوننت والد در کامپوننت والد، یک تابع (handleLanguage) تعریف می‌شود ...

در کدهای React، ممکن است با توابعی مواجه شوید که ظاهری مشابه زیر دارند: handleChange = field => e => { e.preventDefault(); /// Do something here } این نوع توابع در واقع توابع currying هستند. به عبارت دیگر، تابع handleChange یک تابع را به عنوان خروجی ...