بلک فرایدی

🎉 بلک فرایدی تاپ لرن شروع شد! 🎉

🔥 70 درصد تخفیف ویژه روی تمامی دوره‌های آموزشی 🔥

اگر همیشه منتظر یک فرصت عالی برای یادگیری مهارت‌های جدید بودید، الان وقتشه! 🚀

🎯 دوره‌های متنوع و کاربردی در زمینه‌های:
✔️ برنامه‌نویسی و توسعه وب
✔️ طراحی و گرافیک
✔️ امنیت و شبکه
✔️ و ده‌ها موضوع جذاب دیگر

⏳ زمان محدوده! همین الان از بیشترین تخفیف‌ها استفاده کنید🔔

✨ آینده شغلی‌تون رو همین امروز بسازید! 🌟

بلک فرایدی
قیمت این دوره: 190,000 57,000 تومان
  • مدرس دوره : محمد مطواعی
  • تعداد ویدیوها : 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:00

  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

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

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

دوره های دیگر مدرس

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

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

مطواعی
10:57:00
آموزش ساخت ربات تلگرام با جاوااسکریپت (دوره مقدماتی)

آموزش ساخت ربات تلگرام با جاوااسکریپت (دوره مقدماتی)

مطواعی
4:4:00
آموزش جامع API نویسی Node JS

آموزش جامع API نویسی Node JS

مطواعی
22:34:00
آموزش کاربردی ajax بهمراه مینی پروژه سایت فیلم

آموزش کاربردی ajax بهمراه مینی پروژه سایت فیلم

مطواعی
3:32:00
آموزش پیشرفته React Socket IO

آموزش پیشرفته React Socket IO

مطواعی
5:44:00
دوره مباحث پیشرفته React JS

دوره مباحث پیشرفته React JS

مطواعی
7:19:00
دوره آموزش مقدماتی Next JS

دوره آموزش مقدماتی Next JS

مطواعی
3:43:00
آموزش ساخت چت روم با React و Socket IO

آموزش ساخت چت روم با React و Socket IO

مطواعی
3:44:00
آموزش ساخت بازی با جاوا اسکریپت

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

مطواعی
4:40:00
اینستاگرام
تلگرام

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

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