ریاکت چیست؟
ریاکت یک کتابخانه محبوب و پرطرفدار جاوااسکریپت برای ساخت رابط کاربری و توسعه فرانت است، این کتابخانه توسط Facebook پشتیبانی میشود و در پروژه های بزرگی مانند Instagram و Twitter و Paypal استفاده شده است.
چرا ریاکت مهم است؟
ممکنه خیلی از برنامه نویس ها مهارت هایی مثل HTML&CSS و جاوااسکریپت رو داشته باشند که البته برای یک توسعه دهنده فرانتاند این مهارت ها کاملا مهم و ضروری است. اما باید دقت کنید که امروزه بدون شک برای توسعه هر سایتی علاوه بر جاوااسکریپت، از فریم ورک ها و لایبرری های جاوااسکریپت هم استفاده میشود، پس باید با ابزار های به روز و پرکاربرد آشنایی داشته باشید.
وضعیت بازار کار؟
به جرات میتوان گفت که ریاکت چه در ایران و چه در خارج از ایران بازار کار فوق العاده ای دارد و روز به روز نیاز به توسعه دهندگان ریاکت بیشتر میشود.
پیشنیاز های دوره؟
بدون شک برای شروع ریاکت نیاز است که با مباحث HTML&CSS و جاوااسکریپت آشنایی داشته باشید.
ویژگی های دوره؟
همانند دوره های قبل، این دوره هم یک سری ویژگی دارد که آن را از بقیه دوره ها متمایز میکند:
- پوشش کامل مباحث ریاکت از مقدماتی تا پیشرفته(class component ها، functional component ها، وبسایت های تک صفحه ای(SPA)، درخواست های http و ajax در ریاکت و …)
- پروژه محور بودن دوره (پروژه های کاربردی که در پروژه های واقعی هم پیاده میشوند)
- پوشش مباحث مربوط به Redux در پایان همین دوره.
- مشورت با برنامه نویس هایی که سابقه کار در اسنپ را داشتن تا مباحث به صورت کامل پوشش داده شوند.
- بررسی مفاهیم مهم و کاربردی ریاکت و همچنین استفاده از آن در پروژه های دوره.
- دیپلوی کردن پروژه ها بر روی هاست های رایگان.
مزیت های دوره؟
مزیت های دوره باعث پیشرفت سریعتر دانشجو میشود:
- این دوره پشتیبانی دائمی دارد و همیشه پاسخگوی سوالات دانشجویان خواهم بود.
- با آپدیت های جدید ریاکت این دوره هم آپدیت خواهد شد و به صورت رایگان در اختیار دانشجویان دوره قرار خواهد گرفت.
- در صورت تقاضای دانشجویان قسمت های جدید بسته به نیاز آن ها اضافه خواهد شد.
- پذیرای انتقادات و پیشنهادات شما هستم و همیشه سعی در ارتقای دوره ها خواهم داشت.
- برای کسانی که اول راه برنامه نویسی هستند مشاوه رایگان در نظر گرفته شده است (پس دقت کنید که در حین ثبت نام شماره درست را وارد کنید تا از طریق آن در ارتباط باشیم)
به دوره دیگری نیاز خواهم داشت؟
قطعا نه، هر آنچه که برای تسلط شما به ریاکت و ورود به بازار کار لازم است در این دوره گفته شده است و بعد از این دوره به مهارت بالایی خواهید رسید که شما را از هر دوره دیگری بی نیاز میسازد.
پروژه ها؟
- وبسایت فروشگاهی که به صورت SPA هست و از api داخل آن استفاده شده است.
- سبد خرید با استفاده از context و useReducer
سبد خرید با استفاده از Redux و redux-thunk - صرافی ارز دیجیتال برای نشان دادن قیمت ارز های دیجیتال و قابلیت سرچ کردن(دیتا ها از api واقعی گرفته میشود)
- فرم ثبت نام و ورود به همراه اعتبار سنجی.
- پیامرسان شبیه واتساپ با قابلیت چت بین چند نفر، ساختن گروه، ارسال عکس و… .
برای مصاحبه های شغلی هم مفید خواهد بود؟
در انتهای دوره به بررسی سوالات مصاحبه ریاکت میپردازیم و یک سری نکات تجربی هم گفته میشود و همچنین همیشه میتوانید برای رفع مشکل هایتان از پشتیبانی استفاده کنید
معرفی دوره
قمست اول
معرفی دوره
قمست دوم
ریاکت چیست؟
مروری بر مباحث اکمااسکریپت 6
قسمت اول
معرفی فصل
قسمت دوم
تفاوت let و var و const
قسمت سوم
مفهوم reference type و primitive type
قسمت چهارم
استفاده از Spread operator
قسمت پنجم
نحوه Object destructuring جاوااسکریپت
قسمت ششم
مبحث Arrow function
قسمت هفتم
map کردن آرایه ها
قسمت هشتم
Import و export
قسمت نهم
کلاس ها
قسمت دهم
ارث بری
class component ها و مفاهیم اولیه ریکت
قسمت اول
مفهوم virtual DOM در ریاکت
قسمت دوم
راه اندازی یک پروژه ریاکت
قسمت سوم
JSX چیست؟
قسمت چهارم
بررسی ساختار فایل ها و فولدر ها(folder structure)
قسمت پنجم
Class component ها
قسمت ششم
مفاهیم JSX
قسمت هفتم
مفهوم reusable component(کامپوننت های با قابلیت استفاده مجدد)
قسمت هشتم
Functional component ها
قسمت نهم
بحث dynamic content
قسمت دهم
props در کلاس کامپوننت ها
قسمت یازدهم
props در فانکشنال کامپوننت ها
قسمت دوازدهم
مفهوم state
قسمت سیزدهم
استفاده از setState
قسمت چهاردهم
React snippets
قسمت پانزدهم
Destructuring در ریاکت
روش های مختلف استایل دهی و اضافه کردن css به پروژه های ریکت
قسمت اول
استایل دهی به ریاکت - inline css و css file
قسمت دوم
استایل دهی به ریاکت - css module و فواید آن
قسمت سوم
پروژه وبسایت - قسمت اول: ساخت کامپوننت های navbar و banner
قسمت چهارم
پروژه وبسایت - قسمت دو: استفاده از مفهوم reusable components
قسمت پنجم
پروژه وبسایت - قسمت سه: ساخت footer
قسمت ششم (آپدیت)
Radium در inline css ها
قسمت هفتم (آپدیت)
styled component ها - قسمت اول
قسمت هشتم (آپدیت)
styled component ها - قسمت دوم
قسمت نهم (آپدیت)
تمرین hamburger menu
قسمت دهم (آپدیت)
sass در ریکت
فرم ها و event ها
قسمت اول
راه اندازی پروژه های آماده با npm
قسمت دوم
مدیریت کردن event ها
قسمت سوم
Binding در کلاس کامپوننت ها
قسمت چهارم
فرم ها – قسمت اول
قسمت پنجم
فرم ها – قسمت دوم
قسمت ششم
پروژه وبسایت – قسمت چهار: استفاده از event ها و فرم ها
Conditional rendering و List Rendering
قسمت اول
پاس دادن method ها به عنوان props
قسمت دوم
Conditional rendering
قسمت سوم
پروژه وبسایت – قسمت پنج: استفاده از conditional rendering
قسمت چهارم
List rendering
قسمت پنجم
مفهوم key در list rendering
قسمت ششم
پروژه وبسایت – قسمت شش: استفاده از list rendering
فصل هفتم - چرخه حیات (Lifecycle)
قسمت اول
مفهوم lifecycle ها
قسمت دوم
لایف سایکل mounting
قسمت سوم
لایف سایکل updating
قسمت چهارم
لایف سایکل unmounting
مفاهیم پیشرفته ریکت
قسمت اول
Pure component ها
قسمت دوم
مفهوم و نحوه استفاده از memo
قسمت سوم
مفهوم و نحوه استفاده از ref
قسمت چهارم
propTypes
قسمت پنجم
مفهوم و نحوه استفاده از portal
قسمت ششم
Error boundary
قسمت هفتم
معرفی اکستنشن React devtools
قسمت هشتم
مفهوم lifting state up
قسمت نهم
HOC(Higher Order Component) – قسمت اول
قسمت دهم
HOC(Higher Order Component) – قسمت دوم
قسمت یازدهم
Render prop
ajax و درخواست های http در ریاکت
قسمت اول
معرفی فصل
قسمت دوم
استفاده از fetch برای get کردن
قسمت سوم
استفاده از fetch برای post و delete کردن
قسمت چهارم
معرفی axios
قسمت پنجم
استفاده از axios برای get کردن
قسمت ششم
استفاده از axios برای post کردن
قسمت هفتم
استفاده از axios برای delete کردن
قسمت هشتم
هندل کردن خطا ها در axios
قسمت نهم (آپدیت)
درخواست ها put و patch
قسمت دهم (آپدیت)
simultaneous requests در axios
قسمت یازدهم (آپدیت)
interceptor ها در axios
قسمت دوازدهم (آپدیت)
default globals در axios
سایت های تک صفحهای یا Single Page Application (SPA)
قسمت اول (آپدیت)
راه اندازی اولیهی یک سایت تک صفحه ای
قسمت دوم
ایجاد کردن route ها
قسمت سوم
استفاده از Link و Switch
قسمت چهارم
Props در سایت های SPA
قسمت پنجم
پارامتر های در routing
قسمت ششم
Query string
قسمت هفتم
Redirdect
قسمت هشتم
Navigation
قسمت نهم
Nested routing
قسمت دهم
پروژه وبسایت – قسمت هفت: استفاده از API
قسمت یازدهم
پروژه وبسایت – قسمت هشت: SPA کردن پروژه
قسمت دوازدهم
تفاوت اکستنشن های js و jsx
فصل یازدهم - ورژن 6 پکیج react-router-dom برای سایت های SPA (آپدیت)
قسمت اول (آپدیت)
Routes و نحوه استفاده از آن
قسمت دوم (آپدیت)
هوک useParams
قسمت سوم (آپدیت)
Navigate و نحوه استفاده از آن
قسمت چهارم (آپدیت)
هوک useNavigate
قسمت پنجم (آپدیت)
تغییرات nested route ها در ورژن 6
قسمت ششم (آپدیت)
ویژگی های جدید در Nested route ها
hook ها و functional component ها در ریکت
قسمت اول
معرفی هوک ها
قسمت دوم
استفاده از هوک useState
قسمت سوم
prevState ها در فانکشنال کامپوننت ها
قسمت چهارم
آبجکت ها در useState
قسمت پنجم
آرایه ها در useState
قسمت ششم
هوک useEffect و لایف سایکل updating
قسمت هفتم
هوک useEffect و لایف سایکل mounting
قسمت هشتم
هوک useEffect و لایف سایکل unmounting
قسمت نهم
هوک useEffecهوک useEffect و درخواست های httpt و لایف سایکل unmounting
قسمت دهم
مفهوم context
قسمت یازدهم
هوک useContext
قسمت دوازدهم
هوک useReducer – قسمت اول
قسمت سیزدهم
هوک useReducer – قسمت دوم
قسمت چهاردهم
هوک useReducer – قسمت سوم
قسمت پانزدهم
هوک useReducer و درخواست های http
قسمت شانزدهم
مقایسه useState و useReducer
قسمت هفدهم
هوک useMemo
قسمت هجدهم
هوک useCallback
قسمت نوزدهم
هوک useRef
قسمت بیستم
Custom hook ها – قسمت اول
قسمت بیستم و یکم
Custom hook ها – قسمت دوم
تمرین چندین پروژه کاربردی
قسمت اول
شروع پروژه فرم ثبت نام همراه با اعتبارسنجی
قسمت دوم
پروژه فرم ثبت نام – فانکشن اعتبارسنجی
قسمت سوم
پروژه فرم ثبت نام – touch handler
قسمت چهارم
پروژه فرم ثبت نام – استایل دهی
قسمت پنجم (آپدیت)
پروژه فرم ورود
قسمت ششم (آپدیت)
پروژه فرم ورود با ورژن شش react-router-dom
قسمت هفتم
شروع پروژه سبد خرید
قسمت هشتم (آپدیت)
پروژه سبد خرید – api و context
قسمت نهم
پروژه سبد خرید – store
قسمت دهم
پروژه سبد خرید - صفحه جزییات محصول
قسمت یازدهم
پروژه سبد خرید – قسمت اول reducer
قسمت دوازدهم
پروژه سبد خرید – قسمت دوم reducer
قسمت سیزدهم
پروژه سبد خرید - handlers
قسمت چهاردهم
پروژه سبد خرید – navbar
قسمت پانزدهم
پروژه سبد خرید – cart
قسمت شانزدهم
پروژه سبد خرید – استایل دهی
قسمت هفدهم
پروژه سبد خرید – cart counter
قسمت هجدهم (آپدیت)
پروژه سبد خرید با react-router-dom ورژن 6
قسمت نوزدهم
شروع پروژه صرافی ارز دیجیتال با قابلیت سرچ
قسمت بیستم
پروژه صرافی ارز دیجیتال – API
قسمت بیست و یکم
پروژه صرافی ارز دیجیتال – Loader
قسمت بیست و دوم
پروژه صرافی ارز دیجیتال – filter
قسمت بیست و سوم
پروژه صرافی ارز دیجیتال – استایل دهی
قسمت بیست و چهارم (آپدیت)
شروع پروژه پیام رسان
قسمت بیست و پنجم
پروژه پیام رسان – صفحه لاگین
قسمت بیست و ششم
پروژه پیام رسان – authentication
قسمت بیست و هفتم
پروژه پیام رسان - context
قسمت بیست و هشتم
پروژه پیام رسان – قسمت logout
قسمت بیست و نهم
پروژه پیام رسان – chat engine
دیپلوی کردن پروژه بر روی هاست های رایگان vercel و netlify
قسمت بیست و هشتم
پروژه پیام رسان – دیپلوی کردن پروژه بر روی netlify
قسمت بیست و نهم
پروژه پیام رسان – دیپلوی کردن پروژه بر روی vercel
سوالات مصاحبه ریکت
قسمت اول
سوالات مصاحبه ریاکت
ریکت ورژن 18
قسمت اول
معرفی ریکت ورژن 18
قسمت دوم
شروع پروژه با ریکت ورژن 18 و بررسی تغیرات
قسمت سوم
مفهوم Concurrency در ریکت ورژن 18
قسمت چهارم
پیاده سازی یک مینی پروژه برای مفهوم concurrency
قسمت پنجم
استفاده از هوک useTransition برای استفاده از concurrency
قسمت ششم
استفاده از isPending
قسمت هفتم
هوک useDeferredValue
قسمت هشتم
تغییرات state batching
قسمت نهم
کامپوننت suspense
ریداکس و redux-thunk
قسمت اول
معرفی ریداکس
قسمت دوم
مفاهیم ریداکس
قسمت سوم
راه اندازی ریداکس
قسمت چهارم
ساخت action و reducer و store
قسمت پنجم
پکیج react-redux
قسمت ششم
هوک های react-redux
قسمت هفتم
Multiple reducers
قسمت هشتم
Logger middleware
ریداکس پیشرفته و redux-thunk
قسمت اول
اکستنشن redux devtools
قسمت دوم
Payload
قسمت سوم
Async action و http – قسمت اول
قسمت چهارم
Async action و http – قسمت دوم
پروژه ریداکس
قسمت اول
معرفی پروژه سبد خرید با ریداکس
قسمت دوم
پروژه سبد خرید با ریداکس – گرفتن دیتا ها از API
قسمت سوم
پروژه سبد خرید با ریداکس – نشان دادن محصولات
قسمت چهارم
پروژه سبد خرید با ریداکس – صفحه جزییات محصول
قسمت پنجم
پروژه سبد خرید با ریداکس – cart reducer
قسمت ششم
پروژه سبد خرید با ریداکس – cart
دوره های مرتبط
دوره آموزش گیت، گیتهاب و گیتلب
گیت چیست؟ گیت یک برنامه کنترل ورژن است که به کمک آن خیلی راحت میتوان پروژه را مدیریت کرد و به…
آموزش SASS
در این دوره چه آموزش داده میشود!؟ یکی از مهارت هایی که بعضا خیلی مورد توجه کارفرماها قرار میگیرد و…
دوره جامع html و css
چرا برنامه نویسی؟ توی شرایط اقتصادی فعلی که همه ما درگیر آن هستیم داشتن شغل مناسب با درآمد کافی بسیار…
آموزش mobile first design
در این دوره چه آموزش داده می شود؟ با توجه به اینکه درصد بالایی از کاربران سایت ها با گوشی…
2,289,000 تومان
amyrbaszahdy86( دانشجوی دوره )
عواهههههه
من اولین نفری بودم که دوره رو دیدم سرفصل ها هم به نظرم کامل میومد
اما استاد یه چیزی نمیشه خورد خورد و به صورت قسطی بهتون هزینه دوره رو پرداخت کنم؟؟؟؟؟
لطفا
مدیر سایت(مدیریت)
سلام وقت بخیر
خیلی ممنون، واقعا برای این دوره سعی کردم که همه چی رو بگم تا بعد از این دانشجو ها آمادی ورود به بازار کار رو داشته باشن
برای شرکت کردن به صورت قسطی هم چون اولین کامنت رو گذاشتید پیشنهاد میکنم تو اینستا یه پیام بهم بدید 🙂
حسین( دانشجوی دوره )
مگه میشه میلاد دوره بده بد باشه ؟؟؟؟ عالییییییی
مدیر سایت(مدیریت)
چاکریم حسین جان❤️❤️
حسین( دانشجوی دوره )
پیشنهاد میکنم قبلش دوره های html و css و js رو حتما حتمااااا ببینید
مدیر سایت(مدیریت)
دقیقا 👍
amyrbaszahdy86( دانشجوی دوره )
خب خب بالاخره من هم دوره رو تهیه کردم
اول از همه به خودم و استاد اعظمی عزیز قول میدم که بترکونم
و بعد به استاد اعظمی قول میدم که از اعتمادش سواستفاده نمیکنم
استاد دمت گررررررررررممممممم بهترینی به خدا ((:
مدیر سایت(مدیریت)
قربانت امیر جان تو ثابت شده ای❤️
رضا رستگار
به به😃خسته نباشید استاد💪🏻❤️
انشاالله جاوااسکریپت رو که کامل تموم بکنیم😅 نوبت به ریکت میرسه 😎🔥
مدیر سایت(مدیریت)
چاکریم رضا جان❤️
ایشالا که بترکونی🔥🔥
amyrbaszahdy86( دانشجوی دوره )
چقدر زود 28 نفر شدیم
این نشون میده دوره چقدر عااالیه
دمت گرررررررممممممم استاد
مدیر سایت(مدیریت)
فدمدا❤️❤️
nobakhtvafa( دانشجوی دوره )
دوره الان واقعا عالی و بی نقص بوده ولی خیلی بهتر میشد فایل های هر قسمت توی فایل rar میبود مثلا پروژه قسمت 30 اگه عکساش هم توی فایل rar میبود خودمون هم میتونستیم پیاده سازیش کنیم
مدیر سایت(مدیریت)
فایل پروژه ها همراه هر قسمت هست و عکس ها هم داخلشه
nobakhtvafa( دانشجوی دوره )
خوب مثل اینکه من زود نظر دادم پروژه های بعدی شامل این موضوع میشد😄✌🏾🧡
مدیر سایت(مدیریت)
اره دقیقا 😄😄😄
سعیده
سلام استاد ببخشید دوره تمام شده یا هنوز در حال ضبط هست؟
مدیر سایت(مدیریت)
سلام دوره به صورت کامل ضبط شده و بعد از ثبت نام به تموم قسمت ها دسترسی پیدا میکنید
mhd.mirzaie83
سلام استاد عزیز،
من یک سوالی که درباره این دوره دارم اینه که آیا توی پروژه های این دوره عمل Authentication یا همون اهراز هویت کار شده است یا نه؟ منظورم عملیات کامل ثبت نام و لاگین کردن.
تشکر
amir.dv8212( دانشجوی دوره )
بله ، تو پروژه برنامه چت ، کار شده
bayatir73( دانشجوی دوره )
سلام اگه منظورتون اعتبار سنجی هست بله یه پروژه کار شده
mohammadghanbaridecoder( دانشجوی دوره )
سلام اقای عظمی روش پشتیبانی رو زدین واتساپ و تلگرام ولی واتساپتون رو که نزدین تو سایت . و تلگرامتون هم کاناله من چجوری بهتون پیام بدم . لطفا اگه میشه راهنمایی کنید .
مدیر سایت(مدیریت)
بعد از ثبت نام خودم بهتون پیام میدم تو واتسپ و اگر پیام ندادم تو اینستاگرام بهم دایرکت بدید تا بررسی کنم 🙏❤️
mahsa.jafari3855( دانشجوی دوره )
نزدیک ۱ سال هست دارم ری اکت کار میکنم خیلی از مفاهیم رو متوجه نشده بودم و فقط کار میکردم
اماالان ک این دوره رو تا فصل ۹ دیدم خیلی از مفاهیم که برام جانیفتاده بود کاملا مسلط شدم ممنون
مدیر سایت(مدیریت)
خیلی ممنون از نظرتون 😍🙏
و خیلی خوشحالم که دوره براتون مفید بوده ❤️
zainullah.aimaque( دانشجوی دوره )
عالی هستید
مدیر سایت(مدیریت)
چاکرییییم ❤️❤️
golestan900( دانشجوی دوره )
سلام وقت بخیر، دوره ری اکت رو خریداری کردم ولی ویديو های قسمت های قفل شده برا من نشون داده نمیشه، چرا این اتفاق افتاده؟
مدیر سایت(مدیریت)
سلام وقتتون بخیر، توی واتسپ بهتون پیام میدم برای پشتیبانی و دسترسی دوره رو براتون آنلاک میکنم ❤️
aliannezhadamir
سلام خدمت استاد محترم
آموزش ریکت شما عالی هستش و ممنونم بابت زحمتی که برای این آموزش کشیده اید.
اما همون طور که خودتونم میدونید ، ریکت و ریداکس به تنهایی برای پروژه های SSR کافی نیستند و نیازمند فریمورک هایی مثل next.js هستن.
خواستم بپرسم که آیا آموزش next.js هم تو برنامتون هست؟ اگر هست زمانش رو بگید.
ممنون
مدیر سایت(مدیریت)
قربانت علی جان لطف داری 🙏
بحث نکست گستردهس و تو این دوره نمیگنجید ولی حتما یک دوره مجزا برای نکست هم خواهم ساخت ❤️
behrozsedighisf( دانشجوی دوره )
دوستان برای خرید این دوره تردید نداشته باشید عالییه مرسی میلاد جان
مدیر سایت(مدیریت)
چاکریم بهروز جان لطف داری❤️
nobakhtvafa( دانشجوی دوره )
سلام من نمیتونم آپدیت هارو نگاه کنم اصلا نمیاد، دانلود هم نمیتونم کنم