قیمت این دوره : 190,000 57,000 تومان
  • مدرس دوره : محمد مطواعی ( رزومه )
  • تعداد دانشجویان این دوره : 404 نفر
  • تعداد ویدیوها : 82 ویدیو
  • مدت زمان دوره : 21:11:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1399/07/30
ثبتـــ نام در این دوره
آموزش React JS جامع و پروژه محور (پروژه توییتر)

آموزش React JS جامع و پروژه محور (پروژه توییتر)

به نام خدا
سلام میکنم به همه دانشجوها دانش آموزا اونایی که برنامه نویسی رو با گوشت و خونشون دوست دارن و اونایی که با برنامه نویسی بزرگ شدن نه نه اشتباه نکنید این دوره فقط مخصوص برنامه نویسای باتجربه نیست بلکه طوری تدوین شده که حتی شمایی که نمیدونی جاوااسکریپت و ری اکت چیه هم مناسب حالته چون که تمام پیش نیاز های  react دراین دوره گفته شده 
البته اینم بگم این یه دوره مقدماتی نیست که صرفا بیایم و مقدمات رو توش یاد بگیرم نه این یه دوره پروژه محوره که ما اولش یاد میگیرم ری اکت چیه و پیش نیازاش چی هستن (یعنی درواقع آمورش 0 تا صد react) بعدم که هر مبحث رو یاد گرفتید همون مبحث رو روی پروژه واقعی مون ینی twitter پیاده میکنیم
بله همون سایت توییتر معروف 🤗 این دوره درواقع آموزش ساخت توییتر هم هست که این پروژه باعث میشه شما تسلط خوبی به مباحث پیدا کنید و همینطور درگیر یه پروژه واقعی بشید و این یعنی ره چند ساله رو دو ماهه رفتن !! من تو این دوره علاوه بر آموزش مبانی ری اکت تجارب خودم رو که طی سال ها برنامه نویسی بدست اومده در اختیارتون قرار میدم که این جوری چند پله جلو میفتید ازین جایی که الان هستید ! 
خب میریم سراغ اینکه ببینید قراره چه اپشنایی از توییتر رو شما به کمک آموزش های این دوره طراحی کنید . خب تو ویدیوی معرفی من وایرفریم دوره رو به شما نشون میدم
قسمت بالا هدر سایتمونه کاربر اینجا اسم سایتو میبینه و اکانت کاربری خودش رو میتونه مشاهده کنه 
یکم پایین تر سمت راست لیست کاربرای توییترن که که هرکدوم میتونن یه دونه عکس پروفایل داشته باشن یه نام و یه توضیح کوتاه درباره خودشون
سمت چپ هم هشتک های که  ترند شدن رو  کاربر میتونه ببینه
بخش میانی هم اول چن تا توییت داغ که خیلی لایک خوردن بعدم لیست توییت ها به ترتیب زمان توییتشون
راستی کاربر با زدن روی هشتگ ها میتونه لیست توییت های مربوط به اون هشتگ رو وسط صفحه ببینه همین طور با کلیک روی هر کاربر لیست توییت های اون کاربر خاص رو مشاهده کنه .
خبببب به نظرتون چیزی از قلم نیفتاده ؟؟ اها کاربر خودشم باید بتونه توییت کنه 
پس یه صفحه خواهیم داشت که کاربر هم میتونه یه متن محدود به همراه یه عکس توییت کنه دقیقا عین توییتر
تو این دوره شما این چند تا مهات رو یاد خواهید گرفت ....
اول با JS آشنا میشید !! اگه بلدید که میتونید این فصل آموزش جاوااسکریپت رو رد کنید و یه پرش طول کنید به فصلای بعد اگرم نه که من تو دوساعت سعی میکنم به شما یاد بدم جاوا اسکریپت چیه و به چکار میاد
بعد میریم سراغ آموزش ES6
خب یه سری ازدوستان هستن که جاوااسکریپت زن قدیمی ان و خیلی خبری از ویژگی های اخرین نسخه های جاوا اسکریپت ندارن من تو این فصل ویژگی های جدیدی که به جاوا اسکریپت اضافه شده رو به شما یاد میدم
خب بعدشم وارد قسمت آموزش مقدماتی ری اکت میشیم و قشنگ اونا رو با مثال یاد میگیریم
خب حالا وقتشه تا همین جایی که یاد گرفتیم دانش هامون رو به چالش بکشیم پس وایر فریم رو میزاریم جلومونو صفحه های توییتر رو شروع میکنیم به طراحی از صفره صفر
بعد بازم با مباحث پیچیده تر ری اکت مث ری اکت هوک (React Hook) و ری اکت روتر (React Router)و دیتافچ (Axios) ازسرور اشنا میشیم و دوباره برمیگردیم به پروژه مون و با همینایی که یاد گرفتیم پروژه رو توسعه میدیم 
راستی این پروژه خب قطعا نیاز به api داره واسه اینکه درست کار کنه ولی نگران نباشید ما api اون رو با نود جی اس (Node JS) از قبل زدیم و در اختیار شما قرار میدیم تا بتونید فرانت خودتون رو روش بالا بیارید
اگرم یه وقتی خاستید و واستون جذاب بود دوره طراحی api توییتر با Node Js هم میزاریم
نکته اخر اینکه ما قرار نیست دقیقا همه امکانات توییتر رو پیاده کنیم چرا که توییتر بالا اوردن اون هم بصورت آموزشی شاید حدود 300 400 ساعت زمان ببره 
ما یه سری از امکانات بیس توییتر رو بالا میاریم که شما با یاد گرفتن همین مباحث اگر 0 باشید میشید 50 و اگر 50 باشید میشید 70 تو ری اکت
امیدوارم که از دیدن دوره لذت ببرید و آرزوی من رضایت قلبی شما از دوره پیش روست .

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

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

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

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

معرفی دوره

2
  • شروع کار با جاوااسکریپت

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

دوستانی که جاوااسکریپت بلدند میتوانند این قسمت و چند قسمت بعدی رو رد کنند

3
  • متغیر ها در جاوا اسکریپت

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

دوستانی که جاوااسکریپت بلدند میتوانند این قسمت و چند قسمت بعدی رو رد کنند

4
  • عملگر ها در جاوا اسکریپت

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

دوستانی که جاوااسکریپت بلدند میتوانند این قسمت و چند قسمت بعدی رو رد کنند

5
  • توابع در جاوا اسکریپت

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

دوستانی که جاوااسکریپت بلدند میتوانند این قسمت و چند قسمت بعدی رو رد کنند

6
  • ابجکت ها در جاوا اسکریپت

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

دوستانی که جاوااسکریپت بلدند میتوانند این قسمت و چند قسمت بعدی رو رد کنند

7
  • رویداد ها در جاوااسکریپت

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

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

8
  • آرایه ها در جاوااسکریپت

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

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

9
  • آشنایی با شرط در جاوااسکریپت

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

اگر با جاوااسکریپت آشنایی دارید میتوانید به قسمت های بعد مراجعه کنید

10
  • حلقه ها در جاوااسکریپت

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

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

11
  • ارتباط با دام

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

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

12
  • شروع فصل دوم - آشنایی با ES6

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

اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید

13
  • const and let in ES6

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

اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید

14
  • template string در es6

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

اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید

15
  • for each , for of in ES6

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

اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید

16
  • ES6 - Map and Filter

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

17
  • ES6 - Arrow Functions

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

18
  • JS - Rest Operator

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

19
  • ES6 - Spread Op

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

20
  • ES6 - Classes

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

21
  • ES6 - Destructing

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

اگه با Es6 اشنایی دارید میتونید این قسمت رو رد کنید

22
  • ES6 - Promise

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

23
  • ES6 - Modules

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

اگه با es6 آشنایی دارید میتونید این قسمت رو رد کنید

24
  • ES6 - Set and Map

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

اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید

25
  • شروع فصل سوم - مقدمات React

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

تو این قسمت به معرفی react میپردازیم و یه پروژه حدید با react میسازیم

26
  • معرفی JSX و چگونگی رندر اپ ری اکت

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

تو این قسمت jsx رو معرفی میکنیم و توضیح میدم که چطور یه اپ ری اکت رندر میشه

27
  • فلسفه کامپوننت ها در ری اکت

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

تواین قسمت به این میپردازیم که کامپوننت ها تو ری اکت چی هستن

28
  • Class Based Components

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

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

29
  • استایل دادن به کامپوننت ها

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

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

30
  • رویداد در کامپوننت ها

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

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

31
  • مفهوم state در ری اکت

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

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

32
  • React Props

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

تو این قسمت درباره props ها در کامپوننت های ری اکت صحبت میکنیم

33
  • پروژه Todo برای تسلط بر مفاهیم state و props

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

توضیحات : این قسمت شامل دو ویدیو میباشد که یکی پیاده سازی اپ تودو است و دیگری آموزش React Children props

34
  • شروع فصل چهارم - ایجاد پروژه توییتر و کانفیگ اولیه

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

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

35
  • لیوت بندی بیسیک اپ توییتر

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

تو این قسمت یه ساختار لیوت اصلی واسه پروژمون مینویسیم

36
  • مدیریت تم متریال اصلی برنامه

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

تو این قسمت تم برنامه مون رو مدیریت میکنیم

37
  • فایل طراحی صفحه اصلی پروژه توییتر

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

فایل pdf طراحی برنامه

38
  • ایجاد سایدبار سمت راست

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

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

39
  • ایجاد ساید بار سمت چپ (لیست کاربران)

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

تو این قسمت ساید بار سمت چپ رو طراحی میکنیم

40
  • طراحی صفحه خانه - قسمت اول

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

تو این قسمت صفحه اصلی توییتر رو طراحی میکنیم

41
  • طراحی صفحه اصلی توییتر - قسمت دوم

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

تو این قسمت صفحه اصلی توییتر رو طراحی میکنیم

42
  • صفحه لیست توییت ها براساس هشتگ

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

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

43
  • صفحه لیست پست ها براساس کاربر

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

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

44
  • متمایز کردن هشتگ ها در لیست توییت ها

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

تو این قسمت رنگ هشتگ هارو تو پست ها تغییر میدیم و clickable شون میکنیم

45
  • رنگی کردن هشتگ ها در کارد ورودی متن

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

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

46
  • شروع فصل 5 - معرفی React Router

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

تو این قسمت با react route آشنا خواهید شد

47
  • چگونگی ایجاد روت جدید

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

تو این قسمت یاد میگیریم چطور میشه روت های جدید تعریف کرد

48
  • Link Router

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

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

49
  • Route Params

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

تو این قسمت با Route Params اشنا میشیم

50
  • نکات تکمیلی Router

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

تو این قسمت نکات تکمیلی ری اکت روتر رو یاد میگیریم

51
  • HOC

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

تو این قسمت با high order component ها اشنا خواهید شد

52
  • کانفیگ روت های پروژه توییتر

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

تو این قسمت با همین دانشی که بدست اوردیم تو این فصل میایم و روت های اپمون رو کانفیگ میکنیم

53
  • شروع فصل 6 - Data fetch

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

تو این فصل قراره یاد بگیریم چطور میشه data fetch انجام داد

54
  • نگاهی عمیق تر به data fetching در spa

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

تو این قسمت نگاهی عمیق تر خواهیم داشت به data fetching با استفاده از axios

55
  • دریافت دیتا با Axios

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

تو این قسمت یاد میگیریم چطور میشه با axios دیتا فچ انجام داد

56
  • ارسال دیتا با Axios در React

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

تو این قسمت یاد میگیریم چطور میشه ارسال دیتا رو با axios انجام داد

57
  • مباحث پیشرفته Axios

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

تو این قسمت یه سری نکات تکمیلی axios رو مطرح میکنیم

58
  • خداحافظ کلاس کامپوننت و سلام بر Hook

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

تو این قسمت برای اخرین بار یک مروری میکنیم بر کلاس کامپوننت ها

59
  • Functional Component vs Class Component

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

تو این قسمت یه مقایسه ای از عملکرد این دو انجام میدیم

60
  • React useEffect

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

تو این قسمت یه یادآوری از useeffect خواهیم داشت

61
  • پیاده سازی دیزاین صفحه لاگین اپلیکیشن

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

تو این قسمت دیزاین صفحه لاگین و رجیستر طراحی میشه

62
  • توضیحاتی در مورد نحوه استفاده از api ها

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

دوستان این قسمت رو با دقت ببینید نحوه کار با api هارو توضیح دادم

63
  • پیاده سازی api صفحه لاگین

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

در این قسمت ما api صفحه لاگین رو تو فرانتمون پیاده سازی میکنیم

64
  • پیاده سازی api ثبت نام

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

تو این قسمت api صفحه ثبت نام رو پیاده سازی میکنیم

65
  • تعریف سطح دسترسی کاربر

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

تو این قسمت کامپوننت public route , private route رو مینویسیم

66
  • خروج کاربر از سایت

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

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

67
  • اپلود تصویر پروفایل

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

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

68
  • دیتافچ لیست توییت ها

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

تو این قسمت ما لیست توییت های صفحه اصلی رو فچ میکنیم

69
  • ایجاد توییت جدید

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

تو این قسمت یک توییت جدید رو ب سرور ارسال میکنیم

70
  • اپلود عکس در توییت جدید

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

تو این قسمت یاد میگیریم کنار توییت جدید چطور میتونیم عکس هم اپلود کنیم

71
  • دریافت لیست هشتگ ها و کاربران

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

تو این قسمت دیتای هشتگ ها و کاربران رو فچ میکنیم

72
  • React Context for State Managment

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

تو این قسمت context رو یاد خواهیم گرفت ... جایگزین ریداکس دقت کنید که این یک قسمت از دوره مباحث پیشرفته React هست که به دوره توییتر ضمیمه شده است

73
  • Retweet کردن توییت ها

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

تو این قسمت یاد میگیریم چطور میشه با کانتکسی ک یاد گرفتیم ری توییت کنیم پست هارو

74
  • لایک کردن توییت ها

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

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

75
  • دریافت لیست توییت ها براساس هشتگ

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

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

76
  • دریافت لیست توییت ها براساس اساس کاربر

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

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

77
  • اضافه شدن هشتگ ها به ازای پست جدید

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

تو این قسمت قصد داریم به ازای پست هایی که اضافه میکنیم هشتگ های اون پست رو هم اضافه کنیم

78
  • دریافت پروفایل کاربر

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

تو این قسمت اطلاعات پروفایل کاربر رو از سرور فچ میکنیم

79
  • دیپلوی پروژه نهایی

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

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

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

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

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

81
  • فصل 8 - چندزبانه کردن اپ React

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

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

82
  • ریسپانسیو کردن صفحات - drawer menu

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

تو این قسمت یاد میگیرید چطور میشه اپ مون رو ریسپانسیو کنیم

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

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