طراحی سایت با ری اکت چگونه است + آموزش گام به گام React

تاریخ به روزرسانی	۱۵ فروردین ۱۴۰۰
تاریخ ایجاد	۱۰ مهر ۱۳۹۹
دیدگاه‌‌ها	۲ دیدگاه
زمان	۱۱ دقیقه مطالعه
امتیازدهی	۴.۶ از ۵ (۱۰)
دسته	طراحی سایت

نوشته‌های مرتبط
تفاوت صفحات و پست های وردپرس چیست؟
۵ مشکل نصب وردپرس که همین الان باید درباره ‌اون بدونین!
طراحی وبسایت برای موبایل با حرفه‌ای‌ترین روش‌ها
REST API وردپرس چیه و پیامدهای آن برای کاربر و توسعه دهنده چیست؟
افزایش سریع نرخ کلیک به وسیله ایده های جذاب طراحی سایت

فهرست مطالببستن

۱. React چیست؟
۲. آیا طراحی وبسایت با ری اکت آسونه؟
۳. نحوه طراحی سایت با ری اکت
- ری اکت رو وارد عمل کنین!
  - React Component
۴. شما چه کار دیگه‌ای می‌تونین انجام بدین؟
۵. طراحی سایت با ری اکت در مقابل چارچوب‌های دیگه

طراحی سایت با ری اکت می تونه جزء جذاب‌ترین تجربه‌های یک طراح وب باشه. React یه کتابخونه جذاب از جاوا اسکریپت هست که برای ساخت وبسایت و اپلیکیشن استفاده میشه. در واقع میشه گفت که طراحی سایت با ری اکت دنیایی می‌سازه که JavaScript و HTML با هماهنگی کامل در پرونده‌های اون با هم فعالیت می‌کنن و داده‌های همیشه در حال تغییر شما رو همونطور که می‌خواین به مرورگر ارائه میدن.

امروز موضوع بحث ما در این مقاله اینه که اصلاً ری اکت چیه. همینطور اینکه استفاده از این کتابخونه تو طراحی وبسایت چه کمکی به شما میکنه. پس تا آخر مقاله همراه ما باشین تا به جواب سوالات خودتون برسین.

React چیست؟

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

مثلاً فرض کنین شما یکی از طرفدارهای بزرگ المپیک هستین و برای ردیابی امتیازات، تصمیم به طراحی وبسایت با React می‌گیرین. دیگه لازم نیست کاربرانی که از سایت شما بازدید می‌کنن، منتظر بمونن تا داده‌ها مدام بازسازی و نوسازی بشن! مؤلفه‌های React به طور کارآمدی به روز میشن تا داده‌های در حال تغییر رو در خودشون جا بدن و اونها رو به مخاطب ارائه بدن!

React برای واکنش در برابر تغییرات داده‎های ورودی از روش virtual tree reconciliation استفاده می‎کنه. در این روش هر زمان داده‌ای تغییر می‌کنه، به جای بازسازی کل درخت DOM (که کار کندی هم هست)، ری اکت تصمیم می‌گیره یه سری تغییرات در Virtual DOM انجام بده و نهایتاً هم کمترین تعداد تغییرات DOM که ضروری هستن رو اعمال می‌کنه. درخت مجازی Virtual Tree در مقابل چیزی مثل vanilla JS یا jQuery قرار می‌گیره که در اون شما مستقیماً شبکه‌های DOM رو تنظیم یا به‌روز میکنین.

بهتره بدونین که تقریباً همه چارچوب‌های فعلی JS ( به عنوان مثال Angular ، Vue و غیره) دارن به مکانیسم‌های مشابهی با ری اکت، دسترسی پیدا میکنن.

تغییر سایت شما از چیزی که قبلاً بوده به فناوری‌های جدید، به معنای انتقال تدریجی سایت (صفحه به صفحه) به اون فناوری جدیده. انجام چنین کاری با برخی از فناوری‌های جدید front-end که میخوان کل صفحه رو کنترل کنن، دشواره. در واقع این فناوری‌ها مثل اون دوستی هستن که می‌خواد هر مهمونی که شما دعوت شدین، اون هم دعوت بشه و اصلاً براش مهم نیست که آیا اصلاً حضورش در چنین جایی لازمه یا نه. یعنی باید در همه قسمت‌های سایت خودتون بی‌برو برگرد ازشون استفاده کنین.

اما خبر خوب اینه که طراحی سایت با ری اکت کار جذابیه چون این ابزار اصلاً مثل فناوری‌های قبلی نیست. بلکه خیلی هم خوشش میاد که فقط در بخش‌هایی از سایت شما که خودتون لازم میدونین، استفاده بشه. بنابراین می‌تونین به تدریج کد خودتون رو در React دوباره فاکتور بگیرین. پس حالا می‌تونیم بگیم ری اکت اون دوست صاف و صادقیه که به شما تو هر قسمت از مهمونی که دلتون بخواد، کمک می‌کنه و با بقیه افراد هم رفتار خیلی خوبی داره.

آیا طراحی وبسایت با ری اکت آسونه؟

وبسایت با استفاده از کامپوننت های component ری اکت و با توجه به اصل Single Responsibility به کوچکترین بیت‌های ممکن تقسیم میشه.

به عنوان مثال، در یه لیست کارها (منظورمون To-Do List هست)، سلسله مراتب مؤلفه‌ها شامل موارد زیر است:

لیست کامل کارها
نوشتن عنوان برای هر گروه از کارهایی که قراره انجام بشه
اضافه کردن لاین انجام کار
نوشتن لاین انجام کار
وظایف فرعی که در بین کارهای انجام شده، قراره انجام بشه
نمایش دکمه تکمیل کارها

وب سایت Reactjs.org به شما توصیه می‌کنه که هنگام ایجاد سلسله مراتبی از اجزای React و زیرمجموعه‌ها یا در واقع همون طراحی سایت با ری اکت، با طراح(های) خودتون همکاری کنین. چون که طراحان احتمالاً از قبل برای هر قطعه کوچیک از طرح، اسم دارن و اینطوری می‌تونین از عدم تشابه اسمی اجزای خودتون با اونها مطمئن بشین و به مشکل برنخورین.

مؤلفه‌های React یا React Components دقیقاً مثل سایر توابع در هر زبان برنامه نویسی دیگه‎ای کار میکنن، چون که ما همیشه مؤلفه‌ها رو با یه مقدار ورودی فراخوانی می‌کنیم (که در React ، «ویژگی» property نامیده میشه) و با یه مقدار خروجی خارجشون می‌کنیم (یک بخش UI در React). همچنین، اجزای Component اون تابع، قابل استفاده مجدد هستن و می‌تونن کامپوننت دیگه‌ای رو هم در خودشون جای بدن. پس در ری اکت و سایر زبان های برنامه نویسی، همچین مواردی مشابه هم هستن.

نحوه طراحی سایت با ری اکت

خب حالا وقتشه که در مورد طراحی سایت با این کتابخونه محبوب جاوا اسکریپت صحبت کنیم:

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

البته اصلاً نگران نباشین! اگه قبلاً هرگز برنامه نویسی نکردین و موارد بالا برای شما ترسناک به نظر میان، یه بار دیگه یه نگاهی روی اونها بندازین، خواهید دید که این برچسب ها>ی مختلف هستن که ساختار محتوای شما رو ارائه میدن. برخی از برچسب‌ها مثل ویژه هستن، چون به مرورگر شما کمک می‌کنن تا متوجه بشه این قسمت از محتوا، عنوان صفحه شما است.</p><p>اما صفحات وب ثابت و ساده، ذاتاً برای کاربران خسته کننده هستن. انسان‌ها دوست دارن که با سایت ها تعامل داشته باشن. این امر به این معنیه که مثلاً شما می‌تونین روی مواردی که دلتون می‌خواد کلیک کنین و نتیجه‌ای رو ببینین.</p><p>پس برای حل این مسئله، برخی از افراد باهوش در Netscape ، <strong>جاوا اسکریپت</strong> رو ساختن که در نهایت به محبوب‌ترین زبان برنامه نویسی جهان برای طراحی وبسایت ها تبدیل شد. اما داستان امروز ما که <strong>طراحی سایت با ری اکت</strong> است، یه چیز کاملاً متفاوته و باید ببینیم که ربط اون به جاوا اسکریپت چی میتونه باشه!</p><p>تنها چیزی که باید بدونین اینه که خود جاوا اسکریپت بسیار ساده است. شما از برچسب ویژه <script> استفاده می‌کنین و چند خط کد هم در این بین می‌نویسین:</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="PGh0bWw+CiAgICA8aGVhZD4KICAgICAgICA8dGl0bGU+UGFnZTwvdGl0bGU+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgYWxlcnQlMjglMjJIZWxsbyEiJTI5OwogICAgICAgIDwvc2NyaXB0PgogICAgPC9oZWFkPgogICAgPGJvZHk+CiAgICAgICAgV2VsY29tZSB0byBteSB3ZWIgcGFnZS4KICAgIDwvYm9keT4KPC9odG1sPg=="></code></pre><p>خیلی ساده بود، درسته؟ اما این مثال یه چیز سرگرم کننده و جذاب نیست. چون تمام کاری که این کد انجام میده اینه که هنگام بارگذاری صفحه، نمایش داده میشه و اصلاً تعاملی نیست. ولی خواسته شما چی بود؟ این که روی کدی کلیک کنین و با اون تعامل داشته باشین! پس برای این کار به جاوا اسکریپتی نیاز دارین که به اقداماتی که در صفحه انجام میدین پاسخ بده.</p><p>در اینجا توابع و رویدادها وارد عمل میشن. یه <strong>تابع (function)</strong> راهی برای نامگذاری بلوک کد است و یک <strong>رویداد (event)</strong> اون چیزیه که برای صفحه شما اتفاق میفته. مثل کلیک، پیمایش، ضربه زدن و غیره. در این حالت، ما ازتون می‌خوایم که یه رویداد کلیک از تابعی به نام sayHello رو اجرا کنین:</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="PGh0bWw+CiAgICA8aGVhZD4KICAgICAgICA8dGl0bGU+UGFnZTwvdGl0bGU+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgZnVuY3Rpb24gc2F5SGVsbG8lMjglMjkgewogICAgICAgICAgICAgICAgYWxlcnQoJTIySGVsbG8hIik7CiAgICAgICAgICAgIH0KICAgICAgICA8L3NjcmlwdD4KICAgIDwvaGVhZD4KICAgIDxib2R5PgogICAgICAgIDxidXR0b24gb25jbGljaz0ic2F5SGVsbG8oKSI+Q2xpY2sgTWUhPC9idXR0b24+CiAgICA8L2JvZHk+CjwvaHRtbD4KPGh0bWw+CiAgICA8aGVhZD4KICAgICAgICA8dGl0bGU+UGFnZTwvdGl0bGU+CiAgICAgICAgPHNjcmlwdD4KICAgICAgICAgICAgZnVuY3Rpb24gc2F5SGVsbG8oKSB7CiAgICAgICAgICAgICAgICBhbGVydCgiSGVsbG8hIik7CiAgICAgICAgICAgIH0KICAgICAgICA8L3NjcmlwdD4KICAgIDwvaGVhZD4KICAgIDxib2R5PgogICAgICAgIDxidXR0b24gb25jbGljaz0ic2F5SGVsbG8oKSI+Q2xpY2sgTWUhPC9idXR0b24+CiAgICA8L2JvZHk+CjwvaHRtbD4KQ28="></code></pre><p>تبریک میگیم، شما حالا یه <strong>توسعه دهنده وب</strong> هستین! چون که در واقع تونستین برخی از عناصر بنیادی JavaScript رو یاد بگیرین و این کار اونقدر ساده و سرگرم کننده است که هرکسی می‌تونه این روش رو برای طراحی سایت خودش انتخاب کنه.</p><div class="left-bordered-box recommend mb-3 py-3 px-5"><div class="title h5 mb-2">پیشنهاد برای مطالعه</div><div class="body"><a href="https://pmpr.ir/back-end-development/" class="card-link" title="برنامه نویسی بک اند چطوریه و Back End Developer چه مهارت‌هایی لازم داره؟" aria-label="برنامه نویسی بک اند چطوریه و Back End Developer چه مهارت‌هایی لازم داره؟">برنامه نویسی بک اند چطوریه و Back End Developer چه مهارت‌هایی لازم داره؟</a></div></div><h3 id="put-react-into-action" data-translate="0">ری اکت رو وارد عمل کنین!</h3><p>همونطوری که گفتیم <strong>React</strong> یه کتابخونه JavaScript است که ایجاد UI های تعاملی رو آسون‌تر میکنه. اگه باورتون نمیشه بهتره بریم سراغ کد زیر که مشابه چیزیه که قبلاً هم مشاهده کردیم، با این تفاوت که الان این کد در ری اکت نوشته شده:</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="aW1wb3J0ICogYXMgUmVhY3QgZnJvbSAlMjJyZWFjdCI7CiAKZXhwb3J0IGZ1bmN0aW9uIFBhZ2UlMjglMjkgewogICAgZnVuY3Rpb24gc2F5SGVsbG8oKSB7CiAgICAgICAgYWxlcnQoIkhlbGxvISIpOwogICAgfQogCiAgICByZXR1cm4gPGJ1dHRvbiBvbkNsaWNrPXtzYXlIZWxsb30+Q2xpY2sgbWU8L2J1dHRvbj47Cn0K"></code></pre><p>شاید به نظرتون این کد هم مثل کد قبلی باشه و به نظرتون هیچ فرقی با اون نداشته باشه، بلکه فقط ساده شده باشه. خب پس اینجا دقیقاً چی تغییر کرده؟</p><ul><li>در React، شما <strong>HTML</strong> خودتون رو در داخل <strong>JavaScript</strong> خودتون می‌نویسین.</li><li>صفحه شما هم اکنون یه <strong>function</strong> است.</li><li>در اینجا عملکرد <strong>sayHello</strong> با مورد قبلی دقیقاً یکسانه، اما دیگه نیازی به <strong>برچسب</strong> ندارین!</li><li>سرانجام، <Button> هنوز <strong>HTML</strong> معمولیه که همه میشناسین و دوستش دارین.</li></ul><p>بنابراین، می‌تونیم همین‌جا کار رو متوقف کنیم و بهتون بگیم که <strong>طراحی سایت با React</strong> تماماً معادل استفاده از برچسب‌های کمتر و سرعت بخشیدن به گردش کار شماست. اما این دلیل اون همه خوشحالی و رضایت برای استفاده از ری اکت نیست! مسئله فقط استفاده از برچسب‌های کمتر نیست، بلکه شما می‌تونین برچسب‌های خودتون رو بسازین (به برچسب‌هایی که در React ایجاد می‌کنین کامپوننت Component گفته میشه) و این اون چیزیه که این کتابخونه رو از بقیه زبان ها جدا می‌کنه.</p><h4 id="react-component" data-translate="0">React Component</h4><p>اگه از <a href="https://pmpr.ir/is-web-designing-hard/"><strong>طراحی وب</strong></a> خوشتون میاد، احتمالاً برچسب‌های رایج مانند div ،p ،span و غیره رو از قبل راجع بهشون می‌دونین و اونها رو دوست دارین. برای اهداف این تمرین، فرض کنین در حال ساخت یه Navigation وبسایت معمولی در HTML هستین. چیزی که اینجا به نظر می‌رسه شبیه زیر است:</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="PGRpdj4KICAgIDxkaXY+PGltZyBzcmM9JTIyaW1hZ2UvSG9tZS5wbmciPjxzcGFuPkhvbWU8L3NwYW4+PC9kaXY+CiAgICA8ZGl2PjxpbWcgc3JjPSJpbWFnZS9IZWxwLnBuZyI+PHNwYW4+SGVscDwvc3Bhbj48L2Rpdj4KICAgIDxkaXY+PGltZyBzcmM9ImltYWdlL0RvY3MucG5nIj48c3Bhbj5Eb2NzPC9zcGFuPjwvZGl2PgogICAgPGRpdj48aW1nIHNyYz0iaW1hZ2UvTWFpbC5wbmciPjxzcGFuPk1haWw8L3NwYW4+PC9kaXY+CjwvZGl2Pgo="></code></pre><p>خیلی ساده است، اما همونطور که می‌بینین، خیلی تکراریه! برای هر مورد از منو، شما باید یه دسته کامل از <strong>HTML</strong> دقیقاً یکسان، با نمادها و عناوین مختلفی رو بنویسین. از اون بدتر، اگه بعداً تصمیم گرفتین که نوع آیتم‌های منو رو تغییر بدین، باید اون رو برای هر مورد کپی، جایگذاری و به‌روز کنین.</p><p>بنابراین نظرتون چیه یه روش دیگه رو امتحان کنیم؟! یه لحظه تصور کنین که در بالای همه برچسب‌های موجود، می‌تونین برچسب‌های جدیدی رو ایجاد کنین و حالا اگه شما قادر به انجام هر نوع مانوری در طراحی سایت بودین، آیا دوست نداشتین که منوی خودتون رو بیشتر شبیه مورد زیر کنین؟</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="PGRpdj4KICAgIDxNZW51SXRlbSBuYW1lPSUyMkhvbWUiIC8+CiAgICA8TWVudUl0ZW0gbmFtZT0iSGVscCIgLz4KICAgIDxNZW51SXRlbSBuYW1lPSJEb2NzIiAvPgogICAgPE1lbnVJdGVtIG5hbWU9Ik1haWwiIC8+CjwvZGl2Pgo="></code></pre><p>این اون چیزیه که می‌تونیم بگیم خیلی قشنگ‌تر و تمیزتر از مورد قبلیه و البته خیلی هم کارآمدتره! شما الان نسخه HTML خودتون رو ایجاد کردین، یعنی دیگه مؤلفه‌هایی دارین که فقط برای وب سایتی که در اون کار می‌کنین ساخته شدن. تقریباً می‌تونین اجزای خودتون رو به عنوان الگوهای ریزی تصور کنین که از طریق برچسب‌ها کاملاً با <strong>HTML</strong> ترکیب شدن.</p><p>مطمئنیم که شما تاحالا حدس زدین که این دقیقاً همون چیزیه که <strong>طراحی وبسایت با React</strong> به شما امکان میده انجام بدین. بیایین به نسخه دقیق موارد بالا در React نگاهی بیندازیم:</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="ZnVuY3Rpb24gTWVudUl0ZW0lMjhwcm9wcyUyOSB7CiAgICByZXR1cm4gKAogICAgICAgIDxkaXY+CiAgICAgICAgICAgIDxpbWcgc3JjPXtgaW1hZ2UvJHtwcm9wcy5uYW1lfS5wbmdgfSAvPgogICAgICAgICAgICA8c3Bhbj57cHJvcHMubmFtZX08L3NwYW4+CiAgICAgICAgPC9kaXY+CiAgICApOwp9CiAKZnVuY3Rpb24gTWVudSgpIHsKICAgIHJldHVybiAoCiAgICAgICAgPGRpdj4KICAgICAgICAgICAgPE1lbnVJdGVtIG5hbWU9JTIySG9tZSIgLz4KICAgICAgICAgICAgPE1lbnVJdGVtIG5hbWU9IkhlbHAiIC8+CiAgICAgICAgICAgIDxNZW51SXRlbSBuYW1lPSJEb2NzIiAvPgogICAgICAgICAgICA8TWVudUl0ZW0gbmFtZT0iTWFpbCIgLz4KICAgICAgICA8L2Rpdj4KICAgICk7Cn0K"></code></pre><p>با یه تعدادی از عناصر JavaScript-y مانند <strong>function</strong> و <strong>return</strong>، این مورد کاملاً ساده به نظر می‌رسه. اما به طور کلی بدونین که شما ابتدا <strong>MenuItem</strong> رو تعریف می‌کنین و سپس اون رو هر چند بار که می‌خواین در منو به عنوان یه برچسب HTML مناسب استفاده می‌کنین. خیلی باحاله، درسته؟</p><p>توابع رو از قسمت‌های بالاتر یادتون میاد؟ توابع، راهی برای تعریف بلوک‌های کوچک کد در <strong>JavaScript</strong> با ورودی و خروجی است، دقیقاً مثل یه فرمول ریاضی. تعدادی عدد رو در اون قرار می‌دین و یه عدد دیگه‌ای به شما تحویل داده می‌شه. این دقیقاً همون کاریه که <strong>return</strong> نیز در اینجا انجام میده.</p><p>در مثال بالا، نه تنها توابع فقط برای تعریف قطعه‌ای از کد استفاده می‌شن، بلکه برای نام بردن اونها نیز کاربرد دارن و این نام توسط <strong>React</strong> به طور خودکار به برچسب تبدیل میشه.بعد می‌تونین در هر قسمت دیگه از پروژه خودتون، دقیقاً مانند برچسب MenuItem در بالا، از اون استفاده کنین. اساساً، شما می‌تونین یه جزء <strong>(component React)</strong> رو هم به عنوان یه <strong>برچسب</strong> و هم به عنوان یه <strong>تابع</strong> در نظر بگیرین. در واقع هر سه اونها مثل هم هستن! شایان ذکره که هرچه بیشتر در این باره عمیق بشین و جستجو کنین، این مسئله پیچیده‌تر می‌شه، اما در حال حاضر، این امر به شما کمک می‌کنه یه سری از اصول اساسی رو درک کنین.</p><p>آخرین قسمت، ورودیِ اجزای شماست. در این حالت، این نام برای <strong>MenuItem</strong> است. به ورودی‌های موجود در React می‌گیم props که همون فرم کوتاه شده کلمه properties هست. اگه می‌خواین از نام prop استفاده کنین، می‌تونین به سادگی props.name رو بنویسین (همونطوری که ما در مثال نوشتیم). شما آزادین هر اسمی رو که دوست دارین انتخاب کنین و هر چند باری که دلتون می‌خواد ازش استفاده کنین. برای استفاده از ورودی ها، فقط اسم <strong>Property</strong> برچسب رو تنظیم می‌کنین همونطور که برای هر کار دیگه‌ای در HTML انجام میدین: <MenuItem name = “Home” />.</p><div class="left-bordered-box recommend mb-3 py-3 px-5"><div class="title h5 mb-2">پیشنهاد برای مطالعه</div><div class="body"><a href="https://pmpr.ir/front-end-development/" class="card-link" title="برنامه نویسی فرانت اند چیه و چه مهارت‌هایی لازم داره؟" aria-label="برنامه نویسی فرانت اند چیه و چه مهارت‌هایی لازم داره؟">برنامه نویسی فرانت اند چیه و چه مهارت‌هایی لازم داره؟</a></div></div><h2 id="what-else-can-you-do" data-translate="0">شما چه کار دیگه‌ای می‌تونین انجام بدین؟</h2><p><span style="font-size: 9pt">گستردگی این زبان بی‌حد و حصره. فقط باید از تخیل خودتون استفاده کنین و وانمود کنین که مخترع <strong>HTML</strong> هستین و ذهنتون در اون حد باز و خلاقه. حالا دیگه می‌تونین کل وبسایت خودتون (یا یک کل برنامه وب) رو با React طراحی کنین که در نهایت به این شکل در میاد:</span></p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="PFBhZ2U+CiAgICA8TmF2aWdhdGlvbj4KICAgICAgICA8TWVudUl0ZW0gbmFtZT0lMjJIb21lIiAvPgogICAgICAgIDxNZW51SXRlbSBuYW1lPSJIZWxwIiAvPgogICAgPC9OYXZpZ2F0aW9uPgogICAgPEhlcm8+CiAgICAgICAgV2VsY29tZSB0byBvdXIgc2l0ZSE8QnV0dG9uPkRvd25sb2FkPC9CdXR0b24+CiAgICA8L0hlcm8+CiAgICA8R3JpZCB0eXBlPSJob3Jpem9udGFsIj4KICAgICAgICA8RmVhdHVyZT5DbG91ZDwvRmVhdHVyZT4KICAgICAgICA8RmVhdHVyZT5Ub29sczwvRmVhdHVyZT4KICAgICAgICA8RmVhdHVyZT5EZXZpY2VzPC9GZWF0dXJlPgogICAgPC9HcmlkPgogICAgPFNpZ251cCAvPgo8L1BhZ2U+Cg=="></code></pre><p>شما میتونین تمام اجزای خودتون رو به یه سیستم تبدیل کنین، اونها رو مستند کنین و با تیم خودتون به اشتراک بذارین (یعنی هر جایی که هر کسی که <strong>HTML</strong> میدونه، بتونه از اونها استفاده کنه). اگه یه کامپوننت واحد رو تغییر بدین، هر قسمت از پروژه شما به طور خودکار به روز میشه.</p><p>و البته، شما می‌تونین استایل اجزای خودتون رو هم مشخص کنین و مثلاً اونها رو تعاملی کنین. هر چیزی رو که اضافه می‌کنین در درون مؤلفه باقی خواهد موند، بنابراین همیشه جواب میده و دیگه مهم نیست که کجا ازش استفاده کردین. اگه <a href="https://pmpr.ir/css/"><strong>CSS</strong></a> رو می‌شناسین، به راحتی میتونین استایل Properties رو تشخیص بدین، اگرچه React از سبک camelCase برای اونها استفاده میکنه.</p><pre class="code-container direction-ltr text-right language-php h-100"><code class="language-php" data-lang="php" data-code="ZnVuY3Rpb24gQnV0dG9uJTI4cHJvcHMlMjkgewogICAgY29uc3QgYnV0dG9uU3R5bGUgPSB7CiAgICAgICAgcGFkZGluZzogJTIyMTJweCAzMHB4IiUyQwogICAgICAgIGJhY2tncm91bmRDb2xvcjogIiMwNUYiLAogICAgICAgIGJvcmRlclJhZGl1czogNgogICAgfTsKICAgIGNvbnN0IGJ1dHRvblRleHRTdHlsZSA9IHsgY29sb3I6ICJ3aGl0ZSIgfTsKICAKICAgIGZ1bmN0aW9uIHNheUhlbGxvKCkgewogICAgICAgIGFsZXJ0KGBIZWxsbyBmcm9tICR7cHJvcHMudGl0bGV9YCk7CiAgICB9CiAgCiAgICByZXR1cm4gKAogICAgICAgIDxkaXYgc3R5bGU9e2J1dHRvblN0eWxlfSBvbkNsaWNrPXtzYXlIZWxsb30+CiAgICAgICAgICAgIDxzcGFuIHN0eWxlPXtidXR0b25UZXh0U3R5bGV9Pntwcm9wcy50aXRsZX08L3NwYW4+CiAgICAgICAgPC9kaXY+CiAgICApOwp9Cg=="></code></pre><h2 id="website-design-with-react-vs-other-frameworks" data-translate="0">طراحی سایت با ری اکت در مقابل چارچوب‌های دیگه</h2><p><a href="https://pmpr.ir/react-website-designing/how-to-create-a-web-application-using-react/" rel="attachment wp-att-4590"><img decoding="async" class="alignnone wp-image-4590 size-full" src="https://s.pmpr.ir/u/pmpr/How-to-create-a-web-application-using-react.jpg" alt="طراحی سایت با ری اکت" width="1200" height="675" srcset="https://pmpr.ir/s/u/pmpr/How-to-create-a-web-application-using-react.jpg 1200w, https://pmpr.ir/s/u/pmpr/How-to-create-a-web-application-using-react-803x452.jpg 803w" sizes="(max-width: 1200px) 100vw, 1200px" ></a></p><p>به نظر می‌رسه که <strong>چارچوب‌های جاوا اسکریپت</strong> به سرعت برق و باد ظاهر و ناپدید میشن و مهندسان رو به بحث و جدل درباره اینکه کدوم یکی از اونها بهترینه مشغول می‌کنن. حالا سوال ما اینه که چرا طراحی وبسایت با React متفاوته؟ و مهمتر از همه، چرا ارزش یادگیری داره؟</p><p>پاسخ اینه که باید <strong>React</strong> رو فراتر از محدوده <strong>JavaScript</strong> در نظر بگیرین. به جای این که به اون فقط به عنوان یک چارچوب فکر کنین، به عنوان راهی برای شکل دادن طرز فکر و خلاقیت خودتون بهش نگاه کنین. React به شما امکان میده پروژه‌های عظیم رو به اجزای کوچک تقسیم کنین. سپس می‌تونین اونها رو با هم ترکیب کنین، دوباره استفاده کنین و به اشتراک بذارین و کاملاً هم با روشی که HTML کار میکنه ادغام میشه.</p><p><strong>React</strong> تنها یک راه برای اجرای ایده‌های شماست اما یه راه خیلی خیلی محبوب و دوست داشتنی. روش‌های مختلف دیگه‌ای مثل Vue ،Angular و غیره هم وجود داره، اما همه اونها به سمت همون روش تفکر ساختار یافته حرکت می‌کنن.</p><p>وقتی که روی React تسلط پیدا کردین، جستجوی تفاوت‌های ظریف اما هوشمندانه بین چارچوب‌های مختلف و انتخاب موردی که برای شما مناسبه، دیگه کار چندان سختی نیست 🙂</p></div></main><div class="my-5 comments-container" data-post="" id="comments_container"><h2 class="sr-only">فرم و لیست دیدگاه</h2><div class="message" id="comment_form_message"></div><div class="rating-container position-relative my-3 py-7 text-center"><div class="pr-spinner pr-overlay text-primary show"><div class="spinner-format-1 d-flex centered-absolute"><div class="spinner-item"></div><div class="spinner-item"></div><div class="spinner-item"></div><div class="spinner-item"></div><div class="spinner-item"></div></div></div></div><div id="respond" class="comment-respond"><div class="comment-reply-title mb-3 h5 d-flex justify-content-between" id="reply-title"></div>دیدگاهتان را بنویسید <small><a rel="nofollow" id="cancel-comment-reply-link" href="/react-website-designing/#respond" style="display:none;" class="text-decoration-none">لغو پاسخ</a></small></div><form action="https://pmpr.ir/wp-comments-post.php" method="post" id="commentform" class="comment-form row"><p class="comment-form-comment form-group col-12 col-lg-8"><label for="comment" class="sr-only">دیدگاه <span class="required">*</span></label> <textarea id="comment" name="comment" maxlength="65525" required="required" placeholder="دیدگاه *" rows="6" class="form-control"></textarea></p><div class="col-12 col-lg-4 my-auto"><p class="comment-form-author form-group"><label for="author" class="sr-only">نام <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" placeholder="نام *" class="form-control"></p><p class="comment-form-email form-group"><label for="email" class="sr-only">ایمیل <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" autocomplete="email" required="required" placeholder="ایمیل *" class="direction-ltr form-control"></p><p class="form-submit form-group"><button id="submit" name="submit" class="pr--field field-id-submit comment-submit justify-content-center btn-block btn-primary d-flex btn" type="submit" form="commentform"> <span class="pr-spinner spinner-border spinner-border-sm text-white me-2 mr-2 my-auto"></span> تایید</button><input type="hidden" name="comment_post_ID" value="4576" id="comment_post_ID" class="form-control"><input type="hidden" name="comment_parent" id="comment_parent" value="0" class="form-control"></p><p style="display: none;" class="form-group"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="57526e9af0" class="form-control"></p><p style="display: none !important;" class="akismet-fields-container form-group" data-prefix="ak_"><label class="sr-only">Δ<textarea name="ak_hp_textarea" cols="45" rows="6" maxlength="100" class="form-control"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="236" class="form-control"><script> document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() ); </script></p></div></form> <div class="h4 pt-4 mb-0"><span class="ml-1 text-primary"> ۲ </span> دیدگاه‌ </div><div class="my-5"><ul id="comment_list" class="comments-list list-group list-group-flush p-0"><li class="list-group-item bg-transparent border-0 p-0 mb-2 comment-list-item" id="comment-450" data-page="1"><div data-id="450" class="comment even thread-even depth-1 d-flex w-100 rounded p-2 mb-2 bg-gray-100 border border-gray-200"><img alt="" src="https://secure.gravatar.com/avatar/55a8f3b70b9fadd0e423301ced4ae6c0e1bd21038641994c70a37c3d7b7a6867?s=80&d=mm&r=g" class="avatar avatar-80 photo avatar-img rounded-circle" height="80" width="80" decoding="async"><div id="comment-450-content" class="comment-content ml-3 w-100 lh-md"><div class="d-flex justify-content-between"><div class="d-flex"><span class="h6 my-auto mr-3 author-title">آرش کمانگیری</span><time class="text-gray-700 my-auto font-13" datetime="2020-10-05"> ۱۴ مهر ۱۳۹۹ </time></div><a rel="nofollow" class="comment-reply-link" href="#comment-450" data-commentid="450" data-postid="4576" data-belowelement="comment-450" data-respondelement="respond" data-replyto="پاسخ به آرش کمانگیری" aria-label="پاسخ به آرش کمانگیری"><span class="ml-2 icon-primary icon-sm pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/reply.svg"></span></a></div><p class="font-size-sm text-gray-700 mb-0">سلام روز بخیر، میخواستم بدونم که تفاوت طراحی سایت با ری اکت و جاوا اسکریپت چیه؟ آیا هر دوی اینها یه زبان برنامه نویسی هستن و کار کردن باهاشون مشابهه یا این که دوتا چیز کاملاً متفاوتن؟</p></div></div><ul class="children"><li class="list-group-item bg-transparent border-0 p-0 mb-2 comment-list-item comment-child" id="comment-453" data-page="1"><div data-id="453" class="comment byuser comment-author-fateme bypostauthor odd alt depth-2 d-flex w-100 rounded p-2 mb-2 bg-gray-100 border border-gray-200"><img width="80" height="80" src="https://pmpr.ir/s/u/pmpr/Logo-1.svg" class="avatar avatar-80 photo avatar-img rounded-circle" alt="لوگو نویسنده" decoding="async" data-width="80" data-height="80"><div id="comment-453-content" class="comment-content ml-3 w-100 lh-md"><div class="d-flex justify-content-between"><div class="d-flex"><span class="h6 my-auto mr-3 author-title">دکتر پیمان محمدپور | کارشناس رسمی دادگستری</span><time class="text-gray-700 my-auto font-13" datetime="2020-10-06"> ۱۵ مهر ۱۳۹۹ </time></div><a rel="nofollow" class="comment-reply-link" href="#comment-453" data-commentid="453" data-postid="4576" data-belowelement="comment-453" data-respondelement="respond" data-replyto="پاسخ به دکتر پیمان محمدپور | کارشناس رسمی دادگستری" aria-label="پاسخ به دکتر پیمان محمدپور | کارشناس رسمی دادگستری"><span class="ml-2 icon-primary icon-sm pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/reply.svg"></span></a></div><p class="font-size-sm text-gray-700 mb-0">سلام دوست عزیز، باتوجه به راهنمایی که نوشتیم طراحی سایت با ری اکت خیلی راحت‌تر و جذاب‌تره و البته کدهایی که می‌نویسین هم تمیزتر و کاربردی‌تر هستن و برای سوال ذدومتون هم باید بگم ری اکت یه کتابخونه‌ای از جاوا اسکریپته و تو خیلی از موارد شبیه به همدیگن.</p></div></div></li></ul></li></ul><div class="d-flex justify-content-center"></div></div></div></div><div class="col-12 col-lg-4 order-1"><aside class="h-100 position-relative"><div class="mb-5"> <div class="mb-5"><h2 class="h5 border-bottom-2 border-gray-400">دسته بندی‌ها</h2><div class="row px-4"><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/webmastering/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="وبمسترینگ"> وبمسترینگ </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۴۴</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/motion-graphics/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="موشن گرافیک"> موشن گرافیک </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۳</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/software-engineering/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="مهندسی نرم افزار"> مهندسی نرم افزار </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۳</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/link-building/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="لینک سازی"> لینک سازی </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۱۹</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/contract/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="قرارداد"> قرارداد </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۱۳</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/general/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="عمومی"> عمومی </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۴۳</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/website-design/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="طراحی سایت"> طراحی سایت </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۶۹</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/social-network/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="شبکه اجتماعی"> شبکه اجتماعی </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۴۱</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/performance/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="سرعت و عملکرد"> سرعت و عملکرد </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۳۱</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/seo/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="سئو"> سئو </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۸۵</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/cloud-computing/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="رایانش ابری"> رایانش ابری </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۲</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/user-interface/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="رابط کاربری"> رابط کاربری </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۸</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/cyber-rights/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="حقوق سایبری"> حقوق سایبری </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۱۲</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/cybercrime/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="جرایم رایانه ای"> جرایم رایانه ای </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۱۴</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/content-creation/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="تولید محتوا"> تولید محتوا </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۴۰</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/user-experience/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="تجربه کاربری"> تجربه کاربری </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۳</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/blockchain/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="بلاک چین"> بلاک چین </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۱۰</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/web-application/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="برنامه تحت وب"> برنامه تحت وب </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۱۵</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/marketing/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="بازاریابی"> بازاریابی </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۷۴</span></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/category/security/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="امنیت"> امنیت </a><span class="badge badge-pill badge-secondary my-auto font-14 lh-xs">۲۴</span></div></div></div></div><div class="mb-5"><div class="my-5"><h2 class="h5 border-bottom-2 border-gray-400">آخرین نوشته‌ها</h2><ul class="list-group list-group-flush"><li class="list-group-item border-0 p-0 bg-transparent mb-3"><article class="card w-100 "><div class="d-flex"><img width="120" height="100" src="https://pmpr.ir/s/u/pmpr/2025/11/Instagram-We-have-disabled-your-account-120x100.webp" class="card-img-left img-fluid wp-post-image img-size size-thumbnail" alt="مسدودی حساب توسط اینستاگرام و عدم دسترسی به پیج" decoding="async" ><div class="card-body p-3 w-100"><a class="m-auto card-link mr-0 text-gray-700" title="رفع مسدودی حساب اینستاگرام We Disabled your account" href="https://pmpr.ir/instagram-we-disabled-your-account/"><h3 class="lh-md font-weight-normal font-15 limit-line max-line-2">رفع مسدودی حساب اینستاگرام We Disabled your account</h3></a></div></div></article></li><li class="list-group-item border-0 p-0 bg-transparent mb-3"><article class="card w-100 "><div class="d-flex"><img width="120" height="100" src="https://pmpr.ir/s/u/pmpr/2025/04/cctld-gtld-domain-registration-keyboard-keys-120x100.jpg" class="card-img-left img-fluid wp-post-image img-size size-thumbnail" alt="ثبت دامنه cctld و gtld بر روی دکمه‌های صفحه کلید" decoding="async" ><div class="card-body p-3 w-100"><a class="m-auto card-link mr-0 text-gray-700" title="ثبت بدخواهانه دامنه Cybersquatting و نقش UDRP در مقابله با آن" href="https://pmpr.ir/cybersquatting-and-udrp-combating-role/"><h3 class="lh-md font-weight-normal font-15 limit-line max-line-2">ثبت بدخواهانه دامنه Cybersquatting و نقش UDRP در مقابله با آن</h3></a></div></div></article></li><li class="list-group-item border-0 p-0 bg-transparent mb-3"><article class="card w-100 "><div class="d-flex"><img width="120" height="100" src="https://pmpr.ir/s/u/pmpr/2025/04/man-phone-call-desktop-error-120x100.jpg" class="card-img-left img-fluid wp-post-image img-size size-thumbnail" alt="مرد پشت میز کار در تماس تلفنی درباره پیغام خطا" decoding="async" ><div class="card-body p-3 w-100"><a class="m-auto card-link mr-0 text-gray-700" title="سه شرط اصلی موفقیت در دعاوی UDRP" href="https://pmpr.ir/udrp-litigation-three-main-conditions/"><h3 class="lh-md font-weight-normal font-15 limit-line max-line-2">سه شرط اصلی موفقیت در دعاوی UDRP</h3></a></div></div></article></li><li class="list-group-item border-0 p-0 bg-transparent mb-3"><article class="card w-100 "><div class="d-flex"><img width="120" height="100" src="https://pmpr.ir/s/u/pmpr/2025/04/woman-touching-com-gtld-domain-120x100.jpg" class="card-img-left img-fluid wp-post-image img-size size-thumbnail" alt="زن در حال انتخاب دامنه com به عنوان یک دامنه gtld" decoding="async" ><div class="card-body p-3 w-100"><a class="m-auto card-link mr-0 text-gray-700" title="سیاست حل اختلاف دامنه UDRP چیست" href="https://pmpr.ir/udrp-domain-dispute-resolution-policy/"><h3 class="lh-md font-weight-normal font-15 limit-line max-line-2">سیاست حل اختلاف دامنه UDRP چیست</h3></a></div></div></article></li><li class="list-group-item border-0 p-0 bg-transparent"><article class="card w-100 "><div class="d-flex"><img width="120" height="100" src="https://pmpr.ir/s/u/pmpr/2025/04/dcma-laptop-paper-pen-govel-120x100.jpg" class="card-img-left img-fluid wp-post-image img-size size-thumbnail" alt="کپی رایت DCMA - لپ تاپ و چکش قاضی و مداد و لامپ" decoding="async" ><div class="card-body p-3 w-100"><a class="m-auto card-link mr-0 text-gray-700" title="حل مشکل DMCA – راهنمای جامع رفع چالش حذف محتوا و شکایت کپی رایت" href="https://pmpr.ir/dmca-problem-resolution/"><h3 class="lh-md font-weight-normal font-15 limit-line max-line-2">حل مشکل DMCA – راهنمای جامع رفع چالش حذف محتوا و شکایت کپی رایت</h3></a></div></div></article></li></ul></div></div><div class="mb-5"> <div class="mb-5"><h2 class="h5 border-bottom-2 border-gray-400">برچسب‌ها</h2><div class="row px-4"><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/introduction/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="Introduction"> Introduction </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/seo/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="سئو"> سئو </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/2020/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="۲۰۲۰"> ۲۰۲۰ </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/contract/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="قرارداد"> قرارداد </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/instagram/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="اینستاگرام"> اینستاگرام </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/google-algorithms/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="الگوریتم های گوگل"> الگوریتم های گوگل </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/wordpress/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="وردپرس"> وردپرس </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/2020-solutions/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="۲۰۲۰ solutions"> ۲۰۲۰ solutions </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/improve-google-rank/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="بهبود رتبه گوگل"> بهبود رتبه گوگل </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/google-optimization/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="بهینه سازی گوگل"> بهینه سازی گوگل </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/web-designing/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="web designing"> web designing </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/alexa/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="الکسا"> الکسا </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/troubleshooting/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="Troubleshooting"> Troubleshooting </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/raising-the-site-on-google-search/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="بالا بردن سایت در سرچ گوگل"> بالا بردن سایت در سرچ گوگل </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/google-chrome-errors/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="google chrome errors"> google chrome errors </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/comparison/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="comparison"> comparison </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/page-speed/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="سرعت صفحه"> سرعت صفحه </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/content/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="محتوا"> محتوا </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/pwa/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="وب اپلیکیشن پیش رونده"> وب اپلیکیشن پیش رونده </a></div><div class="col-6 col-lg-12 col-xl-6 d-flex justify-content-between bg-gray-100 py-1 my-1"><a href="https://pmpr.ir/tag/fixing-errors/" rel="nofollow" class="w-100 text-decoration-none text-gray-700" aria-label="Fixing Errors"> Fixing Errors </a></div></div></div></div><div class="mb-5"><div class="card text-white bg-primary text-center mb-4"><div class="card-body"><div class="card-title h3">رپورتاژ آگهی</div><div class="card-text"><p>سفارش انتشار رپورتاژ در وبسایت دکتر پیمان محمدپور</p><a href="https://pmpr.ir/reportage/" target="_blank" title="سفارش رپورتاژ" class="my-3 font-weight-bold btn btn-outline-light" rel="noopener">سفارش رپورتاژ</a></div></div></div></div></aside></div></div></div><footer id="site_footer" class="py-6 py-md-7 py-lg-8 bg-gray-200"><div class="container"><div class="row"><div class="col-12 col-sm-6 col-xl-3 mb-8 mb-xl-0"><div class="mb-3"><a href="https://pmpr.ir" class="" aria-label="Site Logo" rel="nofollow"><img src="https://pmpr.ir/s/u/pmpr/footer-Logo.svg" width="165" height="50" alt="لوگوی سایت دکتر پیمان محمدپور"></a><p class="font-14 text-dark mt-2 text-justify lh-sm sr-only">مشاوره، نظارت و اجرا در وب</p></div><ul class="list-group font-14 text-gray-800"><li class="list-group-item px-0 border-0 bg-transparent d-flex pb-2 pt-0"><a href="https://hub.23055.ir/experts/profile/47246" class="text-decoration-none text-gray-800" rel="nofollow noopener noreferrer" target="_blank" aria-label="کارشناس رسمی دادگستری (کامپیوتر)"><div class="d-flex"><span class="my-auto icon-centered icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/u/pmpr/markaz.svg"></span><span class="my-auto ml-2 lh-xs">کارشناس رسمی دادگستری (کامپیوتر)</span></div></a></li><li class="list-group-item px-0 border-0 bg-transparent d-flex py-2"><a href="https://tehran.irannsr.org/real_persones/2372187/swd_id/104366/" class="text-decoration-none text-gray-800" rel="nofollow noopener noreferrer" target="_blank" aria-label="مشاور سازمان نظام صنفی رایانه‌ای"><div class="d-flex"><span class="my-auto icon-centered icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/u/pmpr/nsr.svg"></span><span class="my-auto ml-2 lh-xs">مشاور سازمان نظام صنفی رایانه‌ای</span></div></a></li><li class="list-group-item px-0 border-0 bg-transparent d-flex py-2"><div class="d-flex"><span class="my-auto icon-centered icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/u/pmpr/ut.svg"></span><span class="my-auto ml-2 lh-xs">دکتری مهندسی فناوری اطلاعات</span></div></li><li class="list-group-item px-0 border-0 bg-transparent d-flex py-2"><div class="d-flex"><span class="my-auto icon-centered icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/u/pmpr/2023/10/uast-transparent.svg"></span><span class="my-auto ml-2 lh-xs">مدرس دانشگاه جامع علمی کاربردی</span></div></li><li class="list-group-item px-0 border-0 bg-transparent d-flex py-2"><a href="https://stackoverflow.com/users/5104596/" class="text-decoration-none text-gray-800" rel="nofollow noopener noreferrer" target="_blank" aria-label="عضو جامعه بین المللی برنامه نویسان"><div class="d-flex"><span class="my-auto icon-centered icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/brand/stack-overflow.svg"></span><span class="my-auto ml-2 lh-xs">عضو جامعه بین المللی برنامه نویسان</span></div></a></li><li class="list-group-item px-0 border-0 bg-transparent d-flex pt-2 pb-0"><div class="d-flex"><span class="my-auto icon-centered icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/u/pmpr/sampad.svg"></span><span class="my-auto ml-2 lh-xs">دانش آموخته سمپاد (تیزهوشان)</span></div></li></ul></div><div class="col-12 col-sm-6 col-xl-3 px-xl-8 mb-8 mb-xl-0"><h2 class="pt-5 pt-xl-0 h5 text-dark">محصولات و خدمات</h2><ul class="list-group list-group-flush font-14"><li class="list-group-item border-0 p-0 bg-transparent mb-1"><a href="https://pmpr.ir/wp/speed/pricing/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="هزینه افزایش سرعت وردپرس"> هزینه افزایش سرعت وردپرس </a></li><li class="list-group-item border-0 p-0 bg-transparent mb-1"><a href="https://pmpr.ir/service/implementation/wordpress-programming/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="خدمات برنامه نویسی وردپرس"> خدمات برنامه نویسی وردپرس </a></li><li class="list-group-item border-0 p-0 bg-transparent mb-1"><a href="https://pmpr.ir/products/in-person-consultation/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="مشاوره حضوری"> مشاوره حضوری </a></li><li class="list-group-item border-0 p-0 bg-transparent mb-1"><a href="https://pmpr.ir/products/nda-contract-sample/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="نمونه قرارداد منع افشای اطلاعات NDA حرفه‌ای (آپدیت سال ۱۴۰۳)"> نمونه قرارداد منع افشای اطلاعات NDA حرفه‌ای (آپدیت سال ۱۴۰۳) </a></li><li class="list-group-item border-0 p-0 bg-transparent mb-1"><a href="https://pmpr.ir/products/contract-drafting-review/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="تنظیم متن قرارداد"> تنظیم متن قرارداد </a></li><li class="list-group-item border-0 p-0 bg-transparent mb-1"><a href="https://pmpr.ir/products/investigate-google-index-problem/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="ریشه یابی مشکل ایندکس گوگل"> ریشه یابی مشکل ایندکس گوگل </a></li><li class="list-group-item border-0 p-0 bg-transparent"><a href="https://pmpr.ir/products/phone-consultation/" rel="nofollow" class="text-decoration-none text-gray-800" aria-label="مشاوره تلفنی"> مشاوره تلفنی </a></li></ul></div><div class="col-12 col-sm-6 col-xl-3 px-xl-8 mb-8 mb-xl-0"><h2 class="pt-5 pt-xl-0 h5 text-dark">اطلاعات تماس</h2><div class="pb-4"><ul class="list-group"><li class="list-group-item py-1 px-0 border-0 bg-transparent"><div class="font-"><div class="d-flex justify-content-between"><span class="my-auto icon-centered icon-lg icon-primary pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/calendar-check.svg"></span><span class="mt-auto ml-2 font-14"><span>شنبه ت</span><span>ا جمعه</span></span></div></div></li><li class="list-group-item py-1 px-0 border-0 bg-transparent"><div class="font-"><div class="d-flex justify-content-between"><span class="my-auto icon-centered icon-lg icon-primary pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/clock.svg"></span><span class="mt-auto ml-2 font-14"><span>۸ صبح </span><span>تا ۷ ع</span><span>صر</span></span></div></div></li><li class="list-group-item py-1 px-0 border-0 bg-transparent"><div class="font-"><div class="d-flex justify-content-between"><span class="my-auto icon-centered icon-lg icon-primary pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/envelope.svg"></span><span class="mt-auto ml-2 font-14"><span>pmpr.i</span><span>r@gmai</span><span>l.com</span></span></div></div></li><li class="list-group-item py-1 px-0 border-0 bg-transparent"><div class="font-"><a href="tel:09028882747" rel="nofollow" aria-label="موبایل" class="lh-md hover-gray-800 text-gray-800"><div class="d-flex justify-content-between"><span class="my-auto icon-centered icon-lg icon-primary pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/mobile.svg"></span><span class="mt-auto ml-2 font-14"><span>090288</span><span>82747</span></span></div></a></div></li><li class="list-group-item py-1 px-0 border-0 bg-transparent"><div class="font-"><a href="tel:02144879127" rel="nofollow" aria-label="تلفن" class="lh-md hover-gray-800 text-gray-800"><div class="d-flex justify-content-between"><span class="my-auto icon-centered icon-lg icon-primary pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/set/light/phone-volume.svg"></span><span class="mt-auto ml-2 font-14"><span>021448</span><span>79127</span></span></div></a></div></li></ul></div><h2 class="pt-5 pt-xl-0 h5 text-dark">شبکه‌های اجتماعی</h2><div class="d-flex justify-content-between mt-3"><a href="https://wa.me/989028882747" rel="nofollow noopener noreferrer" aria-label="Social Icon" target="_blank" title="واتساپ" class="hover-translate-y-n3 my-auto"><span class="social-icon icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/brand/square-whatsapp.svg"></span></a><a href="https://t.me/+989028882747" rel="nofollow noopener noreferrer" aria-label="Social Icon" target="_blank" title="تلگرام" class="hover-translate-y-n3 my-auto"><span class="social-icon icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/brand/telegram.svg"></span></a><a href="https://instagram.com/pmpr.ir" rel="nofollow noopener noreferrer" aria-label="Social Icon" target="_blank" title="اینستاگرام" class="hover-translate-y-n3 my-auto"><span class="social-icon icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/brand/square-instagram.svg"></span></a><a href="https://www.linkedin.com/company/pmpr" rel="nofollow noopener noreferrer" aria-label="Social Icon" target="_blank" title="لینکدین" class="hover-translate-y-n3 my-auto"><span class="social-icon icon-primary icon-lg pr-icon" data-src="https://pmpr.ir/s/b/cmn__fndtn/img/svg/icon/fasm/6/brand/linkedin.svg"></span></a></div></div><div class="col-12 col-sm-6 col-xl-3"><h2 class="pt-5 pt-xl-0 h5 text-dark">نشانی</h2><div class="pb-4"><ul class="list-group"><li class="list-group-item py-1 px-0 border-0 bg-transparent"><div class="font-"><div class="font-16 text-justify"><span class="mt-auto "><span>تهران،</span><span> جنت آ</span><span>باد، ب</span><span>لوار م</span><span>هستان،</span><span> پلاک </span><span>۴۶</span></span></div></div></li></ul></div><div class="row my-2 licesnses"><div class="col-6"><div class="card p-3"><img referrerpolicy="origin" id = 'jxlzsizpfukzesgtoeukrgvj' style = 'cursor:pointer' onclick = 'window.open("https://logo.samandehi.ir/Verify.aspx?id=196083&p=rfthpfvlgvkaobpdmcsixlao", "Popup","toolbar=no, scrollbars=no, location=no, statusbar=no, menubar=no, resizable=0, width=450, height=630, top=30")' alt = 'logo-samandehi' src = 'https://logo.samandehi.ir/logo.aspx?id=196083&p=nbpdbsiywlbqlymaaqgwqfti' ></div></div><div class="col-6"><div class="card p-3"><a referrerpolicy='origin' target='_blank' rel='nofollow' aria-label='enamad' href='https://trustseal.enamad.ir/?id=147226&Code=TUZxb90fy32JoGj3TCMsiIGRyxAMCDSF'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=147226&Code=TUZxb90fy32JoGj3TCMsiIGRyxAMCDSF' alt='' style='cursor:pointer'></a></div></div></div><div class="text-justify font-14 text-center"><span class="placeholder-copyright_symbol"> © </span> تمامی حقوق محفوظ است <time datetime="2006">۱۳۸۵</time> - <time datetime="2026">۱۴۰۵</time></div></div></div></div></footer><script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/s/u/pmpr/*","/wp-content/*","/wp-content/plugins/*","/s/b/cvr__pmpr/wp-cvr-pmpr/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script><script class="pr-opt-postprocess">/*! For license information please see postprocess.NhS4u3i7R.js.LICENSE.txt */ Array.from(document.querySelectorAll("pr-s")).map((e=>{const t=e.getAttribute("data-type").toLowerCase();switch(t){case"sr7-module":case"rs-module":const o=document.querySelector(`${t}#${e.id}`);if(null!==o){let t;t=new MutationObserver((()=>{"hidden"!==e.style.visibility&&(t.disconnect(),e.style.visibility="hidden")})),t.observe(o,{attributes:!0,attributeFilter:["style"]})}}})),document.addEventListener("DOMContentLoaded",(()=>{const e=document.querySelector(".pr-opt-lcp-item");e instanceof Element&&(e.style["font-family"]=null)})),window.addEventListener("load",(()=>{const e=document.querySelector(".pr-opt-elementor-popup");e instanceof Element&&setTimeout((()=>{e.remove()}),150)}));</script><a rel="nofollow" id="back-to-top" class="btn btn-sm shadow btn-gray-200 scroll-to position-fixed bottom-0 left-0 m-3 m-md-5 d-none p-1" href="#top"><span class="icon-lg icon-dark pr-icon icon-loaded"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM363.3 212.7l-96-96c-6.2-6.2-16.4-6.2-22.6 0l-96 96c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L240 166.6 240 368c0 8.8 7.2 16 16 16s16-7.2 16-16l0-201.4 68.7 68.7c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6z"/></svg></span></a> <script> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script><script id="cmn__fndtn-global-js" src="https://pmpr.ir/s/b/cmn__fndtn/js/global.emLnnxvdh.js"></script><script id="cmn__fndtn-helper-js" src="https://pmpr.ir/s/b/cmn__fndtn/js/helper.emLnnxvdh.js"></script><script id="cmn__fndtn-inline-helper-js-after"> /*! For license information please see inline-helper.emLnnxvdh.js.LICENSE.txt */ (()=>{"use strict";var t={8222:(t,e,n)=>{function i(){this.name="Trait";for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];this.$traits=e}i.prototype.inheritTo=n(7573),i.prototype.call=n(3302),i.prototype.each=n(1689),i.prototype.methods=n(2083),i.prototype.in=i.prototype.inheritTo;var s=function(t){return new i(t)};t.exports=s,t.exports.trait=s,t.exports.default=s,t.exports.Trait=i},3302:t=>{t.exports=function(t){var e=null;if(this.$traits.forEach((function(n){n[t]&&(e=n[t])})),!e)throw new Error(t+" does not exist on "+this.name);return e.apply(this)}},1689:t=>{t.exports=function(t){var e=this;if("function"!=typeof t)throw new Error("Each method parameter must be a callback function");return this.$traits.forEach((function(n){Object.keys(n).forEach((function(i){if(Object.prototype.hasOwnProperty.call(n,i)){var s=n[i],r=i;t.apply(e,[r,s])}}))})),this}},7573:t=>{t.exports=function(t){var e=t.prototype||t;return this.each((function(t,n){e[t]||(e[t]=n)}))}},2083:t=>{t.exports=function t(){return this.each((function(e,n){t[e]=n})),{}}}},e={};function n(i){var s=e[i];if(void 0!==s)return s.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,n),r.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var i in e)n.o(e,i)&&!n.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),(()=>{var t=n(8222),e=n.n(t);const i={doTrait:(t,...n)=>(n.forEach((n=>{e()(n).in(t)})),t)};const s=class{},r={getTypeHelper:()=>"undefined"!=typeof PRHelper?PRHelper.getType():PRInlineHelper.getType(),is(t,e){let n=!1;if(t=this.getElement(t),this.isElement(t))if("string"==typeof e)switch(e){case":checked":n=t.checked;break;case":empty":n=!t.firstChild;break;case"radio":case":radio":case"checkbox":case":checkbox":n=e.replace(":","")===this.getAttribute(t,"type");break;case"input":case"select":n=e.replace(":","")===t.tagName.toLowerCase();break;default:n=t.matches(e)}else if(this.isElement(e))n=t===e;else if(this.isList(e)){let i=e.length;for(;i--;)if(e[i]===t){n=!0;break}}return n},getElementPathSelector(t){if(t=this.getElement(t),this.isElement(t)){if("BODY"===t.tagName)return"BODY";const e=[];for(;t.parentElement&&"BODY"!==t.tagName;){let n=1,i=t;for(;i.previousElementSibling;i=i.previousElementSibling,n++);e.unshift(t.tagName+":nth-child("+n+")"),t=t.parentElement}return e.join(">").toLowerCase()}return!1},isList(t){return Array.isArray(t)&&this.isElement(t[0])||"object"==typeof t&&/^\[object (HTMLCollection|NodeList|Object)]$/.test(Object.prototype.toString.call(t))&&"number"==typeof t.length},filter(t,e){let n=[];return this.getTypeHelper().each(t,(t=>{this.is(t,e)&&n.push(t)})),n},isElement:t=>t instanceof Element||t&&1===t.nodeType,getTarget(t,e=null){let n=t.target;return null===e||this.is(n,e)||(n=this.getParent(n,e)),n},getParent(t,e=""){let n=!1;return t=this.getElement(t),this.isElement(t)&&(n=""!==e?t.closest(e):t.parentNode),n},remove(t){t=this.getElement(t),this.isElement(t)&&this.getParent(t).removeChild(t)},getParents(t,e=null){let n=[],i=t.parentNode;for(;i!==document&&null===e||this.is(i,e);){let t=i;n.push(t),i=t.parentNode}return n},isJQuery:t=>"undefined"!=typeof jQuery&&t instanceof jQuery,getFirst(t,e=""){return""!==e?this.getFirst(this.getElements(e,t)):Array.from(t)[0]},getLast(t,e=""){return""!==e?this.getLast(this.getElements(e,t)):Array.from(t).pop()},getElementByID:t=>("string"==typeof t&&(t=document.getElementById(t)),t),getElement(t,e=!1){if(this.isElement(t))return t;let n=!1;return this.isList(t)&&(t=this.getFirst(t)),"string"==typeof e?e=this.getElement(e):this.isElement(e)||(e=document),this.isJQuery(t)?n=t[0]:"string"==typeof t?n=e.querySelector(t):this.isElement(t)&&(n=t),!1===n||this.isElement(n)||(n=!1),n},getElements(t,e=document){return this.isJQuery(e)?e=e[0]:"string"==typeof e&&(e=this.getElement(e)),this.isElement(e)||(e=document),e.querySelectorAll(t)},getAttribute(t,e){let n=null;return t=this.getElement(t),this.isElement(t)&&(n=t.getAttribute(e)),n},addAttribute(t,e,n=null){if("string"==typeof e){let t=e;(e={})[t]=n}this.updateAttribute(t,e,!0)},removeAttribute(t,e){this.updateAttribute(t,e,!1)},updateAttribute(t,e,n=!0){if(this.isList(t)||"string"==typeof t)"string"==typeof t&&(t=this.getElements(t)),this.getTypeHelper().each(t,(t=>{this.updateAttribute(t,e,n)}));else if(t=this.getElement(t),this.isElement(t)){let i,s;for(s in e)switch(i=e[s],s){case"class":let e=t.classList;"string"==typeof i&&(i=i.split(" ")),this.getTypeHelper().each(i,(t=>{n?e.contains(t)||e.add(t):e.contains(t)&&e.remove(t)}));break;case"style":n?"string"==typeof i?t.style=i:Object.assign(t.style,i):("string"==typeof i&&(i=[i]),this.getTypeHelper().each(i,(e=>{t.style.removeProperty(e)})));break;default:n?t.setAttribute(s,i):t.removeAttribute(s)}}},getData(t,e=null,n=null){if(null===e)return t.dataset;let i=this.getAttribute(t,`data-${e}`);try{if(this.getTypeHelper().isEmpty(i))i=n;else{const t=JSON.parse(i);"object"==typeof t&&(i=t)}}catch(t){}return i},setData(t,e,n){let i={};e=`data-${e}`,"object"==typeof n&&(n=JSON.stringify(n)),i[e]=n,""===n?this.removeAttribute(t,i):this.updateAttribute(t,i)},hasClass(t,e){let n=!1;return t=this.getElement(t),this.isElement(t)&&(n=t.classList.contains(e)),n},addClass(t,e){this.addAttribute(t,{class:e})},toggleClass(t,e){this.hasClass(t,e)?this.removeClass(t,e):this.addClass(t,e)},removeClass(t,e){this.removeAttribute(t,{class:e})},setHTML(t,e){t=this.getElement(t),this.isElement(t)&&(t.innerHTML=e)},createElement(t,e=null){const n=document.createElement("template");t=t.trim(),n.innerHTML=t;const i=n.content.children[0];if(this.isElement(i)){let t=this.getElements("script",i);this.getTypeHelper().each(t,(t=>{let e=document.createElement("SCRIPT");e.text=t.innerHTML,t.parentNode.replaceChild(e,t)}))}return null!==e&&this.addAttribute(i,e),i},append(t,e){if(this.isList(t))for(let n=0;n<t.length;n++)this.append(t[n],e);else{let n=!1;"string"==typeof t&&(n=!0,t=this.createElement(`<div>${t}</div>`)),this.isElement(t)&&(e=this.getElement(e))&&(e.append(t),n&&this.unwrap(t))}},unwrap(t){let e=document.createDocumentFragment();for(;t.firstChild;){let n=t.removeChild(t.firstChild);e.appendChild(n)}t.parentNode.replaceChild(e,t)},getAnimationDuration(t){switch(t){case"fast":t=250;break;case"slow":t=750;break;default:isNaN(t)&&(t=500)}return t},fade(t,e,n="normal",i="out",s=""){switch(t=this.getElement(t),n){case"fast":n=.06;break;case"slow":n=.02;break;default:isNaN(n)&&(n=.04)}const r="left"===s?150:-150;switch(i){case"slide-in":n*=8,this.updateAttribute(t,{style:`transform: translateX(${r}%); transition: transform ${n}s`}),setTimeout((()=>{this.updateAttribute(t,{style:`transform: translateX(0%); transition: transform ${n}s`}),"function"==typeof e&&e()}),1e3*n);break;case"slide-out":n*=8,this.updateAttribute(t,{style:`transform: translateX(0%); transition: transform ${n}s`}),this.updateAttribute(t,{style:`transform: translateX(${r}%); transition: transform ${n}s`}),"function"==typeof e&&setTimeout((()=>{e()}),1e3*n)}},fadeSlideIn(t,e,n="left",i="normal"){this.fade(t,e,i,"slide-in",n)},fadeSlideOut(t,e,n="left",i="normal"){this.fade(t,e,i,"slide-out",n)},fadeIn(t,e={}){(t=this.getElement(t)).style.opacity=0,this.show(t),"function"==typeof e.start&&e.start(t);let n,i=0;const s=()=>{t.style.opacity=i+=.04,i>=1?(i=1,"function"==typeof e.end&&e.end(t),cancelAnimationFrame(n)):(t.style.opacity=i,n=requestAnimationFrame(s))};s()},fadeOut(t,e={}){(t=this.getElement(t)).style.opacity=1,"function"==typeof e.start&&e.start(t);let n,i=1;const s=()=>{t.style.opacity=i-=.04,i<0?(i=0,this.hide(t),"function"==typeof e.end&&e.end(t),cancelAnimationFrame(n)):n=requestAnimationFrame(s)};s()},slide(t,e={}){if(t=this.getElement(t),this.isElement(t)){PRHelper.getFormat().parseArgs(e,{end:!1,start:!1,effect:"up",duration:"normal"});let n=this.getAnimationDuration(e.duration),i=["height","overflow","transition-duration","transition-property"];switch("function"==typeof e.start&&e.start(t),e.effect){case"up":t.style.height=t.offsetHeight+"px",t.offsetHeight,this.addAttribute(t,{style:{height:0,overflow:"hidden",paddingTop:0,paddingBottom:0,marginTop:0,marginBottom:0,boxSizing:"border-box",transitionProperty:"height, margin, padding",transitionDuration:n+"ms"}});const e=["margin-top","padding-top","margin-bottom","padding-bottom"];this.getTypeHelper().each(e,(t=>{i.push(t)}));break;case"down":this.show(t);const s=t.offsetHeight;this.addAttribute(t,{style:{height:0,overflow:"hidden",paddingTop:0,paddingBottom:0,marginTop:0,marginBottom:0,boxSizing:"border-box",transitionProperty:"height, margin, padding",transitionDuration:n+"ms"}}),t.offsetHeight,t.style.height=s+"px",this.removeAttribute(t,{style:["padding-top","padding-bottom","margin-top","margin-bottom"]}),i.push("height")}setTimeout((()=>{"up"===e.effect&&this.hide(t),this.removeAttribute(t,{style:i}),"function"==typeof e.end&&e.end(t)}),n)}else console.warn("can not slide invalid element element")},slideUp(t,e={}){e.effect="up",this.slide(t,e)},slideDown(t,e={}){e.effect="down",this.slide(t,e)},slideToggle(t,e={}){"none"===window.getComputedStyle(t).display?this.slideDown(t,e):this.slideUp(t,e)},hide(t){this.addAttribute(t,{style:"display: none"})},show(t,e="block"){t=this.getElement(t),this.isElement(t)&&(this.removeAttribute(t,{style:["display"]}),"none"===window.getComputedStyle(t).display&&this.addAttribute(t,{style:"display: "+e}))},renameElement(t,e,n=!1){const i=document.createElement(e);for([...t.attributes].map((({name:t,value:e})=>{i.setAttribute(t,e)}));t.firstChild;)i.appendChild(t.firstChild);return n&&t.parentNode.replaceChild(i,t),i}};const o=i.doTrait(class extends s{},r),a={handleEvent(t,e,n){const i="undefined"!=typeof PRHelper?PRHelper:PRInlineHelper,s=i.getHTML(),r=i.getType();("string"!=typeof e||(e=s.getElements(e)))&&(s.isList(e)?r.each(e,(e=>{this.handleEvent(t,e,n)})):(t=t.split(/\s+/)).forEach((t=>{r.isEmpty(e)&&!s.isElement(e)&&(e=document,"DOMContentLoaded"!==t&&(e=window)),n(e,t.trim())})))},on(t,e,n=null){const i=n;this.handleEvent(t,n,((t,n)=>{"DOMContentLoaded"!==n||"loading"===document.readyState?null!==i?t.addEventListener?t.addEventListener(n,(n=>e(n,t)),!1):t.attachEvent("on"+n,(n=>e(n,t))):t.addEventListener?t.addEventListener(n,e,!1):t.attachEvent("on"+n,e):e(n,t)}))}};const l=i.doTrait(class extends s{observer(t,e){let n=[].slice.call(document.querySelectorAll(t));if("IntersectionObserver"in window){const i=new IntersectionObserver((function(t){t.forEach((function(t){if(t.isIntersecting){const n=t.target;e(n),i.unobserve(n)}}))}));n.forEach((function(t){i.observe(t)}))}else{let s=!1;function r(){!1===s&&(s=!0,setTimeout((function(){n.forEach((function(t){t.getBoundingClientRect().top<=window.innerHeight&&0<=t.getBoundingClientRect().bottom&&"none"!==getComputedStyle(t).display&&(e(t),n=n.filter((function(e){return e!==t})),0===n.length&&(document.removeEventListener("scroll",r),window.removeEventListener("resize",r),window.removeEventListener("orientationchange",r)))})),s=!1}),3e3))}r(),document.addEventListener("scroll",r),window.addEventListener("resize",r),window.addEventListener("orientationchange",r)}}},a),c={each(t,e){const n=(t,e)=>({index:t,index1:t+1,revIndex:e-t-1,revIndex1:e-t,first:0===t,last:t===e-1,length:e});if(Array.isArray(t)){const i=t.length;t.some(((t,s)=>{n(s,i);if(!1===e(t,s))return!0}))}else if("object"==typeof t){const i=Object.keys(t),s=i.length;if(this.isEmpty(i)){if(!this.isEmpty(t)||void 0===t.length){let i=0,s=[];for(const e in t)"function"!=typeof t[e]&&s.push(e);const r=s.length;for(const o of s){const s=n(i,r);if(!1===e(t[o],o,s))return!1;i++}}}else i.some(((i,r)=>{const o=n(r,s);if(!1===e(t[i],i,o))return!0}))}},isEmpty:t=>void 0===t||""===t||null==t||0===t.length||!t||"object"==typeof t&&0===Object.keys(t).length,extend(){let t={},e=!1,n=!1,i=0,s=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(n=arguments[0],i++),"[object Boolean]"===Object.prototype.toString.call(arguments[1])&&(e=arguments[1],i++);const r=i=>{let s=t.length;for(let r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e&&"[object Object]"===Object.prototype.toString.call(i[r])?t[r]=this.extend(n,e,t[r],i[r]):n||"object"!=typeof t[r]?t[r]=i[r]:(t[s]=i[r],s++))};for(;i<s;i++){r(arguments[i])}return t},merge(t,e,n=[],i=" "){if("object"!=typeof t||"object"!=typeof e)return{};const s=this.extend({},t,e);return this.isEmpty(n)||this.each(n,(n=>{(t[n]||e[n])&&(s[n]=[t[n],e[n]].filter(Boolean).join(i).trim())})),s},parseArgs:(t,e={})=>({...e,...t}),isIterable:t=>Array.isArray(t)||"object"==typeof t};const h=i.doTrait(class extends s{},c);const d=class extends s{ajax(t={},e,n){this.request("https://pmpr.ir/wp-admin/admin-ajax.php","post",t,e,n,{"Content-Type":"application/x-www-form-urlencoded"})}request(t,e,n,i,s,r={}){fetch(t,{method:e,headers:r,body:new URLSearchParams(n).toString()}).then((t=>t.json())).then(i).catch(s)}};const p=class{instances={};getHelperInstance(t){let e=null;return e=t in this.instances?this.instances[e]:new t,e}};const u=new class extends p{getHTML(){return this.getHelperInstance(o)}getType(){return this.getHelperInstance(h)}getHook(){return this.getHelperInstance(l)}getRequest(){return this.getHelperInstance(d)}};window.PRInlineHelper=u})()})(); //# sourceURL=cmn__fndtn-inline-helper-js-after </script><script id="cmn__fndtn-inline-js-after"> /*! For license information please see inline.emLnnxvdh.js.LICENSE.txt */ window.PMPRInlineUtil={isEmpty:e=>void 0===e||""===e||null==e||0===e.length||!e,isIterable:e=>{let t=Object.prototype.toString.call(e);return"object"==typeof e&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(t)&&"number"==typeof e.length},addClass:(e,t)=>{if(!PMPRInlineUtil.isEmpty(e))if(PMPRInlineUtil.isIterable(e))for(let n=0;n<e.length;n++){let i=e[n];PMPRInlineUtil.addClass(i,t)}else e.classList.add(t)},hasClass:(e,t)=>{let n=!1;return!PMPRInlineUtil.isEmpty(e)&&e.className&&(n=new RegExp("(^|\\s+)"+t+"(\\s+|$)").test(e.className)),n},removeClass:(e,t)=>{if(!PMPRInlineUtil.isEmpty(e))if(PMPRInlineUtil.isIterable(e))for(let n=0;n<e.length;n++){let i=e[n];PMPRInlineUtil.removeClass(i,t)}else e.classList.remove(t)},findElement:(e,t)=>{if(!PMPRInlineUtil.isEmpty(e))return e.querySelector(t)},httpRequest:(e={})=>{e={url:"",data:{},type:"",error:null,method:"GET",success:null,dataType:"",...e};let t=new XMLHttpRequest;t.open(e.method,e.url),t.setRequestHeader("X-Requested-With","XMLHttpRequest"),e.dataType&&(t.responseType=e.dataType),t.onreadystatechange=function(){if(this.readyState===XMLHttpRequest.DONE)try{let t=this.responseText;switch(e.type){case"application/form-data":case"application/x-www-form-urlencoded":t=JSON.parse(t)}"function"==typeof e.success&&e.success(t)}catch(t){"function"==typeof e.fail&&e.fail(t)}},t.setRequestHeader("Content-Type",e.type),t.send(new URLSearchParams(Object.entries(e.data)).toString())},ajaxRequest:(e,t)=>{PMPRInlineUtil.httpRequest({url:"https://pmpr.ir/wp-admin/admin-ajax.php",type:"application/x-www-form-urlencoded",method:"POST",success:t})},findElements:(e,t)=>{if(!PMPRInlineUtil.isEmpty(e))return e.querySelectorAll(t)},triggerEvent:(e,t={})=>{window.document.dispatchEvent(new Event(e,t))},isInViewport:(e,t=0)=>{let n=e.getBoundingClientRect();return n.bottom>0&&n.right>0&&n.top<=(window.innerHeight||document.documentElement.clientHeight)+t&&n.left<=(window.innerWidth||document.documentElement.clientWidth)+t},animateAppend:(e,t,n="fast")=>{"string"==typeof t&&(t=PMPRInlineUtil.createElement(t)),PMPRInlineUtil.addClass(t,"fade"),e.appendChild(t),setTimeout((()=>PMPRInlineUtil.addClass(t,"show")),"fast"===n?200:500)},createElement:(e="",t,n="",i="length")=>(PMPRInlineUtil.isEmpty(n)&&(n=document.createElement("template")),n.innerHTML=e.trim(),(t=[...n.content.childNodes])[i]>1?t:t[0]||""),multipleReplace:(e,t,n)=>{for(let i=0;i<t.length;i++)e=e.replace(new RegExp(t[i],"gi"),n[i]);return e},registerMutation:(e,t,n={attributes:!0,childList:!0,subtree:!0})=>{if(PMPRInlineUtil.isEmpty(t)){let i=new MutationObserver(t);"string"==typeof e&&(e=document.querySelector(e)),i.observe(e,n)}},registerListener:(e,t,n=null)=>{(e=e.split(/\s+/)).forEach((function(e){"DOMContentLoaded"!==(e=e.trim())||"loading"===document.readyState?(PMPRInlineUtil.isEmpty(n)&&(n=document,"DOMContentLoaded"!==e&&(n=window)),n.addEventListener?n.addEventListener(e,t):n.attachEvent("on"+e,t)):t(e)}))},advancedObserver:(e,t)=>{let n=[].slice.call(document.querySelectorAll(e));if("IntersectionObserver"in window){const l=new IntersectionObserver((function(e){e.forEach((function(e){if(e.isIntersecting){const n=e.target;t(n),l.unobserve(n)}}))}));n.forEach((function(e){l.observe(e)}))}else{let s=!1;function i(){!1===s&&(s=!0,setTimeout((function(){n.forEach((function(e){e.getBoundingClientRect().top<=window.innerHeight&&0<=e.getBoundingClientRect().bottom&&"none"!==getComputedStyle(e).display&&(t(e),n=n.filter((function(t){return t!==e})),0===n.length&&(document.removeEventListener("scroll",i),window.removeEventListener("resize",i),window.removeEventListener("orientationchange",i)))})),s=!1}),3e3))}i(),document.addEventListener("scroll",i),window.addEventListener("resize",i),window.addEventListener("orientationchange",i)}},siblings:(e,t=null)=>{let n=[];if(!PMPRInlineUtil.isEmpty(e)&&!PMPRInlineUtil.isEmpty(e.parentNode)){let i=e.parentNode.firstChild;for(;i;){if(1===i.nodeType&&i!==e)if(null!==t){if(i.matches(t)){n=i;break}}else n.push(i);i=i.nextSibling}}return n}}; //# sourceURL=cmn__fndtn-inline-js-after </script><script id="cmn__fndtn-frontend-helper-js" src="https://pmpr.ir/s/b/cmn__fndtn/js/frontend-helper.emLnnxvdh.js"></script><script id="cmn__fndtn-front-js" src="https://pmpr.ir/s/b/cmn__fndtn/js/front.emLnnxvdh.js"></script><script id="cmn__cvr-inline-cart-js-after"> /*! For license information please see cart.EmKNmehsi.js.LICENSE.txt */ (()=>{const e=()=>{"loading"===document.readyState||document.readyState?t():setTimeout(e,1500)},t=()=>{PRInlineHelper.getHook().on("DOMContentLoaded",(()=>{PRInlineHelper.getRequest().ajax({action:"woocommerce_cart_get_refreshed_fragments"},(e=>{let t=e.data.fragments;"object"==typeof t&&PRInlineHelper.getType().each(t,((e,t)=>{PRInlineHelper.getHTML().setHTML(t,e)}))}))}))};e()})(); //# sourceURL=cmn__cvr-inline-cart-js-after </script><script id="mdl__advncd_cms-mirror-js" src="https://pmpr.ir/s/b/mdl__advncd_cms/js/mirror.ZvRaG25i7.js"></script><script id="mdl__optmztn-preprocess-js" src="https://pmpr.ir/s/b/mdl__optmztn/js/preprocess.NhS4u3i7R.js"></script><script id="mdl__scrty-recaptcha-js" src="https://pmpr.ir/s/b/mdl__scrty/js/recaptcha.-pAfJetql.js"></script><script id="cmn__cvr-comment-js" src="https://pmpr.ir/s/b/cmn__cvr/js/comment.EmKNmehsi.js"></script><script id="cmn__cvr-load-icon-js-after"> /*! For license information please see icon.EmKNmehsi.js.LICENSE.txt */ !function(){const e=PRInlineHelper.getHook(),n=PRInlineHelper.getHTML();e.observer(".pr-icon:not(.icon-loaded)",(function(e){let t=n.getData(e,"src");PRInlineHelper.getType().isEmpty(t)||fetch(t,{method:"get"}).then((function(e){return e.text()})).then((function(t){const o=n.createElement(t);n.fadeIn(e,{start:()=>{n.append(o,e);const t=n.getData(e,"class");t&&n.addClass(e,t)}}),n.addClass(e,"icon-loaded"),n.setData(e,"src","")})).catch((function(e){console.log("Error on loading icon: ",e)}))}))}(); //# sourceURL=cmn__cvr-load-icon-js-after </script><script id="mdl__rtng-front-js" src="https://pmpr.ir/s/b/mdl__rtng/js/front.hGTb9nArV.js"></script><script id="mdl__optmztn-media-lazyload-js-after"> /*! For license information please see lazyload.NhS4u3i7R.js.LICENSE.txt */ (()=>{var e={732:function(e){e.exports=function(){"use strict";const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_bg_set:"bg-set",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},s=e=>Object.assign({},n,e),l=function(e,t){let a;const n="LazyLoad::Initialized",s=new e(t);try{a=new CustomEvent(n,{detail:{instance:s}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(n,!1,!1,{instance:s})}window.dispatchEvent(a)},o="src",r="srcset",i="sizes",c="poster",d="llOriginalAttrs",_="data",u="loading",g="loaded",b="applied",p="error",h="native",m="data-",v="ll-status",f=(e,t)=>e.getAttribute(m+t),E=e=>f(e,v),I=(e,t)=>((e,t,a)=>{const n=m+t;null!==a?e.setAttribute(n,a):e.removeAttribute(n)})(e,v,t),k=e=>I(e,null),y=e=>null===E(e),A=e=>E(e)===h,w=[u,g,b,p],x=(e,t,a,n)=>{e&&"function"==typeof e&&(void 0===n?void 0===a?e(t):e(t,a):e(t,a,n))},L=(t,a)=>{e&&""!==a&&t.classList.add(a)},O=(t,a)=>{e&&""!==a&&t.classList.remove(a)},C=e=>e.llTempImage,M=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},z=(e,t)=>{e&&(e.loadingCount+=t)},N=(e,t)=>{e&&(e.toLoadCount=t)},R=e=>{let t=[];for(let a,n=0;a=e.children[n];n+=1)"SOURCE"===a.tagName&&t.push(a);return t},T=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&R(a).forEach(t)},G=(e,t)=>{R(e).forEach(t)},D=[o],H=[o,c],V=[o,r,i],j=[_],F=e=>!!e[d],P=e=>e[d],B=e=>delete e[d],J=(e,t)=>{if(F(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[d]=a},S=(e,t)=>{if(!F(e))return;const a=P(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},U=(e,t,a)=>{L(e,t.class_applied),I(e,b),a&&(t.unobserve_completed&&M(e,t),x(t.callback_applied,e,a))},$=(e,t,a)=>{L(e,t.class_loading),I(e,u),a&&(z(a,1),x(t.callback_loading,e,a))},q=(e,t,a)=>{a&&e.setAttribute(t,a)},K=(e,t)=>{q(e,i,f(e,t.data_sizes)),q(e,r,f(e,t.data_srcset)),q(e,o,f(e,t.data_src))},Q={IMG:(e,t)=>{T(e,(e=>{J(e,V),K(e,t)})),J(e,V),K(e,t)},IFRAME:(e,t)=>{J(e,D),q(e,o,f(e,t.data_src))},VIDEO:(e,t)=>{G(e,(e=>{J(e,D),q(e,o,f(e,t.data_src))})),J(e,H),q(e,c,f(e,t.data_poster)),q(e,o,f(e,t.data_src)),e.load()},OBJECT:(e,t)=>{J(e,j),q(e,_,f(e,t.data_src))}},W=["IMG","IFRAME","VIDEO","OBJECT"],X=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||x(e.callback_finish,t)},Y=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},Z=(e,t,a)=>{e.removeEventListener(t,a)},ee=e=>!!e.llEvLisnrs,te=e=>{if(!ee(e))return;const t=e.llEvLisnrs;for(let a in t){const n=t[a];Z(e,a,n)}delete e.llEvLisnrs},ae=(e,t,a)=>{(e=>{delete e.llTempImage})(e),z(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),O(e,t.class_loading),t.unobserve_completed&&M(e,a)},ne=(e,t,a)=>{const n=C(e)||e;ee(n)||((e,t,a)=>{ee(e)||(e.llEvLisnrs={});const n="VIDEO"===e.tagName?"loadeddata":"load";Y(e,n,t),Y(e,"error",a)})(n,(s=>{((e,t,a,n)=>{const s=A(t);ae(t,a,n),L(t,a.class_loaded),I(t,g),x(a.callback_loaded,t,n),s||X(a,n)})(0,e,t,a),te(n)}),(s=>{((e,t,a,n)=>{const s=A(t);ae(t,a,n),L(t,a.class_error),I(t,p),x(a.callback_error,t,n),a.restore_on_error&&S(t,V),s||X(a,n)})(0,e,t,a),te(n)}))},se=(e,t,n)=>{(e=>W.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{ne(e,t,a),((e,t,a)=>{const n=Q[e.tagName];n&&(n(e,t),$(e,t,a))})(e,t,a)})(e,t,n):((e,t,n)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),ne(e,t,n),(e=>{F(e)||(e[d]={backgroundImage:e.style.backgroundImage})})(e),((e,t,n)=>{const s=f(e,t.data_bg),l=f(e,t.data_bg_hidpi),r=a&&l?l:s;r&&(e.style.backgroundImage=`url("${r}")`,C(e).setAttribute(o,r),$(e,t,n))})(e,t,n),((e,t,n)=>{const s=f(e,t.data_bg_multi),l=f(e,t.data_bg_multi_hidpi),o=a&&l?l:s;o&&(e.style.backgroundImage=o,U(e,t,n))})(e,t,n),((e,t,a)=>{const n=f(e,t.data_bg_set);if(!n)return;let s=n.split("|").map((e=>`image-set(${e})`));e.style.backgroundImage=s.join(),U(e,t,a)})(e,t,n)})(e,t,n)},le=e=>{e.removeAttribute(o),e.removeAttribute(r),e.removeAttribute(i)},oe=e=>{T(e,(e=>{S(e,V)})),S(e,V)},re={IMG:oe,IFRAME:e=>{S(e,D)},VIDEO:e=>{G(e,(e=>{S(e,D)})),S(e,H),e.load()},OBJECT:e=>{S(e,j)}},ie=(e,t)=>{(e=>{const t=re[e.tagName];t?t(e):(e=>{if(!F(e))return;const t=P(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{y(e)||A(e)||(O(e,t.class_entered),O(e,t.class_exited),O(e,t.class_applied),O(e,t.class_loading),O(e,t.class_loaded),O(e,t.class_error))})(e,t),k(e),B(e)},ce=["IMG","IFRAME","VIDEO"],de=e=>e.use_native&&"loading"in HTMLImageElement.prototype,_e=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,n)=>{const s=(e=>w.indexOf(E(e))>=0)(e);I(e,"entered"),L(e,a.class_entered),O(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&M(e,a)})(e,a,n),x(a.callback_enter,e,t,n),s||se(e,a,n)})(e.target,e,t,a):((e,t,a,n)=>{y(e)||(L(e,a.class_exited),((e,t,a,n)=>{a.cancel_on_exit&&(e=>E(e)===u)(e)&&"IMG"===e.tagName&&(te(e),(e=>{T(e,(e=>{le(e)})),le(e)})(e),oe(e),O(e,a.class_loading),z(n,-1),k(e),x(a.callback_cancel,e,t,n))})(e,t,a,n),x(a.callback_exit,e,t,n))})(e.target,e,t,a)))},ue=e=>Array.prototype.slice.call(e),ge=e=>e.container.querySelectorAll(e.elements_selector),be=e=>(e=>E(e)===p)(e),pe=(e,t)=>(e=>ue(e).filter(y))(e||ge(t)),he=function(t,a){const n=s(t);this._settings=n,this.loadingCount=0,((e,t)=>{de(e)||(t._observer=new IntersectionObserver((a=>{_e(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(n,this),((t,a)=>{e&&(a._onlineHandler=()=>{((e,t)=>{var a;(a=ge(e),ue(a).filter(be)).forEach((t=>{O(t,e.class_error),k(t)})),t.update()})(t,a)},window.addEventListener("online",a._onlineHandler))})(n,this),this.update(a)};return he.prototype={update:function(e){const a=this._settings,n=pe(e,a);var s,l;N(this,n.length),t?this.loadAll(n):de(a)?((e,t,a)=>{e.forEach((e=>{-1!==ce.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),ne(e,t,a),((e,t)=>{const a=Q[e.tagName];a&&a(e,t)})(e,t),I(e,h)})(e,t,a)})),N(a,0)})(n,a,this):(l=n,(e=>{e.disconnect()})(s=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(s,l))},destroy:function(){this._observer&&this._observer.disconnect(),e&&window.removeEventListener("online",this._onlineHandler),ge(this._settings).forEach((e=>{B(e)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;pe(e,t).forEach((e=>{M(e,this),se(e,t,this)}))},restoreAll:function(){const e=this._settings;ge(e).forEach((t=>{ie(t,e)}))}},he.load=(e,t)=>{const a=s(t);se(e,a)},he.resetStatus=e=>{k(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,n=0;a=t[n];n+=1)l(e,a);else l(e,t)})(he,window.lazyLoadOptions),he}()}},t={};function a(n){var s=t[n];if(void 0!==s)return s.exports;var l=t[n]={exports:{}};return e[n].call(l.exports,l,l.exports,a),l.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var n in t)a.o(t,n)&&!a.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=a(732);new(a.n(e)())({elements_selector:".lazyload",threshold:200})})()})(); //# sourceURL=mdl__optmztn-media-lazyload-js-after </script><script id="cvr__pmpr-app-js" src="https://pmpr.ir/s/b/cvr__pmpr/js/app.zdob3veBO.js"></script><script id="cvr__pmpr-single-js" src="https://pmpr.ir/s/b/cvr__pmpr/js/single.zdob3veBO.js"></script><script id="cmn__cvr-google-analytics-js" src="https://www.googletagmanager.com/gtag/js?id=G-WF1FS67KTQ"></script><script id="cmn__cvr-google-analytics-js-after"> window.addEventListener("DOMContentLoaded",(function(){function a(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],a("js",new Date),a("config","G-WF1FS67KTQ")})); //# sourceURL=cmn__cvr-google-analytics-js-after </script><script id="sourcebuster-js-js" src="https://pmpr.ir/wp-content/plugins/woocommerce/assets/js/sourcebuster/sourcebuster.min.js?ver=9.8.7"></script><script id="wc-order-attribution-js-extra"> var wc_order_attribution = {"params":{"lifetime":1.0000000000000001e-5,"session":30,"base64":false,"ajaxurl":"https://pmpr.ir/wp-admin/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":true},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}}; //# sourceURL=wc-order-attribution-js-extra </script><script id="wc-order-attribution-js" src="https://pmpr.ir/wp-content/plugins/woocommerce/assets/js/frontend/order-attribution.min.js?ver=9.8.7"></script><script id="wc-cart-fragments-js-extra"> var wc_cart_fragments_params = {"ajax_url":"/wp-admin/admin-ajax.php","wc_ajax_url":"/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_8a467fd45dd009fbdcad11481196868e","fragment_name":"wc_fragments_8a467fd45dd009fbdcad11481196868e","request_timeout":"5000"}; //# sourceURL=wc-cart-fragments-js-extra </script><script data-wp-strategy="defer" defer id="wc-cart-fragments-js" src="https://pmpr.ir/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=9.8.7"></script><script defer id="akismet-frontend-js" src="https://pmpr.ir/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1777074448"></script><div id="foundation_nonce"></div><script type="application/ld+json">{"@context":"http://schema.org/","@type":"BlogPosting","@id":"pmpr.ir-blogposting-post-4576","url":"https://pmpr.ir/react-website-designing/","name":"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a + \u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 React","image":{"@type":"ImageObject","url":"https://pmpr.ir/s/u/pmpr/designing-web-by-react-120x100.jpg","width":100},"mainEntityOfPage":{"@type":"WebPage","@id":"pmpr.ir-webpage-react-website-designing"},"description":"\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628 \u0628\u0633\u062a\u0646 \u06f1. React \u0686\u06cc\u0633\u062a\u061f\u06f2. \u0622\u06cc\u0627 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0622\u0633\u0648\u0646\u0647\u061f\u06f3. \u0646\u062d\u0648\u0647 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a\u0631\u06cc \u0627\u06a9\u062a \u0631\u0648 \u0648\u0627\u0631\u062f \u0639\u0645\u0644 \u06a9\u0646\u06cc\u0646!React Component\u06f4. \u0634\u0645\u0627 \u0686\u0647 \u06a9\u0627\u0631 \u062f\u06cc\u06af\u0647\u200c\u0627\u06cc \u0645\u06cc\u200c\u062a\u0648\u0646\u06cc\u0646 \u0627\u0646\u062c\u0627\u0645 \u0628\u062f\u06cc\u0646\u061f\u06f5. \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0647 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0645\u06cc \u062a\u0648\u0646\u0647 \u062c\u0632\u0621 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0637\u0631\u0627\u062d \u0648\u0628 \u0628\u0627\u0634\u0647. […]","author":{"@type":"Organization","@id":"pmpr.ir-organization-brand","url":"https://pmpr.ir","name":"\u062f\u06a9\u062a\u0631 \u067e\u06cc\u0645\u0627\u0646 \u0645\u062d\u0645\u062f\u067e\u0648\u0631 | \u06a9\u0627\u0631\u0634\u0646\u0627\u0633 \u0631\u0633\u0645\u06cc \u062f\u0627\u062f\u06af\u0633\u062a\u0631\u06cc"},"publisher":{"@type":"Organization","@id":"pmpr.ir-organization-brand","url":"https://pmpr.ir","name":"\u062f\u06a9\u062a\u0631 \u067e\u06cc\u0645\u0627\u0646 \u0645\u062d\u0645\u062f\u067e\u0648\u0631 | \u06a9\u0627\u0631\u0634\u0646\u0627\u0633 \u0631\u0633\u0645\u06cc \u062f\u0627\u062f\u06af\u0633\u062a\u0631\u06cc"},"comment":[{"@type":"Comment","@id":"pmpr.ir-comment-comment-453","description":"\u0633\u0644\u0627\u0645 \u062f\u0648\u0633\u062a \u0639\u0632\u06cc\u0632\u060c \u0628\u0627\u062a\u0648\u062c\u0647 \u0628\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u0648\u0634\u062a\u06cc\u0645 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u062e\u06cc\u0644\u06cc \u0631\u0627\u062d\u062a\u200c\u062a\u0631 \u0648 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u0647 \u0648 \u0627\u0644\u0628\u062a\u0647 \u06a9\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u0646\u0648\u06cc\u0633\u06cc\u0646 \u0647\u0645 \u062a\u0645\u06cc\u0632\u062a\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc\u200c\u062a\u0631 \u0647\u0633\u062a\u0646 \u0648 \u0628\u0631\u0627\u06cc \u0633\u0648\u0627\u0644 \u0630\u062f\u0648\u0645\u062a\u0648\u0646 \u0647\u0645 \u0628\u0627\u06cc\u062f \u0628\u06af\u0645 \u0631\u06cc \u0627\u06a9\u062a \u06cc\u0647 \u06a9\u062a\u0627\u0628\u062e\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u0647 \u0648 \u062a\u0648 \u062e\u06cc\u0644\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0647\u0645\u062f\u06cc\u06af\u0646.","author":{"@type":"Person"},"dateCreated":"2020-10-06 09:36:30"},{"@type":"Comment","@id":"pmpr.ir-comment-comment-450","description":"\u0633\u0644\u0627\u0645 \u0631\u0648\u0632 \u0628\u062e\u06cc\u0631\u060c \u0645\u06cc\u062e\u0648\u0627\u0633\u062a\u0645 \u0628\u062f\u0648\u0646\u0645 \u06a9\u0647 \u062a\u0641\u0627\u0648\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0686\u06cc\u0647\u061f \u0622\u06cc\u0627 \u0647\u0631 \u062f\u0648\u06cc \u0627\u06cc\u0646\u0647\u0627 \u06cc\u0647 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0647\u0633\u062a\u0646 \u0648 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0646 \u0628\u0627\u0647\u0627\u0634\u0648\u0646 \u0645\u0634\u0627\u0628\u0647\u0647 \u06cc\u0627 \u0627\u06cc\u0646 \u06a9\u0647 \u062f\u0648\u062a\u0627 \u0686\u06cc\u0632 \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u062a\u0641\u0627\u0648\u062a\u0646\u061f","author":{"@type":"Person"},"dateCreated":"2020-10-05 11:26:15"}],"commentCount":"2","datePublished":"2020-10-01 10:07:47","dateModified":"2021-04-03 23:30:04","keywords":["\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a"],"dateCreated":"2020-10-01 10:07:47","wordCount":0,"articleBody":"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0645\u06cc \u062a\u0648\u0646\u0647 \u062c\u0632\u0621 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0637\u0631\u0627\u062d \u0648\u0628 \u0628\u0627\u0634\u0647. React \u06cc\u0647 \u06a9\u062a\u0627\u0628\u062e\u0648\u0646\u0647 \u062c\u0630\u0627\u0628 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0648\u0628\u0633\u0627\u06cc\u062a \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u0634\u0647. \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u06cc\u0634\u0647 \u06af\u0641\u062a \u06a9\u0647 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u062f\u0646\u06cc\u0627\u06cc\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u0647 \u06a9\u0647 JavaScript \u0648 HTML \u0628\u0627 \u0647\u0645\u0627\u0647\u0646\u06af\u06cc \u06a9\u0627\u0645\u0644 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0627\u0648\u0646 \u0628\u0627 \u0647\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646 \u0648 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0647\u0645\u06cc\u0634\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0634\u0645\u0627 \u0631\u0648 \u0647\u0645\u0648\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u06cc\u0646 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u062f\u0646.\r\n\r\n\u0627\u0645\u0631\u0648\u0632 \u0645\u0648\u0636\u0648\u0639 \u0628\u062d\u062b \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0627\u06cc\u0646\u0647 \u06a9\u0647 \u0627\u0635\u0644\u0627\u064b \u0631\u06cc \u0627\u06a9\u062a \u0686\u06cc\u0647. \u0647\u0645\u06cc\u0646\u0637\u0648\u0631 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0648\u0646\u0647 \u062a\u0648 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u0686\u0647 \u06a9\u0645\u06a9\u06cc \u0628\u0647 \u0634\u0645\u0627 \u0645\u06cc\u06a9\u0646\u0647. \u067e\u0633 \u062a\u0627 \u0622\u062e\u0631 \u0645\u0642\u0627\u0644\u0647 \u0647\u0645\u0631\u0627\u0647 \u0645\u0627 \u0628\u0627\u0634\u06cc\u0646 \u062a\u0627 \u0628\u0647 \u062c\u0648\u0627\u0628 \u0633\u0648\u0627\u0644\u0627\u062a \u062e\u0648\u062f\u062a\u0648\u0646 \u0628\u0631\u0633\u06cc\u0646.\r\nReact \u0686\u06cc\u0633\u062a\u061f\r\n\u0628\u0627 React \u0645\u06cc\u200c\u062a\u0648\u0646\u06cc\u0646 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0628\u0633\u0627\u0632\u06cc\u0646. \u06cc\u0639\u0646\u06cc \u062f\u0631 \u062d\u0642\u06cc\u0642\u062a \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648\u0628 \u0645\u06cc\u062a\u0648\u0646\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0648\u0646\u0647 \u06a9\u0627\u0631\u06cc \u06a9\u0646\u0646 \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u0634\u0648\u0646 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0631\u0641\u0631\u0634 \u06a9\u0631\u062f\u0646 \u0635\u0641\u062d\u0647\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0648 \u0631\u0641\u0631\u0634 \u06a9\u0646\u0647. \u0647\u0645\u0648\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u0646\u060c \u0647\u0645\u0686\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0642\u0628\u0644 \u0627\u0632 React \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647.\r\n\r\n\u0645\u062b\u0644\u0627\u064b \u0641\u0631\u0636 \u06a9\u0646\u06cc\u0646 \u0634\u0645\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0637\u0631\u0641\u062f\u0627\u0631\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0627\u0644\u0645\u067e\u06cc\u06a9 \u0647\u0633\u062a\u06cc\u0646 \u0648 \u0628\u0631\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0627\u0645\u062a\u06cc\u0627\u0632\u0627\u062a\u060c \u062a\u0635\u0645\u06cc\u0645 \u0628\u0647 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u0628\u0627 React \u0645\u06cc\u200c\u06af\u06cc\u0631\u06cc\u0646. \u062f\u06cc\u06af\u0647 \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u06a9\u0627\u0631\u0628\u0631\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0632 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0628\u0627\u0632\u062f\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u0646\u060c \u0645\u0646\u062a\u0638\u0631 \u0628\u0645\u0648\u0646\u0646 \u062a\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0645\u062f\u0627\u0645 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0648 \u0646\u0648\u0633\u0627\u0632\u06cc \u0628\u0634\u0646! \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc React \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0631\u0622\u0645\u062f\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc\u0634\u0646 \u062a\u0627..."} </script><script type="application/ld+json">{"@context":"http://schema.org/","@type":"WebSite","@id":"pmpr.ir-website-site","url":"https://pmpr.ir","name":"\u062f\u06a9\u062a\u0631 \u067e\u06cc\u0645\u0627\u0646 \u0645\u062d\u0645\u062f\u067e\u0648\u0631 | \u06a9\u0627\u0631\u0634\u0646\u0627\u0633 \u0631\u0633\u0645\u06cc \u062f\u0627\u062f\u06af\u0633\u062a\u0631\u06cc","potentialAction":{"@type":"SearchAction","target":"https://pmpr.ir?s={search_term_string}","query-input":"required s=search_term_string"},"publisher":{"@type":"Organization","@id":"pmpr.ir-organization-brand","url":"https://pmpr.ir","name":"\u062f\u06a9\u062a\u0631 \u067e\u06cc\u0645\u0627\u0646 \u0645\u062d\u0645\u062f\u067e\u0648\u0631 | \u06a9\u0627\u0631\u0634\u0646\u0627\u0633 \u0631\u0633\u0645\u06cc \u062f\u0627\u062f\u06af\u0633\u062a\u0631\u06cc","description":"\u0645\u0634\u0627\u0648\u0631\u0647\u060c \u0646\u0638\u0627\u0631\u062a \u0648 \u0627\u062c\u0631\u0627 \u062f\u0631 \u0648\u0628","sameAs":["https://wa.me/989028882747","https://t.me/+989028882747","https://instagram.com/pmpr.ir","https://www.linkedin.com/company/pmpr"],"logo":{"@type":"ImageObject","url":"https://pmpr.ir/s/u/pmpr/2024/07/footer-Logo.svg","name":"logo","width":100}}} </script><script type="application/ld+json">{"@context":"http://schema.org/","@type":"WebPage","@id":"pmpr.ir-webpage-react-website-designing","url":"https://pmpr.ir/react-website-designing/","name":"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a + \u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 React","about":"\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628 \u0628\u0633\u062a\u0646 \u06f1. React \u0686\u06cc\u0633\u062a\u061f\u06f2. \u0622\u06cc\u0627 \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0622\u0633\u0648\u0646\u0647\u061f\u06f3. \u0646\u062d\u0648\u0647 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a\u0631\u06cc \u0627\u06a9\u062a \u0631\u0648 \u0648\u0627\u0631\u062f \u0639\u0645\u0644 \u06a9\u0646\u06cc\u0646!React Component\u06f4. \u0634\u0645\u0627 \u0686\u0647 \u06a9\u0627\u0631 \u062f\u06cc\u06af\u0647\u200c\u0627\u06cc \u0645\u06cc\u200c\u062a\u0648\u0646\u06cc\u0646 \u0627\u0646\u062c\u0627\u0645 \u0628\u062f\u06cc\u0646\u061f\u06f5. \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0647 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0645\u06cc \u062a\u0648\u0646\u0647 \u062c\u0632\u0621 \u062c\u0630\u0627\u0628\u200c\u062a\u0631\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u06cc\u06a9 \u0637\u0631\u0627\u062d \u0648\u0628 \u0628\u0627\u0634\u0647. […]","isPartOf":{"@type":"WebSite","@id":"pmpr.ir-website-site","url":"https://pmpr.ir","name":"\u062f\u06a9\u062a\u0631 \u067e\u06cc\u0645\u0627\u0646 \u0645\u062d\u0645\u062f\u067e\u0648\u0631 | \u06a9\u0627\u0631\u0634\u0646\u0627\u0633 \u0631\u0633\u0645\u06cc \u062f\u0627\u062f\u06af\u0633\u062a\u0631\u06cc"},"breadcrumb":{"@type":"BreadcrumbList","name":"\u062f\u0646\u0628\u0627\u0644\u0647 \u0622\u062f\u0631\u0633 \u0635\u0641\u062d\u0647 (\u0628\u0631\u062f\u06a9\u0631\u0627\u0645\u0628)","numberOfItems":4,"itemListElement":[{"@type":"ListItem","name":"\u062f\u06a9\u062a\u0631 \u067e\u06cc\u0645\u0627\u0646 \u0645\u062d\u0645\u062f\u067e\u0648\u0631 | \u06a9\u0627\u0631\u0634\u0646\u0627\u0633 \u0631\u0633\u0645\u06cc \u062f\u0627\u062f\u06af\u0633\u062a\u0631\u06cc","item":"https://pmpr.ir/","position":1},{"@type":"ListItem","name":"\u0648\u0628\u0644\u0627\u06af","item":"https://pmpr.ir/blog/","position":2},{"@type":"ListItem","name":"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a","item":"https://pmpr.ir/category/website-design/","position":3},{"@type":"ListItem","name":"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a + \u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 React","item":"https://pmpr.ir/react-website-designing/","position":4}]}} </script><script type="application/ld+json">{"@context":"http://schema.org/","@type":"CreativeWorkSeries","@id":"pmpr.ir-creativeworkseries-post_type-4576","name":"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627 \u0631\u06cc \u0627\u06a9\u062a \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a + \u0622\u0645\u0648\u0632\u0634 \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 React","aggregateRating":{"@type":"AggregateRating","@id":"pmpr.ir-aggregaterating-post_type-4576","bestRating":5,"ratingValue":4.5999999999999996,"worstRating":1,"ratingCount":10}} </script></body></html>