آموزش ری اکت ( ReactJS ) در دنیای واقعی | از 0 تا استخدام [منتورشیپ]
حدود 40 ساعت آموزش جامع و تخصصی ری اکت! شما در دوره آموزش ری اکت ReactJS ، این کتابخانه قدرتمند و پر استفاده جاوا اسکریپت را به صورت کاملا پروژه محور و کاربردی یاد میگیرید!
ری اکت گل سرسبد فرانت اند محسوب میشود،اگر دوره react را ببینید، بازار کار فرانت اند پیشنهادهای بسیار شگفت انگیزی برای شما خواهد داشت! در این دوره شما آموزش ری اکت رابر اساس تجربیات مدرس در دنیای واقعی و کار با شرکت های مختلف ایرانی یاد می گیرید و در دوره اموزش ری اکت مدرس دوره از نقطه صفر تا رسیدن شما به مرحله پیاده سازی نمونه کار، طراحی رزومه و … استخدام همراه شما خواهد بود. (به این معنی که تا پس از این دوره استخدام نشوید، ما شما را رها نمیکنیم!)
آموزش ری اکت و نمونه کارها و رزومه شما و خیلی از موارد دیگه توسط مدرس بررسی، راهنمایی و رفع اشکال خواهد شد تا شما عزیزان بتوانید نهایت خروجی را از این دوره به دست آورده و بعد از گذروندن این دوره وارد بازار کار شده و کسب درآمد کنید.
پس اگر با HTML,CSS و Javascript آشنایی داری، وقتشه که با آموزش ری اکت تیرخلاص رو بزنی و خودتو به همه اثبات کنی!
برو بریم
2,500,000 تومان
React Js چیست؟

ری اکت یکی از کتابخانه های جاوا اسکریپت است که در سال 2013 توسط شرکت فیسبوک ارائه شد و امروزه به محبوب ترین و پر استفاده ترین کتابخانه حوزه فرانت اند تبدیل شده است که بازار کار بسیار فوق العاده ای نیز دارد.
ری اکت به دلیل مزایایی مثل کامپوننت بیس بودن، استفاده از Virtual Dom، سهولت در یادگیری، پیاده سازی راحت وب سایت های Spa و … که دارد امروزه به محبوب ترین و پر استفاده ترین کتابخانه فرانت اند تبدیل شده است که شما با یادگیری آن می توانید درآمد های بسیار بالا از داخل کشور یا خارج کشور داشته باشید.
این دوره مناسب چه کسانی است؟

این دوره برای تمام برنامه نویسان فرانت اند که قصد ورود به دنیای ری اکت را دارند مناسب است.
اکثر افراد وقتی جاوا اسکریپت را یاد می گیرند، باید یکی از تکنولوژی های ری اکت، ویو و یا انگیولار را یاد بگیرند تا بتوانند وارد بازار کار شده و کسب درآمد کنند.
در این میان ری اکت در مقایسه با ویو و انگیولار بازار کار، جامعه آماری، سرعت توسعه و … زیادی دارد و شما با کسب تسلط در ری اکت می توانید در سرتاسر دنیا به کسب درآمد بپردازید.
پس اگر جاوا اسکریپت را یاد گرفته اید و قصد یادگیری ری اکت را دارید، این دوره مناسب شماست.
اگر در صفحات مجازی مثل تلگرام و اینستاگرام فعالیت داشته باشید، قطعا افرادی را دیده اید که ری اکت را از دوره های آموزشی مختلف یاد گرفته اند اما:
- نمی توانند از آن استفاده کنند.
- نمی توانند پروژه ای را با ری اکت بنویسند.
- نمی توانند به عنوان برنامه نویس ری اکت وارد بازار کار شوند.
دوره آموزش ری اکت برای این دسته از افراد نیز بسیار مفید و مناسب بوده و پیشنهاد می شود.
چون با سرفصل ها و پشتیبانی فوق العاده ای که این دوره دارد، بعد از انتهای دوره می توانید به سطح خیلی خوبی در ری اکت برسید و وارد بازار کار شوید.
ری اکت Vs ری اکت نیتیو

ممکن است در خیلی از دورهمی ها و گروه های موجود در شبکه های مجازی شنیده باشید که با یادگیری ری اکت می توان در حوزه برنامه نویسی موبایل هم فعالیت داشت!!!! (عجب)
ماجرا این است صرفا کسی که ری اکت یاد می گیرد، به هیچ وجه نمی تواند در زمینه موبایل فعالیت داشته باشد. چون که باید فریمورکی به اسم ریکت نیتیو را یاد بگیرد و “ریکت نیتیو همان ریکت نیست!”.
در واقع ری اکت نیتیو برای خودش دنیایی بزرگ و گسترده است و تفاوت های اساسی با ری اکت دارد:
- در ریکت نیتیو هیچ خبری از المنت های Html نیست
- در ریکت نیتیو هیچ خبری از Css نیست و استایل دهی ها با آبجکت های جاوا اسکریپتی پیاده سازی می شوند
- و …
شما در صورتی باید سمت ریکت نیتیو برید که به برنامه نویسی موبایل علاقه داشته باشید.
اینطور می توان گفت که اگر ری اکت را یاد بگیرید، یادگیری ریکت نیتیو برای شما آسان تر می شود. اما اگر بگوییم “با ریکت می توان در حوزه موبایل هم فعالیت داشت”، کاملا اشتباه است.
آیا ری اکت ارزش یادگیری دارد؟

ارزش یادگیری را باید از جنبه ها و معیار های مختلفی بررسی کرد. ری اکت امروزه محبوب ترین و پر استفاده ترین تکنولوژی فرانت اند تبدیل شده است که در سر تا سر دنیا بازار کار بسیار بالایی نیز دارد و شما می توانید با تسلط بر ری اکت:
- به طور فریلنسری درآمد داشته باشید.
- در شرکت های برنامه نویسی ایرانی استخدام شوید.
- با شرکت های خارج از کشور به طور ریموت همکاری داشته و کسب درآمد کنید.
- به هر کشوری که دوست دارید مهاجرت کنید
- و …
بنا به معیار های ذکر شده، یادگیری ری اکت ارزش بسیار بالایی دارد و حتی برای هر برنامه نویس فرانت اند می تواند از هر چیزی واجب تر بوده و در اولویت باشد.
آیا ری اکت سخت است؟

ممکن است شما هم مثل عده زیادی از افراد در فضای مجازی صحبت هایی از سخت بودن ری اکت و سینتکس Jsx و … دیده باشید.
اگر یک تکنولوژی سخت باشد، افراد خیلی کمی سمت آن می روند و در نتیجه بازار کار کمی نیز خواهد داشت. اما با این همه بازار کار، جامعه آماری، داکیومنت واضح و … به هیچ نمی توان گفت که ری اکت سخت است. پس در نتیجه هیچ گونه سختی در ری اکت وجود ندارد و اگر شما پیش نیاز های لازم به خوبی بلد باشید، می توانید در مدت زمان بسیار کم و معقولی ری اکت را به خوبی یاد گرفته و وارد بازار کار شوید.
در این دوره سرفصل های ری اکت به صورت مقدماتی، متوسط و پیشرفته طبق داکیومنت رسمی آن به شما آموزش داده می شود و در هر کدام از جلسات دوره هر گونه سوال و ابهامی داشتید، می توانید با مدرس در ارتباط بوده و سوال خود را در قسمت پرسش و پاسخ دوره مطرح کنید تا توسط مدرس پاسخ داده شده و منتور شوید.
برای شروع دوره آموزش ری اکت چه پیش نیاز هایی را باید بلد باشیم؟

همان طور که می دانید ری اکت یکی از لایبرری های فرانت اند است و سه مهره اصلی فرانت اند زبان های Html، Css و جاوا اسکریپت هستند و شما در قدم اول باید این سه تکنولوژی را به خوبی بلد باشید.
مورد بعدی یادگیری خیلی خوب اکما اسکریپت 6 است. اکما اسکریپت 6 قابلیت های بسیار خوب زیادی را به جاوا اسکریپت اضافه کرده است که اتفاقا عمده آن ها در ری اکت هم استفاده می شود.
پس شما برای شروع دوره آموزش ری اکت باید تکنولوژی های Html Css JavaScript و Es6 را به خوبی بلد باشید. اگر هنوز جاوا اسکریپت را یاد نگرفتید، پیشنهاد می کنم به دوره آموزش مقدماتی تا پیشرفته جاوا اسکریپت سبزلرن مراجعه کنید.
موضوع بعدی این است که متاسفانه امروزه منابع فارسی زیادی برای اکما اسکریپت 6 وجود ندارد و شما با آن کار نکرده باشید و این موضوع ممکن است شما را نگران کند.
اما خبر خوب این است که در دوره آموزش ری اکت سبزلرن سعی کردیم قبل از وارد شدن به مباحث ری اکت، در حد 10 الی 20 جلسه به پیش نیاز های ری اکت و مباحث Es6 بپردازیم.
پس از این بابت هیچ گونه نگرانی نداشته باشید.
پس از این دوره به چه سطحی از بازار کار می رسم؟

شما اگر تمام نکات گفته شده در دوره را رعایت کرده و تمرین مکرر داشته باشید، بعد از گذروندن این دوره به صورت تضمینی می توانید به روش های مختلف مثل فریلنسری، استخدام در شرکت های برنامه نویسی و … وارد بازار کار شده و کسب درآمد کنید.
این دوره به صورت منتورشیپ پیش می رود و طی تمام جلسات با مدرس در ارتباط هستید و تمام سوالات شما در سریع ترین زمان ممکن توسط مدرس دوره برطرف می شود. پس اگر پیش نیاز های لازم را بلد باشید و برای تمرین ها و تکالیف داده شده به خوبی وقت بگذارید، بعد از این دوره می توانید وارد بازار کار شده و کسب درآمد کنید.
پشتیبانی دوره ریکت به چه صورت است؟
در یک کلام می توان گفت “دوره آموزشی که پشتیبانی نداشته باشد هیچ ارزشی ندارد”.
دوره آموزش ری اکت پشتیبانی مادام العمر دارد و شما در هر کدام از جلسات و مباحث مربوط به ری اکت هر گونه سوال و ابهامی داشتید، می توانید به طور مستقیم با مدرس در ارتباط بوده و سوال خود را در قسمت پرسش و پاسخ دوره ری اکت مطرح کنید تا توسط مدرس برطرف شود.
اما پشتیبانی دوره ری اکت به همین رفع اشگال ختم نمی شود!
شما از زمان شروع دوره در تک تک مراحل یادگیری ری اکت، پیاده سازی نمونه کار قابل قبول برای بازار کار، رزومه سازی، نحوه ارسال رزومه به شرکت های برنامه نویسی برای استخدام، نحوه پاسخ دادن به سوالات مصاحبه و …. پشتیبانی خواهید شد و در تمام این مراحل به طور کامل پشتیبانی خواهید شد.
پس از زمان شروع این دوره تا زمانی که استخدام شوید، در کنارتان هستیم.
بازار کار ری اکت در چه وضعیتی قرار دارد؟
برای پاسخ دادن به این سوال باید به وب سایت هایی که در زمینه بازار کار و استخدام فعالیت می کنند مراجعه کنیم، مثل جابینجا، جاب ویژن، آی استخدام، استک اور فلو و ….



همان طور که در آگهی های استخدامی بالا مشاهده می کنید، شما می توانید با یادگیری ری اکت و حرفه ای شدن در آن به طور میانگین 15 میلیون تومان درآمد ماهانه داشته باشید که اگر به سطح بالاتری برسید، با همکاری کردن با شرکت های خارج از کشور می توانید درآمد دلاری داشته و ماهانه درآمد بالای 50 میلیون تومان نیز داشته باشید.
ویژگی بسیار خوب ری اکت این است که بسیاری از آگهی های استخدام و همکاری به صورت دورکاری و ریموت هستند. یعنی شما برای شروع یادگیری ری اکت هیچ بهانه ای مثل اهل شهرستان بودن و … ندارید. چون می توانید به صورت ریموت با شرکت های مختلف همکاری کرده و کسب درآمد کنید.
در این دوره از لحظه شروع تا زمانی که استخدام شوید، در تمام مراحل مثل ایجاد نمونه کار، پیاده سازی رزومه قابل قبول، ارسال رزومه به شرکت مورد نظر، روش های مصاحبه اصولی با درصد قبولی بالا و … در کنارتان هستیم.
پیش نیاز های ری اکت
Main Concept های ریاکت
17مفهوم Class Components و نحوه استفاده از آن ها11:32
18از کامپوننت های کلاسی استفاده کنیم یا فانکشنال؟7:35
19مفهوم Prop و نحوه استفاده از آن ها در Functional Component12:38
20پیاده سازی پروژه کاربردی Dynamic Products Box9:48
21نحوه استفاده شرطی از propها10:03
22استفاده از Destructuring برای دریافت props6:26
23استفاده از spread برای ارسال راحتتر prop8:06
24نحوه تغییر اسم prop در شرایط لازم5:18
25نحوه مقدار دهی default برای propها در Functional Components11:41
26مفهوم children special prop و نحوه استفاده از آن8:34
27پیاده سازی پروژه Modal8:12
28نحوه استفاده از props در class components8:07
29نحوه تعیین مقادیر default برای props در class components6:12
30نصب اکستنشن React Developer Tools5:36
31تشریح نمونه کار دانشجویان دوره – بررسی ساختار پروژه های ریاکتی11:17
32تشریح و بررسی نمونه کار دانشجویان دوره9:17
33انجام Prop Validation با پکیج PropTypes15:36
34state چیست و کجا باید ازش استفاده کنیم؟14:38
35چرا نمیتوانیم اسم ویژگی state را تغییر دهیم؟11:14
36نحوه استفاده از Event ها در ریاکت12:24
373 روش برای this binding در class components7:07
382 روش برای تغییر state به کمک متد setState13:06
39پیاده سازی مینی پروژه Counter10:57
40پیاده سازی مینی پروژه Temperature Display12:48
41نحوه ارسال پارامتر به متدها در Event Handling10:25
424 روش برای پیاده سازی Conditional Rendering15:19
43مینی پروژه Notification Counter – نحوه پیاده سازی4:47
44پیاده سازی مینی پروژه Notification Counter6:26
45نحوه پیاده سازی List Rendering با متد map10:50
46چرا و چه زمانی باید از key استفاده کنیم؟8:53
47چه مقادیری را نباید به عنوان key ارسال کنیم؟7:30
48نحوه هندل کردن Form و اینپوتها در ریاکت22:30
49مینی پروژه باحال و کاربردی Form Validation – نحوه پیاده سازی8:16
50پیاده سازی مینی پروژه Form Validation17:44
51مینی پروژه جذاب و چالش برانگیز Quiz App – نحوه پیاده سازی11:04
52پیاده سازی پروژه Quiz App20:31
53پروژه باحال و کاربردی فروش بلیط – نحوه پیاده سازی8:40
54پیاده سازی پروژه فروش بلیط آنلاین15:16
55چطور یک متد را به عنوان Prop ارسال کنیم؟16:49
56مفهوم Fragment و روش های استفاده از آن در ریاکت6:56
57استفاده از پکیج React-Icons در ریاکت11:25
58روش های استفاده از Css در ریاکت10:20
59پروژه جذاب BookList – نحوه پیاده سازی11:03
60پیاده سازی پروژه BookList – قسمت 19:10
61پیاده سازی پروژه BookList – قسمت 214:14
62پروژه کاربردی و جذاب Shopping Cart – نحوه پیاده سازی14:17
63پیاده سازی پروژه Shopping Cart – نمایش محصولات در DOM19:25
64پیاده سازی پروژه Shopping Cart – اضافه کردن محصولات به سبد خرید14:28
65پروژه TodoList حرفه ای – نحوه پیاده سازی00:19:51
66پیاده سازی پروژه TodoList حرفه ای – اضافه کردن Todo ها00:13:12
67پیاده سازی پروژه TodoList حرفه ای – حذف و ویرایش Todo ها00:16:12
68پیاده سازی پروژه TodoList حرفه ای – فیلتر سازی Todo ها00:12:24
69پروژه جذاب و لذت بخش Note App – نحوه پیاده سازی00:14:21
70پیاده سازی پروژه NoteApp – قسمت 114:01
71پیاده سازی پروژه Note App – قسمت 200:16:57
72پیاده سازی پروژه Note App – قسمت 320:53
کار با فریمورک React BootStrap + پروژه
1چرا نمی توان از تمامیت فریمورک بوت استرپ در پروژه های ریاکت استفاده کرد؟12:18
2نحوه استفاده از کامپوننت های بوت استرپ در ریاکت12:26
3معرفی فریمورک React BootStrap – نحوه نصب و استفاده از آن12:09
4نحوه استفاده از Alert های مختلف در React BootStrap11:40
5نحوه استفاده از Button ها در React BootStrap12:45
6نحوه استفاده از Card های React BootStrap9:24
7استفاده از Modal در React BootStrap00:12:25
8نحوه Customize کردن کامپوننت های React BootStrap9:28
9نحوه استفاده از Grid System ریاکتبوتاسترپ برای ریسپانسیو سازی20:44
10پیاده سازی پروژه صفحه لاگین با ریاکت بوت استرپ (ریسپانسیو) – قسمت Header11:57
11پیاده سازی پروژه صفحه لاگین با ریاکت بوت استرپ (ریسپانسیو) – قسمت RightSide7:30
12پیاده سازی پروژه صفحه لاگین با ریاکت بوت استرپ (ریسپانسیو) – قسمت LeftSide12:02
معرفی و نحوه استفاده از متد های LifeCycle
1مفهوم LifeCycle و کاربرد متد هایی که در اختیارمون میذاره12:43
2تشریح مفصل متد های Mounting و استفاده عملی از آن ها – قسمت 122:33
3تشریح مفصل متد های Mounting و استفاده عملی از آن ها – قسمت 215:24
4تشریح مفصل متد های Updating و استفاده عملی از آن ها – قسمت 122:52
5استفاده از pureComponent و خلاص شدن از shouldComponentUpdate5:11
6تشریح مفصل متد های Updating و استفاده عملی از آن ها – قسمت 214:28
7تشریح کامل قسمت UnMounting از چرخه حیات و استفاده عملی از آن5:40
مباحث مربوط به Ajax و Api از صفر تا صد در ریاکت + مینی پروژه
1CallBack Function چیست و چگونه استفاده می شود؟11:49
2مفهوم Sync و Async – مثالی برای درک کاربرد CallBack Function16:46
3مثال دوم برای درک کاربرد و عملکرد Callback Function8:42
4Promise چیست؟ راهی برای خلاص شدن از CallBack Hell14:52
5مثالی برای درک کاربرد Promise و نحوه استفاده از آن8:00
6مثال دوم برای درک عمیق کاربرد و عملکرد Promise00:5:32
7async و await چیست و چطور باید ازشون استفاده کنیم؟9:54
8Api چیست؟ راهی برای ارتباط بین فرانت اند و بک اند13:32
9Json چیست؟ – فرمتی برای ذخیره سازی اطلاعات9:04
10آشنایی با متد fetch در Es6 – نحوه ارسال ریکوئست به Api00:15:15
11آشنایی با متد های DELETE, PUT و POST در کار با Api9:52
12آشنایی با ساختار دیتابیس برای درک بهتر کار با Api10:26
13کار با Api واقعی نوشته شده با NodeJs برای ثبت نام کاربر17:21
14مینی پروژه دریافت اطلاعات POST ها از Api و نمایش آن ها در Table16:21
شروع Hook ها – مقدماتی
1معرفی Hook ها5:42
2نحوه استفاده از useState در کامپوننت های Functional14:01
3چه زمانی باید برای آپدیت state از متد استفاده کنیم؟15:58
4ریفکتور کردن پروژه TodoList از Class به Functional – برای درک بهتر useState17:35
5ریفکتور کردن پروژه سبد خرید از Class به Functional13:41
6شروع کار با هوک useEffect برای پیاده سازی Mount و Updating12:32
7نحوه پیاده سازی UnMounting با هوک useEffect16:36
8تشریح کامل هوک useEffect با پروژه TodoList11:00
9مقایسه کد برنامه نویس کارآموز – جونیور و میدلول در استفاده از هوکها19:40
آموزش پکیج MUI
1معرفی کتابخونه MUI – نصب آن در پروژه12:30
2استفاده از کامپوننت Typography در MUI10:06
3نحوه استفاده از ICON های MUI8:47
4استفاده استفاده از کامپوننت Button و prop های آن12:25
5استفاده از DataGrid های MUI برای نمایش اطلاعات18:52
مفهوم SPA و کار با پکیج React-Router ورژن 6 – پیاده سازی پروژه SPA
1مفاهیم Spa و Mpa به چه معنی هستند؟11:07
2تفاوت Lifecycle و نحوه عملکرد سایت های Spa و Mpa8:54
3نصب پکیج React-Router و نحوه Route بندی14:18
4استفاده از کامپوننت Link برای آدرس دهی به شکل Spa6:44
5استفاده از هوک useParams برای دریافت پارامتر های Route17:36
6نحوه ریدایرکت کردن کاربر با کامپوننت Navigate9:39
7نحوه پیاده سازی صفحه 404 در سایت های ریاکتی5:28
8مینی پروژه قسمت دوره های سبزلرن به شکل Spa – پیاده سازی Navbar13:09
9مینی پروژه قسمت دوره های سبزلرن به شکل Spa – پیاده سازی کامپوننت Courses13:56
10مینی پروژه قسمت دوره های سبزلرن به شکل Spa – پیاده سازی کامپوننت MainCourse12:14
11نحوه استفاده از Nested Route در سایت های Spa13:30
12استفاده از کامپوننت Outlet برای نمایش محتوای Sub Route4:39
13آموزش هوک useRoutes برای ساختار بندی بهتر Routeها11:16
14نحوه پیاده سازی Private Route16:43
15نحوه پیاده سازی راحتتر و خواناتر Private Routes11:43
16استفاده از کامپوننت NavLink برای تشخیص Main Route8:24
17نحوه استفاده از هوک useNavigate برای ریدایرکت کردن کاربر10:07
18نحوه استفاده از هوک useLocation برای دسترسی به اطلاعات Route فعلی9:34
استفاده از Firebase در ریاکت
1فایربیس چیست؟ راه اندازی آن و ایجاد پروژه در Firebase7:56
2نحوه ارسال Post Request به Api فایربیس و ذخیره سازی اطلاعات کاربر در آن15:48
3ارسال Get Request به فایربیس و نمایش اطلاعات دریافتی کاربران در Table (همراه با عملیات حذف و ویرایش)17:56
4ارسال Delete Request به Api فایربیس و حذف کاربران دلخواه از آن21:16
5ریفکتور کردن پروژه و تبدیل آن به حالت RealTime9:22
6ارسال Put Request به فایربیس و آپدیت اطلاعات کاربر دلخواه20:09
7نمایش اطلاعات فعلی کاربر در Modal برای آپدیت12:56
8معرفی چند پروژه باحال و قابل قبول بازار کار برای پیاده سازی و استفاده بعنوان نمونه کار در رزومه7:51
پروژه Dashboard Admin حرفه ای با ریاکت
2پیاده سازی Routing پروژه14:28
3پیاده سازی قسمت TopBar پروژه24:18
4پیاده سازی کامپوننت Sidebar28:16
5Fix Sidebar12:18
6پیاده سازی کامپوننت Features از صفحه Home24:03
7نصب پکیج reCharts و نحوه استفاده از آن برای پیاده سازی نمودار13:10
8پیاده سازی کامپوننت Chart.jsx و نمایش آمار فروش ماهانه در صفحه Home21:50
9Fix Chart00:5:38
10پیاده سازی کامپوننت WidgetSm از صفحه Home26:32
11پیاده سازی کامپوننت WidgetLg از صفحه Home28:25
12کدنویسی کامپوننت UsersList برای نمایش لیست کاربران و عملیات حذف آنها35:24
13کدنویسی کامپوننت Products برای نمایش لیست محصولات و عملیات حذف آنها12:16
14کد نویسی کامپوننت Product برای نمایش جزئیات محصول – قسمت 111:02
15کد نویسی کامپوننت Product برای نمایش جزئیات محصول – قسمت 219:10
16کد نویسی کامپوننت Product برای نمایش جزئیات محصول – قسمت 322:03
Custom Hook چیست و چطور ازش استفاده کنیم؟ + چندین مثال کاربردی و پراستفاده
1Custom Hook چیست؟ – پیاده سازی useLogger15:43
2ریفکتور هوک useLogger6:46
3پیاده سازی کاستوم هوک useCounter00:09:56
4پیاده سازی کاستوم هوک useFetch00:19:24
5پیاده سازی کاستوم هوک useLocalStorage00:15:40
6پیاده سازی کاستوم هوک useInput00:16:48
یادگیری عمیق مطالب مربوط به Memoize در ریاکت
1مفهوم Memoize چیه؟ – آشنایی با هوک useMemo00:20:15
2پیاده سازی مینی پروژه برای درک عمیق useMemo00:20:03
3استفاده از useMemo در کامپوننت های Child00:11:45
4هوک useCallback چیه و کجاها استفاده میشه؟00:26:51
5memo چیست و چه فرقی با useMemo دارد؟00:12:48
6تفاوت useMemo و useCallback چیه؟ (سردرگمی اکثر توسعه دهندگان ریاکت)00:09:21
هوک useRef
1هوک useRef چیه و چه کاربردایی داره؟ – مثال عملی18:23
2پیاده سازی مثال عملی برای درک کاربرد دوم useRef00:10:25
3پیاده سازی تمرین rendersCount با useRef برای درک عمیق کاربرد useRef00:12:12
پروژه Pagination با ریاکت
1توسعه Template پروژه Pagination و ارسال ریکوئست به Api00:15:41
2محاسبه تعداد صفحات لازم برای نمایش Data22:23
3پیاده سازی منطق نهایی Pagination00:12:23
4setState یه عملکرد Async هست. حواست بهش باشه!00:11:26
5ریفکتور پروژه Pagination00:04:34
مفهوم HOC چیست؟ – پیاده سازی پروژه
1مفهوم Pure Function در جاوا اسکریپت چیست؟00:14:31
2مفهوم Higher Order Function در جاوا اسکریپت چیست؟00:11:40
3مفهوم HOC در ریاکت چیست؟ + مثال21:51
4پیاده سازی قابلیت toggle با HOC00:16:56
5پروژه Accordion با HOC – نحوه پیاده سازی00:06:27
6پیاده سازی پروژه Accordion00:10:33
7ریفکتور پروژه Accordion با HOC00:10:24
هوک useLayoutEffect
1هوک useLayoutEffect چیه و چه فرقی با useEffect داره؟ + مثال عملی00:17:31
کانسپت پیشرفتهای به اسم Profiler در ریاکت
1چطور از قابلیت Profiler ریاکت استفاده کنیم؟12:32
2استفاده راحتتر از Profiler به کمک React DevTools00:20:31
پروژه Restaurant Menu با قابلیت Filtering
1تشریح نحوه پیاده سازی پروژه00:10:44
2پیاده سازی کامپوننت Categories00:12:53
3پیاده سازی کامپوننت Menus00:08:55
4پیاده سازی قابلیت فیلترینگ منوها طبق Categories9:12
پکیج uuid + هوک useId (ریاکت 18)
1پکیج uuid چیه و چطور میشه ازش استفاده کرد؟00:12:19
2هوک useId چیه و چه مواقعی بهش نیاز داریم؟00:11:56
کار با Context Api
1مفهوم Context چیه؟5:55
2یه تمرین بدون Context – درک کاربرد8:44
3ریفکتور پروژه با Context – هوک useContext17:03
4تغییر ساختار ContextProvider00:08:55
5شروع پروژه Shopping Card با Context Api – کدنویسی فایل Custom.css00:05:36
6پیاده سازی Navbar Template00:09:21
7پیاده سازی Css های Navbar00:07:59
8پیاده سازی Product Category Template00:12:50
9پیاده سازی Product Category Css00:07:21
10پیاده سازی ماژول products و داینامیک سازی پروژه00:13:02
11پیاده سازی کامپوننت Toast برای نمایش نتیجه اضافه کردن محصول به سبد خرید00:07:51
12پیاده سازی کامپوننت سبد خرید در قالب SideBar00:10:16
13استایل دهی کامپوننت سبد خرید00:07:25
14ساخت کانتکست و نمایش محصولات فروشگاه از کانتکست00:10:34
15اتصال Toast به Context00:07:28
16نمایش یا عدم نمایش سبد خرید طبق اطلاعات Context00:05:54
17قابلیت اضافه کردن محصول به سبد خرید00:09:52
18پیاده سازی قابلیت نمایش تعداد محصولات در سبد خرید00:13:23
19Clean The Code00:06:44
پروژه Cms فارسی به شکل SPA با بکاند و Api های اختصاصی Nodejs + دیتابیس Mysql
1معرفی پروژه12:40
2اضافه کردن reset.css به پروژه00:04:40
3کدنویسی فایل custom.css و کانفیگ های اولیه00:06:55
4پیاده سازی Template کامپوننت Sidebar00:05:49
5استایل دهی کامپوننت Sidebar00:08:33
6استفاده از آیکون برای منو های Cms با پکیج react-icons00:06:18
7پیاده سازی Template کامپوننت Header00:09:52
8استایل دهی کامپوننت Header00:15:21
9راه اندازی Router پروژه00:12:23
10بهینه سازی ساختار Router با هوک useRoutes00:06:53
11پیاده سازی کامپوننت Error Box00:13:31
12پیاده سازی Template کامپوننت AddNewProduct00:08:27
13استایل دهی کامپوننت AddNewProduct00:10:37
14توسعه Template کامپوننت ProductsTable00:07:59
15استایل دهی کامپوننت ProductsTable00:08:03
16Portal چیه و چطور ازش استفاده کنیم؟00:11:07
17توسعه کامپوننت DeleteModal برای Confirm20:53
پروژه سبزلرن + ۳ نوع Cms + بکاند اختصاصی Nodejs
Redux
چطور و کجا دپلوی کنیم؟
نمونه کار، رزومه نویسی، مصاحبه، قرارداد و ….
سخن پایانی
صفر تا صد پکیج Json – Server (در آپدیت دوره اضافه خواهد شد)
مباحث Clean Code و Best Practice در ریاکت (در آپدیت دوره اضافه خواهد شد)
مشتقات Redux (در آپدیت دوره اضافه خواهد شد)
مباحث مربوط به سئو و SSR (در آپدیت دوره اضافه خواهد شد)
صفر تا صد Eslint (در آپدیت دوره اضافه خواهد شد)
کار با پکیج Lodash (در آپدیت دوره اضافه خواهد شد)
کار با پکیج Formik برای Form Handling در پروژه های ریاکتی (در آپدیت دوره اضافه خواهد شد)
کار با پکیج react-query (در آپدیت دوره اضافه خواهد شد)

محمد امین سعیدی راد
Front End & Back End Developerاول از همه برنامه نویسی اندروید رو شروع کردم و نزدیک به 2 سال با زبان جاوا اندروید کار میکردم .بعد تصمیم گرفتم در زمینه وب فعالیت داشته باشم.و...
نظرات
قوانین ثبت دیدگاه
- اگر نیاز به پشتیبانی دوره دارید از قسمت پرسش سوال در قسمت نمایش انلاین استفاده نمایید و سوالات مربوط به رفع اشکال تایید نخواهند شد
- دیدگاه های نامرتبط به دوره تایید نخواهد شد.
- سوالات مرتبط با رفع اشکال در این بخش تایید نخواهد شد.
- از درج دیدگاه های تکراری پرهیز نمایید.
سرفصل های دوره
برای مشاهده و یا دانلود دوره روی کلمه لینک کلیک کنید!
mo3ito( خریدار محصول )
سلام استاد جان
من بعضی وقت ها که کد ری اکت خودم رو مینویسم وقتی به مرورگرم نگاه میکنم تا نتیجه ی کارم رو ببینم مرورگر فقط به من یک صفحه ی کاملا سفید نشون میده در حالی کدم کاملا درسته به نظرتون مشکل از کجاست؟
ممنون میشم راهنمایی کنید.
محمدامین سعیدی راد
سلام عزیز.
اینطور مواقع احتمالا تو کدتون یه Logical Error وجود داره.
یعنی یه کدی که طبق استاندارد های ریاکت اشتباه نیست و کاملا درسته، اما اون چیزی که شما میخواین نیست.
کدتونو تو گروه پشتیبانی دوره تو تلگرام برام آپلود کنین تا چک کنم براتون.
a_rahban
با سلام و احترام، تشکر میکنم از تدریس خیلی خوبتون، لطفا در صورت امکان تخفیف بذارید روی دوره ی ری اکت ممنونم
محمدامین سعیدی راد
سلام عزیز.
شخصا دسترسی و تصمیم خاصی در زمینه کد تخفیف و قیمتگذاری در سبزلرن ندارم.
برای این موضوع لطفا از طریق تیکت واقع در پنل کاربریتون اقدام کنین تا پشتیبان های سبزلرن راهنمایی های لازم رو در اختیارتون قرار بدن.
pouria( خریدار محصول )
سلام و عرض ادب ، از این فایل دانلود همگانی ویدیو ها چجوری میتونم استفاده کنم ؟ برنامه خاصی هست که تمام لینک های داخل فایل txt رو دانلود کنه ؟
محمدامین سعیدی راد
سلام پوریا جان، بله.
شما همین فایل txt که داخلش لینک های دانلود جلسات قرار داده شدن رو داخل IDM قرار میدین تا به ترتیب و یکجا براتون دانلود شن 👌❤️
sepideee( خریدار محصول )
سلام استاد عزیز خسته نباشید یه دنیا ممنونم از اموزش های خوب و مفید شما من تازه ری اکت رو شروع کردم
صفحه ای رو طراحی کردم ممنون میشم نگاهی بندازید و ایراداتم رو بهم متذکر شوید
محمدامین سعیدی راد
سلام عزیز.
ممنونم از لطفتون و خوشحالم که دوره براتون مفید بوده.
به به، آره چرا که نه.
سورسکد پروژهای که پیاده سازی کردین رو تو گروه تلگرام ارسال کنین تا چک کنم براتون 👌❤️
sepideee( خریدار محصول )
ببخشید چطور میتونم به گروه تلگرام دسترسی داشته باشم؟
محمدامین سعیدی راد
اگه تو گروه پشتیبانی دوره تو تلگرام عضو نیستین، لطفا از طریق ارسال تیکت واقع در پنل کاربریتون اقدام کنین تا پشتیبانی سبزلرن لینک عضویت گروه رو براتون ارسال کنن 👌❤️
Reza( خریدار محصول )
سلام وقت بخیر – من پکیج react-bootstrap را نصب کردم و لی متاسفانه در خروجی برنامه ام اعمال نمیشه لطفا میشه راهنمایی نمایید مشکل از کجاست؟
محمدامین سعیدی راد
سلام عزیز.
لطفا سورسکدتون رو تو گروه پشتیبانی ارسال کنین تا چک کنم براتون 👌❤️
Mr1999( خریدار محصول )
سلام استاد وقتتون بخیر؛
در رابطه با babel و webpack هم آموزش میدین؟ چون توی اکثر آگهی های استخدامی دیدم این موارد رو کارفرما ها میخوان!
محمدامین سعیدی راد
سلام عزیز.
راستش بحث Webpack رو نه، تو این دوره نخواهیم داشت. در آینده برای Webpack دوره جداگانهای خواهیم داشت.
بحث Babel رو هم در نظر نداشتم تو این دوره راجبش صحبت مفصلی بشه، اما بخاطر این کامنت شما فصل Babel رو به دوره اضافه میکنم و در آپدیت های دوره مبحث Babel رو هم خواهیم داشت 💪❤️
Mr1999( خریدار محصول )
دمتووووون واقعا گرم استاد که اینقدر به فکر دانشجوهاتونین، مشتاقانه منتظر آموزش های بیشتر و خفنتون هستم😍❤
علی( خریدار محصول )
سلام وقت بخیر جناب سعیدی خدا قوت این دوره از” پروژه سبزلرن + ۳ نوع Cms + بکاند اختصاصی Nodejs” به بعد مباحثش خالی از فیلمه کی اپلود میشن فیلم ها
محمدامین سعیدی راد
سلام علی جان.
سعی میکنم کل مطالب دوره رو (بجز آپدیتها) تا انتهای شهریور الی انتهای مهر ماه به اتمام برسونم.
بعد از اتمام دوره (سخن پایانی) هر ماه یه آپدیت در قالب فصل جدید برای دوره خواهیم داشت 👌❤️
sogol( خریدار محصول )
سلام استاد ، در این دوره ریداکس رو هم آموزش میدین؟
محمدامین سعیدی راد
سلام عزیز.
بله، یه فصل کامل برای ریداکس و مشتقاتش خواهیم داشت 💪❤
ehsan_md( خریدار محصول )
سلام خدمت استاد عزیز من تو قسمت پرسش و پاسخ یه پروژه آپلود کردم که یه مشکلی داره داخلش توضیح دادم میشه لطفا جواب بدین . ممنونم
محمدامین سعیدی راد
سلام احسان جان، چشم.
ehsan_md( خریدار محصول )
چشمت بی بلا ستووووون
pouria( خریدار محصول )
سلام وقت بخیر ، امکانش هست توضیحی کوتاه درباره ی typescript بدید ؟ آیا یادگیریش مهمه؟
من الان دارم جاوا اسکریپت رو یاد میگیرم و حجم مطالب همینجوری خیلی زیاد بود به نظرم که تازه با واژه typescript آشنا شدم ☹
محمدامین سعیدی راد
سلام عزیز.
به زبون ساده تایپ اسکریپت یه زبون برنامه نویسیه که توسط مایکروسافت ساخته شده و چند قابلیت جدید و کاربردی به سینتکس جاوا اسکریپت اضافه کرده.
1. اگه جاوا اسکریپت رو بخوبی یاد گرفته و بلد باشین، یادگیری TS و کار با اون کار سختی نیست.
2. در کامیونیتی فعلی یادگیری تایپ اسکریپت واسه تمام برنامه نویسانی که با جاوا اسکریپت سر و کار دارن ضروریه.
3. بدون یادگیری تایپ اسکریپت هم میتونین ریاکت، ویو و … رو یاد بگیرین و باهاشون کار کنین اما برای پروژه های بزرگ مقیاس بهتره از TS استفاده کنین.
محمدامین سعیدی راد
سلام
محمدامین سعیدی راد
سلامممم
ehsan_md( خریدار محصول )
سلام استاد خسته نباشید تو اجرای پروژه Landing_Page ویدیو 30 از قسمت های Main Concept زمانی که Header رو به App import میکنم همه محتویات داخلش نمایش داده نمیشه منظورم NavBar هست که داخل Header import کردیم
محمدامین سعیدی راد
سلام احسان جان.
قاعدتا جایی از پروژه یه مشکلی داره که این اتفاق میفته.
سورسکد پروژت رو در قالب فایل Zip تو قسمت پرسش و پاسخ دوره برام آپلود کن تا چک کنم 👌❤
ehsan_md( خریدار محصول )
سلام استاد خسته نباشید
این خط زیر که یهسری قایل رو امن نیست و مشکل دارن داستانش چیه مهم باید حتما فیکس بشه یا مشکل ایجاد میکنه ؟
÷÷÷ 68 vulnerabilities (12 low, 28 moderate, 25 high, 3 critical) ÷÷÷
برای پروسه نصب پکیج bootstrap هست
محمدامین سعیدی راد
سلام عزیز.
این موضوع تو دوره رایگان NPM گفته شده، لطفا برای یادگیری عمیق Npm به دوره مربوطه مراجعه کنین.
این موضوع هیچ مشکلی بوجود نمیاره، خیالتون از این بابت راحت باشه و از پکیج مورد نظرتون استفاده کنین 👌❤️
ehsan_md( خریدار محصول )
ممنونم
unes( خریدار محصول )
سلام خسته نباشید استاد جان یه سوال برا کسی ک بوت کار نمیکنه فصل دو رو چیکارکنیم من تیلویند کار میکنم با بوت استرپ ی چوری ارتباط نمیگیرم باید برای فصل دو بوت بلد باشیم ؟؟؟
محمدامین سعیدی راد
سلام یونس جان.
نه، هیچ اجباری به یادگیری بوت استرپ نیست. میتونی به جاش از تیلویند استفاده کنی و هر Ui که میخوای رو با تیلویند توسعه بدی 👌❤️
sam.soheil( خریدار محصول )
سطح تدریسreactjs ، خیلی خیلی خیلی خوب مثل دوره جاوا اسکریپت به هر دانشجو پیشنهاد میشه . تنها یک خواهش خیلی مهم لطفا پروژه های خیلی خیلی بیشتر مثل دوره جاوا اسکریپت انجام بدین . سپاس و اراده بینهایت 🙏❤️❤️❤️❤️
محمدامین سعیدی راد
سلام عزیز.
ممنونم از لطف شما و خوشحالم که دوره براتون مفید بوده.
دقیقا به خاطر درخواست شما یک پروژه Cms فارسی (RTL) با api های اختصاصی nodejs و دیتابیس mysql به دوره اضافه میکنم که بعد از فصل Context پیاده سازیش میکنیم 💪❤️
sam.soheil( خریدار محصول )
عالی . سپاس❤️❤️