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

معرفی دوره

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بالاخره با بروزرسانی دوره ReactJS + Wordpress در خدمت شما هستیم.در این قسمت قرار هست توضیحات بروزرسانی و پروژه آن داده می شود.

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

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

در این قسمت کار با React Router ورژن 6 رو یاد می گیریم و حالت های مختلف در این پکیج رو باهم بررسی می کنیم.

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

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

در این قسمت وارد کار با API وردپرس میشویم و API مربوط به احراز هویت را پیاده سازی می کنیم.

در این قسمت سعی می کنیم که بحث چک کردن احراز هویت و مقادیر مربوط به کاربر رو پیاده سازی کنیم و روی صفحه احراز هویت کار می کنیم.

در این قسمت سعی می کنیم که افزونه ها و API های مربوط به ثبت نام را پیدا کنیم و با postman تست کنیم.

در این قسمت ثبت نام را هم پیاده سازی می کنیم و سری قسمت های احراز هویت بالاخره به پایان میرسه :)

در این قسمت شروع به کار با ووکامرس می کنیم و روش های ارتباط با ووکامرس را مطرح می کنیم.

در این قسمت سعی می کنیم تا در راستای ارتباط گیری با استفاده از بک اند ثالث باهمدیگه کمی با Express JS آشنا بشیم و بتونیم ازش استفاده کنیم.

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