React و Redux یکی از محبوب‌ترین و پرکاربردترین ابزارهای توسعه نرم افزار هستند. این دو کتابخانه با زبان برنامه نویسی جاوااسکریپت ساخته شده‌اند و برای توسعه فرانت‌اند استفاده می‌شوند.

قسمت رابط کاربری یک نرم افزار می‌تواند پیچیدگی‌های زیادی داشته باشد. به عنوان مثال، ممکن است المنت‌های زیادی بعد از درخواست‌های HTTP به سرور دچار تغییر شوند. در چنین مواردی کتابخانه React به عنوان یک راه حل در نظر گرفته می‌شود. معماری این کتابخانه به گونه‌ای توسعه داده شده که بتواند تغییرات قسمت فرانت‌اند را با سرعت بیشتری پیاده سازی کند. به همین دلیل React به یکی از ابزارهای محبوب توسعه فرانت‌اند برای بسیاری از شرکت‌های نرم افزاری تبدیل شده است. محبوبیت بالای React باعث شده است تا شرکت‌های بزرگی همانند Instagram ،Netflix ،Uber و … از آن برای ایجاد و توسعه سایت‌های خود استفاده کنند. همینطور استارت‌اپ‌های اسنپ، دیوار، سازیتو و … نیز از نمونه‌های موفق داخلی هستند که از این ابزار استفاده کرده‌اند.

بر اساس نظرسنجی منتشر شده از برنامه نویس‌ها در وب‌سایت Stackoverflow، که میزان محبوبیت یک تکنولوژی را مورد بررسی قرار می‌دهد، در سال ۲۰۱۹ کتابخانه React به عنوان یکی از تکنولوژی‌های کاربردی انتخاب شده بود. این روند رو به رشد و صعودی ادامه داشت تا نهایتا در سال ۲۰۲۱، کتابخانه React به عنوان محبوب‌ترین کتابخانه انتخاب شود. صعودی بودن روند حرکت یک تکنولوژی، به معنی توسعه بازار کار آن نیز خواهد بود.

در کنار React از Redux می‌توان به عنوان یکی از ابزارهای مکمل نام برد. این کتابخانه زمانی استفاده می‌شود که رابط کاربری با پیچیدگی‌های بیشتری مواجه باشد. به این صورت این دو ابزار در کنار هم باعث می‌شوند تا فرآیند توسعه و نگهداری نرم افزارهای سطح متوسط و بزرگ بسیار ساده‌تر و منطقی‌تر انجام شود. 

مهم‌ترین پیش‌نیاز این دوره، درک مفاهیم زبان برنامه نویسی جاوااسکریپت است. به این دلیل که React و Redux هر دو با این زبان توسعه داده شده‌اند. برای یادگیری دقیق جاوااسکریپت، دوره جامع و پیشرفته جاوااسکریپت فرانت کست را پیشنهاد می‌کنیم.

بازار کار React

کتابخانه React به یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت تبدیل شده است که هم در داخل ایران و هم در خارج ایران تقاضای بسیار زیادی برای آن وجود دارد. یکی از دلایلی که React به این محبوبیت دست پیدا کرده است این است که سرعت اجرای اپلیکیشن‌ها با استفاده از آن بسیار زیاد می‌شود. بنابراین، برای برنامه‌های با مقیاس بزرگ‌تر، React بهترین انتخاب است. 

برنامه نویسی از جمله مشاغلی به حساب می‌آید که به سادگی می‌توان از آن به کسب درآمد رسید. توسعه دهنده React نیز از این موضوع مستثنی نیست و  از درآمد بالایی برخوردار است. همچنین مزیت‌های این کتابخانه باعث شده تا برای متخصص React گستردگی و تنوع بازار کار بیشتری باشد. این امکان نیز فراهم است تا توسعه دهندگان بتوانند بصورت دورکاری یا پروژه‌ای با شرکت‌ها همکاری داشته باشند و از بازار کار خیلی خوب این تخصص بهرمند شوند.

دوره جامع و پیشرفته React و Redux

دوره جامع و پیشرفته React و Redux فرانت کست به شکل دقیق و جامع طراحی شده و تمامی مباحث کاربردی مربوط به این دو کتابخانه را در بر می‌گیرد. این دوره به گونه‌ای طراحی شده است که آموزش از پایه‌ترین و ابتدایی‌ترین مفاهیم آغاز می‌شود و تا قسمت‌های پیشرفته‌تر ادامه پیدا می‌کند. همچنین دانشجو در این راه تنها نیست و مدرس دوره در طول مسیر یادگیری همراه اوست.

در فرانت کست مهم‌ترین مراجع ما برای آموزش، منابع اصلی و مستندات خود React و Redux می‌باشد. بنابراین، اگر در آینده مبحث جدیدی به این تکنولوژی‌ها اضافه شود و یا به‌ روز رسانی انجام شود تمامی مفاهیم جدید بصورت کاملا رایگان به دوره اضافه خواهند شد.

دوره جامع و پیشرفته React و Redux به صورت پروژه محور طراحی شده است. در نتیجه یادگیری به کمک انجام پروژه‌ها و چالش‌های متنوع پیش می‌رود. زیرا ما بر این باور هستیم که درک دقیق مفاهیم برنامه نویسی با انجام دادن تمرین‌های متنوع امکان‌پذیر خواهد بود. علاوه بر این، براساس بازخوردهای دریافت شده از دانشجویان، پروژه‌های جدید به شکل کاملا رایگان به دوره اضافه می‌شوند. همچنین در طول دوره با چالش‌ها و تمرین‌های متعددی هم روبه‌رو خواهیم شد که انجام دادن همه این موارد کمک می‌کند تا یادگیری مفاهیم به‌طور عمیق و درست انجام شود.

مدرس دوره

مسعود صدری مدرس و توسعه دهنده نرم افزار، فارغ‌ التحصیل از رشته مهندسی نرم‌افزار، برنامه نویسی را از سال ۱۳۹۱ به شکل حرفه‌ای شروع کرده است. او در سال‌هایی که در حوزه برنامه نویسی حرفه‌ای فعالیت داشته، با شرکت های نرم افزاری و تیم‌های استارتاپی همکاری داشته و بیشتر بر روی فریلنسیگ تمرکز کرده است. او سال‌ها به عنوان برنامه نویس فریلنسر مشغول به کار بوده و همین امر باعث شده تا نیازهای بازار کار را به خوبی بشناسد و تجربه‌های زیادی در این زمینه کسب کند.

مسعود صدری تدریس را از سال ۱۳۹۴ به شکل حرفه‌ای، با آموزشگاه مجتمع فنی تهران شروع کرده و همیشه جزء یکی از برترین مدرسان برنامه نویسی بوده است. سپس تصمیم به برگزاری دوره‌های برنامه نویسی در دانشکده مهندسی برق و کامپیوتر دانشگاه تبریز گرفته که مورد استقبال بسیار خوب دانشجویان قرار گرفت. فعالیت‌های او در دانشگاه تبریز، به عنوان مدرس دانشگاه ادامه داشته و اکنون تدریس کارگاه‌های مبانی برنامه سازی و برنامه سازی پیشرفته را برعهده دارد. نهایتا از سال ۱۳۹۷ تدریس آنلاین هم به لیست فعالیت‌های آموزشی او اضافه شده است.

تمام تلاش مسعود صدری این است که نیازهای بازار کار را بصورت دقیق تحلیل کند و براساس روند پیشرفت محبوبیت یک تکنولوژی و نیازهای بازار کار جامع‌ترین و به‌روزترین سرفصل‌ها را برای تکنولوژی‌های مختلف آماده کند تا افرادی که به این حوزه علاقمند هستند بتوانند مطالب را به بهترین و ساده‌ترین زبان ممکن یاد بگیرند و بطور مستقیم وارد بازار کار شوند.

پشتیبانی دوره

یکی از موضوعات بسیار مهم در فرانت کست پشتیبانی دوره‌ها می‌باشد که برعهده مدرس دوره است. مدرس به عنوان یک منتور از ابتدای مسیر قدم به قدم، تا زمانی که دانشجو تمامی مطالب را بصورت کامل یاد بگیرد، همراه اوست. ما بر این باور هستیم که هیچ شخصی بهتر از مدرس دوره نمی‌تواند پاسخگوی سوالات دانشجویان باشد. از این رو، در فرانت کست مدرس خود را موظف می‌داند تا در تمامی روزهای هفته، به جز روزهای تعطیل، سوالات دانشجویان را بررسی کند. این ارتباط مستقیم از طریق شماره واتس‌اپ ۰۹۳۵۵۴۹۱۴۸۱ و یا اکانت اینستاگرام @masoodsadri انجام می‌گیرد.

گارانتی بازگشت وجه

ما در فرانت کست به دوره‌ها و محتوایی که آماده شده است ایمان کامل داریم و معتقد هستیم اگر دانشجویان براساس مسیر یادگیری که آماده کرده‌ایم پیش بروند قطعا به هدفی که دارند دست پیدا می‌کنند. مهم‌ترین هدف ما این است که دانشجویان در کمال آرامش و بدون کوچکترین استرسی یادگیری را شروع کنند. به همین جهت، گارانتی بازگشت وجه برای تمامی دوره‌های غیررایگان درنظر گرفته‌ایم. اگر شما به هر دلیل از ادامه دادن مسیر منصرف شوید، می‌توانید تا ۳۰ روز بعد از ثبت‌ نام برای بازگشت وجه درخواست بدهید. ما بدون هیچ سوالی تمام هزینه‌ای که برای یادگیری خود سرمایه‌گذاری کرده بودید را عیناً به حساب شما بازمی‌گردانیم.

سرفصل‌ها:

معرفی دوره. بررسی دوره جامع و پیشرفته 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

۱۵۸. بررسی ساختار فایل‌ها و راه اندازی Git – آموزش Git

۱۵۹. نصب پکیج 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 شدن مسیرها

۱۹۵. مسیرهای زیرمجموعه

۱۹۶. جمع بندی مفاهیم نسخه جدید