قیمت این دوره: 299,000 119,600 تومان
  • مدرس دوره : فرزاد معصومی
  • تعداد ویدیوها : 111 ویدیو
  • مدت زمان دوره : 20:52:00
  • سطح دوره : متوسط
  • وضعیت دوره : در حال برگزاری
  • تاریخ آخرین بروزرسانی : 1401/07/09
ثبتـــ نام در این دوره
آموزش ساخت 25 پروژه با ReactJS

آموزش ساخت 25 پروژه با ReactJS

سلام دوستان خوبم

امیدوارم حالتون خوب باشه ما در این دوره آموزشی به ساخت 25 پروژه کاربردی برای کتابخانه react js میپردازیم.

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

مواردی که از react js باقی میمونه قطعا در آپدیت های دوره اضافه میشه

 

سرفصل های دوره:

فصل اول دوره      

راه اندازی پیش نیازها و توضیحات دوره

دموی دوره 

توضیحات دوره 

بررسی ری اکت 

نصب نود جی اس

نصب ری اکت و ادیتور 

تغییر ورژن 18 به 17 و بالعکس

تنظیم قالب اصلی پروژها 

 

فصل دوم دوره

ساخت پروژه های ابتدایی

نمایش و مخفی سازی پسوورد 

ساخت accordion

ساخت لورم ساز

ساخت navbar

ساخت اسلایدشو

ساخت scroll indicator

جستجوی عکس unsplash

 ساخت فرم تماس

ساخت لایت و دارک مود

ساخت سایدبار

ساخت لیست کتاب ها

ساخت generator رنگ

ساخت بخش فیلتر محصولات

ساخت لیست کارها

ساخت آپلودر عکس

ساخت اسلایدر

ساخت password stronger

ساخت فروشگاه

دانلود جدول pdf

smooth scroll

 

فصل سوم

 ساخت پروژه های متوسطه

 ساخت لندینگ پیج

ساخت سرچ لیست

ساخت شاپ با Redux

ساخت شاب با Context Api

ساخت بلاگ فول استک

 

 



پیش نیاز های دوره :

  1. آشنایی مبتدی با React js
  2. آشنایی با HTML, CSS
  3. آشنایی با Ecmascript به صورت مختصر


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

مدت زمان دوره 20:52:00
  • لطفا در صورت اقدام به دانلود تا انتها فرایند دانلود ، این صفحه را باز نگاه دارید.

1
  • دموی دوره

00:26:51

دموی دوره

2
  • توضیحات دوره

00:02:27

در این ویدیو توضیحاتی در مورد دوره میدیم

3
  • بررسی وب سایت react و توضیحات راجب اون

00:08:42

در این ویدیو کمی وب سایت React رو بررسی میکنیم و توضیحاتی که برای ما قرار داده رو توصیف میکنیم

4
  • نصب node js

00:06:33

در این ویدیو node js خودمون رو نصب میکنیم

5
  • نصب react js و vscode و اکستنشن ها

00:06:13

در این ویدیو react js و ادیتور و اکستنشن های اون رو نصب میکنیم

6
  • تغییر ورژن 18 به 17 در react و بالعکس

00:12:13

در این ویدیو یاد میگیرین چجوری ورژن ری اکت اپلیکیشنتون رو از 18 به 17 و همچنین از 17 به 18 تغییر بدین

7
  • تنظیم template اصلی پروژه ها

00:11:50

در این ویدیو template اصلی همه پروژه هارو میسازیم

8
  • تکمیل template پروژه های دوره

00:07:49

در این ویدیو template پروژه های خودمون رو تکمیل میکنیم

9
  • پروژه اول (نمایش و مخفی سازی پسوورد) - طراحی ابتدایی پروژه

00:07:23

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

10
  • پروژه اول - طراحی ابتدایی پروژه

00:09:30

در این ویدیو توضیحاتی راجب پروژه میدیم

11
  • پایان پروژه اول - پویا سازی

00:08:44

در این ویدیو پروژه اول به پایان میرسه

12
  • پروژه دوم (ساخت accordion) - راه اندازی پروژه

00:09:48

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

13
  • پروژه دوم - طراحی پروژه

00:10:42

در این ویدیو ساخت پروژه دوم رو با هم ادامه میدیم

14
  • پروژه دوم - تکمیل پروژه

00:13:31

در این ویدیو پروژه دوم خودمون رو تکمیل میکنیم

15
  • پروژه سوم - (ساخت لورم ساز) - طراحی ابتدایی

00:09:26

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

16
  • پروژه سوم - هندل فرم و نمایش اطلاعات

00:10:02

در این ویدیو روی فرم خودمون همچنین نمایش اطلاعات دیتا کار میکنیم

17
  • پروژه سوم - تکمیل پروژه

  • نمایش آنلاین این بخش رایگان است
00:06:39

در این ویدیو پروژه سوم رو با هم تکمیل میکنیم

18
  • پروژه چهارم (ساخت navbar) شروع به طراحی

00:11:57

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

19
  • پروژه چهارم - استایل دهی

00:11:54

در این ویدیو استایل های پروژه رو تکمیل میکنیم

20
  • پروژه چهارم - ادامه طراحی کار

00:10:41

در این ویدیو طراحی پروژه رو با هم ادامه میدیم

21
  • پروژه چهارم - تکمیل پروژه

00:15:31

در این ویدیو پروژه چهارم رو به پایان میرسونیم

22
  • پروژه پنجم (ساخت اسلایدشو) - طراحی پروژه

  • نمایش آنلاین این بخش رایگان است
00:12:50

در این ویدیو شروع به طراحی پروژه پنجم خودمون میکنیم

23
  • پروژه پنجم - پویا سازی اسلایدشو

00:09:38

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

24
  • پروژه پنجم - حل مشکل اسلایدشو و تکمیل پروژه

00:09:40

در این ویدیو پروژه پنجم رو با هم تکمیل میکنیم

25
  • پروژه ششم (ساخت scroll indicator) - طراحی پروژه

00:09:18

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

26
  • پروژه ششم - تکمیل پروژه

00:12:00

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

27
  • پروژه هفتم (جستجو عکس unsplash) - طراحی پروژه

00:09:37

در این ویدیو پروژه هفتم خودمون رو شروع به طراحی میکنیم

28
  • پروژه هفتم - استفاده از api

00:12:25

در این ویدیو از api استفاده میکنیم

29
  • پروژه هفتم - تکمیل پروژه

00:12:47

در این ویدیو پروژه هفتم به پایان میرسه

30
  • پروژه هشتم (فرم تماس) - طراحی پروژه

00:12:35

توی این پروژه پروژه هشتم که یک فرم تماس هست رو با هم شروع به طراحی و ساخت میکنیم

31
  • پروژه هشتم - تنظیمات ارسال پیام

00:12:52

در این ویدیو روی تنظیمات ارسال پیام کار میکنیم

32
  • پروژه هشتم - تنظیمات پاسخ - پایان پروژه

00:13:47

در این ویدیو پروژه هشتم رو به پایان میرسونیم

33
  • پروژه نهم (لایت و دارک مود) - شروع به طراحی

00:09:29

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

34
  • پروژه نهم - ادامه طراحی کار

00:12:01

در این ویدیو طراحی خودمون رو ادامه میدیم

35
  • پروژه نهم - تکمیل لایت و دارک مود

00:10:58

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

36
  • پروژه نهم - ذخیره سازی در localstorage - تکمیل پروژه

00:15:56

در این ویدیو اطلاعات خودمون رو در localstorage ذخیره میکنیم

37
  • پروژه دهم (ساخت سایدبار) - شروع به طراحی

00:10:12

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

38
  • پروژه دهم - طراحی پروژه

00:10:35

در این ویدیو طراحی پروژه رو جلو میبریم

39
  • پروژه دهم - راه اندازی context

00:11:37

در این ویدیو context رو برای این پروژه راه اندازی میکنیم

40
  • پروژه دهم - تکمیل پروژه

00:13:56

در این ویدیو پروژه دهم خودمون رو تکمیل میکنیم

41
  • پروژه یازدهم (لیست کتاب ها) - شروع به طراحی

00:13:58

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

42
  • پروژه یازدهم - ذخیره کتاب در لیست

00:14:59

در این ویدیو روی ذخیره کتاب در لیست خودمون کار میکنیم

43
  • پروژه یازدهم - نمایش اطلاعات در لیست کتاب ها

00:11:57

نمایش اطلاعات در لیست کتاب ها

44
  • پروژه یازدهم - حذف کتاب از لیست و localstorage - تکمیل پروژه

00:14:58

در این ویدیو پروژه پروژه یازدهم به پایان میرسه

45
  • پروژه دوازدهم (ساخت generator رنگ) - طراحی پروژه

00:11:03

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

46
  • پروژه دوازدهم - تکمیل پروژه

00:13:46

در این ویدیو پروژه یازدهم ما به پایان میرسه

47
  • پروژه سیزدهم (فیلتر محصولات) - شروع به طراحی

00:12:47

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

48
  • پروژه سیزدهم - ساخت بخش فیلتر محصولات

00:10:20

در این ویدیو بخش فیلتر محصولات رو با هم میسازیم

49
  • پروژه سیزدهم - داینامیک سازی فیلترها - تکمیل پروژه

00:15:22

در این ویدیو پروژه سیزدهم به پایان میرسه

50
  • پروژه چهاردهم (لیست کارها) - طراحی پروژه

00:12:22

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

51
  • پروژه چهاردهم - ادامه طراحی و مدیریت input

00:15:05

در این ویدیو ادامه ساخت پروژه چهاردهم رو میریم

52
  • پروژه چهاردهم - ادامه طراحی کار

00:13:57

در این ویدیو ادامه ساخت پروژه چهاردهم رو میدیم

53
  • پروژه چهاردهم - حذف و تایید یک کار

00:14:31

در این ویدیو روی حذف و تایید یک کار پروژه رو ادامه میدیم

54
  • پروژه چهاردهم - ادامه ساخت بخش حذف و تایید کار

00:14:15

در این ویدیو ادامه کار رو میریم

55
  • پروژه چهاردهم - اعتبارسنجی

00:09:33

در این ویدیو فرم خودمون رو اعتبارسنجی میکنیم

56
  • پروژه چهاردهم - تکمیل پروژه

  • نمایش آنلاین این بخش رایگان است
00:09:04

در این ویدیو پروژه چهاردهم به پایان میرسه

57
  • پروژه پانزدهم (ساخت آپلودر عکس) - شروع به نصب لاراول

00:16:27

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

58
  • پروژه پانزدهم - طراحی progressbar

00:09:58

در این ویدیو ادامه پروژه رو با هم طراحی میکنیم

59
  • پروژه پانزدهم - مدیریت ورودی

00:11:26

در این ویدیو ورودی خودمون رو مدیریت میکنیم

60
  • پروژه پانزدهم - آپلود عکس

00:12:23

در این ویدیو یاد میگیریم چجوری عکس خودمون رو آپلود کنیم

61
  • پروژه پانزدهم - پویا سازی progressbar

00:12:27

در این ویدیو progressbar رو پویا سازی میکنیم

62
  • پروژه پانزدهم - پویا سازی progressbar

  • نمایش آنلاین این بخش رایگان است
00:12:58

در این ویدیو پروژه پانزدهم خودمون رو تکمیل میکنیم

63
  • پروژه پانزدهم - مسیر دهی - تکمیل پروژه

00:12:04

در این ویدیو پروژه پانزدهم خودمون رو تکمیل میکنیم

64
  • پروژه شانزدهم (ساخت اسلایدر ) - طراحی پروژه

00:09:51

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

65
  • پروژه شانزدهم - طراحی پروژه

00:11:58

در این ویدیو طراحی پروژه رو ادامه میدیم

66
  • پروژه شانزدهم - ادامه ساخت پروژه

00:14:18

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

67
  • پروژه شانزدهم - تکمیل دکمه بعدی و قبلی

00:10:20

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

68
  • پروژه شانزدهم - تکمیل پروژه

00:05:03

در این ویدیو پروژه شانزدهم ما به پایان میرسه

69
  • پروژه هفدهم (password stronger) - شروع به طراحی

00:08:46

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

70
  • پروژه هفدهم - ادامه ساخت پروژه

00:12:50

در این ویدیو ادامه ساخت پروژه رو با هم میریم

71
  • پروژه هفدهم - تکمیل پروژه

00:04:35

در این ویدیو پروژه هفدهم خودمون رو تکمیل میکنیم

72
  • پروژه هجدهم (ساخت فروشگاه) - شروع به طراحی

00:10:24

در این ویدیو شروع با ساخت یک فروشگاه ساده میکنیم

73
  • پروژه هجدهم - ادامه طراحی کار

00:09:26

در این ویدیو طراحی پروژه رو ادامه میدیم

74
  • پروژه هجدهم - استایل دهی پروژه

00:11:11

در این ویدیو پروژه خودمون رو استایل دهی میکنیم

75
  • پروژه هجدهم - ادامه استایل دهی

00:13:36

در این ویدیو ادامه استایل دهی پروژه رو انجام میدیم

76
  • پروژه هجدهم - نمایش محصولات به صورت پویا

00:10:10

در این ویدیو محصولات خودمون رو به صورت پویا به نمایش میزاریم

77
  • پروژه هجدهم -ساخت فیلتر جدیدترین و قدیمی ترین محصولات

00:13:56

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

78
  • پروژه هجدهم - ساخت فیلتر برندها

00:12:12

در این ویدیو روی فیلتر برندها کار میکنیم

79
  • پروژه هجدهم - افزودن محصول به سبد خرید

00:11:10

در این ویدیو محصولات خودمون رو میفرستیم برای سبد خرید

80
  • پروژه هجدهم - تکمیل افزودن به سبد خرید

00:10:17

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

81
  • پروژه هجدهم - نمایش محصولات سبد خرید

00:11:21

در این ویدیو محصولات در سبد خرید رو به نمایش میزاریم و روی تعداد اونا کار میکنیم

82
  • پروژه هجدهم - نمایش قیمت و سه رقم کردن قیمت

00:15:39

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

83
  • پروژه هجدهم - انیمیشن پروژه - تکمیل پروژه

00:09:17

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

84
  • پروژه نوزدهم (دانلود جدول pdf) - شروع به طراحی

00:10:12

در این پروژه ما میخوایم یک جدول pdf رو دانلود کنیم

85
  • پروژه نوزدهم - تکمیل پروژه

00:09:06

در این ویدیو پروژه نوزدهم به پایان میرسه

86
  • پروژه بیستم (smooth scroll) - طراحی پروژه

00:10:31

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

87
  • پروژه بیستم - تکمیل پروژه

00:08:05

در این ویدیو این پروژه به پایان میرسه

88
  • پروژه بیست و یکم (landing page) - آماده سازی پیش نیازهای قالب

00:13:49

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

89
  • پروژه بیست و یکم - آماده سازی پیش نیازهای قالب

00:10:19

در این ویدیو ادامه روند آماده سازی پیش نیازهای قالب رو میریم

90
  • پروژه بیست و یکم - طراحی navbar

00:10:55

در این ویدیو شروع به طراحی navbar خودمون میکنیم

91
  • پروژه بیست و یکم - طراحی navbar

00:12:30

در این ویدیو ادامه طراحی بخش navbar رو میریم

92
  • پروژه بیست و یکم - طراحی navbar

00:10:48

در این ویدیو طراحی navbar رو ادامه میدیم

93
  • پروژه بیست و یکم - تکمیل navbar

00:07:20

در این ویدیو بخش navbar قالب رو به پایان میرسونیم

94
  • پروژه بیست و یکم - طراحی هدر

00:11:39

در این ویدیو شروع به طراحی بخش هدر میکنیم

95
  • پروژه بیست و یکم - طراحی هدر

00:11:05

در این ویدیو طراحی هدر رو ادامه میدیم

96
  • پروژه بیست و یکم - تکمیل بخش هدر

00:12:27

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

97
  • پروژه بیست و یکم - طراحی feature

00:13:15

در این ویدیو بخش بعدی قالب رو شروع به طراحی میکنیم

98
  • پروژه بیست و یکم - طراحی feature

00:11:25

در این ویدیو طراحی بخش feature رو ادامه میدیم

99
  • پروژه بیست و یکم - تکمیل feature و طراحی download

00:12:01

در این ویدیو بخش feature طراحیش به پایان میرسه و طراحی بخش download رو شروع میکنیم

100
  • پروژه بیست و یکم - تکمیل download و طراحی subscribe

00:09:12

در این ویدیو طراحی قالب رو ادامه میدیم

101
  • پروژه بیست و یکم - طراحی بخش subscribe

00:10:06

در این ویدیو طراحی بخش سابسکرایب رو ادامه میدیم

102
  • پروژه بیست و یکم - تکمیل subscribe و طراحی faq

00:12:08

در این ویدیو طراحی بخش subscribe به پایان میرسه و طراحی بخش faq رو شروع میکنیم

103
  • پروژه بیست و یکم - طراحی faq

00:12:15

در این ویدیو طراحی بخش faq رو ادامه میدیم

104
  • پروژه بیست و یکم - تکمیل faq

00:09:07

در این ویدیو بخش faq رو با هم تکمیل میکنیم

105
  • پروژه بیست و یکم - طراحی فوتر

00:09:49

در این ویدیو شروع به طراحی فوتر میکنیم

106
  • پروژه بیست و یکم - تکمیل فوتر

00:06:37

در این ویدیو فوتر خودمون رو تکمیل میکنیم

107
  • پروژه بیست و یکم - انیمیشن پروژه و تکمیل پروژه

00:11:53

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

108
  • پروژه بیست و دوم - ساخت جستجوی لیست - راه اندازی کار

00:10:37

توی این ویدیو میریم سراغ پروژه بیست و دوم

109
  • پروژه بیست و دوم - تکمیل بخش ابتدایی

00:09:42

توی این بخش جستجو رو به صورت ابتدایی تکمیل میکنیم

110
  • پروژه بیست و دوم - بهینه سازی جستجو

00:09:29

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

111
  • پروژه بیست و دوم - اتصال به api

00:13:26

در این ویدیو به api متصل میشیم

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

مشاهده همه دوره ها

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

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