قیمت این دوره : 199,000 99,500 تومان
  • مدرس دوره : سید مهدی صادق زاده ( رزومه )
  • تعداد دانشجویان این دوره : 34 نفر
  • تعداد ویدیوها : 48 ویدیو
  • مدت زمان دوره : 18:50:00
  • سطح دوره : متوسط
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1399/07/09
ثبتـــ نام در این دوره
آموزش  ReactJS+Wordpress (پروژه محور)

آموزش ReactJS+Wordpress (پروژه محور)

سلام به شما دوستان عزیز ؛

بیاید از اوّل شروع کنیم . عنوان دوره چی بود ؟  React JS + Wordpress  ! حدس می زنم یک مقداری سردرگم شدید . بالاخره React یا wordpress ؟ باید بهتون بگم هردو !

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

بنظرتون خیلی جذابه؟! بنظر من هم خیلی جذاب هست . مخصوصا اگر فقط فرانت اند کار کرده باشین ، همیشه مشکل دیتابیس و بک اند رو داشتین ! یا مجبور بودین از یکسری کدهای آماده که نمی تونید تغییرش بدین استفاده کنید که اصلا چیزی ازش نمی فهمین یا بیاید از یک نفر درخواست کنید که براتون کدهایی که می خواهید رو بنویسه که این هم دوباره قابلیت تغییر و فهم رو از شما میگیره یا اینکه...

بیاید سراغ یک بک اند و دیتابیس آماده و فوق العاده قوی و محبوب و کارآمد بنام Wordpress

خیلی بعید هست که شما تاحالا اسم این CMS محبوب رو نشنیده باشید. چون از نوجوون 8،9 ساله تا یک مرد 50 ساله دیدم که باهاش کار کرده !

این یعنی اینکه این مدیریت کننده محتوا بشدت محبوب و راحت هست.(گرچه یکسری نکات حرفه ای و... رو هرکسی ازش بلد نیست !) از طرفی چون منبع باز (open source) هست ؛ بنابراین روز به روز هم درحال پیشرفت هست.

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

سرفصل های دوره (به صورت کلی) :

نصب پروژه ری اکت و بررسی ساختار آن

نصب پکیج ها و پیشنیاز ها مانند (axios , redux , reactstrap , …)

مرور بعضی از نکات و دستورات در ری اکت

ساخت layout کلی پروژه

ساخت صفحات و آدرس دهی داینامیک با استفاده از react-router-dom

نصب سایت وردپرسی مون

اتصال سایت وردپرسی مون به سایت ری اکت مون

دریافت اطلاعات به صورت endpoint

ساخت صفحه اختصاصی برای هر پست

ساخت صفحه Login

برقرار کردن Authentication با استفاده از JWT

ساخت صفحه داشبورد برای ادمین ها و نویسندگان

قابلیت ساخت متن جدید در صفحه داشبورد

قابلیت ساخت کاربر جدید در صفحه داشبورد

ساخت ویجت کارت برای نمایش آمار سایت

و ...

بنظرم بیشتر از این نباید وقت رو تلف کنید و بریم سراغ آموزش.

فقط دوتا نکته :

·       این دوره مکمل دوره مقدماتی next js هم هست (گرچه تو این دوره درباره next js  صحبتی نمیشه !) و قرار هست که بعد از این دوره براتون دوره پیشرفته next js رو با کمک همین دوره و دوره مقدماتی بزارم ! پس اگر ری اکت بلدین که حتما باید بلد باشین (لااقل باهاش راحت باشین) بهتون توصیه می کنم دوره رایگان Next js بنده رو هم درکنار این دوره از دست ندید ، چون این یک مسیر برای دوره پیشرفته Next js هم هست!

·  پیشنیاز این دوره فقط و فقط آشنایی کلی با wordpress و همین طور حداقل دانسته هایی از React JS هست. ببنیید ما قرار نیست که بیایم و باهم از صفر یادبگیریم پس باید حداقل هایی مثل ES6 و مقدمات React JS رو بلد باشین! گرچه ما توی این دوره باهم یکسری از مقدمات React JS رو میایم و مرور می کنیم ولی با این حال یک مقدماتی رو بلد باشین که لازم هست !

در ضمن یک خبر ویژه برای دوستانی که این دوره می خواهند خریداری کنند؛در صورتی که می خواهید از تخفیف 60% استفاده کنید فقط همین چندروز رو مهلت دارید و بعد از اون تخفیف دوره کاهش پیدا می کنه ! پس دست بجنبونید که این تخفیف رو از دست ندین !

من که دیگه بی صبرانه منتظر نظرات و رای مثبت شما عزیزان هستم !

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

فهرستـــ ویدیوها

مدت زمان دوره 18:50:06
در صورتیکه ویدئو نمایش داده نشد آن را دانلود کنید و با KmPlayer مشاهده کنید.
راهنما ! جهت دریافت لینک دانلود تمامی قسمت ها بر روی این لینک .کلیک کنید.
لطفا در در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.
1
  • معرفی دوره

  • 00:08:00
  • رایگانــ

معرفی دوره

2
  • راه اندازی وردپرس و سرور لوکال

  • 00:14:00
  • رایگانــ

قراره که توی این قسمت بیایم باهم xampp رو به عنوان سرور لوکال مون و همین طور wordpress رو روی این سرور لوکال راه اندازی کنیم.

3
  • نصب ملزومات پروژه React مون

  • 00:08:30
  • رایگانــ

توی این قسمت میایم پروژه React مون رو راه اندازی می کنیم و پکیج هایی چون Redux , axios , react-render-html , ... را نصب می کنیم.

4
  • ساختاری زیبا با کمک ant design

  • 00:36:30
  • رایگانــ

توی این قسمت میام و باهم Layout کلی پروژه رو با استفاده از antd پیاده سازی می کنیم.(این قسمت شامل سورس پروژه است.)

5
  • نخستین ارتباطات ReactJS و Wordpress

  • 00:20:30
  • نقدیــ

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

6
  • استایل دهی به شیرینی reactstrap

  • 00:30:00
  • نقدیــ

توی این قسمت قرار هست که بیایم و به Card , CardImg و همینطور پست هامون با استفاده از antd , reactstrap استایل دهی کنیم. (تمامی قسمت ها شامل سورس پروژه است!)

7
  • آدرس دهی داینامیک (سری قسمت های منطقی)

  • 00:28:30
  • رایگانــ

بالاخره به اولین قسمت از قسمت های منطقی مون رسیدیم! این قسمت رو با حواس جمع ببینید که منطق اش رو اگه بفهمین در نقاط مختلفی براتون کارساز میشه.توی این قسمت از react-router-dom استفاده می کنیم.(تمامی قسمت ها شامل سورس پروژه است.)

8
  • ساخت صفحه Login و آمادگی برای Authentication

  • 00:35:15
  • نقدیــ

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

9
  • ریداکس وارد می شود !(البته فعلا برای lazy loading)

  • 00:30:25
  • نقدیــ

بالاخره توی این قسمت میایم و باهم دیگه ریداکس رو توی پروژه مون استفاده می کنیم. این جلسه برای ساخت lazy loading هست و در جلسات آینده برای مباحث و متود های Authentication استفاده می کنیم.

10
  • ورود غریبه ها ممنوع ! (قسمت اول Authentication)

  • 00:24:27
  • نقدیــ

توی این جلسه وارد اولین قسمت از سری قسمت های Authentication میشیم. توی این قسمت پلاگین های مربوطه را نصب و راه اندازی و token را دریافت می کنیم. این قسمت رو به هیچ عنوان از دست ندید! (به علاوه سورس پروژه فایل zip پلاگین ها نیز بارگذاری شده است.)

11
  • ورود غریبه ها ممنوع ! (قسمت دوم Authentication)

  • 00:42:00
  • نقدیــ

توی این جلسه میایم و اعتبارسنجی فرم ورود مون رو درست می کنیم و البته با Redux و LocalStorage هم کار خواهیم کرد.

12
  • ریداکس وارد می شود ! (ایندفعه برای قسمت Authentication)

  • 00:25:00
  • نقدیــ

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

13
  • ریداکس وارد می شود ! (این بار برای Logout و داشبورد)

  • 00:23:39
  • نقدیــ

خب در ادامه جلسه قبل این جلسه میایم و باهمدیگه برای آواتار ادمین ها یک منوی dropdown قرار میدیم و لینک خروج رو هم برای logout ادمین هامون قرار میدیم.

14
  • پنل داشبورد رمزآلود و عجیب من (قسمت اول)

  • 00:31:30
  • نقدیــ

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

15
  • پنل داشبورد رمزآلود و عجیب من (سری قسمت های منطقی)

  • 00:57:00
  • نقدیــ

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

16
  • ساخت اولین پست از داخل داشبورد(سری جلسه های لذت بخش)

  • 00:23:00
  • نقدیــ

توی این جلسه میایم و از داخل داشبورد سایت ReactJS مون اولین پست رو میسازیم و در سایت Wordpress مون هم ثبت می کنیم.

17
  • ساخت کاربر از داخل داشبورد (سری قسمت های لذت بخش)

  • 00:24:54
  • نقدیــ

تا ذهنتون آماده است برای ساخت پست ، میایم و با همدیگه ساخت انواع کاربر از داشبورد ReactJS مون و اضافه کردن اون به Wordpress رو میبینیم.

18
  • ساخت لیست کاربران (ساخت جدول و UI کار)

  • 00:28:00
  • نقدیــ

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

19
  • ساخت قابلیت حذف کاربر (سری قسمت های منطقی)

  • 00:24:40
  • نقدیــ

این جلسه رو به هیچ عنوان از دست ندین ! در کنار اضافه کردن قابلیت حذف کاربران میایم و منطق حذف رو در جاوااسکریپت هم بررسی می کنیم.(جلسه خیلی خیلی مهم ! )

20
  • ساخت قابلیت تغییر مشخصات کاربر(سری قسمت های لذت بخش)

  • 00:37:09
  • نقدیــ

تویاین بخش میایم با هم قابلیت تغییر مشخصات کامل کاربر رو یاد می گیریم! این جلسه از اون جلسه های اعجاب انگیزه (~:

21
  • هشدار دهی به سبک react-toastify

  • 00:41:31
  • نقدیــ

توی این قسمت با همدیگه میایم و react-toastify رو برای صفحات لاگین ، ساخت پست و ... پیاده سازی می کنیم.

22
  • لیست با قابلیت پست ها (قسمت اول)

  • 00:28:24
  • نقدیــ

بالاخره وارد قسمت های ساخت لیست پست هامون شدیم. قراره قابلیت حذف و تغییر و مشاهده رو توی لیست مون داشته باشیم ! این سری قسمت هارو از دست ندین. (استثناء این قسمت شامل سورس نیست!)

23
  • لیست با قابلیت پست ها (قسمت دوم)

  • 00:28:34
  • نقدیــ

توی این قسمت میایم و در ادامه ساخت لیست مون دکمه های دیگرمون هم پیاده سازی می کنیم.

24
  • برای نظرات کاربران اهمیت قائل شویم ! (قسمت اول)

  • 00:30:29
  • نقدیــ

خب قراره که باهمدیگه بیایم و قابلیت فرستادن کامنت رو برای هر پست پیاده سازی کنیم. (این قسمت شامل سورس پروژه است.)

25
  • برای نظرات کاربران اهمیت قائل شویم ! (سری قسمت های منطقی)

  • 00:27:30
  • نقدیــ

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

26
  • برای نظرات کاربران اهمیت قائل شویم ! (قسمت سوم)

  • 00:28:17
  • نقدیــ

بالاخره توی این قسمت میایم و قسمت نظرات رو به سر انجام میرسونیم. بهش یکم ظاهر میدیم و react-toastify رو هم براش پیاده سازی می کنیم.

27
  • ساخت صفحه لیست پست ها (قسمت اول)

  • 00:24:06
  • نقدیــ

توی این قسمت میایم و با استفاده از antd یک جدول برای صفحه لیست پست ها مون قرار میدیم ، قرار هست که اتفاقات باحالی رو با این جدول رقم بزنیم !

28
  • ساخت صفحه لیست پست ها (قسمت دوم)

  • 00:18:08
  • نقدیــ

توی این قسمت میایم و با همدیگه کتابخونه moment.js رو برای مدیریت زمان ساخت پست هامون راه میندازیم. به علاوه اینکه صفحه کاربران سایت رو هم راه اندازی می کنیم.

29
  • نویسندگان سایت را بهتر بشناسیم ! (قسمت اول)

  • 00:21:15
  • نقدیــ

خب میرسیم به ساخت صفحه کاربران که هم یه کوچولو ظاهر میدیم و در واقع دریافت اطلاعات رو خواهیم داشت.

30
  • نویسندگان سایت را بهتر بشناسیم ! (سری قسمت های منطقی)

  • 00:19:51
  • نقدیــ

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

31
  • کمی هم از تاپ لرن یاد بگیریم ! (پیاده سازی صفحه کاربران)

  • 00:22:34
  • نقدیــ

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

32
  • ریداکس وارد می شود ! (این بار برای کنترل و دریافت تگ ها )

  • 00:16:18
  • نقدیــ

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

33
  • قرار دادن تگ ها در جدول و صفحه اصلی (سری قسمت های منطقی)

  • 00:22:16
  • نقدیــ

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

34
  • اصل 1 : تگ های خود را کنترل کنید !

  • 00:26:32
  • نقدیــ

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

35
  • اصل 2 : تگ های خود را اضافه کنید !

  • 00:22:47
  • نقدیــ

توی این قسمت میایم هم react-toastify رو برای لیست تگ هامون پیاده سازی می کنیم و هم امکان قرار دادن تگ ها را در زمان ساخت پست قرار میدهیم !

36
  • اصل 3 : تگ های خود را بسازید !

  • 00:15:31
  • نقدیــ

توی این قسمت میایم و با همدیگه امکان ساخت تگ رو هم به پروژه اضافه می کنیم.

37
  • با نویسندگان مختلف بنویسیم ؟!

  • 00:20:37
  • نقدیــ

در این قسمت میایم و امکان انتخاب و تغییر نویسنده مطلب رو در ساخت پست و تغییرات پست قرار میدیم.

38
  • پنل داشبورد رمزآلود و عجیب من (تغییر ویجت کارت ها)

  • 00:17:58
  • نقدیــ

بالاخره بعد از مدت ها (: میایم و ویجت کارت های داشبورد مون رو توش تغییراتی انجام میدیم.

39
  • مشکلات را منهدم کنیم !

  • 00:11:58
  • نقدیــ

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

40
  • مسیر های طی شده را بشناسیم

  • 00:18:16
  • نقدیــ

توی این قسمت میایم و active page ها رو روی navbar پیاده سازی می کنیم به علاوه اینکه میایم و Bread Crumb هامون هم درست می کنیم.

41
  • کار با دسته بندی ها (categories) در پروژه (قسمت اول)

  • 00:14:59
  • نقدیــ

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

42
  • کار با دسته بندی ها (categories) در پروژه (قسمت دوم)

  • 00:16:49
  • نقدیــ

توی این قسمت میایم و با استفاده از Radio Group ها در antd ابتدایی ترین بخش انتخاب رو به صورت داینامیک برای دسته بندی هامون قرار میدیم.

43
  • کار با دسته بندی ها (categories) در پروژه (سری قسمت های منطقی)

  • 00:17:38
  • نقدیــ

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

44
  • کار با دسته بندی ها (categories) در پروژه (قسمت چهارم)

  • 00:23:11
  • نقدیــ

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

45
  • صبر در حد loader ...

  • 00:19:38
  • نقدیــ

در این قسمت میایم و برای تمامی صفحات سمت کاربر مون loader رو با استفاده از ریداکس پیاده سازیش می کنیم.

46
  • کمی تمیزکاری بد نیست |:

  • 00:05:32
  • نقدیــ

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

47
  • سورس نهایی پروژه

  • 00:00:00
  • نقدیــ

این هم از سورس نهایی ؛ گرچه در کنار ویدیو جلسه قبل هم همین فایل موجود هست.

48
  • خداحافظی با بیان مشکلات و هدف و ... از دوره

  • 00:16:28
  • رایگانــ

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

نظرات کاربران در رابطه با این دوره

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .