سلام استاد این پروژه نهایی خیلی شیک و حرفه ای شده، دمتون گرم. امکان داره در دوره نکست که متعاقبا برگزار می کنید فروشگاهش رو طراحی نمایید؟
آموزش جامع و پروژه محور ری اکت (React)
یکی از کاربردیترین ابرارهایی که برای اپلیکیشنهای تک صفحهای به منظور مدیریت لایهها استفاده میشود، ری اکت میباشد. در این بخش در ارتباط با React مطالبی به شما ارائه خواهم داد. با من همراه باشید.
ری اکت چیست؟
React یک کتابخانهی جاوا اسکریپتی است که برای ساخت یوزر اینترفیس یا همان رابط کاربری مورد استفاده قرار میگیرد. همهی این آلمانهای در این صفحه کنار هم برای ما رابط کاربری را تشکیل میدهند. (یوزر اینترفیس (رابط کاربری) چیزی که با کاربر در ارتباط است). کاربرد ریاکت این است که یوزر اینترفیس را برای ما با یک سری ویژگیهای خاص میسازد. یکی از مهمترین ویژگیها این است که React این قابلیت را دارد که برای ما یوزر اینترفیسها یا رابطهای کاربری را با سرعت بالا بسازد. مسلما سرعت بالای هر وبسایت میتواند در جذب کاربر تاثیر بسزایی داشته باشد. پس تا به این جا همان طور که گفتم ریاکت یک کتابخانهی جاوا اسکریپتی برای ساخت رابطهای کاربری با سرعت بالا است. اینستاگرام به تنهایی میتواند یک وزنهی سنگین برای معرفی ریاکتنیتیو باشد که از این نوع کتابخانه استفاده میکند.
ری اکت در کنار دو رقیب
React برای اولین بار در سال ۲۰۱۱ توسط فیس بوک استفاده شد. بعد از آن روز به روز به محدودیت ریاکت افزوده شد. فیس بوک شرکت کوچکی نبود و استفادهی فیسبوک از ریاکت نشان دهندهی این است که قابلیت بالایی دارد. اگر سری به گوگل ترنس بزنیم و این نوع کتابخانه را در کنار دو رقیبش angular و vue قرار دهیم، میبینیم با توجه به قدرتی که این دو رقیب دارند باز هم React پیشتاز است. React برخلاف angular و vue که فریم ورکهای جاوا اسکریپتی هستند یک کتابخانه است و همین کتابخانه بودنش باعث شده است که اولا خیلی سبک باشد، استفاده از آن آسان و از همه مهمتر یادگیریاش بسیار راحت است.
چرا یادگیری React ساده است؟
چرا که ما فقط قرار است از سینتکس خود از جاوا اسکریپت استفاده کنیم. اگر تا حدودی با جاوا اسکریپت آشنا باشیم میتوانیم به راحتی از آن استفاده کنیم. یکی از مزایای دیگر این نوع کتابخانه کامپوننت محور بودن آن میباشد. یعنی همهی آلمانهای صفحه را داخل یک کامپوننت قرار میدهیم و با کنار هم قرار گرفتن آنها پروژهی ما شکل میگیرد. حسن این کار این است که مدیریت قسمتهای مختلف پروژه برای ما خیلی آسان میشود. هر تغییری بخواهیم در هر لحظه در پروژه انجام بدهیم نیاز به برسی کدهای زیادی نداریم چرا که هر قسمت خودش یک کامپوننت مجزا است و به راحتی میتوانیم آن قسمت را پیدا کنیم و تغییر در آن اعمال کنیم.
بازار کار React
اگر یک سری به وب سایتهای کارگاهی بزنیم با یک سرچ ساده بسیاری از آنها را میتوانیم پیدا کنیم. کمتر در خواستی را میبینید که در زمینهی فرانت برنامهنویس، اسمی از ری اکت نبرده باشند. همینطور با توجه به ویژگیهایی که در رابطه با این فریم ورک در ادامه به شما معرفی خواهم کرد، متوجه میشوید که React مورد علاقهی شرکتهای بزرگ است. پس اگر میخواهید فرصتهای شغلیتان را در زمینهی فرانت افزایش دهید حتما ریاکت را یاد بگیرید و رزومهتان را با این کتابخانهی قدرتمند سنگینتر کنید.
فریم ورک ریاکت نسبت به سایر فریم ورکهای جاوا چه مزیتی دارد؟
از جمله مهمترین خصوصیات فریم ورک ریاکت که آن را از سایر فریم ورکها متمایز میکند، میتوان به موارد زیر اشاره کرد:
DOM مجازی را سریعتر نمایش میدهد:
DOM یک مدل و ساختاری است که تمام عناصر HTML درون یک صفحه وب میگنجد. در این صفحه المانهای HTML به عنوان اشیاء در نظر گرفته میشوند. کمکی که این خصوصیت در روند کار ما میکند این است که سرعت توسعه و انعطافپذیری برنامهی ما را افزایش میدهد. از همه مهمتر هر بار که برنامه تغییر داده شود، کل UI را در DOM مجازی نمایش میدهد.
ایجاد اپلیکیشنهای مرورگر متحرک آسانتر
در چند سال گذشته برای طراحی یک صفحهی مرورگر متحرک نیازمند کدهای پیچیده و حلقههای HTML مخصوصی بودیم. در ریاکت جاوا اسکریپت از افزونهای خاص استفاده شد که این مشکل را حل کرد. چرا که میتواند از کدهای خواندنی توسط ماشین پشتیبانی کند و کامپوننتها را درون یک فایل متغر مخصوص ترکیب کند.
JSX یک افزونهی خاص ری اکت
JavaScript Extention افزونهای مختص به ریاکت میباشد. این ویژگی به شما کمک میکند کدها را مانند کد HTML بنویسید. این ویژگی را میتوان از بهترین خصوصیات فریم ورک ریاکت دانست. چرا که کار نوشتن بلوکها را برای توسعه دهندگان خیلی راحتتر میکند.
به کمک ری اکت از داشتن یک کد پایدار مطمئن باشید.
تصور کنید به عنوان یک برنامهنویس قصد دارید بخشی از اپلیکشنی که طراحی کردید تغییر دهید. به نظر شما این تغییر چه طور باید صورت بگیرد که تاثیری بر کامپوننتهای اصلی نداشته باشد؟ در ریاکت اطلاعات به سمت پایین منتقل میشوند. بنابراین اگر تغییری در کامپوننتهای زیرمجموعه ایجاد کنید، کامپوننتهای اصلی ثابت خواهند ماند. شما به عنوان یک برنامهنویس قبل از اعمال تغییر باید مطمئن شوید که صرفا بخش مد نظر تغییر میکند. که در ریاکت دادهها با توجه به هدف محدود میشوند و درنتیجه پایداری عملکردی اپلیکیشن حفظ خواهد شد.
توسعهی اپلیکیشنها به کمک React Native:
کار توسعهی برنامههای موبایل با فریم ورک React بسیار راحتتر شده است. ریاکت نیتیو یک فریم ورک UI متن باز برای طراحی اپلیکیشن موبایل میباشد. به نوعی این نسخه از react شرایط استفاده از کدهای وب این فریم ورک را برای نسخههای اندروید و ios را فراهم خواهد کرد.
یادگیری آسان ری اکت
همانطور که در مقدمه اشاره شد، ریاکت یک کتابخانهی جاوا اسکریپتی است. بنابراین هر برنامهنویسی که با جاوا اسکریپت آشنا باشد به راحتی فریم ورک ریاکت را درک خواهد کرد و یاد میگیرد.
اتصال داده یک طرفه:
به این معناست که یک Software developer برای ایجاد تغییر یک کامپوننت باید از Callback استفاده کند و نمیتواند مستقیما آن را ویرایش کند.
ری اکت دارای پلتفرم قابل توسعه
برای توسعهی این فریم ورک نیازمند دو ابزار هستیم:
react developer
به کمک این ابزار میتوانیم ویژگی و حالت تک به تک کامپوننتهایی که در یک مجموعه قرار گرفتند برسی کنیم. کمک دوم این ابزار این است که برنامهنویس را در تشخیص کامپوننتهای اصلی و زیرمجموعه راهنمایی میکند.
Redux
ریداکس یک نگهدارندهی حالتِ قابل پیشبینی برای اپلیکیشنهای جاوا اسکریپت میباشد. به کمک این ابزار اکشنهای متفاوت قابل مشاهده است. همچنین میتوان حالتهای ذخیره شده جاری و تغییرات روی ذخیرهها را مشاهده کرد.
رابط کاربری اعلانی (Declarative UI)
این ویژگی در کدهای react باعث خوانایی بهتر کمک میکند. حتی به راحتی نقصهای نرمافزاری را رفع خواهد کرد. اگر به دنبال یکی از بهترین پلتفرمها برای توسعهی رابطهای کاربری هستید فریم ورک React JS را به شما معرفی میکنم. این رابط کاربرد گستردهای دارد چرا که هم برای دسکتاپ و هم برای موبایل قابل استفاده است.
معماری عالی React:
در اپلیکیشنها یکی از اصلیترین مواردی که در تعاملات و تبدیل دادههای خام به اطلاعات قابل مشاهده نقش دارد Component Based میباشد. این ویژگی کمک میکند تا از المانها متفاوت طبق منطق خود استفاده کند.
سئو سایت خود را با ری اکت جی اس ارتقا دهید.
یکی از مواردی که به جذب مشتری بیشتر کمک میکند رویت برند آنها در صفحات اول گوگل است. فریم ورک React میتواند با استفاده از یک نقطهی اتصال در شبکه ارائه گردد. بر این اساس رباطهای خرندهی گوگل برنامهی وب را در فرم نهایی خود برسی میکنند. در نتیجه ایندکس شدن مطالب راحتتر صورت میگیرد.
برای یادگیری ری اکت چه پیشنیازهایی لازم است؟
1. مبانی جاوا اسکریپت
React یک کتابخانهی جاوا اسکریپتی است بنابراین از اصلیترین مواردی که باید یاد بگیرید جاوا اسکریپت میباشد. در این بخش سعی کنید در این موارد به تسط کافی برسید.
- Scoping
- let و const و
- map , filter و
- JSON
- JSX
- DOM
2. برنامهنویسی شیء گرا
در این روش برنامهنویس بدنهی اصلی توسط اشیا ساخته میشوند. به بیان دیگر اطلاعات و توابع در قالب شیء در کنار هم قرار میگیرند و یک واحد اصلی را تشکیل خواهند داد. برای درک بهتر React و React-native باید با این سبک برنامهنویس آشنا باشید.
3. آشنایی با الگوریتمها
الگوریتم، یک روش ساخت یافته و مرحله به مرحله حل مسئله، یک زبان بینابینی بین زبان انسانی و زبان برنامهنویسی میباشد. الگوریتم کمک میکند تا یک مسئلهی بزرگ به بخشهای کوچک تقسیم شوند و خیلی آسان در کمترین زمان ممکن حل شوند. شما به عنوان یک برنامهنویس برای موفقیت در کارتان حتما باید بر انواع الگوریتمها تسلط کافی و لازم را داشته باشید.
4. آشنایی با Flex
فلکس يك فريم ورك متن باز قوي است كه امكان ساخت برنامه هاي سنتي براي مرورگر، موبايل و دسكتاپ را با استفاده از همان مدل برنامهنويسي، ابزار و كد فراهم مي سازد. چیدمان صفحات در React-native به کمک Flex صورت میگیرد. بنابراین باید در این زمینه به تسلط کافی برسید.
5. آشنایی با API
رابط برنامهنویسی نرمافزار یا API یکی دیگر از ملزومات React و React-native میباشد.
در پایان
در این مقاله سعی کردم یکی دیگر از علوم برنامهنویسی را به شما معرفی کنم. پیشنیازهای یادگیری و کاربردهای ری اکت به شما عزیزان ارائه شد. ریاکت در چند سال اخیر نقش مهمی در پیشرفت کار خیلی از برندها داشت و بازار کار بسیار مناسبی دارد. اگر علاقهمنداید در این زمینه فعالیت کنید و امنیت مالی خوبی داشته باشید توصیه میکنم آموزش در این حوزه را شروع کنید. تیم قوی و حرفهای کدیاد در خدمت شما عزیزان است تا در این زمینه به تسلط کافی و لازم برسید. برای دریافت آموزشها کافیست به صفحهی اصلی سایت مراجعه کنید.
سرفصل های دوره
نصب پیش نیاز ها و ایجاد اولین پروژه react
افزودن react به وبسایت (به عنوان کتابخانه جانبی) - آشنایی با JSX
گیت و گیت هاب
ES6 (مفهوم کلاس در جاوااسکریپت)
ES6 (معرفی let - const - arrow functions)
ES6 (ماژول نویسی)
آشنایی با ساخت پروژه ری اکت (ساخت تایمر با react)
ساخت کامپوننت در react
استایل دهی در ریکت - state ها در ری اکت
کامپوننت ها در ریکت
چرخه حیاط react
مفهوم props در react و event handling در ری اکت
ساخت مینی پروژه stopwatch با ری اکت
ری اکت هوک - react hooks
هوک useState در React
مفهوم children در ری اکت و مفهوم key در react
تکمیل بخش ثبت زمان - spread operator در ES6
آشنایی با context در react
حل تمرین جلسه18 - نکات مهم در ری اکت - Spread Operator در ES6
فراخوانی پروژه از GitHub- بهترین راه تماشای آموزش آنلاین
شروع مینی پروژه اپلیکیشن TODO - کامپوننت Fragment
ادامه مینی پروژه اپلیکیشن TODO - و Object destructuring در ES6
ادامه اپلیکیشن TODO - و Conditional Rendering و form
حل تمرین و تکمیل مینی پروژه TODO
pure component در react
مینی پروژه حدث کلمه - ref در ری اکت
useRef و forwardRef در ری اکت
معرفی قالب پروژه نهایی
شروع مینی پروژه جدید - استفاده از CSS Modules در react
react-router | بخش 1
react-router | بخش 2 - کامپوننت Navigate
react-router | بخش 3
react-router | بخش 4 (useNavigate و NavLink در ری اکت)
react-router | بخش آخر (useLocation و sweetalert در ری اکت)
معرفی RESTful API
معرفی و کار با Axios
مفهوم promise و async - await
حذف کاربر با متود DELETE با Axios
افزودن کاربر با متود Post در Axios
ویرایش کاربر - پیاده سازی سرچ کاربر
نکات پیشرفته استفاده از Axios
react-portals
کامپوننت مرتبه بالا - HOC - آشنایی اولیه
کامپوننت مرتبه بالا - HOC - مثال عملی
render-props
نکات مهم هوک ها - previous state در react
نکات مهم هوک ها - useEffect
آشنایی با هوک useReducer
آشنایی با هوک useReducer - بخش دوم
آشنایی با هوک useReducer - مثال عملی - fetching data
آشنایی با هوک useCallback
آشنایی با هوک useMemo
آشنایی با custom hooks - ساخت هوک شخصی
آشنایی با redux
ساخت اولین پروژه ریداکسی - store, dispatch, subscribe
redux-multi reducer
آشنایی با react-redux - ساخت اولین پروژه ریداکسی در react
استفاده از هوک ها در react-redux و multi-reducer در react-redux
اکستنشن redux devTools به عنوان middleware
Action payload
Async action و redux-thunk
شروع مینی پروژه اپلیکیشن آب و هوا - مدیریت تاریخ شمسی با moment
تکمیل مینی پروژه اپ آب و هوا با ریداکس
پیشنیاز redux-saga - آشنایی ES6-generators
آشنایی کامل و پیاده سازی Redux-Saga
multiple_watcher و takeLatest_action
آشنایی اولیه و ساخت اولین پروژه Formik
اعتبارسنجی با formik و آشنایی با regex
اعتبار سنجی با Yup
استفاده از کامپوننت های Formik
شخصی سازی کامپوننت های formik
مدیریت آبجکت ها و آرایه ها در formik
اعتبارسنجی کامپوننت های formik
غیرفعال سازی دکمه سابمیت فرم
اشتفاده از دیتای ذخیره شده در فرم
ساخت کامپوننت با قابلیت استفاده مجدد
ساخت کامپوننت های select و radioButton و checkbox
ساخت فرم ورود شخصی
ساخت فرم ثبت نام شخصی
استفاده و ساخت datepicker
آپلود فایل در formik و اعتبار سنجی فایل با Yup
معرفی و تست api ثبت نام و لاگین کاربر
ساخت فرم ثبت نام و ایجاد کاربر جدید
ایجاد پروژه اولیه - آشنایی با React 18
انتقال لایوت پنل ادمین
ایجاد Context برای پروژه و حل مشکل کدهای جاوااسکریپت قالب html
تکمیل کامپوننت ها سایدبار منو
تکمیل کامپوننت های صفحه داشبورد
تکمیل UI صفحه مدیریت دسته بندی
تکمیل UI صفحه محصولات - حل مشکل modal ها با react-portal
ساخت کامپوننت مدال - کامپوننت جداول
تکمیل بخش pagination در کامپوننت table
ساخت کامپوننت سرچ برای پروژه
افزودن react-router به پروژه
انتقال صفحات مدیریت رنگها و گارانتی و برندها
تکمیل انتقال قالب به پروژه react
آشنایی با Swagger
استفاده از بک اند پروژه روی سیستم لوکال
افزودن صفحه لاگین به پروژه
تکمیل صفحه ورود و اعتبار سنجی جهت ورود به پنل ادمین
خروج از کاربری
کانفیگ کلی برای سرویس ها
دریافت دسته بندی و نمایش در صفحه مدیریت
ساخت صفحه زیرگروه دسته بندی ها
صفحه مدیریت محصول - تاریخ شمسی - outlet
ساخت کامپوننت های فرم ها با فرمیک و تکمیل بخشی از صفحه افزودن دسته بندی
حذف کدهای اضافی بعد از دریافت response از سمت سرور با axios.interceptors
افزودن دسته بندی جدید
کامپوننت لودر برای استفاده هنگام ریکویست
انتخاب اتوماتیک دسته والد در صفحه ایجاد دسته بندی جدید
ویرایش دسته بندی ها
حذف دسته بندی
مدیریت ویژگی ها در دسته بندی - نمایش جدول ویژگی ها
افزودن ویژیگی برای دسته بندی ها
ویرایش ویژگی های دسته بندی
حذف ویژگی دسته بندی ها - تکمیل بخش دسته بندی ها
صفحه مدیریت برندها
ویرایش و حذف برند ها
تکمیل صفحه مدیریت گارانتی ها
تکمیل صفحه مدیریت رنگ ها - مدیریت color picker با فرمیک
صفحه محصولات با کامپوننت جدول دارای صفحه بندی جدید
افزودن قابلیت جدید به صفحه بندی کامپوننت جداول - حذف محصول
افزودن محصول جدید - انتخاب دسته بندی
صفحه محصولات - لیست کردن کتگوری های انتخاب شده
ساخت کامپوننت های سلکت باکس چند انتخابی و قابل جستجو
نهایی سازی افزودن محصول
حل مشکل چارت داشبورد هنگام ریرندر
ویرایش محصول
ساخت ویرایشگر متن CKEditor
ایجاد فیلدهای ویژگی های محصول
افزودن مقادیر ویژگی برای محصول
دریافت و ویرایش ویژگی های ثبت شده برای محصول
گالری تصاویر محصولات
حذف تصویر محصول و همچنین تنظیم به عنوان تصویر اصلی
صفحه مدیریت تخفیف ها
ایجاد صفحه افزودن تخفیف
افزودن کد تخفیف - ارسال پراپ با Outlet
ویرایش و حذف کدهای تخفیف
شروع بحث مجوز دسترسی مدیران - دریافت لیست مجوز ها
صفحه مدیریت نقش ها
افزودن نقش جدید
ویرایش نقش ها
ورود به صفحه کاربران + حذف نقش
ورود به صفحه افزودن کاربر
افزودن کاربر جدید
ویرایش و حذف کاربر
استفاده از ریداکس برای ذخیره اطلاعات کاربر در استیت گلوبال
نمایش اطلاعات کاربر با استفاده از گلوبال استیت
تعریف Rout ها با توجه به سطح دسترسی کاربر
ساخت هوک شخصی برای مدیریت دسترسی ها
مدیریت آیتم های منو با مجوزهای دسترسی
مدیریت آیکون عملیات با توجه به مجوز دسترسی
پابلیش پروژه های ری اکتی
صفحه مدیریت نحوه ارسال
نمایش و حذف سبد خرید
افزودن سبد خرید - نصب و استفاده از پکیج react-select-search
ویرایش سبد خرید
ساخت صفحه سفارشات
افزودن سفارش
صفحه داشبورد (محصولات رو به اتمام)
صفحه داشبورد (کارد های آمار فروش)
صفحه داشبورد (نمودار وضعیت فروش یک ساله)
پیشنیاز های دوره چه چیزهایی هستند؟
- آموزش جاوا اسکریپت آکادمی کدیاد
- آموزش HTML و CSS آکادمی کدیاد
- آموزش الگوریتم و فلوچارت آکادمی کدیاد
نظرات دانشجویان

محمدرضا صنعتی |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)

وحید سعید |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
خوب دوس دارم نظرم رو راجب دوره برای کسانی که میخوان تهیه کنن بنویسم من تا اینجا 130 قسمت از دوره رو دیدم می تونم بگم جامع ترین و کامل ترین دوره ری اکتی هست که من تونستم پیدا کنم بر خلاف دوره های زیادی که فقط یه سری مطالب کلی میگن راجب ری اکت این دوره ریز جزئیات رو به صورت عملی حتی کوچک ترین ارور هارو پوشش میده و شما اگر به تمام مطالب مسلط باشید واقعا ری اکت کارید اما به هیچ وجه اسون نیست و کلا برنامه نویسی سخته و البته ری اکت ، از شروع دوره اگر وقت دارید عجله ندارید هر قسمت رو چندین بار ببینید و کد بزنید تا بهترین استفاده رو داشته باشید با تشکر از استاد دانا و مسلط دوره جناب بساکی عزیز

ایلیا طاهر |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
سلام استاد اموزش ها فوق العاده عالی هستش🌹🌹❤

میلاد رئوف |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
سلام جناب بساکی خسته نباشید ، تشکر بابت دوره ی خوبتون من تازه دوره رو شروع کردم و این آدرس اولین پروژه ی دوره ، داخل گیت هابه https://github.com/MiladRaouf/timer-miniproject-react

Alaeddin Bahrami |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
سلام استاد خسته نباشید ممنون بابت دوره خوبتون من تازه ریکت رو شروع کردم و اینم لینک ریپوزیتوری تمرین جلسه 11 https://github.com/yusefbahrami/react-Chronometer

محمد میراث احمدی |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
سلام تا این جای پروژه عالی بود خیلی ممنون فقط یک موردی میخواستم بگم که اگه امکانش هست به پروژه اضافه بشه اونم deploy کردن پروژه روی سرور ویندوز iis

نادر راستگو |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
خیلی متشکرم از زحمات شما تا به اینجا خیلی جالب و قابل درک است

AliTitan 0508 |
دانشجوی دوره آموزش جامع و پروژه محور ری اکت (React)
تشکر میکنم از شما بخاطر زمان و انرژی که برا ما میزارین ♡ واقعا قیمت واقعی این دوره میتونه حتی بالای یک میلیون باشه ! و سال جدید رو به شما و خانواده محترمتون تبریک میگم و سال خوبی رو برای شما ارزومندم
مدرس دوره

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