متخصص React
(ری اکت دولوپر)

با تدریس   مجتبی سوری
برنامه نویس ارشد اسنپ فود

۴۷ ساعت
۲۲۶ جلسه
1 تمرین
۱ سال پشتیبانی
گارانتی بازگشت ۱۰۰ درصدی وجه

آموزش React JS


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

این دوره شما را به خوبی با کتابخانه React آشنا می‌کند و اگر به فکر افزایش سطح مهارت خود هستید، می‌توانید روی این دوره حساب کنید.

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

چرا باید در دوره آموزش React شرکت کنیم و آنرا یاد بگیریم؟

دلایل بسیاری برای این مسئله وجود داره ، اما باید به این نکته مهم اشاره کنیم که در دنیا امروز توجه بسیار ویژه ای به جلوه های بصری و UI می‌شود و عده بسیار زیادی از محققان معتقدند که اگر وب سایت یا اپلیکیشنی این طراحی جذاب و کاربرپسند را نداشته باشند شانس اینکه مورد توجه کاربران قرار بگیرند کاهش می‌یابد.

آموزش برنامه نویسی ری اکت به شما این امکان را می‌دهد که ظرف مدت کوتاهی بتوانید بهترین UX و UI را برای کابرانتان طراحی و اجرا کنید.

آیا دوره ری اکت مناسب برنامه نویسان فول استک هست؟

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

این دوره
برای چه کسانی
مناسـب اسـت؟

  • کسانی که به‌دنبال ارتقای شغلی و سطح درآمد هستند.
  • کسانی که با زبان جاوا اسکریپت به خوبی آشنا هستند.

این دوره
برای چه کسانی
مناسـب نیست؟

  • کسانی که چالش‌پذیری کمتری دارند و روتین خود را ترجیح می‌دهند
  • کسانی که در دنیای برنامه‌نویسی مبتدی هستند

نظرات دانشجویان دانشجویان سابق دوره چه می گویند؟

علیرضا بابایی

علیرضا بابایی | ‏ ۱۴۷۸ روز با سون لرن
دانشجوی دوره متخصص React

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

M.GH

M.GH | ‏ ۷۹۱ روز با سون لرن
دانشجوی دوره متخصص React

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

دموی جلسات و پروژه های دوره

ویژگی های دوره

ما به کیفیت و اثربخشی محصول خود اعتقاد داریم و به همین منظور گارانتی بازگشت وجه یک ماهه به شما ارائه می دهیم تا خریدی بدون ریسک و بدون نگرانی داشته باشید.
هزینه‌ای که بابت دوره پرداخت می‌کنید تا 1 ماه در اختیار خودِ شماست. اگر پس از خرید دوره به‌صورت جامع، به هر دلیلی از شرکت در آن منصرف شدید تا ١ ماه پس از خريد امكان انصراف و بازگشت كامل وجه برای شما درنظر گرفته شده است. برای انصراف از دوره لازم است در بازه زمانی تعیین شده درخواست خود را با پشتیبانی مطرح کرده و حداکثر ۲۵% از دوره را مشاهده کرده باشید. پس از انصراف همواره منتظر نظرات و پیشنهادات شما برای بهبود کیفیت دوره و نحوه ارائه آن‌ها هستیم و امیدواریم در حوزه موردنظر خود به موفقیت و فرصت‌های بزرگی دست پیدا کنید.

آموزش مهارت‌محور به این معنی‌ست که در طول دوره و باتوجه به میزان پیچیدگی هر مبحث آموزشی تمرین‌، آزمون و پروژه‌های مختلفی برای شما در نظر گرفته شده است تا یادگیری خود را تکمیل کنید. همچنین برگزاری وبینارهای متعدد و عضویت در گروه تلگرامی دوره امکان ارتباط با اساتید، منتورها و سایر دانشجویان را برای شما فراهم می‌کند. وضعیت آموزشی هر دانشجو برای منتورهای دوره قابل رصد و ارزیابی‌ست زیرا منتورها از بین دانشجویان برتر انتخاب شده‌اند و به‌خوبی با فرایند آموزشی و چالش‌های دوره آشنایی دارند. پایبندی به این متد آموزشی علاوه‌بر ارتقا سطح مهارتی که دارید، شما را با چالش هاى فنى و نحوه مدیریت آن‌ها آشنا مى كند و اين همان چيزى‌ست كه برای حضور در بازار كار به آن نياز داريد.

هیچ سوالی بی‌جواب نخواهد ماند. پس از ورود به دوره امكان پرسش و پاسخ و رفع اشكال براى شما فراهم است. شما می‌توانید در هر ساعتی از شبانه روز سوالات خود را مطرح کنید و اساتید یا منتورهای دوره در سريع‌ترين زمان ممكن به شما پاسخ خواهند داد. حضور در این فضای تعاملی و همراهی با دیگران می‌تواند در ارتقای مهارت‌های نرم دانشجویان و ایجاد یک رقابت سالم نقش موثری داشته باشد.

فعالیت‌های آموزشی تعریف شده در دوره مانند مشاهده جلسات، تمرین، آزمون، پروژه، پاسخ دادن به سوال دیگران و غیره با شاخصی به‌نام xp ارزیابی می‌شوند که منجربه رتبه‌بندی دانشجویان خواهد شد. به این معنی که دانشجویان با انجام هر کدام از موارد بالا و کسب امتیاز (xp) مربوط به آن فرایند، جایگاه خود را در رتبه‌بندی دوره ارتقا می‌دهند. طبیعتا دانشجویانی که xp بیشتری دارند نسبت به دیگران از رتبه و مهارت بهتری برخوردار هستند و آمادگی بیشتری برای ارزیابی‌های پایان دوره و کسب موقعیت‌های شغلی دارند. هر فعالیتی xp مشخصی دارد تا علاوه‌بر تشویق دانشجو برای پایبندی به آموزش، یک معیار مشخص و عادلانه برای انتخاب دانشجویان برتر ارائه دهد. بدین ترتیب شما می‌توانید میزان مشارکت و پیشرفت خود را با دیگران مقایسه و در فرصت باقی‌مانده از دوره، برای بهبود وضعیت آموزشی خود تلاش کنید.

هرساله شرکت‌های معتبری از سراسر ایران اقدام به جذب نیرو در حوزه تکنولوژی می‌کنند و بسیاری از این مجموعه‌ها از سون‌لرن درخواست معرفی نیروی متخصص دارند. در این شرایط سون‌لرن خود را موظف می‌داند تا افراد برتر هر دوره را اعتبارسنجی کرده و به شرکت‌های متقاضی جهت استخدام معرفی کند. سایر دانشجویان نیز درصورت بهره‌مندی کامل از محتوای دوره و تکمیل مهارت‌های خود به‌راحتی قادر به اشتغال و فعالیت در زمینه موردنظر خود خواهند بود.

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

محتوای دوره‌ها همواره در اختیار شماست و لازم نیست نگران منقضی شدن آن و یا از بین رفتن پروفایل کاربری خود باشید چرا که بدون محدودیت زمانی و مکانی به آن دسترسی دارید. درضمن هر زمان که برخی مباحث آموزشی تغییر کرده و نیازمند به‌روزرسانی باشند، محتوای به‌روزشده سرفصل‌هایی که خریداری کرده‌اید در پنل کاربری شما در سایت 7learn.com قرار خواهد گرفت.

دانشجویان سابق متخصص سون لرن کجا استخدام شدند؟

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

در این دوره دانش فنی موردنیاز شما تدریس می‌شود، کافی‌ست نهایت استفاده را از آن داشته باشید تا مانند بسیاری از دانشجوهای موفق سون‌لرن، از فرصت های شغلی چنین شرکت‌های مطرحی بهره‌مند شوید.

و ده ها
شرکت دیگر

سرفصل های دوره

در این سرفصل مباحث اولیه React  و موارد مورد نیاز برای کدنویسی با آن آموزش داده خواهد شد.

  • React چیست؟ رایگان ۱۹ دقیقه
  • ساخت UI با استفاده از JS منتشر شده ۳۲ دقیقه
  • Hello World With React منتشر شده ۱۴ دقیقه
  • Hello World With React (React 18) منتشر شده ۵ دقیقه
  • JSX و ویژگی‌های آن منتشر شده ۲۱ دقیقه
  • Component چست؟ رایگان ۱۲ دقیقه
  • نحوه ساخت functinal component منتشر شده ۱۷ دقیقه
  • ایجاد Component با استفاده از Class منتشر شده ۱۵ دقیقه
  • React Component Props منتشر شده ۱۷ دقیقه
  • آشنایی با Create React App منتشر شده ۲۰ دقیقه
  • List rendering منتشر شده ۲۵ دقیقه
  • state چست؟ منتشر شده ۲۲ دقیقه
  • Event handeling منتشر شده ۲۷ دقیقه
  • Event Handling (part 2) منتشر شده ۱۲ دقیقه
  • ایجاد ارتباط بین کامپوننت ها منتشر شده ۳۱ دقیقه
  • ایجاد ارتباط بین کامپوننت ها (جلسه دوم) منتشر شده ۱۷ دقیقه
  • Conditional Rendering منتشر شده ۲۲ دقیقه
  • تبدیل template ساده چت به React منتشر شده ۳۵ دقیقه
  • پیاده سازی to-do list ساده
  • json server رایگان ۱۶ دقیقه

در این سرفصل همه نکات مربوط به class components از جمله State , Lifecycle , بهینه سازی کامپوننت ها و ... کامل شرح داده خواهد شد و در انتها برای جمع بندی یک مینی پروژه خواهیم داشت.

  • Lifecycle Methods رایگان ۱۲ دقیقه
  • componentDidMount منتشر شده ۶ دقیقه
  • مینی پروژه دریافت اطلاعات بر اساس IP کاربر منتشر شده ۲۹ دقیقه
  • componentDidUpdate منتشر شده ۷ دقیقه
  • مینی پروژه نمایش پست ها به همراه سایدبار منتشر شده ۲۸ دقیقه
  • مینی پروژه نمایش پست ها به همراه سایدبار (پارت دوم) منتشر شده ۱۵ دقیقه
  • componentWillUnmount منتشر شده ۴ دقیقه
  • مثال استفاده از componentWillUnmount منتشر شده ۱۰ دقیقه
  • getDerivedStateFromProps منتشر شده ۱۳ دقیقه
  • مثال استفاده از getDerivedStateFromProps (پارت اول) منتشر شده ۲۳ دقیقه
  • مثال استفاده از getDerivedStateFromProps (پارت دوم) منتشر شده ۱۲ دقیقه
  • shouldComponentUpdate منتشر شده ۱۶ دقیقه
  • نحوه اضافه کردن shouldComponentUpdate منتشر شده ۱۳ دقیقه
  • createRef منتشر شده ۱۰ دقیقه
  • مثال استفاده از createRef رایگان ۷ دقیقه
  • getSnapshotBeforeUpdate منتشر شده ۸ دقیقه
  • مثال استفاده از getSnapshotBeforeUpdate منتشر شده ۲۳ دقیقه

در این سرفصل همه نکات مربوط به Functional components و  React Hooks کامل شرح داده خواهد شد و در انتها برای جمع بندی یک مینی پروژه خواهیم داشت.

  • مشکلات class components و دلایل اضافه شدن React Hooks رایگان ۹ دقیقه
  • آشنایی اولیه با useState منتشر شده ۸ دقیقه
  • آشنایی اولیه با useEffect منتشر شده ۶ دقیقه
  • ساده ترین مثال استفاده از Hooks منتشر شده ۷ دقیقه
  • Closure functions منتشر شده ۱۶ دقیقه
  • Stale Closure منتشر شده ۱۵ دقیقه
  • مثال slider (part 1) منتشر شده ۱۴ دقیقه
  • مثال slider (part 2) منتشر شده ۲۶ دقیقه
  • مهمترین تفاوت بنیادی functional و class کامپوننت ها (part 1) منتشر شده ۱۵ دقیقه
  • مهمترین تفاوت بنیادی functional و class کامپوننت ها (part 2) منتشر شده ۶ دقیقه
  • useState Functional updates منتشر شده ۱۲ دقیقه
  • useEffect dependency array منتشر شده ۱۷ دقیقه
  • useEffect cleanup function منتشر شده ۱۵ دقیقه
  • useRef منتشر شده ۱۳ دقیقه
  • useRef vs createRef منتشر شده ۶ دقیقه
  • نحوه استفاده از loading و toast منتشر شده ۲۴ دقیقه
  • user actions منتشر شده ۱۸ دقیقه
  • useReducer (جلسه اول) منتشر شده ۱۸ دقیقه
  • useReducer (جلسه دوم) منتشر شده ۱۳ دقیقه
  • useMemo منتشر شده ۱۲ دقیقه
  • useMemo and useCallback منتشر شده ۹ دقیقه
  • custom hooks منتشر شده ۱۲ دقیقه
  • useDebugValue منتشر شده ۴ دقیقه
  • useLayoutEffect منتشر شده ۶ دقیقه
  • دریافت اطلاعات از wikipedia (ایجاد نقشه جهان با قابلیت کلیک بر روی کشورها) منتشر شده ۲۰ دقیقه
  • دریافت اطلاعات از wikipedia (ایجاد componentها و تعریف event مورد نیاز نقشه) منتشر شده ۱۳ دقیقه
  • دریافت اطلاعات از wikipedia (دریافت اولین پاراگراف صفحه به عنوان summary از ویکی پدیا) منتشر شده ۱۲ دقیقه
  • دریافت اطلاعات از wikipedia (دریافت info از ویکی پدیا) منتشر شده ۹ دقیقه
  • دریافت اطلاعات از wikipedia (دریافت لینک تصویر و راهنمایی برای دریافت اطلاعات به زبان فارسی) منتشر شده ۱۴ دقیقه

بعد از یادگیری موارد پایه ای  React زمان فراگیری قابلیت های پیشرفته تر خود React از جمله Error Boundaries، Context، HOC، Virtual DOM ، Typechecking و ... می رسد. همچنین best practice های موجود برای React نیز بیان می شوند.

  • آشنایی با virtual DOM جلسه اول منتشر شده ۱۵ دقیقه
  • آشنایی با virtual DOM جلسه دوم منتشر شده ۲۴ دقیقه
  • استفاده درست از key و عواقب استفاده اشتباه!! منتشر شده ۱۹ دقیقه
  • آشنایی با Higher-Order Components منتشر شده ۲۵ دقیقه
  • آشنایی با context منتشر شده ۱۳ دقیقه
  • استفاده از context در functional components منتشر شده ۱۴ دقیقه
  • استفاده از context در class components منتشر شده ۵ دقیقه
  • مثال پیاده سازی فرآیند ورود کاربر (بخش اول) منتشر شده ۱۸ دقیقه
  • مثال پیاده سازی فرآیند ورود کاربر (بخش دوم) منتشر شده ۱۲ دقیقه
  • مثال پیاده سازی فرآیند ورود کاربر (بخش سوم) منتشر شده ۲۹ دقیقه
  • مثال پیاده سازی فرآیند ورود کاربر (بخش چهارم) منتشر شده ۱۸ دقیقه
  • استفاده مجدد از کامپوننت به چه معناست و در چه سطحی باید در پروژه انجام شود؟ منتشر شده ۱۳ دقیقه
  • آشنایی با الگوی Container-Presenter و شفاف سازی در خصوص استفاده یا عدم استفاده از آن منتشر شده ۱۵ دقیقه
  • آشنایی با انواع ساختاربندی پوشه ها و فایل های پروژه در React منتشر شده ۲۶ دقیقه
  • نحوه استفاده از متغییرهای محیطی در React منتشر شده ۱۴ دقیقه
  • پیاده سازی یک نمونه سرویس (axios) در React منتشر شده ۲۶ دقیقه
  • page layout منتشر شده ۲۴ دقیقه
  • پیاده سازی routing ساده منتشر شده ۱۱ دقیقه
  • نحوه کنترل UI یک کامپوننت با استفاده از Props منتشر شده ۲۵ دقیقه
  • جابه جایی بین صفحات برنامه منتشر شده ۲۸ دقیقه
  • سیاست های ارائه نسخه های جدید در React منتشر شده ۴ دقیقه
  • JSX Transform جدید چیست و چگونه از آن استفاده نماییم منتشر شده ۱۱ دقیقه
  • تغییرات Event Delegation در React 17 منتشر شده ۱۶ دقیقه
  • حذف Event Pooling در React 17 منتشر شده ۳ دقیقه
  • تغییرات Effect Cleanup در React 17 منتشر شده ۱۲ دقیقه
  • پرسش و پاسخ دانشجویان در پایان وبینار React 17 منتشر شده ۱۳ دقیقه

یکی از قابلیت های مهم مورد نیاز در برنامه های SPA بحث routing می باشد که در این سرفصل در ابتدا با مفاهیم این حوزه آشنا شده و در ادامه دوره با پکیج های جانبی از جمله React routing که در این مورد وجود دارد آشنا می شویم

  • معرفی مفهوم routing رایگان ۱۱ دقیقه
  • آشنایی با location api در مرورگر منتشر شده ۲ دقیقه
  • آشنایی با history api در مرورگر منتشر شده ۱۲ دقیقه
  • ایجاد یک کامپوننت ساده برای رندر کردن کامپوننت متناسب با آدرس وارد شده منتشر شده ۸ دقیقه
  • پیاده سازی یک کامپوننت link برای اضافه کردن لینک ها به برنامه منتشر شده ۸ دقیقه
  • پیاده سازی forceUpdate برای کامپوننت route منتشر شده ۱۴ دقیقه
  • رندر مجدد route ها با تغییر آدرس منتشر شده ۶ دقیقه
  • تفاوت hash routing و history منتشر شده ۵ دقیقه
  • معرفی کامپوننت های اصلی پکیج React router (شروع آموزش پکیج React router) منتشر شده ۵ دقیقه
  • آشنایی با نحوه اضافه کردن react router به پروژه منتشر شده ۱۲ دقیقه
  • آشنایی با route render methods در React router منتشر شده ۱۷ دقیقه
  • تفاوت Static Routing و Dynamic Routing منتشر شده ۴ دقیقه
  • نحوه پیاده سازی nesting routing در React router منتشر شده ۴ دقیقه
  • نحوه دسترسی به params در کامپوننت ها با استفاده از match و useParams منتشر شده ۸ دقیقه
  • دسترسی به history با استفاده از useHistory منتشر شده ۳ دقیقه
  • آشنایی با useRouteMatch در React router منتشر شده ۷ دقیقه
  • آشنایی با آبجکت location و استفاده از useLocation منتشر شده ۵ دقیقه
  • پیاده سازی مثال ورود کاربر با استفاده از React Router (بخش اول) منتشر شده ۷ دقیقه
  • پیاده سازی مثال ورود کاربر با استفاده از React Router (بخش دوم) منتشر شده ۱۴ دقیقه
  • پیاده سازی مثال ورود کاربر با استفاده از React Router (بخش سوم) منتشر شده ۱۷ دقیقه
  • روش انطباق آدرس وارد شده در React router (بخش اول) منتشر شده ۱۰ دقیقه
  • روش انطباق آدرس وارد شده در React router (بخش دوم) منتشر شده ۹ دقیقه
  • بررسی propsهای BrowserRouter و نمایش پیغام به کاربر با Prompt منتشر شده ۱۵ دقیقه
  • تغییر استایل لینک فعال با استفاده از NavLink منتشر شده ۷ دقیقه
  • بررسی نکات مثال Modal Gallery منتشر شده ۱۱ دقیقه
  • بررسی نکات مثال های مطرح شده در سایت React router منتشر شده ۱۴ دقیقه

یکی از مهمترین موارد در پروژه های React مدیریت کردن state می باشد که یکی از معروف ترین کتابخانه های موجود برای این مورد redux می باشد. در این سرفصل یاد خواهید گرفت چگونه با استفاده از redux به صورت حرفه ای state را در برنامه های React مدیریت کنید.

  • معرفی پکیج Redux رایگان ۸ دقیقه
  • آشنایی با ساختار ذخیره سازی State منتشر شده ۶ دقیقه
  • آشنایی با action و کاربرد آن منتشر شده ۵ دقیقه
  • تعریف ساده از توابع pure منتشر شده ۳ دقیقه
  • آشنایی با Reducer و کاربرد آن منتشر شده ۶ دقیقه
  • آشنایی و پیاده سازی Store منتشر شده ۱۱ دقیقه
  • اضافه کردن قابلیت subscribe به Store منتشر شده ۶ دقیقه
  • نحوه اضافه کردن Redux به پروژه منتشر شده ۳ دقیقه
  • اولین مثال ساده استفاده از Redux در React منتشر شده ۷ دقیقه
  • استفاده مستقیم از Store و حل مثال todo list ساده منتشر شده ۱۹ دقیقه
  • پیاده سازی برقراری ارتباط بین react و redux منتشر شده ۲۱ دقیقه
  • ترکیب کردن Reducer ها منتشر شده ۱۶ دقیقه
  • نحوه پیاده سازی combineReducers و استفاده از آن منتشر شده ۷ دقیقه
  • چرخه جریان اطلاعات (Data flow) در Redux منتشر شده ۵ دقیقه
  • آشنایی با ۳ قانون اصلی Redux منتشر شده ۶ دقیقه
  • پیاده سازی مثال todos (شناسایی state و actions) بخش اول منتشر شده ۱۷ دقیقه
  • پیاده سازی مثال todos (پیاده سازی todosSlice) بخش دوم منتشر شده ۳۰ دقیقه
  • پیاده سازی مثال todos (پیاده سازی todosSlice) بخش سوم منتشر شده ۱۷ دقیقه
  • پیاده سازی مثال todos (جلوگیری از رندر مجدد همه todoها) بخش چهارم منتشر شده ۱۱ دقیقه
  • معرفی Redux dev tools منتشر شده ۹ دقیقه
  • معرفی و نحوه استفاده از پکیج immer منتشر شده ۱۶ دقیقه
  • پیاده سازی مثال todos (اضافه کردن immer به پروژه) بخش پنجم منتشر شده ۶ دقیقه
  • پیاده سازی مثال todos (اضافه کردن filtersSlice) بخش ششم منتشر شده ۳۰ دقیقه
  • پیاده سازی مثال todos (پیاده سازی فیلتر todoها) بخش هفتم منتشر شده ۱۴ دقیقه
  • معرفی و نحوه استفاده از پکیج reselect منتشر شده ۱۳ دقیقه
  • پیاده سازی مثال todos (پیاده سازی تغییرات رنگ و اکشن های پاک کردن و کامل کردن todoها) بخش هشتم منتشر شده ۲۱ دقیقه
  • آشنایی با مفهوم و کاربرد enhancer و پیاده سازی آنها منتشر شده ۱۶ دقیقه
  • آشنایی با مفهوم و کاربرد middleware و پیاده سازی آنها منتشر شده ۱۵ دقیقه
  • پیاده سازی async function middleware (مشابه thunk) و یاد گیری اصول کار کردن با thunk منتشر شده ۲۱ دقیقه
  • اضافه کردن redux thunk به پروژه و تبادل اطلاعات با سرور منتشر شده ۱۵ دقیقه
  • مدیریت کردن و نمایش وضعیت درخواست های async در redux thunk (بخش اول) منتشر شده ۲۰ دقیقه
  • مدیریت کردن و نمایش وضعیت درخواست های async در redux thunk (بخش دوم) منتشر شده ۱۱ دقیقه
  • Redux Toolkit چیست و به چه دردی میخورد؟ منتشر شده ۷ دقیقه
  • کانفیگ راحتر store با استفاده از configureStore منتشر شده ۱۵ دقیقه
  • ایجاد راحت تر action با استفاده از createAction منتشر شده ۱۳ دقیقه
  • ایجاد راحت تر reducer با استفاده از createReducer منتشر شده ۱۳ دقیقه
  • ایجاد همزمان reducer و action creator با استفاده از createSlice منتشر شده ۱۷ دقیقه
  • مدیریت چرخه عملیات های async با استفاده از createAsyncThunk (بخش اول) منتشر شده ۲۶ دقیقه
  • مدیریت چرخه عملیات های async با استفاده از createAsyncThunk (بخش دوم) منتشر شده ۱۱ دقیقه
  • متوقف کردن اجرای عملیات های async در redux thunk منتشر شده ۸ دقیقه
  • Normalizing State چیست و چه کاربردی دارد؟ منتشر شده ۱۲ دقیقه
  • مثال استفاده از Normalizing State (بخش اول) منتشر شده ۱۸ دقیقه
  • مثال استفاده از Normalizing State (بخش دوم) منتشر شده ۲۸ دقیقه
  • مثال استفاده از Normalizing State (بخش سوم) منتشر شده ۱۹ دقیقه
  • مثال استفاده از Normalizing State (بخش چهارم) منتشر شده ۱۵ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش اول) رایگان ۶ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش دوم) منتشر شده ۱۸ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش سوم) منتشر شده ۱۲ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش چهارم) منتشر شده ۷ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش پنجم) منتشر شده ۲۳ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش ششم) منتشر شده ۱۲ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش هفتم) منتشر شده ۲۹ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش هشتم) منتشر شده ۴ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش نهم) منتشر شده ۹ دقیقه
  • مثال پیاده سازی بلاگ ساده با استفاده از redux (بخش دهم) منتشر شده ۱۹ دقیقه
  • وبینار - آیا ریداکس مرده و منسوخ شده است؟ منتشر شده ۲۴ دقیقه
  • وبینار - پرسش و پاسخ (بخش اول) منتشر شده ۲۲ دقیقه
  • وبینار - پرسش و پاسخ (بخش دوم) منتشر شده ۲۹ دقیقه

اگر به دنبال قابلت های Seo Friendly, Pre rendering(ssg and ssr) , افزایش سرعت لود شدن سایت و ... باشیم یکی از بهترین گزینه های موجود برای برنامه های React استفاده کردن از NextJs می باشد.

  • Next.js چیست و چه مشکلاتی را برطرف می کند؟ رایگان ۱۰ دقیقه
  • آشنایی با Pre-rendering و کاربرد آن رایگان ۱۳ دقیقه
  • نحوه setup کردن Next.js رایگان ۶ دقیقه
  • تعریف page در Next.js منتشر شده ۱۳ دقیقه
  • تفاوت static generation با data و بدون data چیست؟ منتشر شده ۱۰ دقیقه
  • نحوه اجرای تابع getStaticProps در حالت های مختلف منتشر شده ۱۲ دقیقه
  • آشنایی با dynamic routing در Next.JS منتشر شده ۱۱ دقیقه
  • آشنایی با تابع getStaticPaths و کاربرد آن در Next.JS منتشر شده ۲۵ دقیقه
  • بررسی خروجی تولید شده با استفاده از script build در حالت static site generation (ssg) منتشر شده ۵ دقیقه
  • بررسی انواع حالت های fallback در تابع getStaticPaths (بخش اول) منتشر شده ۱۹ دقیقه
  • بررسی انواع حالت های fallback در تابع getStaticPaths (بخش دوم) منتشر شده ۸ دقیقه
  • Incremental Static Regeneration در حالت SSG منتشر شده ۱۴ دقیقه
  • Server Side Rendering (SSR) منتشر شده ۳ دقیقه
  • کاربرد و نحوه استفاده از کامپوننت Link منتشر شده ۶ دقیقه
  • کاربرد و نحوه استفاده از کامپوننت Head منتشر شده ۲ دقیقه
  • کاربرد و نحوه استفاده از کامپوننت Image منتشر شده ۱۴ دقیقه
  • نحوه مدیریت کردن style در Next.js منتشر شده ۱۶ دقیقه
  • Absolute Imports and Module path aliases منتشر شده ۷ دقیقه
  • ایجاد یک custom document منتشر شده ۷ دقیقه
  • suppressHydrationWarning منتشر شده ۴ دقیقه
  • تفاوت استفاده کردن از useEffect و useLayoutEffect منتشر شده ۱۲ دقیقه
  • نحوه دریافت page props در سمت کلاینت (بخش اول) منتشر شده ۱۲ دقیقه
  • نحوه دریافت page props در سمت کلاینت (بخش دوم) منتشر شده ۹ دقیقه
  • کانفیگ Redux در NextJS (بخش اول) منتشر شده ۱۸ دقیقه
  • کانفیگ Redux در NextJS (بخش دوم) منتشر شده ۶ دقیقه
  • کانفیگ Redux در NextJS (بخش سوم) منتشر شده ۷ دقیقه
  • کانفیگ Redux در NextJS (بخش چهارم) منتشر شده ۱۶ دقیقه
  • کانفیگ Redux در NextJS (بخش پنجم) منتشر شده ۸ دقیقه

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

  • معرفی منتشر شده ۲ دقیقه
  • نوشتن یک نمونه تست ساده بدون هیچ ابزاری منتشر شده ۴ دقیقه
  • معرفی و استفاده از jest منتشر شده ۷ دقیقه
  • معرفی و استفاده از jest جلسه دوم منتشر شده ۵ دقیقه
  • اجرای تست ها در react منتشر شده ۵ دقیقه
  • نوشتن اولین تست react منتشر شده ۱۰ دقیقه
  • معرفی و استفاده از تابع act منتشر شده ۵ دقیقه
  • استفاده از setup و teardown در jest منتشر شده ۳ دقیقه
  • تست خروجی کامپوننت با تغییرات props رایگان ۶ دقیقه
  • روش تست گرفتن eventها بدون استفاده از پکیج اضافه منتشر شده ۱۴ دقیقه
  • تست کردن timing منتشر شده ۶ دقیقه
  • رندر کردن کامپوننت ها با استفاده از متد render (شروع کار با پیکج testing library) منتشر شده ۵ دقیقه
  • معرفی انواع query در testing library منتشر شده ۱۲ دقیقه
  • انتخاب بهینه المنت ها با استفاده از testing playground منتشر شده ۷ دقیقه
  • تفاوت get query find منتشر شده ۶ دقیقه
  • استفاده از jest dom custom matchers منتشر شده ۴ دقیقه
  • مثال استفاده از queries منتشر شده ۱۰ دقیقه
  • مثال تست عملیات async منتشر شده ۲۰ دقیقه
  • ماک کردن درخواست های api با استفاده از msw منتشر شده ۱۱ دقیقه
  • تست ارسال درخواست api و استفاده از fireEvent منتشر شده ۱۴ دقیقه
  • تست خطا در درخواست از api منتشر شده ۱۶ دقیقه
  • شبیه سازی اکشن های کاربر با استفاده از userEvent منتشر شده ۱۳ دقیقه
  • تست توابع دریافتی از طریق props منتشر شده ۶ دقیقه

از چه کسی یاد میگیری؟

تصویر مجتبی سوری

مجتبی سوری

برنامه نویس ارشد اسنپ فود

  • برنامه‌نویس ارشد اسنپ فود
  • برنامه‌نویس ارشد سون‌لرن
  • فول استک دولوپر برنامه‌ی همکار
  • فریلنسر: توسعه‌ی زیرساخت فروشگاهی، شرکتی، اتوماسیون و ...

رزومه و نمونه تدریس

منتورهای دوره دوستان زیر منتور دوره متخصص React هستند و در طول دوره به سوالات شما پاسخ میدن و همراهتون هستند.

تصویر علیرضا ایمانی

علیرضا ایمانی
منتور

Fullstask Developer در رسا رزومه
تصویر emad ta

emad ta
منتور

React developer رزومه
تصویر مریم علی شاهی

مریم علی شاهی
منتور

برنامه نویس ارشد والکس رزومه

سوالات متداول

پیش‌نیاز یادگیری React (ری‌اکت) چیست؟

پیش‌نیاز یادگیری React (ری‌اکت) چیست؟

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

پیش‌نیاز دیگر یادگیری React آشنایی با html و css است. هرچه دانش شما در این زمینه بیشتر باشد شما می‌توانید خروجی‌های با کیفیت‌تری را تولید کنید.

برای بعضی از دانشجوها این سوال پیش می‌آید که آیا به دانش Node.js هم نیاز دارم؟ برای خروجی گرفتن از پروژه به Node.js نیاز داریم. ولی معمولا از ابزارهایی که قبلا این موارد را کانفیگ کرده‌اند استفاده می‌کنیم. و شما خیلی درگیر این موضوع نمی‌شوید که این کانفیگ چطور انجام می‌شود. و خیلی نیاز به دانش Node.js ندارید.

بقیه موارد مثل نصب کردن پکیج‌ها در جلسه‌های آموزشی چندین بار انجام می‌شود و یاد می‌گیرید.


بازارکار برنامه نویسی React (ری اکت) چگونه است؟

بازارکار برنامه نویسی React (ری اکت) چگونه است؟

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

و یک نکته مهم اینکه شما با افزایش مهارت خودتان به راحتی می‌توانید با شرکت‌های خارج از ایران همکاری کنید و درآمد دلاری داشته باشید و خیلی راحت مهاجرت کنید.

مزایای React (ری اکت) چیست؟

مزایای React (ری اکت) چیست؟

از جمله مزایای React (ری اکت) می‌توان به موارد زیر اشاره کرد:

  • استفاده از React (ری اکت) باعث افزایش سرعت توسعه نرم افزار می‌شود.
  • با ابزارها و معماری که دارد، رفع عیب و خطایابی نرم افزار راحت‌تر است.
  • یادگیری React راحت است. پیچیدگی زیادی ندارد. قابلیت توسعه خوبی هم دارد.
  • community بزرگی دارد افرادی زیادی از آن استفاده می‌کنند. به همین دلیل پکیج‌ها و کدهای آماده زیادی برای ما وجود دارد. و اکثر چالش‌هایی که ما با آنها روبرو می‌شویم توسط برنامه نویس های دیگر قبلا حل شده و به اشتراک گذاشته شده است.

ری اکت مزیت‌های فنی زیادی هم دارد که به آنها در طول دوره اشاره شده است.


کاربرد React (ری اکت) چیست؟

کاربرد React (ری اکت) چیست؟

یک کتابخانه جاوااسکریپت است. که کاربردهای زیادی دارد از جمله:

  • برای ساخت user interface از آن استفاده می کنیم. 
  • در محیط وب، بخش فرانت اند را با استفاده از آن پیاده سازی می‌کنیم.
  • قابلیت برنامه نویسی موبایل و دسکتاپ را هم دارد.

تمرکز اصلی ما در دوره آموزش React این است که شما بتوانید user interface تحت وب را پیاد سازی کنید.


تفاوت React (ری اکت) با انگولار و vue چیست؟

تفاوت React (ری اکت) با انگولار و vue چیست؟

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

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

در مورد سرعت و performance تفاوت آنچنان زیادی ندارند. چون همه این ابزارها از نظر performance مشکلی ندارند و میزان تسلط برنامه نویس است که بر performance خروجی تاثیر دارد.

یک تفاوت دیگر این است که React (ری اکت) و AngularJS توسط شرکت فیس بوک و گوگل پشتیبانی می‌شود. اما Vue.js اپن سورس است. اما به این معنی نیست که React و AngularJS قوی‌تر است.

یک ویژگی React این است که یک کتابخانه base را ایجاد کرده است و تقریبا همه موارد پایه‌ای و اصلی که ما برای کارمان نیاز داریم را فراهم کرده است. React همه ابزارها را توسعه نداده است و اینکار را به انجمن برنامه نویس ها سپرده است و اگر با توجه به پروژه نیاز به ابزار خاصی باشد می‌توان از ابزارهای توسعه داده شده سایر برنامه نویس ها استفاده کرد. پس شما انتخاب های زیادی دارید. اما سایر فریم ورک ها بسیاری از ابزارها را خودشان توسعه داده‌اند و معمولا انتخاب‌های زیادی ندارید که می‌توان گفت این موضوع نه مزیت است و نه عیب!

هر سه فریم ورک community بزرگی دارند و ابزارهای خوبی هم دارند. معمولا در سازمان‌ها و پروژه‌های بزرگ از AngularJS استفاده می‌شود. در پروژه‌هایی که سرعت توسعه مهم‌تر است از Vue.js استفاده می‌شود. React هم در عین سادگی و سرعت، قدرت توسعه خیلی خوبی دارد و در پروژه‌های بزرگ و کوچک می‌توان از آن استفاده کرد.

نکته دیگر اینکه برای استفاده از AngularJS باید حتما از تایپ اسکریپت استفاده کنید. ولی برای Vue.js و React اختیاری است.

معمولا کسانی که React را یاد می‌گیرند خیلی راحت با Vue.js هم می‌توانند کار کنند. در نهایت توصیه می‌کنم یکی از ابزارها را یاد بگیرید در ادامه می‌توانید بقیه ابزارها را یاد بگیرید و استفاده کنید


بهترین روش یادگیری برنامه نویسی React چیست؟

بهترین روش یادگیری برنامه نویسی React چیست؟

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

همیشه قبل از شروع یادگیری برنامه نویسی این دو سوال مطرح می‌شود:

  • آیا بهتر است به صورت self study یاد بگیریم یا یک مشاور و یک منبع جامع داشته باشیم؟ واقعیت این است هر دو روش شما را به هدف‌تان می‌رساند اما زمان رسیدن متفاوت است. ممکن است یادگیری هر زبان برنامه نویسی به صورت self study بین ۲ تا ۳ سال زمان نیاز داشته باشد. ولی اگر یک منبع آموزشی جامع با مدرس باتجربه داشته باشید که حتی پاسخگوی سوالات شما باشد آن مسیر ۳ ساله می‌تواند به یکسال تبدیل شود. من توصیه می‌کنم که اگر زمان برای شما مهم است مسیر دوم را انتخاب کنید.
  • به چه صورت برای یادگیری برنامه نویسی اقدام کنیم که نتیجه بهتری بگیریم؟ واقعیت این است که برنامه نویس بهتر کسی است که قدرت حل مسئله بهتری دارد. و این توانایی با حل مسئله و چالش‌پذیری به دست می‌آید. پس بهتر است در طول یادگیری تمرین کنید، برای خودتان پروژه تعریف کنید و در قالب پروژه چالش‌هایی را برای خودتان طرح کنید و آن چالش‌ها را در کنار آموز‌ش‌هایی که می‌بینید حل کنید. مواردی که در فرآیند چالش‌ها یاد می‌گیرید محال است که فراموش کنید.

پس اگر با یک مدرس با تجربه و معتبر و تمرین و چالش‌پذیری یادگیری را شروع کنید مطمئن باشید بهترین نتیجه را می‌گیرید.

همین الان ثبت نام کن

آخرین فرصت خرید قبل از افزایش قیمت محصولات
۵۱۵ هزار تومان تخفیف ویژه به مدت محدود
۲.۴۵ میلیون تومان
۱.۹۳۶ میلیون تومان

نیاز به مشاوره تخصصی دارید؟

ثبت درخواست مشاوره رایگان:
متخصص React دسترسی سریع به جمع متخصصین بپیوندید ...
نقدی/اقساطی ثبت نام میکنم