آموزش پیشرفته React: پروژه پنل ادمین

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

  • امتیاز 4 از 5
  • 19 دیدگاه
  • 1302 شرکت کننده
  • تاریخ بروزرسانی: 1402/06/25
سرفصل دوره
معرفی پروژه

1 دقیقه


آماده سازی پروژه

3 دقیقه


طراحی کامپوننت های ثبت نام و ورود به پنل

11 دقیقه


افزودن Router و تعریف Layout Page

13 دقیقه


طراحی فرم ثبت نام با استفاده از React-hook-form

14 دقیقه


ثبت نام با استفاده از Router Action

22 دقیقه


دو زبانه کردن پنل (فارسی- انگلیسی)

13 دقیقه


پیاده سازی App Context API

15 دقیقه


افزودن تم Dark (امکان تغییر بین تم روشن و تاریک)

11 دقیقه


پیاده سازی فرم Login

13 دقیقه


پیاده سازی Layout اصلی پنل

11 دقیقه


دو زبانه کردن Layout اصلی

10 دقیقه


محدودیت دسترسی به پنل برای کاربران غیر مجاز

3 دقیقه


پیاده سازی صفحه لیست دوره ها

28 دقیقه


دریافت لیست دوره ها با روش deferring

19 دقیقه


پیاده سازی صفحه جزئیات دوره

8 دقیقه


پیاده سازی صفحه دسته بندی دوره ها

12 دقیقه


افزودن قابلیت Pagination به دسته بندی دوره ها

22 دقیقه


پیاده سازی Environment Variable ها

11 دقیقه


کامپوننت Modal با استفاده از Portal

17 دقیقه


پیاده سازی قابلیت حذف یک دسته بندی

9 دقیقه


افزودن Notification به پنل

12 دقیقه


پیاده سازی قابلیت افزودن یک دسته بندی

15 دقیقه


پیاده سازی قابلیت آپدیت یک دسته بندی

16 دقیقه


تغییر استایل منو برای Route اکتیو

4 دقیقه


پیاده سازی صفحات Not Found و Exception

8 دقیقه


قابلیت خروج از پنل

5 دقیقه


پیش نیازهای دوره
  • مفاهیم پایه ری اکت
شرح دوره

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

 
آیا امکان ارتباط با مدرس وجود داره؟

به هیچ وجه نگران نباشید که قراره یه دوره رو ببینید و تمام. ارتباط کاملا دو طرفه بین شما و مدرس فراهم شده. بعد از شرکت در دوره هر جایی از دوره براتون نامفهوم بود، هر سوالی داشتید، می تونید وارد گروه تلگرام دوره (آموزش جامع React) بشید به آدرس https://t.me/+xkgdY2zFB_1jNmQ8 و سوال هاتون رو مطرح کنید. من در سریع ترین زمان ممکن جواب سوالات رو می دم. همین طور می تونید با شماره موبایل 09939994383  تماس بگیرید و سوال هاتون رو مطرح کنید.

 

لینک ها

آدرس گروه تلگرام:

https://t.me/+xkgdY2zFB_1jNmQ8

آدرس سرویس های بک اند:

https://react-mini-projects-api.classbon.com/swagger/index.html

دموی پروژه پنل ادمین:

https://react-admin-app.classbon.com/login

دیدگاه

برای ارسال دیدگاه های خود ابتدا وارد شوید یا ثبت نام کنید

ورود یا ثبت نام
میثم ولی زاده
1402/03/05 - 02:51

بعد از ثبت نام دوره ری اکت باز نمیشن

فاطمه سپهوند
1402/03/06 - 12:16

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

Xaphania Fox
1402/04/20 - 08:20

یکی از بهترین کورسهای ریکت که تا به حال دیدم. هم خلاصه است و هم کامل. مثلاً useEffect در 5 دقیقه توضیح داده شد و به جرات میتونم بگم که برای اولین بار، تونستم کامل درکش کنم. ممنونم از شما

Mohammad khadem
1402/04/22 - 13:51

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

مرتضی تدین
1402/05/11 - 16:43

سلام من داشتم میدیم دورره رو توی لینکدین گفتید رایگانه الانم اومدم رایگان بود ثبت نام کردم یهو میگه پول باید داد چی کار کنیم ؟!

aazam
1402/06/01 - 09:32

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

عباس سپهوند
1402/06/01 - 10:16

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

مسعود عسکری
1402/06/01 - 16:41

با سلام خیلی ممنون از بیان شیوا و مختصر و مفیدتون این دوره جزء معدود دوره های فارسی زبان هست که مطلب زیادی رو در زمان کوتاه انتقال میده یه سوال داشتم از خدمتتون سورس پروژه رو از کجا میتونم دانلود کنم؟

عباس سپهوند
1402/06/01 - 21:59

سلام لطفا بعد از ورود روی آیکون پروفایلتون کلیک کنید و جزئیات حساب رو بزنید و از منوی سمت راست دوره های من رو کلیک کنید. اونجا هم سورس پروژه هست و هم امکان دانلود کل ویدئوها

ابوالفضل
1402/06/04 - 17:03

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

عباس سپهوند
1402/06/04 - 18:58

سلام و درود لطفا برنچ رو تغییر بدید. به ازای هر فایل ویدئو یک برنچ مشخص ایجاد شده. از برنچ یک تا شماره ۲۵

آزاده رضوانی
1402/09/30 - 10:42

آموزش تون خیلی عالیه ، فقط خوب میشد اگه تو گیت هاب میزاشتین سورس کد رو چون من کار با یان swagerUI رو نمیفهمم چجوریه!! و اینکه اصلا هیچ کدی نمیبینم ، لطفا راهنمایی کنید چطور برنچی تو چه جور سیستمی :(

Behrouz
1402/06/06 - 18:30

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

عباس سپهوند
1402/06/06 - 22:32

سلام سورس کدی که دانلود کردید حدود ۲۵ تا برنچه عملا به ازای هر ویدئو یک برنچ متفاوت داریم. که گام به گام پروژه رو تکمیل می کنم. لطفا برنچ رو تغییر بدید.

f
1402/06/18 - 11:27

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

عباس سپهوند
1402/06/18 - 11:53

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

haz5
1402/06/20 - 18:08

واقعا عالی مختصر مفید و کارآمد لطفا بفرمایید دوره پیشرفتهرو کی آغاز میکنید ک بیصبرانه منتظریم

عباس سپهوند
1402/06/21 - 20:36

ممنون از شما ایشالله تا چند روز آینده دموی دوره و فرم شرکت در دوره رو می ذارم

farzin khamushi
1402/06/22 - 06:14

سلام من پروژه رو هر چی میخوام ران کنم نمیتونم . خیلی طول میکشه در حالی که خود create-react-app اصلا اینطور نیست . در ضمن من هم نمیتونم پیدا کنم و اکثرا یه جوری از روی ویدیو کپی کردم ولی light.css,dark.css fa.png , us.png رو نستونستم پیدا کنم .

مهدی محمدی
1402/06/22 - 15:59

دوستان برای استفاده از آخرین تغییرات سورس 1.فایل زیپ برنامه را در ی پوشه کپی کنید 2.داخل پشه شوید 3.در آدرس بار CMD یا PowerShell را بنویسید 4.دستور git branch را اجرا کنید تا لیست کلیه برنچ ها را ببینید 5.با دستور git checkout 24-finalize آخرین برنچ را انتخاب کنید 6. آخرین تغییرات در سورس کد مشاهده میشود.

meghdad
1402/09/12 - 14:26

دمت گرم با توضیحت

شاهین نجفی
1402/09/27 - 17:10

سلام و خسته نباشید استاد من سورس پزوژه رو دانلود کردم ولی این فقط یکیه و 25 تا نیست این برنچی که شما میگی رو من نمیبینم

saeid-rezaei
1403/02/07 - 16:12

سلام داخل گیت هاب فقط برنچ main هست باید چیکار کنم

بنیامین رضایی
1402/10/16 - 15:45

با سلام مشاهده آنلاین حذف شده؟

مهتاب فلاحت نژاد
1402/10/21 - 22:07

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

عباس سپهوند
1402/11/06 - 11:53

توی گروه تلگرام دوره می تونید لیننکش رو پیدا کنید

Amir Davari
1402/10/24 - 11:29

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

عباس سپهوند
1402/11/06 - 11:52

سلام متشکر در ورژن جدید وب سایت حتما اعمال می شه

ازاد
1402/11/15 - 01:10

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

Milad
1402/11/17 - 18:48

شما واقعا برای تدریس کردن ساخته شدی ممنون ♥

عباس سپهوند
1402/12/03 - 11:27

درود بر شما

Milad
1402/11/18 - 20:10

پیشنهاد میکنم حتماً قبلش دوره آموزش جامع React همین سایت رو ببینید

محمد الهی
1403/02/05 - 18:34

سلام. خسته نباشید. دورتون بسیار مفیده. با خطا cors مواجه شدم: has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

saeid-rezaei
1403/02/07 - 13:44

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

محمد رضا بایرامی
1403/05/05 - 14:27

رو لینک میزنم دانلود شه ... خطا میده لطفاً بررسی کنید

Korowsh
1403/05/05 - 16:38

سلام وقت بخیر این لینک دانلود کار نمیکنه. https://courses-videos.s3.ir-tbz-sh1.arvanstorage.ir/admin-dashboard.rar

احسان رضایی
1403/09/21 - 13:16

سلام تشکر بابت دوره بسیار خپب فقط من الان قسمت main layout رسیدم دارم طراحی میکنم تو ویدئو گفتن از سورس برید فوتر و ساید بار رو کپی کنید من سورس رو از همینجا دانلود کردم ولی توش فقط identitylayout‌هست و بقیش نیست ممنون میشم هرچه سریعتر راهنمایی کنید

آموزش رایگان


این دوره شامل
  • وضعیت ضبط تکمیل ضبط
  • تعداد مباحث 27 مبحث
  • مدت آموزش 6 ساعت
  • سطح دوره پیشرفته
  • قابلیت دانلود دارد
عباس سپهوند

برنامه نویس و توسعه دهنده نرم افزار