React و Redux یکی از محبوب‌ترین و پرکاربردترین ابزارهای توسعه نرم افزار هستند. این دو کتابخانه با زبان برنامه نویسی جاوااسکریپت ساخته شده‌اند و برای توسعه فرانت‌اند استفاده می‌شوند.
قسمت رابط کاربری یک نرم افزار می‌تواند پیچیدگی‌های زیادی داشته باشد. به عنوان مثال، ممکن است المنت‌های زیادی بعد از درخواست‌های HTTP به سرور دچار تغییر شوند. در چنین مواردی کتابخانه React به عنوان یک راه حل در نظر گرفته می‌شود. معماری این کتابخانه به گونه‌ای توسعه داده شده که بتواند تغییرات قسمت فرانت‌اند را با سرعت بیشتری پیاده سازی کند. به همین دلیل React به یکی از ابزارهای محبوب توسعه فرانت‌اند برای بسیاری از شرکت‌های نرم افزاری تبدیل شده است. محبوبیت بالای React باعث شده است تا شرکت‌های بزرگی همانند Instagram ،Netflix ،Uber و … از آن برای ایجاد و توسعه سایت‌های خود استفاده کنند. همینطور استارت‌اپ‌های اسنپ، دیوار، سازیتو و … نیز از نمونه‌های موفق داخلی هستند که از این ابزار استفاده کرده‌اند.
بر اساس نظرسنجی منتشر شده از برنامه نویس‌ها در وب‌سایت Stackoverflow، که میزان محبوبیت یک تکنولوژی را مورد بررسی قرار می‌دهد، در سال ۲۰۱۹ کتابخانه React به عنوان یکی از تکنولوژی‌های کاربردی انتخاب شده بود. این روند رو به رشد و صعودی ادامه داشت تا نهایتا در سال ۲۰۲۱، کتابخانه React به عنوان محبوب‌ترین کتابخانه انتخاب شود. صعودی بودن روند حرکت یک تکنولوژی، به معنی توسعه بازار کار آن نیز خواهد بود.
در کنار React از Redux می‌توان به عنوان یکی از ابزارهای مکمل نام برد. این کتابخانه زمانی استفاده می‌شود که رابط کاربری با پیچیدگی‌های بیشتری مواجه باشد. به این صورت این دو ابزار در کنار هم باعث می‌شوند تا فرآیند توسعه و نگهداری نرم افزارهای سطح متوسط و بزرگ بسیار ساده‌تر و منطقی‌تر انجام شود.
مهم‌ترین پیش‌نیاز این دوره، درک مفاهیم زبان برنامه نویسی جاوااسکریپت است. به این دلیل که React و Redux هر دو با این زبان توسعه داده شده‌اند. برای یادگیری دقیق جاوااسکریپت، دوره جامع و پیشرفته جاوااسکریپت فرانت کست را پیشنهاد می‌کنیم.
دوره جامع و پیشرفته React و Redux
دوره جامع و پیشرفته React و Redux فرانت کست به شکل دقیق و جامع طراحی شده و تمامی مباحث کاربردی مربوط به این دو کتابخانه را در بر می‌گیرد. این دوره به گونه‌ای طراحی شده است که آموزش از پایه‌ترین و ابتدایی‌ترین مفاهیم آغاز می‌شود و تا قسمت‌های پیشرفته‌تر ادامه پیدا می‌کند. همچنین دانشجو در این راه تنها نیست و مدرس دوره در طول مسیر یادگیری همراه اوست.
در فرانت کست مهم‌ترین مراجع ما برای آموزش، منابع اصلی و مستندات خود React و Redux می‌باشد. بنابراین، اگر در آینده مبحث جدیدی به این تکنولوژی‌ها اضافه شود و یا به روز رسانی انجام شود تمامی مفاهیم جدید بصورت کاملا رایگان به دوره اضافه خواهند شد.
دوره جامع و پیشرفته React و Redux به صورت پروژه محور طراحی شده است. در نتیجه یادگیری به کمک انجام پروژه‌ها و چالش‌های متنوع پیش می‌رود. زیرا ما بر این باور هستیم که درک دقیق مفاهیم برنامه نویسی با انجام دادن تمرین‌های متنوع امکان‌پذیر خواهد بود. علاوه بر این، براساس بازخوردهای دریافت شده از دانشجویان، پروژه‌های جدید به شکل کاملا رایگان به دوره اضافه می‌شوند. همچنین در طول دوره با چالش‌ها و تمرین‌های متعددی هم روبه‌رو خواهیم شد که انجام دادن همه این موارد کمک می‌کند تا یادگیری مفاهیم به‌طور عمیق و درست انجام شود.
مدرس دوره
مسعود صدری مدرس و توسعه دهنده نرم افزار، فارغ التحصیل از رشته مهندسی نرم‌افزار، برنامه نویسی را از سال ۱۳۹۱ به شکل حرفه‌ای شروع کرده است. او در سال‌هایی که در حوزه برنامه نویسی حرفه‌ای فعالیت داشته، با شرکت های نرم افزاری و تیم‌های استارتاپی همکاری داشته و بیشتر بر روی فریلنسیگ تمرکز کرده است. او سال‌ها به عنوان برنامه نویس فریلنسر مشغول به کار بوده و همین امر باعث شده تا نیازهای بازار کار را به خوبی بشناسد و تجربه‌های زیادی در این زمینه کسب کند.
مسعود صدری تدریس را از سال ۱۳۹۴ به شکل حرفه‌ای، با آموزشگاه مجتمع فنی تهران شروع کرده و همیشه جزء یکی از برترین مدرسان برنامه نویسی بوده است. سپس تصمیم به برگزاری دوره‌های برنامه نویسی در دانشکده مهندسی برق و کامپیوتر دانشگاه تبریز گرفته که مورد استقبال بسیار خوب دانشجویان قرار گرفت. فعالیت‌های او در دانشگاه تبریز، به عنوان مدرس دانشگاه ادامه داشته و اکنون تدریس کارگاه‌های مبانی برنامه سازی و برنامه سازی پیشرفته را برعهده دارد. نهایتا از سال ۱۳۹۷ تدریس آنلاین هم به لیست فعالیت‌های آموزشی او اضافه شده است.
تمام تلاش مسعود صدری این است که نیازهای بازار کار را بصورت دقیق تحلیل کند و براساس روند پیشرفت محبوبیت یک تکنولوژی و نیازهای بازار کار جامع‌ترین و به‌روزترین سرفصل‌ها را برای تکنولوژی‌های مختلف آماده کند تا افرادی که به این حوزه علاقمند هستند بتوانند مطالب را به بهترین و ساده‌ترین زبان ممکن یاد بگیرند و بطور مستقیم وارد بازار کار شوند.
پشتیبانی دوره
یکی از موضوعات بسیار مهم در فرانت کست پشتیبانی دوره‌ها می‌باشد که برعهده مدرس دوره است. مدرس به عنوان یک منتور از ابتدای مسیر قدم به قدم، تا زمانی که دانشجو تمامی مطالب را بصورت کامل یاد بگیرد، همراه اوست. ما بر این باور هستیم که هیچ شخصی بهتر از مدرس دوره نمی‌تواند پاسخگوی سوالات دانشجویان باشد. از این رو، در فرانت کست مدرس خود را موظف می‌داند تا در تمامی روزهای هفته، به جز روزهای تعطیل، سوالات دانشجویان را بررسی کند. برای پشتیبانی و دریافت مشاوره می‌توانید از راه‌های ارتباطی نوشته شده در وب‌سایت استفاده کنید.
گارانتی بازگشت وجه
ما در فرانت کست به دوره‌ها و محتوایی که آماده شده است ایمان کامل داریم و معتقد هستیم اگر دانشجویان براساس مسیر یادگیری که آماده کرده‌ایم پیش بروند قطعا به هدفی که دارند دست پیدا می‌کنند. مهم‌ترین هدف ما این است که دانشجویان در کمال آرامش و بدون کوچکترین استرسی یادگیری را شروع کنند. به همین جهت، گارانتی بازگشت وجه برای تمامی دوره‌های غیررایگان درنظر گرفته‌ایم. اگر شما به هر دلیل از ادامه دادن مسیر منصرف شوید، می‌توانید تا ۷ روز بعد از ثبت نام برای بازگشت وجه درخواست بدهید. ما بدون هیچ سوالی تمام هزینه‌ای که برای یادگیری خود سرمایه‌گذاری کرده بودید را عیناً به حساب شما بازمی‌گردانیم.
سرفصل‌ها
معرفی دوره. بررسی دوره جامع و پیشرفته React و Redux
۱. پیش نیازهای دوره
۲. یادگیری دقیق‌تر مفاهیم و پشتیبانی دوره
۳. سرفصل‌های دوره و مسیر یادگیری
۴. بررسی کتابخانه React
۵. دلایل استفاده از Redux در پروژه
۶. ابزارهای مورد نیاز برای توسعه نرم افزار با React
۷. راه اندازی محیط توسعه
۸. نصب و بررسی بسته نرم افزاری Create React App
۹. توسعه اولین کد React
۱۰. درک مفهوم کامپوننت در React
۱۱. استفاده از دستورات JSX
۱۲. استفاده از کامپوننت‌ها
۱۳. بررسی انواع کامپوننت‌ها
۱۴. کار با مقادیر داینامیک
۱۵. استفاده از Props
۱۶. استفاده از props.children
۱۷. مفهوم State در React
۱۸. استفاده از توابع برای مدیریت Eventها
۱۹. مدیریت State در کامپوننت
۲۰. استفاده از useState برای مدیریت State
۲۱. بررسی کامپوننت‌های Stateful و Stateless
۲۲. افزودن فایل‌های استایل
۲۳. ارسال متدها در کامپوننت‌ها
۲۴. استفاده از متد bind
۲۵. بررسی استایل‌های Inline در React
۲۶. نمایش المنت‌ها بر اساس شرط
۲۷. مدیریت مقادیر داینامیک
۲۸. نمایش لیست‌ها
۲۹. حذف مقادیر لیست
۳۰. بهینه سازی آپدیت State
۳۱. بررسی Key در لیست‌ها
۳۲. توسعه لیست‌های داینامیک
۳۳. بهینه سازی ساختار فایل‌های پروژه
۳۴. توسعه کد در کامپوننت‌های مختلف
۳۵. بررسی Lifecycle در کامپوننت‌ها
۳۶. استفاده از متدهای Lifecycle در پروژه
۳۷. بررسی متدهای Lifecycle برای آپدیت
۳۸. استفاده از متدهای Lifecycle برای تغییر Props
۳۹. استفاده از متدهای Lifecycle برای تغییر State
۴۰. بررسی useEffect در فانکشنال کامپوننت‌ها
۴۱. مدیریت اجرای useEffect
۴۲. تابع Cleanup در useEffect
۴۳. استفاده از HOC برای المنت‌های JSX
۴۴. استفاده از React.Fragment
۴۵. درک بهتر Higher Order Component
۴۶. توسعه HOC به صورت داینامیک
۴۷. ارسال مقادیر Props در HOC
۴۸. استفاده از Ref در کلاس کامپوننت‌ها
۴۹. استفاده از Ref در فانکشنال کامپوننت‌ها
۵۰. ارسال مقادیر Props در کامپوننت‌ها
۵۱. استفاده از Context API
۵۲. بررسی مقدار contextType
۵۳. استفاده از useContext در فانکشنال کامپوننت‌ها
۵۴. جمع بندی مفاهیم قسمت کامپوننت‌ها
۵۵. طراحی ساختار پروژه اصلی – کامپوننت‌ها
۵۶. طراحی ساختار پروژه اصلی – Stateها
۵۷. توسعه کامپوننت Layout
۵۸. افزودن فونت به برنامه
۵۹. شروع توسعه کامپوننت Shopping
۶۰. توسعه کامپوننت Controls
۶۱. توسعه کامپوننت Builder
۶۲. تابع افزودن محصول
۶۳. تابع حذف محصول
۶۴. محاسبه مجموع قیمت محصولات
۶۵. توسعه Modal برای لیست سفارش‌ها
۶۶. نمایش سفارش‌ها در Modal
۶۷. نمایش Modal بر اساس Click
۶۸. توسعه کامپوننت Backdrop
۶۹. توسعه کامپوننت Button
۷۰. استفاده از کامپوننت Button
۷۱. افزودن مجموع قیمت به لیست سفارش‌ها
۷۲. توسعه کامپوننت Navigation
۷۳. توسعه آیتم‌های Navigation
۷۴. بررسی نسخه اول پروژه اصلی
۷۵. بررسی درخواست‌های HTTP
۷۶. استفاده از پکیج Axios
۷۷. ارسال درخواست GET
۷۸. دریافت اطلاعات از API
۷۹. آپدیت اطلاعات دریافت شده
۸۰. انتخاب یک پست در برنامه
۸۱. آپدیت اطلاعات یک پست
۸۲. ارسال درخواست POST
۸۳. ارسال درخواست DELETE
۸۴. مدیریت خطاها
۸۵. تنظیمات Default در Axios
۸۶. استفاده از Instance در Axios
۸۷. بررسی پروژه API
۸۸. ذخیره اطلاعات در پایگاه داده
۸۹. استفاده از پایگاه داده
۹۰. ساختن پروژه Firebase
۹۱. افزودن Axios به پروژه اصلی
۹۲. ارسال اطلاعات سفارش به سرور
۹۳. نمایش Loading
۹۴. دریافت اطلاعات محصولات از سرور
۹۵. جمع بندی مفاهیم قسمت API
۹۶. بررسی نرم افزارهای SPA
۹۷. افزودن لینک‌ها به برنامه
۹۸. نصب و راه اندازی React Router
۹۹. تغییر ساختار فایل‌های برنامه
۱۰۰. افزودن Routeها
۱۰۱. نمایش کامپوننت‌ها در Route
۱۰۲. استفاده از کامپوننت Link
۱۰۳. بررسی Props در Routing
۱۰۴. مقادیر متغیر در Routeها
۱۰۵. استفاده از کامپوننت Switch
۱۰۶. استفاده از آبجکت History
۱۰۷. بررسی کامپوننت Redirect
۱۰۸. ریدایرکت Routeها بر اساس شرط
۱۰۹. مدیریت صفحات ۴۰۴
۱۱۰. افزودن React Router به پروژه اصلی
۱۱۱. توسعه کامپوننت Checkout
۱۱۲. افزودن Link به Navigation
۱۱۳. توسعه کامپوننت Account
۱۱۴. جمع بندی مفاهیم قسمت React Router
۱۱۵. افزودن فرم به پروژه
۱۱۶. توسعه کامپوننت Input
۱۱۷. بررسی تنظیمات المنت‌های فرم
۱۱۸. ساختن Input بر اساس تنظیمات State
۱۱۹. دریافت اطلاعات از کاربر
۱۲۰. توسعه تابع Submit فرم
۱۲۱. ارسال اطلاعات به سرور
۱۲۲. افزودن اعتبار سنجی فرم
۱۲۳. نمایش نتیجه اعتبار سنجی
۱۲۴. بهینه سازی نمایش نتیجه
۱۲۵. بررسی Hookها در React
۱۲۶. ساختار پروژه React Hooks
۱۲۷. استفاده از useState
۱۲۸. بررسی آپدیت State در useState
۱۲۹. استفاده از Array Destructuring
۱۳۰. استفاده از Stateهای متعدد
۱۳۱. ارسال اطلاعات State بین کامپوننت‌ها
۱۳۲. ارسال درخواست HTTP
۱۳۳. بررسی useEffect و دریافت اطلاعات
۱۳۴. مفاهیم پیشرفته در useEffect
۱۳۵. استفاده از useCallback
۱۳۶. استفاده از useRef
۱۳۷. تابع Clean up در useEffect
۱۳۸. مدیریت Stateها با useReducer
۱۳۹. استفاده از useContext
۱۴۰. توسعه Hookهای Custom
۱۴۱. جمع بندی قسمت Hookها در React
۱۴۲. درک بهتر Redux
۱۴۳. راه اندازی پروژه
۱۴۴. بررسی Store و Reducer
۱۴۵. فراخوانی Action
۱۴۶. افزودن متد subscribe
۱۴۷. بررسی ساختار پروژه Redux
۱۴۸. استفاده از Redux در React
۱۴۹. اتصال Store به کامپوننت App
۱۵۰. فراخوانی Action در کامپوننت
۱۵۱. پیاده سازی توابع Dispatch
۱۵۲. دریافت اطلاعات از Action
۱۵۳. استفاده از دستور Switch Case
۱۵۴. نمایش مقدار Store
۱۵۵. بهینه سازی Actionها
۱۵۶. استفاده از Redux Dev Tools
۱۵۷. جمع بندی مفاهیم Redux
۱۵۹. نصب پکیج Bootstrap
۱۶۰. توسعه کامپوننت‌های Header و Footer
۱۶۱. افزودن پکیج Font Awesome
۱۶۲. نمایش محصولات در صفحه اصلی
۱۶۳. توسعه کامپوننت Product
۱۶۴. افزودن توضیحات محصول
۱۶۵. نصب پکیج React Router
۱۶۶. افزودن لینک‌ها
۱۶۷. توسعه صفحه محصول
۱۶۸. جریان داده در بک‌اند
۱۶۹. بررسی ساختار قسمت بک‌اند پروژه
۱۷۰. دریافت محصولات از بک‌اند
۱۷۱. بررسی خطا CORS
۱۷۲. دریافت یک محصول از بک‌اند
۱۷۳. افزودن Redux به پروژه
۱۷۴. اتصال Store به کامپوننت App
۱۷۵. توسعه Reducer برای لیست محصولات
۱۷۶. پیاده سازی Actionهای محصولات
۱۷۷. استفاده از مقادیر جدید برای State
۱۷۸. نمایش محصولات بر اساس مقادیر جدید State
۱۷۹. توسعه Reducer برای یک محصول
۱۸۰. پیاده سازی Action برای یک محصول
۱۸۱. نمایش صفحه محصول بر اساس مقادیر جدید State
۱۸۲. پیاده سازی کامپوننت سبد خرید
۱۸۳. توسعه Reducer برای سبد خرید
۱۸۴. پیاده سازی Action برای سبد خرید
۱۸۵. تکمیل فرآیند افزودن به سبد خرید
۱۸۶. نمایش محصولات سبد خرید
۱۸۷. محاسبه مجموع قیمت در سبد خرید
۱۸۸. حذف محصول از سبد خرید
۱۸۹. تغییرات نسخه ۱۷ React
۱۹۰. نسخه ۶ بسته React Router
۱۹۱. بررسی ساختار پروژه
۱۹۲. نصب و راه اندازی React Router
۱۹۳. مسیرها و مقدار exact در نسخه جدید
۱۹۴. روش Redircet شدن مسیرها
۱۹۵. مسیرهای زیرمجموعه
۱۹۶. جمع بندی مفاهیم نسخه جدید
۱۹۷. بررسی به روز رسانی React 18
۱۹۸. تغییرات به روز رسانی
۱۹۹. بررسی useTransition
۲۰۰. بررسی useDeferredValue
دیدگاه‌ها:
sajjadkhaledi
اردیبهشت 11, 1402 در 3:57 ب.ظ
سلام وقت بخیر استاد روی دورها میشه تخفیف بزارید ممنون میشیم میخواییم چندتا خریداری کنیم
مسعود صدری
اردیبهشت 11, 1402 در 5:46 ب.ظ
سلام
وقت بخیر.
تخفیف بعدیمون اوایل تابستان هست.
لطفا کانال تلگرام رو دنبال کنید: t.me/frontcast
مریم شیرازی
فروردین 29, 1402 در 6:22 ب.ظ
سلام وقتتون بخیر. من این دوره رو زمستان ۱۴۰۱ خریداری کردم ولی توی پنل ندارمش.ممکنه بررسی بفرمایید
مسعود صدری
فروردین 29, 1402 در 11:03 ب.ظ
سلام
وقت بخیر.
لطفا آدرس ایمیل یا شماره موبایلتون رو در تلگرام به اکانت MasoodSadri ارسال کنید تا بررسی کنیم.
Daniel_1377
اسفند 12, 1401 در 8:44 ب.ظ
سلام وقت بخیر
پیش نیاز های این دوره چی هست؟ (جاوا اسکریپت رو بلد نباشیم، میشه از دوره استفاده کنیم؟)
مسعود صدری
اسفند 13, 1401 در 12:24 ق.ظ
سلام
وقت بخیر.
مهم‌ترین پیش‌نیاز این دوره زبان جاوااسکریپت هست.
اگر برای جاوااسکریپت تسلط کافی نداشته باشید دوره نمی‌تونه براتون مفید باشه.
aliasghar bagheri
اسفند 8, 1401 در 12:25 ب.ظ
سلام استاد وقتتون بخیر
من این دوره رو تهیه کردم و قبل از هرچیزی میخوام یک تشکر جانانه کنم ازتون بابت دوره های فوق العاده ای که ارائه میدین و من به شخصه از صمیم قلب ازتون ممنونم
استاد سوالی داشتم میخواستم بدونم ورود و ثبت نام یک کاربر و سیستم احراز هویتی که داریم برای انجام این کار ها در یک سایت واقعی چه فرایندی رو باید طی کنیم و چه اتفاق هایی سمت بک اند و فرانت اند میوفته !؟
ممنون از لطفتون
مسعود صدری
اسفند 8, 1401 در 1:11 ب.ظ
سلام
وقت بخیر.
ممنونم از لطفتون.
این موضوع جزییات فنی زیادی داره که در پروژه آموزش Next.js به صورت جامع بررسی می‌کنیم.
Hamid1380
بهمن 24, 1401 در 9:06 ب.ظ
بیشتر این اموزش بر مبنای فانکشنال کامپوننت است؟ یا کلاس بیس ؟ چون آخرین آپدیت ری اکت متمرکز بر فانکشنال کامپوننت است…
مسعود صدری
بهمن 24, 1401 در 9:10 ب.ظ
سلام
این دوره یک دوره جامع هست، به همین دلیل هر دو رو بررسی کردیم.
ابتدای دوره با کلاس کامپوننت‌ها هست و ادامه رو با فانکشنال کامپوننت‌ها پیش می‌ریم.
همین طور تمرین‌ها و پروژه اصلی با فانکشنال کامپوننت‌ها پیاده سازی شدند.
لطفا سرفصل‌ها رو مطالعه کنید.
سمیه جعفری
بهمن 24, 1401 در 8:16 ب.ظ
سلام استاد امیدوارم که حالتون خوب باشه…استاد قسمت ۳۴ دوره وقتی که میخوایم product رو از app ببریم داخل فانکشن productList همش ارور میده… این به خاطر اینکه ورژنش قدیمیه هستش؟ چیکار کنم استاد؟
مسعود صدری
بهمن 24, 1401 در 8:32 ب.ظ
سلام
ممنونم.
این قسمت مربوط به بحث کامپوننت‌ها در React میشه که تغییری در نسخه‌های مختلف نداشته.
اگر به روز رسانی داشته باشیم مثل همیشه به صورت رایگان به دوره اضافه می‌کنیم.
برای بررسی دقیق‌تر لطفا از کد و خطا اسکرین شات بگیرید و در تلگرام ارسال کنید.
neda fallah
بهمن 24, 1401 در 12:30 ب.ظ
سلام استاد خسته نباشید
میشه لطف کنید یه اموزش در مورد لاگین رجیستر کردن دو کاربر با دو نقش متفاوت تو یک سایت بزارید مثلا (یکی فروشنده یکی خریدار)
مسعود صدری
بهمن 24, 1401 در 12:37 ب.ظ
سلام
خیلی ممنون.
این موضوع رو در پروژه آموزش جامع Next.js بررسی خواهیم کرد.
Hamid1380
بهمن 23, 1401 در 11:15 ب.ظ
سلام این دوره بر اساس فانکشنال کامپوننت پیش رفته؟
مسعود صدری
بهمن 24, 1401 در 12:05 ق.ظ
سلام
هم کلاس کامپوننت‌ها رو بررسی کردیم و هم فانکشنال کامپوننت‌ها.
Somayeh Rahimi
بهمن 23, 1401 در 10:39 ب.ظ
سلام
اگه امکان داره تخفیف ها از اول اسفند رو دوره ها قرار بدید من تازه اشنا شدم با سایت وچند تا دوره را نیاز دارم تهیه کنم
ممنون.
واینکه مفهوم contextهم در دوره گفته شده ؟
مسعود صدری
بهمن 24, 1401 در 12:06 ق.ظ
سلام
تخفیف ویژه نوروز آخر اسفند منتشر میشه.
بله بررسی کردیم، لطفا سرفصل‌ها رو مطالعه کنید.
abolfazl adhami
بهمن 18, 1401 در 7:24 ب.ظ
خسته نباشین استاد خیلی دوره عالی بود.
مسعود صدری
بهمن 18, 1401 در 9:42 ب.ظ
سلام
خیلی ممنونم.