مدت :

۳ ساعت

قیمت : ۵۷,۰۰۰ تومان
LinkedIn
Twitter
Facebook
Telegram

درباره مدرس 

اطلاعات دوره

توضیحات

react چیست ؟ این بسته آموزشی شامل آموزش پروژه محور react در 3 ساعت می باشد. این آموزش React در عین مستقل بودن، پیشنیاز آموزش ساخت فروشگاه با ری اکت و جنگو (+) است. فروشگاه ساخته شده در این آموزش React یک فروشگاه ساده با API فرضی است (برای یادگیری ساخت API این آموزش جنگو رست (+) را ببینید). از آنجایی که موضوع آموزش ری اکت بوده است، طبیعتا بک اند، دیتابیس و درگاه پرداخت در مورد این پروژه پیاده سازی نشده است.

آیا در آموزش ری اکت به عنوان یک فریمورک وب تردید دارید؟ نمی‌دانید چه فریمورکی را برای فرانت اند انتخاب کنید؟ خیلی تفاوتی نمی‌کند و بیشتر به تلاش و حس راحتی شما برمی‌گردد. البته بد نیست بدانید که ری اکت در پیمایش Stack Overflow در سال 2021 (+) به عنوان محبوب‌ترین فریمورک وب برنامه نویسان ثبت شده است.

این دوره آموزشی با هدف آموزش سریع فریمورک React از نقطه صفر می باشد. در این دوره سعی شده است که مفاهیم مهم React بطور کامل با استفاده از مینی پروژه هایی که در دوره تدریس می شود، آموزش داده شود.

این آموزش react یک آموزش معمولی نیست. شما در اینجا با یک آموزش سریع ری اکت جی اس و البته پروژه محور در یک زمان کوتاه سروکار دارید. همینطور سریع وارد موضوع خواهیم شد. پیش از این در هم رویش ساخت یک شبکه اجتماعی با جنگو (+) منتشر شد. پس از انتشار آموزش فراگیران بسیاری درخواست توسعه ی وبسایت های مبتنی بر API با جنگو را داشتند. این آموزش ری اکت به نوعی مقدمه ای به این چنین آموزش هایی است.

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

 

React چیست ؟

React یک کتابخانه متن باز بر اساس جاوا اسکریپت که در سال 2013 توسط تیم توسعه فیسبوک برای اولین بار منتشر شد و امروزه هم در بین برنامه نویسان و طراحان وب از جایگاه ویژه ای برخوردار هست

 

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

در این دوره ابتدا با مفاهیم اصلی و اساسی react آشنا می شویم؛ بعد از آشنایی با هر یک از مفاهیم مانند هوک و … یک تمرین یا مینی پروژه در انتهای بخش پیاده سازی می کنیم. در پایان بخش نظری، با استفاده از مطالبی که یاد گرفتیم یک فروشگاه اینترنتی خیلی ساده را پیاده می‌کنیم. طبیعتا ساخت فروشگاه با ری اکت بک اند و درگاه پرداخت نخواهیم داشت و از یک API فرضی استفاده می‌کنیم.

 

پیشنیاز

 

این آموزش react بی نظیر است زیرا:
  • React یکی از محبوبترین فریمورک های طراحی وب در جهان می‌باشد.
  • بازار کار بسیار عالی در داخل و خارج از ایران دارد
  • احتیاج به یاد گرفتن زبان جدید ندارید و می‌توانید با دانش جاوا اسکریپت خود پروژه های ری اکت را به راحتی پیاده کنید.

 

در راستای این آموزش مطالب مقاله زیر در مجله هم رویش به شما پیشنهاد می شود:

ری اکت چیست ؟ ____ مقدمه ای بر تعریف react برای مبتدیان

Vue یا React ___ کدام فریمورک را در چه زمانی انتخاب می کنید؟

 

کلید واژگان

آموزش پروژه محور react – فیلم آموزش react – دوره ری اکت – آموزش ری اکت پروژه محور – ساخت فروشگاه با react – آموزش reactjs

سر فصل ها

سر فصل ها

درس صفر: معرفی دوره
  • معرفی React
  • بررسی پیش نیاز ها و سرفصل های دوره

 

درس اول: راه اندازی اولین پروژه
  • نصب npm
  • نصب vsCode
  • نصب گیت
  • راه اندازی اولین پروژه

 

درس دوم: آشنایی با ساختار React و JSX
  • آشنایی با پوشه های ایجاد شده بعد از نصب React
  • آشنایی با مفهوم JSX
  • پیاده سازی اولین برنامه با React

 

درس سوم: کامپوننت ها در React
  • معرفی کامپوننت های کلاس و تابع در react

 

درس چهارم: props ها – استفاده از css و boot strap
  • معرفی props ها
  • نحوه استفاد از css و بوت استرپ در React و استایل دهی به صفحه

 

درس پنجم :State ها در React js
  • معرفی State ها و کاربرد آن در React js
  • مینی پروژه شمارنده

 

 

درس ششم :Hooks
  • معرفی مفهوم Hook در ری اکت و نحوه استفاده از آن
  • ساخت مینی پروژه شمارنده و بررسی تغییرات هوک

 

درس هفتم(قسمت1) : نصب پکیج ها با استفاده از NPM – AXIOS
  • آشنایی با Rest api
  • معرفی وبسایت npm
  • نصب پکیج axios
  • معرفی وبسایت jsonplaceholder
  • مینی پروژه دریافت اطلاعات از وبسایت jsonplaceholder

 

درس هفتم (قسمت 2) : نصب پکیج ها با استفاده از npm : material ui
  • معرفی پکیج Material ui

 

درس هفتم (قسمت 3): مسیر یابی در React
  • بررسی نحوه مسیریابی در react با استفاده از کتابخانه react-router
  • مینی پروژه ساخت Navbar

 

درس هشتم: پروژه
  • پیاده سازی وبسایت فروشگاهی
نظرات (10)

10 دیدگاه برای آموزش React ___ شروع سریع و پروژه محور ری اکت با ساخت فروشگاه ساده

  1. Abolfazl Hassan Zade (خریدار محصول)

    سلام استاد وقت شما بخیر. استاد متغیر محیطی DANGEROUSLY_DISABLE_HOST_CHECK=true در ری اکت دقیقا چه چیزی رو تنظیم میکنه با تشکر .

  2. معصومه

    با سلام با یادگیری این آموزش میتونیم اپ موبایل هم طراحی کنیم؟

    • مصطفی آصفی

      سلام به شما. خیر تو این بسته موضوع صرفا روی شروع سریع کار با ری اکت وب هست.

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

    سلام خسته نباشید در جلسه هشتم پروژه قرار بود پیاده سازی بشه ایا شده؟

    • مصطفی آصفی

      سلام به شما. بله البته دقت کنید پروژه فروشگاهی ساده با فرانت اند ری اکتی هست. برای پروژه فروشگاهی کامل با ری آکت و بک اند جنگو پایتون این مجموعه (+) رو دنبال کنید.

  4. روح اله دهقانی

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

    • علیرضا صادقی

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

  5. وحید ییلاق بیگی (خریدار محصول)

    سلام مجدد اساتید گرامی
    من CMD رو در حالت ادمین اجرا کردم و باز دن کد این بار با این ارور مواجه شدم
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Vahid Beigi\AppData\Roaming\npm-cache\_logs\2021-08-27T06_45_10_722Z-debug.log
    Install for [ ‘create-react-app@latest’ ] failed with code 1

    • علیرضا صادقی

      سلام و عرض ادب مجدد این دستورات را بترتیب وارد نمایید:

      npm init

      npm install create-react-app

      npx create-react-app myapp

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

    سلام مجدد اساتید بزرگوار من مسیر های پیشنهادی رو رفتم ولی باز هم نتیجه نگرفتم. این متن کاملتر خطا
    Error: EPERM: operation not permitted, mkdir ‘C:\Users\Vahid’
    command not found: create-react-app

  7. وحید ییلاق بیگی (خریدار محصول)

    سلام استاد بزرگوار من با ارور زیر مواجه زمانی که همون اول میخواستم که پروژه رو بسازم
    Error: EPERM: operation not permitted

    • مصطفی آصفی

      سلام به شما آقای ییلاق بیگی. چون بخش دیگه ای از خطا رو نمی بینم ممکنه علت های مختلفی داشته باشه. به همین خاطر توصیه می کنم با توجه به ماهیت خطای دریافتی گوگل کنید و مواردی مثل این لینک (+) رو ببینید.
      برای نمونه در این لینکی که بالا گذاشتم حذف npm و npm-catch از مسیر AppData\Roaming کاربر فعلی راهکار مناسبی بوده. ممکنم هست صرفا به دلیل تغییر بین cmd و powershell ویندوز باشه که در این صورت عوض کردن ترمینال از یکی به دیگری می تونه مشکل رو حل کنه.

    • علیرضا صادقی

      سلام و عرض ادب – احتمالا در ویندوز های نسخه 32 بیتی وقتی از powershell استفاده میکنید این مشکل پیش می آید – راهکار : 1.از یک نسخه قدیمی تر npm استفاده نمایید 2. از cmd با دسترسی administrator استفاده کنید اگر موارد بالا جواب نداد با استفاده از دستور زیر کش npm را پاک کنید : npm cache clean و دوباره تست کنید اگر باز هم جواب نگرفتید وارد مسیر پوشه node خود بشوید lib/utils/lifecycle.js سپس قطعه کد زیر را به ابتدای فایل اضافه نمایید :
      var shFlag = "-c" if (process.platform === "win32") { - sh = "cmd" + sh = process.env.comspec || "cmd" shFlag = "/c" conf.windowsVerbatimArguments = true }

  8. masoodMEH

    درود بر شما
    خسته نباشید
    امکانش هست یک وبسایت فروشگاهی تقریبا کامل رو با dhango,next.js آموزش بدید؟
    با امکانات سبد خرید،درگاه پرداخت،پنل مدیریت

    • مصطفی آصفی

      سلام به شما. در این دوره آموزش ساخت فروشگاه با جنگو و ری اکت (+) این موارد رو فصل به فصل کار می‌کنیم. بعد از پایان این دوره شما اگه کامل کار رو درک و خودتون هم پیاده کرده باشین خیلی سخت نیست که به عنوان ابزار فرانت اند بیاید کار رو با next یا حتی vue جایگزین کنید.

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

    • علیرضا صادقی

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

  9. علی

    با سلام من قصد داشتم این آموزش را خریداری کنم اما متوجه نشدم که آیا این دوره آموزش مقدماتی react هست؟ مباحث پیشرفته react در این دوره موجود هست یا صرفا آموزش پایه ای میباشد؟ با تشکر

    • علیرضا صادقی

      سلام در این دوره سعی شده است بخشی از مباحث پیشرفته نیز آموزش داده شود – اما بطور کلی دوره پیشرفته react js نمیباشد و مباحث react در سطح مقدماتی و متوسط در راستای پیاده سازی پروژه فروشگاهی آموزش داده میشود.

  10. سارا

    سلام استاد گرامی آیا تو این دوره در مورد react native هم آموزش داده میشود؟

    • علیرضا صادقی

      سلام وقتتون بخیر – خیر فقط مباحث مربوط به react js در این دوره بررسی میشود .

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

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

10 دیدگاه برای آموزش React ___ شروع سریع و پروژه محور ری اکت با ساخت فروشگاه ساده

  1. Abolfazl Hassan Zade (خریدار محصول)

    سلام استاد وقت شما بخیر. استاد متغیر محیطی DANGEROUSLY_DISABLE_HOST_CHECK=true در ری اکت دقیقا چه چیزی رو تنظیم میکنه با تشکر .

  2. معصومه

    با سلام با یادگیری این آموزش میتونیم اپ موبایل هم طراحی کنیم؟

    • مصطفی آصفی

      سلام به شما. خیر تو این بسته موضوع صرفا روی شروع سریع کار با ری اکت وب هست.

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

    سلام خسته نباشید در جلسه هشتم پروژه قرار بود پیاده سازی بشه ایا شده؟

    • مصطفی آصفی

      سلام به شما. بله البته دقت کنید پروژه فروشگاهی ساده با فرانت اند ری اکتی هست. برای پروژه فروشگاهی کامل با ری آکت و بک اند جنگو پایتون این مجموعه (+) رو دنبال کنید.

  4. روح اله دهقانی

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

    • علیرضا صادقی

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

  5. وحید ییلاق بیگی (خریدار محصول)

    سلام مجدد اساتید گرامی
    من CMD رو در حالت ادمین اجرا کردم و باز دن کد این بار با این ارور مواجه شدم
    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Vahid Beigi\AppData\Roaming\npm-cache\_logs\2021-08-27T06_45_10_722Z-debug.log
    Install for [ ‘create-react-app@latest’ ] failed with code 1

    • علیرضا صادقی

      سلام و عرض ادب مجدد این دستورات را بترتیب وارد نمایید:

      npm init

      npm install create-react-app

      npx create-react-app myapp

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

    سلام مجدد اساتید بزرگوار من مسیر های پیشنهادی رو رفتم ولی باز هم نتیجه نگرفتم. این متن کاملتر خطا
    Error: EPERM: operation not permitted, mkdir ‘C:\Users\Vahid’
    command not found: create-react-app

  7. وحید ییلاق بیگی (خریدار محصول)

    سلام استاد بزرگوار من با ارور زیر مواجه زمانی که همون اول میخواستم که پروژه رو بسازم
    Error: EPERM: operation not permitted

    • مصطفی آصفی

      سلام به شما آقای ییلاق بیگی. چون بخش دیگه ای از خطا رو نمی بینم ممکنه علت های مختلفی داشته باشه. به همین خاطر توصیه می کنم با توجه به ماهیت خطای دریافتی گوگل کنید و مواردی مثل این لینک (+) رو ببینید.
      برای نمونه در این لینکی که بالا گذاشتم حذف npm و npm-catch از مسیر AppData\Roaming کاربر فعلی راهکار مناسبی بوده. ممکنم هست صرفا به دلیل تغییر بین cmd و powershell ویندوز باشه که در این صورت عوض کردن ترمینال از یکی به دیگری می تونه مشکل رو حل کنه.

    • علیرضا صادقی

      سلام و عرض ادب – احتمالا در ویندوز های نسخه 32 بیتی وقتی از powershell استفاده میکنید این مشکل پیش می آید – راهکار : 1.از یک نسخه قدیمی تر npm استفاده نمایید 2. از cmd با دسترسی administrator استفاده کنید اگر موارد بالا جواب نداد با استفاده از دستور زیر کش npm را پاک کنید : npm cache clean و دوباره تست کنید اگر باز هم جواب نگرفتید وارد مسیر پوشه node خود بشوید lib/utils/lifecycle.js سپس قطعه کد زیر را به ابتدای فایل اضافه نمایید :
      var shFlag = "-c" if (process.platform === "win32") { - sh = "cmd" + sh = process.env.comspec || "cmd" shFlag = "/c" conf.windowsVerbatimArguments = true }

  8. masoodMEH

    درود بر شما
    خسته نباشید
    امکانش هست یک وبسایت فروشگاهی تقریبا کامل رو با dhango,next.js آموزش بدید؟
    با امکانات سبد خرید،درگاه پرداخت،پنل مدیریت

    • مصطفی آصفی

      سلام به شما. در این دوره آموزش ساخت فروشگاه با جنگو و ری اکت (+) این موارد رو فصل به فصل کار می‌کنیم. بعد از پایان این دوره شما اگه کامل کار رو درک و خودتون هم پیاده کرده باشین خیلی سخت نیست که به عنوان ابزار فرانت اند بیاید کار رو با next یا حتی vue جایگزین کنید.

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

    • علیرضا صادقی

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

  9. علی

    با سلام من قصد داشتم این آموزش را خریداری کنم اما متوجه نشدم که آیا این دوره آموزش مقدماتی react هست؟ مباحث پیشرفته react در این دوره موجود هست یا صرفا آموزش پایه ای میباشد؟ با تشکر

    • علیرضا صادقی

      سلام در این دوره سعی شده است بخشی از مباحث پیشرفته نیز آموزش داده شود – اما بطور کلی دوره پیشرفته react js نمیباشد و مباحث react در سطح مقدماتی و متوسط در راستای پیاده سازی پروژه فروشگاهی آموزش داده میشود.

  10. سارا

    سلام استاد گرامی آیا تو این دوره در مورد react native هم آموزش داده میشود؟

    • علیرضا صادقی

      سلام وقتتون بخیر – خیر فقط مباحث مربوط به react js در این دوره بررسی میشود .

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