دوره آموزشی صفر تا صد ری اکت React
32:19:00
70 جلسه
سطح: مقدماتی
تومان
950,000
راد اسکالر | دوره آموزشی صفر تا صد ری اکت React

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

در این دوره آموزشی یاد میگیریم که با استفاده از محبوب ترین فریم ورک فرانت اند، ری اکت، صفحات و وب سایت بروز، سریع و توسعه پذیر درست کنیم. React به دلیل سرعت، تطبیق پذیری و راحتی توسعه، فریم ورک استاندارد توسعه وب بشمار می رود.

چرا ری اکت React ؟

اگر به لیست منتشر شده توسط Stack Overflow برای محبوب ترین تکنولوژی وب نگاهی داشته باشیم، متوجه می شویم که در 3 رتبه اول React, Next و Node قرار دارند. Next فریم ورک ساخته شده بر روی React است؛ به این معنی که 2 از 3 تکنولوژی وب یا خود React است یا تکنولوژی وابسته به آن! دلیل این محبوبیت می تواند به علت سادگی یادگیری، بهینگی، سرعت اجرا و مدیریت آسان باشد و تیم توسعه دهندگان آن تشکیل شده از متخصصان Facebook و Vercel در این موضوع بی تاثیر نیستند.

چه شرکت هایی از React استفاده می کنند؟

در حال حاظر شرکت هایی مانند Facebook, Instagram, Twitch, Netflix رابط های کاربری خود را با اسفاده از React ساخته اند.

بازار کار React چطور است؟

اگر به لیست آگهی های استخدام ری اکت در جابینجا نگاهی داشته باشیم متوجه بازار کار بسیار عالی React میشویم

کاربرد های React:

  • ساخت وب سایت های تک صفحه ای (SPA)
  • صفحه های داینامیک که بدون دخالت کاربر محتوا خود را بروز می کنند
  • وب سایت هایی که رابط کاربری پیچیده مانند فروشگاه ها که نیاز دارند با رفتار های مختلف کاربر هماهنگ باشند
  • ری اکت امکان توسعه نرم افزار موبایل با استفاده از React native را ممکن می سازد
  • در صورتی که می خواهیم از NextJS که بر روی React بنا شده است و امکانات زیادی را اضافه می کند استفاده کنیم، لازم است که در ابتدا با React آشنا باشیم

در این دوره چی یاد میگیریم؟

پایه: Components, Props, JSX و State
کار کردن با فرم ها و Event ها
اعتبار سنجی ورودی های کاربر
مباحث پیچیده تر: Context و هوک ها
مدیریت State گلوبال با استفاده از Redux و ترکیب State, Reducer با Context API
React Router جهت ساخت SPA ها
TypeScript جهت بهبود روند توسعه
انجام پروژه فروشگاه اینترنتی با استفاده از مباحثی که یاد گرفتیم
پیاده سازی در سرور نهایی
1
مقدمه: توضیحات دوره و نصب پیش نیاز ها
رایگان
قسمت یک | 17 دقیقه
مشاهده آنلاین
2
کار کردن با component ها
رایگان
قسمت دو | 18 دقیقه
مشاهده آنلاین
3
کار کردن با JSX
رایگان
قسمت سه | 9 دقیقه
مشاهده آنلاین
4
انتقال داده به component ها با استفاده از props
رایگان
قسمت چهار | 26 دقیقه
مشاهده آنلاین
5
نمایش شرطی خروجی در component ها
رایگان
قسمت پنج | 10 دقیقه
مشاهده آنلاین
6
نمایش و چاپ آرایه ها
رایگان
قسمت شش | 13 دقیقه
مشاهده آنلاین
7
خالص نگه داشتن component ها
رایگان
قسمت هفت | 6 دقیقه
مشاهده آنلاین
8
کار کردن با event ها در react و JSX
قسمت هشت | 19 دقیقه
9
حافظه component: هوک useState
قسمت نه | 11 دقیقه
10
به‌روزرسانی component چگونه اتفاق می افتد؟
قسمت ده | 12 دقیقه
11
مدیریت object ها در state
قسمت یازده | 15 دقیقه
12
مدیریت آرایه ها در state
قسمت دوازده | 30 دقیقه
13
اشتراک state بین component ها
قسمت سیزده | 9 دقیقه
14
وابستگی state به جایگاه component در درخت DOM
قسمت چهارده | 12 دقیقه
15
استفاده از context برای انتقال داده به عمق component ها
قسمت پانزده | 19 دقیقه
16
انتقال منطق state به reducer
قسمت شانزده | 12 دقیقه
17
ترکیب reducer و context
قسمت هفده | 7 دقیقه
18
مدیریت داده و تغییر در DOM با استفاده از ref
قسمت هجده | 19 دقیقه
19
همگام سازی با استفاده از effect
قسمت نوزده | 34 دقیقه
20
کار کردن با API ها در react
قسمت بیست | 48 دقیقه
21
اعتبار سنجی داده های ورودی
قسمت بیست و یک | 69 دقیقه
22
کار کردن با form ها: هوک useActionState و useFormStatus
قسمت بیست و دو | 51 دقیقه
23
هوک های اختصاصی
قسمت بیست و سه | 22 دقیقه
24
هوک ها: useCallback و memo
قسمت بیست و چهار | 13 دقیقه
25
هوک ها: react dev tools و useDebugValue و useId
قسمت بیست و پنج | 9 دقیقه
26
هوک ها: useMemo و useDeferredValue
قسمت بیست و شش | 20 دقیقه
27
هوک ها: useImperativeHandle
قسمت بیست و هفت | 8 دقیقه
28
هوک ها: useInsertionEffect و useLayoutEffect
قسمت بیست و هشت | 12 دقیقه
29
هوک ها: useTransition
قسمت بیست و نه | 12 دقیقه
30
هوک ها: useOptimistic
قسمت سی | 19 دقیقه
31
هوک ها: useSyncExternalStore
قسمت سی و یک | 10 دقیقه
32
مدیریت state با استفاده از Redux
قسمت سی و دو | 17 دقیقه
33
component های پیش فرض: Profiler ,Fragment ,StrictMode و Suspense به همراه توابع use و lazy
قسمت سی و سه | 22 دقیقه
34
مدیریت خطا component ها با استفاده از ErrorBoundary
قسمت سی و چهار | 9 دقیقه
35
بهبود سرعت اجرا با استفاده از react compiler
قسمت سی و پنج | 21 دقیقه
36
بحث های امنیتی مرتبط با react
قسمت سی و شش | 20 دقیقه
37
react router: مقدمه
قسمت سی و هفت | 25 دقیقه
38
react router: مسیر یابی
قسمت سی و هشت | 33 دقیقه
39
react router: ماژول صفحات
قسمت سی و نه | 33 دقیقه
40
مدیریت style ها و کار کردن با CSS در react
قسمت چهل | 12 دقیقه
41
react router: انتقال بین صفحات
قسمت چهل و یک | 62 دقیقه
42
react router: کار کردن با فرم ها و actions
قسمت چهل و دو | 84 دقیقه
43
react router: فرم های get و query parameters
قسمت چهل و سه | 13 دقیقه
44
react router: رابط کاربری در حالت انتظار
قسمت چهل و چهار | 26 دقیقه
45
react router: کنترل خطا
قسمت چهل و پنج | 17 دقیقه
46
پروژه: مقدمه و ایجاد ساختار
قسمت چهل و شش | 104 دقیقه
47
پروژه: صفحه اصلی
قسمت چهل و هفت | 73 دقیقه
48
پروژه: صفحه ورود + loading indicator
قسمت چهل و هشت | 91 دقیقه
49
پروژه: صفحه ثبت نام
قسمت چهل و نه | 30 دقیقه
50
پروژه: افزودن context برای مدیریت جایگاه فعلی
قسمت پنجاه | 28 دقیقه
51
پروژه: صفحه کاربری
قسمت پنجاه و یک | 34 دقیقه
52
پروژه: افزودن context کاربر و محدود سازی دسترسی به صفحه کاربری
قسمت پنجاه و دو | 44 دقیقه
53
پروژه: خروج از حساب کاربری
قسمت پنجاه و سه | 29 دقیقه
54
پروژه: صفحه آثار
قسمت پنجاه و چهار | 27 دقیقه
55
پروژه: گزینش آثار
قسمت پنجاه و پنج | 53 دقیقه
56
پروژه: صفحه تکی اثر
قسمت پنجاه و شش | 20 دقیقه
57
پروژه: بخش مدیریت
قسمت پنجاه و هفت | 17 دقیقه
58
پروژه: بخش مدیریت، محصول جدید
قسمت پنجاه و هشت | 43 دقیقه
59
پروژه: سبد خرید
قسمت پنجاه و نه | 79 دقیقه
60
پروژه: ثبت سفارش
قسمت شصت | 73 دقیقه
61
پروژه: پردازش سفارش
قسمت شصت و یک | 37 دقیقه
62
پروژه: صفحات تماس و درباره ما
قسمت شصت و دو | 13 دقیقه
63
پروژه: صفحات خطا
قسمت شصت و سه | 64 دقیقه
64
پروژه: آیکون ها و توضیحات تکمیلی
قسمت شصت و چهار | 18 دقیقه
65
پروژه: طراحی و استفاده از test ها در React
قسمت شصت و پنج | 19 دقیقه
66
پروژه: خروجی production و اجرا بر روی سرور
قسمت شصت و شش | 40 دقیقه
67
پروژه: CDN
قسمت شصت و هفت | 18 دقیقه
68
API ساده اولیه
فایل
پوشه را دریافت کرده و با دستور npm install و npm run dev اجرا کنید
قسمت شصت و هشت
69
API پروژه نهایی
فایل
پوشه را دریافت کرده و با دستور npm install و npm run dev اجرا کنید. کاربر test2@test.com با کلمه عبور ۱۱۱۱۱۱۱۱ دسترسی مدیر دارد. فایل .env در صورت نیاز ویرایش کنید
قسمت شصت و نه
70
پروژه نهایی
فایل
پوشه را دریافت کرده و با دستور npm install و npm run dev اجرا کنید. فایل .env در صورت نیاز ویرایش کنید
قسمت هفتاد