مدت :

۲ ساعت و ۳۰ دقیقه

قیمت : ۸۹,۰۰۰ تومان
LinkedIn
Twitter
Facebook
Telegram

درباره مدرس 

اطلاعات دوره

توضیحات

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

 

آموزش-ساخت-فروشگاه-فول-استک-با-جنگو-و-ری-اکت-ریکت-هم-رویش

این آموزش بخشی از بسته جامع ساخت فروشگاه با جنگو و ری اکت (+) است.

شما می‌توانید بسته جامع با با مجموع قیمت کمتر از این لینک (+) تهیه کنید یا این مجموعه را فصل به فصل دریافت و تماشا کنید.

 

فهرست فصل‌‌به‌فصل آموزش ساخت فروشگاه جنگو/ریکت

جنگو چیست ؟

جنگو (Django) یکی از محبوب‌ترین فریمورک‌های برنامه‌نویسی وب است. از یک سو سرعت توسعه، کتابخانه‌های غنی و امنیت مناسبی دارد؛ از سوی دیگر با زبان پایتون برنامه‌نویسی می‌شود. پس می‌توان از کتابخانه‌های پایتون در هوش مصنوعی و داده کاوی در آن جنگو استفاده کرد.

برای شروع آشنایی با Django، این آموزش جنگو (+) توصیه می‌شود.

 

ری اکت چیست؟

ری اکت (React) یک کتابخانه متن باز بر اساس جاوا اسکریپت که در سال ۲۰۱۳ توسط تیم توسعه فیسبوک برای اولین بار منتشر شد و امروزه هم در بین برنامه نویسان و طراحان وب از جایگاه ویژه ای برخوردار است. در ایران انجمن‌های طرفداری متعددی برای ری اکت برپا شده است.

برای شروع آشنایی با React، این آموزش ری اکت (+) توصیه می‌شود.

 

جنگو رست چیست؟

جنگو رست (Django REST) یک فریمورک برای تولید Web API مبتنی بر جنگو است. امروزه استفاده از سیستم API برای برفراری ارتباط بک اند و فرانت اند و همچنین مستقل بودن این دو، کاربرد بسیاری یافته است.

برای شروع آشنایی با Django REST این آموزش جنگو رست (+) توصیه می‌شود.

 

فروشگاه مبتنی بر Web API

جنگو به عنوان بک اند و ری اکت به عنوان فرانت اند در این پروژه با استفاده از API با یکدیگر صحبت می‌کنند. برای آشنایی بیشتر با این نوع رابطه اگر آموزش Django REST هم رویش را ندیده‌اید دست کم این برگ Web API چیست را ببینید.

 

ساخت فروشگاه با جنگو و پایتون

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

 

این آموزش در یک نگاه

آموزش را با نصب نود جی اس (Node.js) و ایجاد اولین اپ ری اکت آغاز می‌کنیم. سپس سراغ ویژوال استودیو کد (+) می رویم که یک محیط توسعه رایگان و مناسب برای پروژه ماست. اپ ری اکتی ساخته شده را در VS Code باز می‌کنیم.

یک یادآوری از ساختار React خواهیم داشت. سپس بخش های اصلی سایت را به صورت کامپوننت طراحی می‌کنیم. آنگاه برای زیباسازی فرانت اند سراغ بوت استرپ می‌رویم. پکیج React Bootstrap امکان استفاده از بوت استرپ در ریکت را فراهم می‌کند.

اپ های ری اکت SAP یا Single Page Application هستند. امکان این را داریم که از بخشی از سایت به بخشی دیگر برویم بدون این که واقعا مرورگر صفحه اصلی را Reload کند. برای استفاده از این قابلیت اپ های react-router-dom و react-router-bootstrap را به پروژه اضافه و در یک درس از آن ها استفاده می‌کنیم.

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

در پایان این فصل فرانت اند فروشگاه ما تا حدی که بتوانیم سراغ خوانش سرور (توسط ای پی آی) برویم آماده است.

 

این آموزش ساخت فروشگاه با جنگو بی‌نظیر است زیرا:
  • یک فروشگاه واقعی را  با جنگو و پایتون و ری اکت خواهیم ساخت.
  • یک مرجع با کدهای استاندارد را در کنار تجربه مدرس خواهید داشت.
  • پروژه ای را خواهیم ساخت که یکی از نیازهای عمده کارفرمایان است.
  • ساخت فروشگاه با جنگو و پایتون امکان استفاده از کتابخانه های هوش مصنوعی پایتون را می‌دهد.

 

پیشنیاز:

همچنین اگر قصد شروع از صفر دارید به ترتیب موارد زیر پیشنهاد می‌شود:

 

کلیدواژگان

آموزش جنگو . آموزش ری اکت . آموزش Django REST . آموزش پروژه محور جنگو . آموزش پروژه محور django . آموزش پروژه محور react . آموزش پروژه محور django rest . آموزش ساخت فروشگاه با جنگو . ساخت وبسایت فروشگاه آنلاین با جنگو و پایتون . آموزش فروشگاه با جنگو . فروشگاه با پایتون و جاوا اسکریپت . بوت استرپ در ری اکت . مفهوم روتر در ری اکت . وب اپلیکیشن SPA یا Single page application . ساخت فروشگاه با جنگو و ری اکت . فروشگاه اینترنتی با جنگو و ری اکت .

 

سرفصل‌ها

سرفصل‌ها

درس ۰: معرفی دوره

  • مروری به آموزش
  • پیشنیاز آموزش
  • مرجع آموزش
  • ادامه مسیر

 

درس ۱: نصب و راه اندازی ری اکت

  • وبسایت رسمی ری اکت reactjs نقطه شروع نصب
  • نود جی اس یا Node.js چیست؟
  • مدیریت بسته نود یا npm (node package manager) چیست؟
  • نصب نود جی اس ۱۶ و بسته‌های پیشنیاز آن روی ویندوز
  • مفهوم دستور npx به زبان ساده و اجرای آن
  • نصب ری اکت با create-react-app
  • اجرای لوکال ری اکت روی پورت ۳۰۰۰

 

درس ۲: راه اندازی محیط توسعه

  • چرا محیط توسعه حرفه ای ؟
  • راه اندازی VSCode به عنوان پیشنهاد
  • باز کردن پروژه ری اکت در ویژوال استودیو کد
  • اجرای ری اکت از ترمینال VS Code
  • معرفی اکستنشن‌های (Extension) مورد نیاز پروژه

 

درس ۳: بررسی ساختار پروژه ری اکت

  • کار پوشه node_modules
  • بررسی فایل package.json
  • مفهوم SPA یا Single Page Application
  • مفهوم کامپوننت Component و صفحه Page
  • ساختار react به عنوان یک اپ تک صفحه حذف فایل های پیش فرض اضافی
  • تغییر فایل index.html و App.js

 

درس ۴: ایجاد کامپوننت در ری اکت

  • ایجاد پوشه و فایل جاوا اسکریپت کامپوننت ها
  • ایجاد کامپوننت های هدر و فوتر سایت
  • استفاده از امت rfce و imp برای ایجاد و فراخوانی کامپوننت
  • فراخوانی کامپوننت ‌های ساخته شده در App.js

 

درس ۵: نصب بوت استرپ در ری اکت

  • یادآوری کاربرد bootstrap
  • معرفی کتابخانه react-bootstrap
  • معرفی وبسایت bootswatch برای قالب های آماده و رایگان
  • نصب بوت استرپ در ری اکت با دستور npm install bootstrap
  • استفاده از bootstrap.min.css در فایل index.js
  • مفهوم destructing در javascript
  • فراخوانی و استفاده از یک کامپوننت بوت استرپ در ری اکت

 

درس ۶: طراحی هدر و فوتر سایت با بوت استرپ

  • امکان چند ترمینالی vscode
  • کامپوننت‌های Container و Row و Col از بوت استرپ
  • طراحی فوتر و کار text-center در کلاس‌های بوت استرپ
  • یادآوری مفهوم vh در CSS و بردن فوتر به پایین صفحه
  • استفاده از Nav و Navbar برای طراحی منو
  • یادآوری تگ در html و دادن آیکن به منوها
  • استفاده از cdnjs.com و فونت آیکن‌های awesome-font
  • تنظیم پس زمینه و variant در Navbar

 

درس ۷: داده‌های نمونه و یادآوری API و JSON

  • قرار دادن نمونه داده از وبسایت آمازون
  • قرار دادن تصویر محصولات در پروژه ری اکت
  • ایجاد لیست جاوا اسکریپتی از داده های جیسون
  • یادآوری مختصر کارکرد API و JSON

 

درس ۹: طراحی کامپوننت پیش‌نمایش محصول

  • ایجاد فایل Product.js
  • یادآوری props در Function component ها در react
  • دیستراکت کردن پراپرتی ورود به کامپوننت جاوااسکریپتی
  • کامپوننت Card در بوت استرپ و تنظیمات استایل آن
  • استفاده از Card.Img و Card.Title و Card.Body و Card.Text
  • مفهوم backtick یا back quote در استرینگ جاوا اسکریپت
  • معنی as در بوت استرپ

 

درس ۱۰: طراحی کامپوننت نمایش امتیاز محصول

  • تنظیم object-fit برای کادر عکس در css
  • مفهوم contain در css
  • ارسال چند پارامتر به کامپوننت در ری اکت
  • استفاده از چند تگ span برای ساخت یک خط ابتکاری
  • استفاده از تگ i برای درج آیکن ستاره در مورد نظرات
  • معنی && در JSX
  • تنظیم رنگ آیکن با اتریبیوت style
  • یادآوری مختصر مفهوم em و rem در CSS

 

درس ۱۱: لینک دهی با Router در ری اکت

  • نصب بسته react-router-dom
  • کاربرد پکیج react-router-bootstrap
  • مفهوم BrowserRouter و Route در react
  • معنی path و component و exact در Route
  • کاربرد Link برای تبدیل لینک های href و جلوگیری از reload
  • کاربرد LinkContainer در لینک های منوی NavBar

 

درس ۱۲: طراحی صفحه نمایش محصول

  • آبجکت match چیست ؟
  • معرفی آبجکت match برای ارتباط path و url در ری اکت
  • دریافت پارامترهای ارسالی توسط params از match
  • تابع find در جاوا اسکریپت
  • رفع مشکل عدم تطبیق Image از نظر width در بوت استرپ
  • کار با ListGroup و ListGroup.Item در bootstrap
  • غیرفعال کردن دکمه با disabled و نسبت دادن آن به صورت شرطی
  • تنظیم کلاس button در CSS و بوت استرپ
  • تنظیم ریسپانسیو صفحه با استفاده از ستون بندی نسبی مبتی بر flexbox
  • تکمیل اجزای اصلی صفحه نمایش محصول و فروشگاه آنلاین

 

درس ۱۳: جمع‌بندی فصل اول

  • مروری بر دستاوردهای این فصل
  • نگاهی به ادامه مسیر در فصل‌های بعد
  • تمرین‌هایی پیش از ادامه مسیر
نظرات (34)

34 دیدگاه برای آموزش ساخت فروشگاه با جنگو و ری اکت ــ فصل ۱: فرانت اند با React

  1. mehdirashti46 (خریدار محصول)

    history.ts:494 Uncaught Error: A is only ever to be used as
    the child of element, never rendered directly. Please wrap your
    in a .
    راهنمایی لطفا

  2. mehdirashti46 (خریدار محصول)

    خسته نباشید برای رفع ارور راهنمایی میکنین
    Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .

    • مصطفی آصفی

      سلام به شما. لطفا وقتی خطایی دریافت می کنید دقیق تر توضیح بدین که خطا رو کجا و چطور دریافت کردین که بتونیم دقیق تر هم فکری کنیم ولی احتمالا مشکلتون به دلیل اینه که react-router-dom نسخه ۶ استفاده می کنید. مطابق توضیح فایل روزآمدی که تو دانلودهای بسته هست نسخه ۵ باید نصب و استفاده کنید.

  3. sali (خریدار محصول)

    سلام خسته نباشید
    جناب ما همون اول گرفتار این نسخه های متفاوت شدیم با این که node 16.30 نصب کردم و ورژن package.json را دقیقا با اون فایل در گیت تغییر دادم باز هم به ارور خوردم
    متن ارور این هست:
    ./src/index.js
    Module not found: Can’t resolve ‘react-dom/client’ in ‘C:\Users\saul\Desktop\poker-proj\frontend\src’

  4. ehsan eslami (خریدار محصول)

    سلام وقت بخیر من وقتی دستور npx creare_react-app رو میزنم با پیغام خطا مواجه میشم و فولدر ایجاد نمیشه
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path C:\Users\Ehsan&Elham\Desktop\react/package.json
    npm ERR! errno -4058
    npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\Ehsan&Elham\Desktop\react\package.json’
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! A complete log of this run can be found in: C:\Users\Ehsan&Elham\AppData\Local\npm-cache\_logs\2023-11-30T20_48_09_845Z-debug-0.log

  5. امین دهقان (خریدار محصول)

    سلام استاد گرامی خوب هستید
    من برای پنجمین بار دارم این دوره رو مرور میکنم و دارم اشکالات و نیاز های خودم رو بر طرف میکنم(بازهم بخاطر این آموزش ها ممنونم)
    الان تو بخشی هستم که شما دارید یک لیست (کالا) رو به شکل کاشی نمایش میدید.
    با توجه به نیاز پروژه ام میخاستم این لیست رو تو پروژه خودم به صورت سطری (گرید) نمایش بدم و به صورتی باشه که بتونم با کلیک روی سر ستون لیست ها
    اون ها رو مرتب کنم ممنون میشم اگر راهنمایی یا رفرنسی ارایه بفرمایید.
    ***تو سیستم های قدیمی تحت ویندوز یا وب این کارها رو با کامپوننت هایی مثل تلریک یا جانوس با اپشنی به نام گرید ویو انجام میدادیم***

  6. ehsan eslami (خریدار محصول)

    سلام وقت بخیر من با نصب مجدد کتابخانه ها و ورژن ها مشکل قبلی رو بر طرف کردم ولی تو فصل یازده بعد از نوشتن کد ها با پیام زیر مواجه شدم:
    Cannot read properties of undefined (reading ‘location’)
    TypeError: Cannot read properties of undefined (reading ‘location’)
    at new Router (http://localhost:3001/static/js/bundle.js:39285:31)
    چه کنم استاد ؟

    • مصطفی آصفی

      سلام مجدد. خوشحالم که مشکلتون حل شد. در مورد این مشکلی که نوشتین با فرض این که کدها رو دقیقا مثل من نوشته باشین و اشتباهی تو کد نداشته باشین احتمالا مشکل از نسخه react-router-dom هست.
      فایل زیپ HB-DjangoReact-ChA-01-UpdateNote2023 که به عنوان روزآمدی تو دانلودهاتون موجوده رو نگاه کنید. اونجا نوشتم که نسخه ها رو از چه مسیری در گیت هاب دنبال کنید و چطور برای مثلا نسخه 5.2.0 از react-router-dom رو نصب کنید.
      این مورد رو لطفا درست کنید و اگه درست شد و همچنان مشکل برجا بود اطلاع بدین تا حالت های دیگه ای که ممکنه مشکل از اون ها باشه رو بررسی کنیم.

  7. ehsan eslami (خریدار محصول)

    سلام من دوباره از اول همه چیو مثل شما نصب کردم ولی ایندفعه تو فصل پنج به این مشکل خوردم
    opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
    library: ‘digital envelope routines’,
    reason: ‘unsupported’,
    code: ‘ERR_OSSL_EVP_UNSUPPORTED’

    • مصطفی آصفی

      سلام وقت بخیر. یه راه اینه که مثل من نسخه node 16 نصب کنید. بستن حفره امنیتی SSL provider از Node.js v17 باعث مشکل برای بسته های ssl از اون به بعد شده. احتمالا شما نود بالاتری دارین.
      اگه نخواین نود رو برگدونین (یا قبل از این کار) این راه ها رو هم می تونید بر اساس این لینک (+) امتحان کنید:

      ۱- تو cmd ویندوز دستور پایین رو اجرا و مجدد اثرش رو بررسی کنید:
      set NODE_OPTIONS=–openssl-legacy-provider
      ۲- تو فایل package.json این خط پایین رو
      “start”: “react-scripts start”
      به این شکل تغییر بدین:
      “start”: “react-scripts –openssl-legacy-provider start”

      لطفا نتیجه رو اطلاع بدین.

  8. علیرضا عباسی

    سلام لطفا بسته جامع ری اکت هم بصورت پکیج یک جا ارایه دهید.تا بشه یکجا تهیه کرد.مثل پایتون .

    • مصطفی آصفی

      سلام. بله حتما این کار رو می کنیم منتها منتظر هستم که شاید فصل دیگه ای رو آقای حسن زاده اضافه کنن. در حال حاضر تا اتصال به درگاه پرداخت پیش رفتن و می خوان اگه بشه دپلوی با داکر را هم توضیح بدن. بعد بسته رو جامع هم دوستان منتشر می کنن.
      پی‌نوشت: هم رویش رو در اینستاگرام با شناسه hamruyesh دنبال کنید که به موقع مطلع بشین.

  9. ehsan eslami (خریدار محصول)

    سلام وقت بخیر در ابتدای فصل 10 تنظیمات رو که واسه یکسان شدن عکس ها میزنم فرقی نمیکنه

    • مصطفی آصفی

      سلام به شما. با فرض این که نسخه های کتابخونه مشابهی استفاده می کنید و فایل index.css هم جای درستی باشه ممکنه object-fit براتون کار نمی کنه. شاید object-fit برای این عمل نمی کنه که ارتفاع عکس رو مشخص نکردین یا داخل تگ درستی (img) قرار نگرفته.

  10. عرفان ستوده (خریدار محصول)

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

    • مصطفی آصفی

      سلام به شما. خوشحالم که براتون مفید بوده و ممنون که برای ارسال انرژی خوبتون وقت گذاشتین.

  11. مهرداد کهن پور (خریدار محصول)

    در قسمت 12 React Router صفحه محصولات نمیاد.ورژن را هم عوض کردم.

    • مصطفی آصفی

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

  12. مهرداد کهن پور (خریدار محصول)

    درود بر شما.
    میشه مشکل این صفحه را حل بفرمایید.ظاهرا همه چیز درسته ولی محصولات بارگزاری نمی شن.ممنون.
    import Header from “./components/Header”;
    import Footer from “./components/Footer”;
    import {Container } from ‘react-bootstrap’;
    import HomeScreen from “./screens/HomeScreen”;
    import { BrowserRouter , Routes , Route } from ‘react-router-dom’;
    import ProductScreen from “./screens/ProductScreen”;
    function App() {
    return (

    );
    }

    export default App;

    • مصطفی آصفی

      سلام به شما. لطفا تو صفحه مرورگر راست کلیک کنید و inspect element بزنید و در زبانه console خطایی که دریافت می کنید رو گزارش کنید تا بتونیم هم فکری کنیم.

  13. mehdi mahdavi (خریدار محصول)

    با سلام و خسته نباشید من از نود جدید و ری اکت 18 استفاده میکنم برای رنگ و برخی کدها مشکل دارم امکان داره آموزش ثبت کتابخانه قدیمی را بزارید چون من نتونستم نصب کنم همش خطا میدادن

    • مصطفی آصفی

      سلام. برای نصب بسته‌ها بانسخه مورد استفاده تو آموزش دستور پایین رو موقع نصب به کار بگیرید:
      npm install [package-name]@[version-number]

  14. امین دهقان (خریدار محصول)

    سلام و درود
    من نسخه “react-router-dom”: “^5.2.0”,
    رو نصب کردم اما این تکه کد که شما در جلسه 11 آموزش دادید کار نمیکنه

    اما به محض اینکه این کد رو به این صورت تغییر میدم

    مشکل برطرف میشه و کار میکنه
    یعنی اگر بجای href و تگ a از Link استفاده کنم برنامه کار نمیکنه و هیچ ارروی هم نمیده
    ممنون میشم کمک بفرمایید.

  15. امین دهقان (خریدار محصول)

    سلام و خداقوت
    من لینک fas یا (فونت اوسوم ) برای استفاده از عکس ها استفاده میکنم می خاستم بدونم اگر کاربری که از وب سایت بنده استفاده میکنه به اینترنت متصل نباشه باز هم میتونه این عکس هارو ببینه یا باید حتمی اینترنت باشه

    • مصطفی آصفی

      سلام به شما. خیر طبیعتا برای لود این ها کاربر باید به اون سرور آنلاین متصل بشه.

  16. رضا تاتی (خریدار محصول)

    با سلام و روز بخیر، من دوره آموزشی جنگو ریکت رو خریداری کردم. البته دوره های زیادی از سایت شما خریدم. ولی در این دوره توی CHA11 که بحث روتر هستش به محض استفاده از روتر سایت بالا میاد ولی محصولات و هدر و فوتر نمایش داده نمیشه،خیلی تلاش کردم ولی نمیتونم حلش کنم لطفا راهنمایی کنید چیکار کنم؟

    • مصطفی آصفی

      سلام روز شما هم بخیر. از اونجایی که خطا یا لاگ رو دقیق گزارش نکردید مطمئن نیستم که کد رو دقیق مثل من زدید و خطای انسانی نداشته باشه کدتون.

      اما ممکنه به دلیل نسخه react-router-dom باشه. لطفا فایل روزآمدی (با نام HB-DjangoReact-ChA-01-UpdateNote) که به دوره پیوست شده رو با دقت مطالعه و نسخه ها رو مشابه بنده نصب کنید.

      اگه نسخه شما ۵ هست و باز مشکل دارید و کدتون هم به دقت چک کردین تنها راه اینه که با جزئیات بیشتری خطا یا لاگ ترمینال رو (اون بخشی که داره اشاره می کنه به مشکل) گزارش کنید تا دقیق تر هم فکری کنیم.

  17. علی آرمان (خریدار محصول)

    سلام استاد وقت بخیر یک سوالی داشتم خدمتتون:
    من سایتی که می خواستم رو به صورت لوکال طراحی کردم و مشکلی با دیتا ها از سمت دیتابیس نداشتم
    سایت رو که دیپلوی کردم رو پارس وب سرور چون دیتا های پایکاه داده من فارسی هستن داخل پنل ادمین وقتی روشون کلیک می کنم این ارور میاد:
    Product_store with ID “%D9%82%D9%87%D9%88%D9%87%20%D8%B1%D9%88%D8%A8%D8%B3%D8%AA%D8%A7” doesn’t exist. Perhaps it was deleted?

    پایگاه داده هم mysql است و utf-8 و مقادیر داخل دیتابیس به درستی نشون داده میشن و کوئری های فارسی کلا جواب نمیدن چه کاری باید انجام بدم؟

    • مصطفی آصفی

      سلام وقت شما هم بخیر. سوالتون البته از آموزش نیست و نمی دونم چقدر درست متوجه منظورتون شدم. ولی احتمالا این پست (+) می تونه کمکتون کنه. برای بیان مدلتون از متد __unocode__ استفاده کنید.

  18. hamed Hod (خریدار محصول)

    سلام
    من یک اشکال داشتم تو این قسمت
    وقتی
    npm install react-bootstrap رو می زنم می گه باید npm audit force fix –force را اجرا کنید
    وقتی اجرا می کنم باز این دو باره پیام میاد در واقع روند خطا به این صورت است

    npm install react-bootstrap

    added 17 packages, and audited 1466 packages in 11s

    210 packages are looking for funding
    run `npm fund` for details

    6 high severity vulnerabilities

    To address all issues (including breaking changes), run:
    npm audit fix –force

    Run `npm audit` for details.
    که بعد از اجرا npm audit

    6 high severity vulnerabilities

    To address all issues (including breaking changes), run:
    npm audit fix –force
    بعد از npm auddit fix –force هم دوباره با این خطا رو به رو یم شویم
    ممنون اگر راهنمایی بفرمایید

    • مصطفی آصفی

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

  19. کامران اداوی (خریدار محصول)

    const{ id } = useParams();
    const product = products.find((p) => p._id == Number(id));
    باید از این کد در ورژن 6 استفاده شود

    • مصطفی آصفی

      سلام به شما آقای ادواری. خیلی ممنون از نکته خوبی که گذاشتین. بله حق با شماست تو نسخه جدید این دستور متفاوت شده.

      پی‌نوشت: دوستانی که از این دوره استفاده می‌کنن بایستی نسخه‌ها رو مطابق بنده پیش بیان. شیوه کار رو به صورت «روزآمدی درس ۱» به دوره پیوست کردم.

  20. کامران اداوی (خریدار محصول)

    سلام استاد من آموزش شمارو تهیه کردم قسمتی که روی هر محصول کلید میکنی تا جزئیات رو ببینی نشون نمیده من از این دستور استفاده میکنم مطابق آموزش شما
    const product=products.find((p) => p._id ===match.params.id) و اروری که در قسمت کنسول به بنده نشون میده این هست
    Uncaught TypeError: Cannot read properties of undefined (reading ‘params’) ممنون میشم راهنمایی کنید.

  21. am.kaz1381@hotmail.com

    سلام
    میخواستم ببینم برای قسمت محصولات کامنت گذاری. افزودن به علاقه مندی ها و اعمال کد تخفیف هم گذاشتید؟

    • مصطفی آصفی

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

  22. امین اجاقی

    سلام و درود خدا بر شما استاد عزیز و گرامی من دیدم در سایت تخفیف هست برای تولد حضرت عیسی مسیح (ع) این چهار فصل را خریداری نمودم تا هر وقت دوره ه ی ری اکت تمام شد آغاز نمایم ممنون از مهربانی شما و ستایش برای دوستیتان با خدا که به مناسبت های این چنینی دل ما را نیز شاد می سازید برکت خدای متعال بر شما عزیزان و عشق زندگیتان وخانواده ها و دوستان و آشنایانتان .

    • مصطفی آصفی

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

      پی نوشت: جز تخفیفی که به احترام سال نوی میلادی گذاشته شد یک تخفیف همیشگی ۳۰ درصد در سایت فعال کردیم برای دوستانی که بضاعت مالی ضعیفی دارن.

  23. امین اجاقی

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

    • مصطفی آصفی

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

  24. ابوالفضل حسن زاده (خریدار محصول)

  25. ابوالفضل حسن زاده (خریدار محصول)

    سلام به همه دوستانی مثل من در مسیر یادگیری این آموزش هستن . دوستان یه مطلبی که من خودم دنبالش بودم و پیدا کردم شاید شما هم بهش فکر کرده باشید.
    اونم استفاده از markdown هست. این پست خیلی ساده توضیح داده که چطور متن هایی که حاوی علائم markdown هستن رو رندر بکنه. امیدوارم که خوش تون بیاد و ازش استفاده کنید.

  26. محمدرضا گوشکی (خریدار محصول)

    ممنون از پشتیبانی عالی و سریع شما جناب آصفی

  27. محمدرضا گوشکی (خریدار محصول)

    سلام استاد عزیز خسته نباشید توی فصل یک درس یازده بخشی که BrowserRouter رو توی فایل app.js اضافه می کنیم و بعد توی فایل Header تگ LinkContainer رو اضافه می کنیم این پیغام رو میده TypeError: (0 , _reactRouterDom.withRouter) is not a function خیلی تحقیق کردم متاسفانه جوابی پیدا نکردم ممنون میشم راهنماییم کنید

    • مصطفی آصفی

      سلام به شما. سلامت باشید. احتمالا شما react-router سخه 6 رو نصب کردین. دقت کنید که تو نسخه ۶ از react-router متد withRouter حذف شده.
      برگردید به ورژن 5.
      downgrade کردن رو در React جستجو کنید.

      “react-router-dom”: “^5.2.0”
      بوت استرپ و ری اکت روتر تو مدت گذشته از انتشار بسته ارتقا پیدا کردن. لطفا فایل وابستگی های مخزن پروژه (+) رو کنار دستتون داشته باشین.

  28. رضا (خریدار محصول)

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

    در پایان خواستم به یک نکته ای اشاره کنم برای اون دسته از دوستانی که مشکل من رو داشتن
    در قسمت 10 و در زمان 9:47 وقتی قراره به ستاره ها رنگ زرد رو بدیم فرمت تعریفی شما style={{color}} برای من اعمال نشد و بعد از کمی تحقیق فهمیدم میشه به این شکل هم استفاده کرد و برای من جواب داد
    style={{color:color}}
    البته نمیدونم چرا برای من این مشکل به وجود اومد!شاید به خاطر استفاده از Webstorm به جای vscode یا تفاوت ورژن…

    https://www.jetbrains.com/webstorm/

    • مصطفی آصفی

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

  29. رضا (خریدار محصول)

    در مورد ایراد فنی اگه بخوام دقیق تر بگم هنگام لاگین شدن این خطا ظاهر میشه:
    https://media.askvg.com/articles/images8/Secure_Connection_Not_Available_HTTPS_Only_Mode_Mozilla_Firefox.png
    ممنون از توجه و پیگیری شما.

  30. رضا (خریدار محصول)

    درود بر شما
    خواستم ایرادی رو گزارش کنم در مورد سایت
    هنگام انتقال به سبد خرید با ارور http مواجه شدم که البته من تنظیمات فایرفاکس رو در قسمت HTTPS-Only Mode به روی
    Enable HTTPS-Only Mode in all windows قرار دادم تا صفحات http برای من لود نشه.
    که البته موافقت کردم به صورت http ادامه بده تا به سبد خرید منتقل بشم.

    • روابط عمومی هم رویش

      با سلام. همراه گرامی از گزارش شما ممنونیم. به بخش فنی منتقل شد تا بررسی نمایند

  31. ابوالفضل حسن زاده (خریدار محصول)

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

    • مصطفی آصفی

      سلام و سپاس از شما آقای حسن زاده عزیز. ممنونم از این که برای ارسال بازخورد و انرژی خودتون وقت گذاشتین. امیدوارم عمری باشه و کار رو به سرانجام برسونیم.

  32. رضا

    درود بر شما آقای آصفی

    چه آموزش خوب و کاربردی.

    دو پیشنهاد دارم که در نظر گرفتنشون در فصل دوم یا فصل های دیگه میتونه خیلی پروژه ی شما رو پر بار تر کنه
    اول: استفاده از ابزار postman برای تست API هستش
    دوم: نوشتن تست برای متد ها و کلاس ها و API ها و..
    به نظرم این دو مورد خیلی حیاتی و مهم هستش و در اکثر پروژه ها مورد استفاده قرار میگیره
    مخصوصا نوشتن تست با استفاده از کتابخونه ی unittest یا pytest و البته اونطور که من شنیدم pytest خیلی قویتر و راحت تر هستش.

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

    • مصطفی آصفی

      سلام. ممنون از محبت و پیام دلگرم کننده شما. در مورد پیشنهاد اولتون باید بگم برنامه بنده هم استفاده از postman هست. در مورد دوم چون خود امکانات پایه فروشگاه که قصد داریم پیاده بکنیم خیلی زیاد هستن شاید به این مجموعه نرسه (تا این لحظه دوره احتمالا ۱۵ فصل خواهد بود) ولی به هر حال چون موضوع مهمی هست یادداشت کردم. ممنون از پیشنهادهای خوب شما.

  33. رضا

    قسمت لاگین رو با شماره موبایل میگید ؟
    بجای ایمیل شماره موبایل وارد کنه

    • مصطفی آصفی

      سلام به شما. بله بعد از پیاده سازی عملکردهای اصلی روی نسخه انگلیسی می ریم سراغ فارسی سازی و ثبت نام با شماره همراه و درگاه پرداخت داخلی و مواردی که برای پروژه های واقعی داخل کشور لازم هستن. قصد دارم یه پروژه واقعی بشه که بچه ها بتونن برای ورود به بازار کار و پروژه زدن استفاده کنن.

  34. ایمان

    سلام نمیشه استاد همین رو با فلاتر 2 ( فرانت ) و جنگو ( بک اند) کار میکردید؟
    این 38000 تومان مال کل دوره هست ؟

    • مصطفی آصفی

      سلام به شما. فلاتر با پیشینه بدی که گوگل در مورد پشتیبانی اندروید نشون داده برای من گزینه پایداری نیست. هنوز بالغ نیست و چه بسا گوگل تغییرات زیادی رو بده. اما ری اکت از نظر بنده (شایدم درست نباشه) گزینه پایدارتریه.
      هزینه متعلق به فصل اول هست و تو این لحظه که بنده این متن رو می نویسم در حال پیش تولید فصل دوم (شروع سرور با جنگو رست) هستم که امیدوارم ظرف دو هفته آینده منتشر بشه. این پروژه بزرگه و شاید تا ۱۰ فصل پیش بریم تا کامل و قابل استفاده واقعی بشه و بتونید از روش برای کارفرماهای واقعی فروشگاه درست کنید. کم کم انشالله کامل می کنم.

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

دیدگاه خود را بنویسید

نظرات کاربران در خصوص دوره 

34 دیدگاه برای آموزش ساخت فروشگاه با جنگو و ری اکت ــ فصل ۱: فرانت اند با React

  1. mehdirashti46 (خریدار محصول)

    history.ts:494 Uncaught Error: A is only ever to be used as
    the child of element, never rendered directly. Please wrap your
    in a .
    راهنمایی لطفا

  2. mehdirashti46 (خریدار محصول)

    خسته نباشید برای رفع ارور راهنمایی میکنین
    Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .

    • مصطفی آصفی

      سلام به شما. لطفا وقتی خطایی دریافت می کنید دقیق تر توضیح بدین که خطا رو کجا و چطور دریافت کردین که بتونیم دقیق تر هم فکری کنیم ولی احتمالا مشکلتون به دلیل اینه که react-router-dom نسخه ۶ استفاده می کنید. مطابق توضیح فایل روزآمدی که تو دانلودهای بسته هست نسخه ۵ باید نصب و استفاده کنید.

  3. sali (خریدار محصول)

    سلام خسته نباشید
    جناب ما همون اول گرفتار این نسخه های متفاوت شدیم با این که node 16.30 نصب کردم و ورژن package.json را دقیقا با اون فایل در گیت تغییر دادم باز هم به ارور خوردم
    متن ارور این هست:
    ./src/index.js
    Module not found: Can’t resolve ‘react-dom/client’ in ‘C:\Users\saul\Desktop\poker-proj\frontend\src’

  4. ehsan eslami (خریدار محصول)

    سلام وقت بخیر من وقتی دستور npx creare_react-app رو میزنم با پیغام خطا مواجه میشم و فولدر ایجاد نمیشه
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path C:\Users\Ehsan&Elham\Desktop\react/package.json
    npm ERR! errno -4058
    npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\Ehsan&Elham\Desktop\react\package.json’
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! A complete log of this run can be found in: C:\Users\Ehsan&Elham\AppData\Local\npm-cache\_logs\2023-11-30T20_48_09_845Z-debug-0.log

  5. امین دهقان (خریدار محصول)

    سلام استاد گرامی خوب هستید
    من برای پنجمین بار دارم این دوره رو مرور میکنم و دارم اشکالات و نیاز های خودم رو بر طرف میکنم(بازهم بخاطر این آموزش ها ممنونم)
    الان تو بخشی هستم که شما دارید یک لیست (کالا) رو به شکل کاشی نمایش میدید.
    با توجه به نیاز پروژه ام میخاستم این لیست رو تو پروژه خودم به صورت سطری (گرید) نمایش بدم و به صورتی باشه که بتونم با کلیک روی سر ستون لیست ها
    اون ها رو مرتب کنم ممنون میشم اگر راهنمایی یا رفرنسی ارایه بفرمایید.
    ***تو سیستم های قدیمی تحت ویندوز یا وب این کارها رو با کامپوننت هایی مثل تلریک یا جانوس با اپشنی به نام گرید ویو انجام میدادیم***

  6. ehsan eslami (خریدار محصول)

    سلام وقت بخیر من با نصب مجدد کتابخانه ها و ورژن ها مشکل قبلی رو بر طرف کردم ولی تو فصل یازده بعد از نوشتن کد ها با پیام زیر مواجه شدم:
    Cannot read properties of undefined (reading ‘location’)
    TypeError: Cannot read properties of undefined (reading ‘location’)
    at new Router (http://localhost:3001/static/js/bundle.js:39285:31)
    چه کنم استاد ؟

    • مصطفی آصفی

      سلام مجدد. خوشحالم که مشکلتون حل شد. در مورد این مشکلی که نوشتین با فرض این که کدها رو دقیقا مثل من نوشته باشین و اشتباهی تو کد نداشته باشین احتمالا مشکل از نسخه react-router-dom هست.
      فایل زیپ HB-DjangoReact-ChA-01-UpdateNote2023 که به عنوان روزآمدی تو دانلودهاتون موجوده رو نگاه کنید. اونجا نوشتم که نسخه ها رو از چه مسیری در گیت هاب دنبال کنید و چطور برای مثلا نسخه 5.2.0 از react-router-dom رو نصب کنید.
      این مورد رو لطفا درست کنید و اگه درست شد و همچنان مشکل برجا بود اطلاع بدین تا حالت های دیگه ای که ممکنه مشکل از اون ها باشه رو بررسی کنیم.

  7. ehsan eslami (خریدار محصول)

    سلام من دوباره از اول همه چیو مثل شما نصب کردم ولی ایندفعه تو فصل پنج به این مشکل خوردم
    opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
    library: ‘digital envelope routines’,
    reason: ‘unsupported’,
    code: ‘ERR_OSSL_EVP_UNSUPPORTED’

    • مصطفی آصفی

      سلام وقت بخیر. یه راه اینه که مثل من نسخه node 16 نصب کنید. بستن حفره امنیتی SSL provider از Node.js v17 باعث مشکل برای بسته های ssl از اون به بعد شده. احتمالا شما نود بالاتری دارین.
      اگه نخواین نود رو برگدونین (یا قبل از این کار) این راه ها رو هم می تونید بر اساس این لینک (+) امتحان کنید:

      ۱- تو cmd ویندوز دستور پایین رو اجرا و مجدد اثرش رو بررسی کنید:
      set NODE_OPTIONS=–openssl-legacy-provider
      ۲- تو فایل package.json این خط پایین رو
      “start”: “react-scripts start”
      به این شکل تغییر بدین:
      “start”: “react-scripts –openssl-legacy-provider start”

      لطفا نتیجه رو اطلاع بدین.

  8. علیرضا عباسی

    سلام لطفا بسته جامع ری اکت هم بصورت پکیج یک جا ارایه دهید.تا بشه یکجا تهیه کرد.مثل پایتون .

    • مصطفی آصفی

      سلام. بله حتما این کار رو می کنیم منتها منتظر هستم که شاید فصل دیگه ای رو آقای حسن زاده اضافه کنن. در حال حاضر تا اتصال به درگاه پرداخت پیش رفتن و می خوان اگه بشه دپلوی با داکر را هم توضیح بدن. بعد بسته رو جامع هم دوستان منتشر می کنن.
      پی‌نوشت: هم رویش رو در اینستاگرام با شناسه hamruyesh دنبال کنید که به موقع مطلع بشین.

  9. ehsan eslami (خریدار محصول)

    سلام وقت بخیر در ابتدای فصل 10 تنظیمات رو که واسه یکسان شدن عکس ها میزنم فرقی نمیکنه

    • مصطفی آصفی

      سلام به شما. با فرض این که نسخه های کتابخونه مشابهی استفاده می کنید و فایل index.css هم جای درستی باشه ممکنه object-fit براتون کار نمی کنه. شاید object-fit برای این عمل نمی کنه که ارتفاع عکس رو مشخص نکردین یا داخل تگ درستی (img) قرار نگرفته.

  10. عرفان ستوده (خریدار محصول)

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

    • مصطفی آصفی

      سلام به شما. خوشحالم که براتون مفید بوده و ممنون که برای ارسال انرژی خوبتون وقت گذاشتین.

  11. مهرداد کهن پور (خریدار محصول)

    در قسمت 12 React Router صفحه محصولات نمیاد.ورژن را هم عوض کردم.

    • مصطفی آصفی

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

  12. مهرداد کهن پور (خریدار محصول)

    درود بر شما.
    میشه مشکل این صفحه را حل بفرمایید.ظاهرا همه چیز درسته ولی محصولات بارگزاری نمی شن.ممنون.
    import Header from “./components/Header”;
    import Footer from “./components/Footer”;
    import {Container } from ‘react-bootstrap’;
    import HomeScreen from “./screens/HomeScreen”;
    import { BrowserRouter , Routes , Route } from ‘react-router-dom’;
    import ProductScreen from “./screens/ProductScreen”;
    function App() {
    return (

    );
    }

    export default App;

    • مصطفی آصفی

      سلام به شما. لطفا تو صفحه مرورگر راست کلیک کنید و inspect element بزنید و در زبانه console خطایی که دریافت می کنید رو گزارش کنید تا بتونیم هم فکری کنیم.

  13. mehdi mahdavi (خریدار محصول)

    با سلام و خسته نباشید من از نود جدید و ری اکت 18 استفاده میکنم برای رنگ و برخی کدها مشکل دارم امکان داره آموزش ثبت کتابخانه قدیمی را بزارید چون من نتونستم نصب کنم همش خطا میدادن

    • مصطفی آصفی

      سلام. برای نصب بسته‌ها بانسخه مورد استفاده تو آموزش دستور پایین رو موقع نصب به کار بگیرید:
      npm install [package-name]@[version-number]

  14. امین دهقان (خریدار محصول)

    سلام و درود
    من نسخه “react-router-dom”: “^5.2.0”,
    رو نصب کردم اما این تکه کد که شما در جلسه 11 آموزش دادید کار نمیکنه

    اما به محض اینکه این کد رو به این صورت تغییر میدم

    مشکل برطرف میشه و کار میکنه
    یعنی اگر بجای href و تگ a از Link استفاده کنم برنامه کار نمیکنه و هیچ ارروی هم نمیده
    ممنون میشم کمک بفرمایید.

  15. امین دهقان (خریدار محصول)

    سلام و خداقوت
    من لینک fas یا (فونت اوسوم ) برای استفاده از عکس ها استفاده میکنم می خاستم بدونم اگر کاربری که از وب سایت بنده استفاده میکنه به اینترنت متصل نباشه باز هم میتونه این عکس هارو ببینه یا باید حتمی اینترنت باشه

    • مصطفی آصفی

      سلام به شما. خیر طبیعتا برای لود این ها کاربر باید به اون سرور آنلاین متصل بشه.

  16. رضا تاتی (خریدار محصول)

    با سلام و روز بخیر، من دوره آموزشی جنگو ریکت رو خریداری کردم. البته دوره های زیادی از سایت شما خریدم. ولی در این دوره توی CHA11 که بحث روتر هستش به محض استفاده از روتر سایت بالا میاد ولی محصولات و هدر و فوتر نمایش داده نمیشه،خیلی تلاش کردم ولی نمیتونم حلش کنم لطفا راهنمایی کنید چیکار کنم؟

    • مصطفی آصفی

      سلام روز شما هم بخیر. از اونجایی که خطا یا لاگ رو دقیق گزارش نکردید مطمئن نیستم که کد رو دقیق مثل من زدید و خطای انسانی نداشته باشه کدتون.

      اما ممکنه به دلیل نسخه react-router-dom باشه. لطفا فایل روزآمدی (با نام HB-DjangoReact-ChA-01-UpdateNote) که به دوره پیوست شده رو با دقت مطالعه و نسخه ها رو مشابه بنده نصب کنید.

      اگه نسخه شما ۵ هست و باز مشکل دارید و کدتون هم به دقت چک کردین تنها راه اینه که با جزئیات بیشتری خطا یا لاگ ترمینال رو (اون بخشی که داره اشاره می کنه به مشکل) گزارش کنید تا دقیق تر هم فکری کنیم.

  17. علی آرمان (خریدار محصول)

    سلام استاد وقت بخیر یک سوالی داشتم خدمتتون:
    من سایتی که می خواستم رو به صورت لوکال طراحی کردم و مشکلی با دیتا ها از سمت دیتابیس نداشتم
    سایت رو که دیپلوی کردم رو پارس وب سرور چون دیتا های پایکاه داده من فارسی هستن داخل پنل ادمین وقتی روشون کلیک می کنم این ارور میاد:
    Product_store with ID “%D9%82%D9%87%D9%88%D9%87%20%D8%B1%D9%88%D8%A8%D8%B3%D8%AA%D8%A7” doesn’t exist. Perhaps it was deleted?

    پایگاه داده هم mysql است و utf-8 و مقادیر داخل دیتابیس به درستی نشون داده میشن و کوئری های فارسی کلا جواب نمیدن چه کاری باید انجام بدم؟

    • مصطفی آصفی

      سلام وقت شما هم بخیر. سوالتون البته از آموزش نیست و نمی دونم چقدر درست متوجه منظورتون شدم. ولی احتمالا این پست (+) می تونه کمکتون کنه. برای بیان مدلتون از متد __unocode__ استفاده کنید.

  18. hamed Hod (خریدار محصول)

    سلام
    من یک اشکال داشتم تو این قسمت
    وقتی
    npm install react-bootstrap رو می زنم می گه باید npm audit force fix –force را اجرا کنید
    وقتی اجرا می کنم باز این دو باره پیام میاد در واقع روند خطا به این صورت است

    npm install react-bootstrap

    added 17 packages, and audited 1466 packages in 11s

    210 packages are looking for funding
    run `npm fund` for details

    6 high severity vulnerabilities

    To address all issues (including breaking changes), run:
    npm audit fix –force

    Run `npm audit` for details.
    که بعد از اجرا npm audit

    6 high severity vulnerabilities

    To address all issues (including breaking changes), run:
    npm audit fix –force
    بعد از npm auddit fix –force هم دوباره با این خطا رو به رو یم شویم
    ممنون اگر راهنمایی بفرمایید

    • مصطفی آصفی

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

  19. کامران اداوی (خریدار محصول)

    const{ id } = useParams();
    const product = products.find((p) => p._id == Number(id));
    باید از این کد در ورژن 6 استفاده شود

    • مصطفی آصفی

      سلام به شما آقای ادواری. خیلی ممنون از نکته خوبی که گذاشتین. بله حق با شماست تو نسخه جدید این دستور متفاوت شده.

      پی‌نوشت: دوستانی که از این دوره استفاده می‌کنن بایستی نسخه‌ها رو مطابق بنده پیش بیان. شیوه کار رو به صورت «روزآمدی درس ۱» به دوره پیوست کردم.

  20. کامران اداوی (خریدار محصول)

    سلام استاد من آموزش شمارو تهیه کردم قسمتی که روی هر محصول کلید میکنی تا جزئیات رو ببینی نشون نمیده من از این دستور استفاده میکنم مطابق آموزش شما
    const product=products.find((p) => p._id ===match.params.id) و اروری که در قسمت کنسول به بنده نشون میده این هست
    Uncaught TypeError: Cannot read properties of undefined (reading ‘params’) ممنون میشم راهنمایی کنید.

  21. am.kaz1381@hotmail.com

    سلام
    میخواستم ببینم برای قسمت محصولات کامنت گذاری. افزودن به علاقه مندی ها و اعمال کد تخفیف هم گذاشتید؟

    • مصطفی آصفی

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

  22. امین اجاقی

    سلام و درود خدا بر شما استاد عزیز و گرامی من دیدم در سایت تخفیف هست برای تولد حضرت عیسی مسیح (ع) این چهار فصل را خریداری نمودم تا هر وقت دوره ه ی ری اکت تمام شد آغاز نمایم ممنون از مهربانی شما و ستایش برای دوستیتان با خدا که به مناسبت های این چنینی دل ما را نیز شاد می سازید برکت خدای متعال بر شما عزیزان و عشق زندگیتان وخانواده ها و دوستان و آشنایانتان .

    • مصطفی آصفی

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

      پی نوشت: جز تخفیفی که به احترام سال نوی میلادی گذاشته شد یک تخفیف همیشگی ۳۰ درصد در سایت فعال کردیم برای دوستانی که بضاعت مالی ضعیفی دارن.

  23. امین اجاقی

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

    • مصطفی آصفی

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

  24. ابوالفضل حسن زاده (خریدار محصول)

  25. ابوالفضل حسن زاده (خریدار محصول)

    سلام به همه دوستانی مثل من در مسیر یادگیری این آموزش هستن . دوستان یه مطلبی که من خودم دنبالش بودم و پیدا کردم شاید شما هم بهش فکر کرده باشید.
    اونم استفاده از markdown هست. این پست خیلی ساده توضیح داده که چطور متن هایی که حاوی علائم markdown هستن رو رندر بکنه. امیدوارم که خوش تون بیاد و ازش استفاده کنید.

  26. محمدرضا گوشکی (خریدار محصول)

    ممنون از پشتیبانی عالی و سریع شما جناب آصفی

  27. محمدرضا گوشکی (خریدار محصول)

    سلام استاد عزیز خسته نباشید توی فصل یک درس یازده بخشی که BrowserRouter رو توی فایل app.js اضافه می کنیم و بعد توی فایل Header تگ LinkContainer رو اضافه می کنیم این پیغام رو میده TypeError: (0 , _reactRouterDom.withRouter) is not a function خیلی تحقیق کردم متاسفانه جوابی پیدا نکردم ممنون میشم راهنماییم کنید

    • مصطفی آصفی

      سلام به شما. سلامت باشید. احتمالا شما react-router سخه 6 رو نصب کردین. دقت کنید که تو نسخه ۶ از react-router متد withRouter حذف شده.
      برگردید به ورژن 5.
      downgrade کردن رو در React جستجو کنید.

      “react-router-dom”: “^5.2.0”
      بوت استرپ و ری اکت روتر تو مدت گذشته از انتشار بسته ارتقا پیدا کردن. لطفا فایل وابستگی های مخزن پروژه (+) رو کنار دستتون داشته باشین.

  28. رضا (خریدار محصول)

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

    در پایان خواستم به یک نکته ای اشاره کنم برای اون دسته از دوستانی که مشکل من رو داشتن
    در قسمت 10 و در زمان 9:47 وقتی قراره به ستاره ها رنگ زرد رو بدیم فرمت تعریفی شما style={{color}} برای من اعمال نشد و بعد از کمی تحقیق فهمیدم میشه به این شکل هم استفاده کرد و برای من جواب داد
    style={{color:color}}
    البته نمیدونم چرا برای من این مشکل به وجود اومد!شاید به خاطر استفاده از Webstorm به جای vscode یا تفاوت ورژن…

    https://www.jetbrains.com/webstorm/

    • مصطفی آصفی

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

  29. رضا (خریدار محصول)

    در مورد ایراد فنی اگه بخوام دقیق تر بگم هنگام لاگین شدن این خطا ظاهر میشه:
    https://media.askvg.com/articles/images8/Secure_Connection_Not_Available_HTTPS_Only_Mode_Mozilla_Firefox.png
    ممنون از توجه و پیگیری شما.

  30. رضا (خریدار محصول)

    درود بر شما
    خواستم ایرادی رو گزارش کنم در مورد سایت
    هنگام انتقال به سبد خرید با ارور http مواجه شدم که البته من تنظیمات فایرفاکس رو در قسمت HTTPS-Only Mode به روی
    Enable HTTPS-Only Mode in all windows قرار دادم تا صفحات http برای من لود نشه.
    که البته موافقت کردم به صورت http ادامه بده تا به سبد خرید منتقل بشم.

    • روابط عمومی هم رویش

      با سلام. همراه گرامی از گزارش شما ممنونیم. به بخش فنی منتقل شد تا بررسی نمایند

  31. ابوالفضل حسن زاده (خریدار محصول)

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

    • مصطفی آصفی

      سلام و سپاس از شما آقای حسن زاده عزیز. ممنونم از این که برای ارسال بازخورد و انرژی خودتون وقت گذاشتین. امیدوارم عمری باشه و کار رو به سرانجام برسونیم.

  32. رضا

    درود بر شما آقای آصفی

    چه آموزش خوب و کاربردی.

    دو پیشنهاد دارم که در نظر گرفتنشون در فصل دوم یا فصل های دیگه میتونه خیلی پروژه ی شما رو پر بار تر کنه
    اول: استفاده از ابزار postman برای تست API هستش
    دوم: نوشتن تست برای متد ها و کلاس ها و API ها و..
    به نظرم این دو مورد خیلی حیاتی و مهم هستش و در اکثر پروژه ها مورد استفاده قرار میگیره
    مخصوصا نوشتن تست با استفاده از کتابخونه ی unittest یا pytest و البته اونطور که من شنیدم pytest خیلی قویتر و راحت تر هستش.

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

    • مصطفی آصفی

      سلام. ممنون از محبت و پیام دلگرم کننده شما. در مورد پیشنهاد اولتون باید بگم برنامه بنده هم استفاده از postman هست. در مورد دوم چون خود امکانات پایه فروشگاه که قصد داریم پیاده بکنیم خیلی زیاد هستن شاید به این مجموعه نرسه (تا این لحظه دوره احتمالا ۱۵ فصل خواهد بود) ولی به هر حال چون موضوع مهمی هست یادداشت کردم. ممنون از پیشنهادهای خوب شما.

  33. رضا

    قسمت لاگین رو با شماره موبایل میگید ؟
    بجای ایمیل شماره موبایل وارد کنه

    • مصطفی آصفی

      سلام به شما. بله بعد از پیاده سازی عملکردهای اصلی روی نسخه انگلیسی می ریم سراغ فارسی سازی و ثبت نام با شماره همراه و درگاه پرداخت داخلی و مواردی که برای پروژه های واقعی داخل کشور لازم هستن. قصد دارم یه پروژه واقعی بشه که بچه ها بتونن برای ورود به بازار کار و پروژه زدن استفاده کنن.

  34. ایمان

    سلام نمیشه استاد همین رو با فلاتر 2 ( فرانت ) و جنگو ( بک اند) کار میکردید؟
    این 38000 تومان مال کل دوره هست ؟

    • مصطفی آصفی

      سلام به شما. فلاتر با پیشینه بدی که گوگل در مورد پشتیبانی اندروید نشون داده برای من گزینه پایداری نیست. هنوز بالغ نیست و چه بسا گوگل تغییرات زیادی رو بده. اما ری اکت از نظر بنده (شایدم درست نباشه) گزینه پایدارتریه.
      هزینه متعلق به فصل اول هست و تو این لحظه که بنده این متن رو می نویسم در حال پیش تولید فصل دوم (شروع سرور با جنگو رست) هستم که امیدوارم ظرف دو هفته آینده منتشر بشه. این پروژه بزرگه و شاید تا ۱۰ فصل پیش بریم تا کامل و قابل استفاده واقعی بشه و بتونید از روش برای کارفرماهای واقعی فروشگاه درست کنید. کم کم انشالله کامل می کنم.

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

دیدگاه خود را بنویسید