ری اکت , یک کتابخانه open-source جاوا اسکریپت برای ایجاد رابط کاربری به خصوص برای برنامه های تک صفحه ای است. با ترکیب سرعت و کارایی جاوا اسکریپت با روشی کارآمدتر برای دستکاری DOM، موجب میشود تا صفحات وبسایتها بهصورتی سریعتر در دسترس قرار بگیرند. ایجاد برنامه های React نیاز به استفاده از کتابخانه های اضافی برای مدیریت state و تعامل با API دارد نمونه مربوط به چنین کتابخانه هایی ری داکس است. با استفاده از ریداکس، State های اپلیکیشن در یک مخزن نگهداری میشوند و دسترسی هر کامپوننت به تمامی State ها نیز امکان پذیر است.
افراد علاقه مند به توسعه و برنامه نویسی فرانت اند می توانند ری اکت را در برنامه نویسان به طور کامل بیاموزند.
قیمت این دوره: 190,000 تومان - مدرس دوره : محمد مطواعی ( رزومه )
- تعداد ویدیوها : 82 ویدیو
- مدت زمان دوره : 21:11:00
- سطح دوره : پیشرفته
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1399/07/30
ثبتـــ نام در این دوره ثبت نام در دوره آموزش 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 با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
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 00:12:00
اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید
14 00:07:00
اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید
15 00:06:00
اگه با ES6 آشنا هستید میتونید این قسمت رو رد کنید
16 00:22:00
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
17 00:08:30
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
18 00:09:00
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
19 00:10:00
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
20 00:09:30
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
21 00:09:00
اگه با Es6 اشنایی دارید میتونید این قسمت رو رد کنید
22 00:24:00
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
23 00:10:00
اگه با es6 آشنایی دارید میتونید این قسمت رو رد کنید
24 00:06:00
اگه با es6 اشنایی دارید میتونید این قسمت رو رد کنید
25شروع فصل سوم - مقدمات React
00:21:00
تو این قسمت به معرفی react میپردازیم و یه پروژه حدید با react میسازیم
26معرفی JSX و چگونگی رندر اپ ری اکت
00:14:30
تو این قسمت jsx رو معرفی میکنیم و توضیح میدم که چطور یه اپ ری اکت رندر میشه
27فلسفه کامپوننت ها در ری اکت
00:21:00
تواین قسمت به این میپردازیم که کامپوننت ها تو ری اکت چی هستن
28 00:07:00
تو این قسمت به معرفی کامپوننت های کلاسی میپردازیم
29استایل دادن به کامپوننت ها
00:09:30
تو این قسمت یاد میگیرید چطور میشه به کامپوننت ها استایل داد
30 00:11:30
تو این قسمت به شرح ایونت ها در کامپوننت ها میپردازیم
31 00:17:30
تو این قسمت به مفهوم state در ری اکت میپردازیم مفهومی ک خیلی اساسی میباشد
32 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
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 00:08:00
تو این قسمت یاد میگیریم چطور میشه بین صفحات مختلف جابجا شد
49 00:10:30
تو این قسمت با Route Params اشنا میشیم
50 00:10:30
تو این قسمت نکات تکمیلی ری اکت روتر رو یاد میگیریم
51 00:07:30
تو این قسمت با high order component ها اشنا خواهید شد
52کانفیگ روت های پروژه توییتر
00:21:00
تو این قسمت با همین دانشی که بدست اوردیم تو این فصل میایم و روت های اپمون رو کانفیگ میکنیم
53 00:05:00
تو این فصل قراره یاد بگیریم چطور میشه data fetch انجام داد
54نگاهی عمیق تر به data fetching در spa
00:18:30
تو این قسمت نگاهی عمیق تر خواهیم داشت به data fetching با استفاده از axios
55 00:21:00
تو این قسمت یاد میگیریم چطور میشه با axios دیتا فچ انجام داد
56ارسال دیتا با Axios در React
00:22:00
تو این قسمت یاد میگیریم چطور میشه ارسال دیتا رو با axios انجام داد
57 00:26:30
تو این قسمت یه سری نکات تکمیلی axios رو مطرح میکنیم
58خداحافظ کلاس کامپوننت و سلام بر Hook
00:12:00
تو این قسمت برای اخرین بار یک مروری میکنیم بر کلاس کامپوننت ها
59Functional Component vs Class Component
00:14:00
تو این قسمت یه مقایسه ای از عملکرد این دو انجام میدیم
60 00:08:00
تو این قسمت یه یادآوری از useeffect خواهیم داشت
61پیاده سازی دیزاین صفحه لاگین اپلیکیشن
00:22:30
تو این قسمت دیزاین صفحه لاگین و رجیستر طراحی میشه
62توضیحاتی در مورد نحوه استفاده از api ها
00:10:00
دوستان این قسمت رو با دقت ببینید نحوه کار با api هارو توضیح دادم
63پیاده سازی api صفحه لاگین
00:19:30
در این قسمت ما api صفحه لاگین رو تو فرانتمون پیاده سازی میکنیم
64 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
تو این قسمت دیتای هشتگ ها و کاربران رو فچ میکنیم
72React Context for State Managment
00:34:00
تو این قسمت context رو یاد خواهیم گرفت ... جایگزین ریداکس دقت کنید که این یک قسمت از دوره مباحث پیشرفته React هست که به دوره توییتر ضمیمه شده است
73 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
تو این قسمت یاد میگیرید چطور میشه اپ مون رو ریسپانسیو کنیم
نظرات کاربران در رابطه با این دوره