آموزش ری اکت React | دوره جامع و تخصصی برای تبدیل به متخصص React
در دنیای وب به ابزارهای زیادی برای برنامه نویسی دسترسی داری و می‌تونی کاملاً انعطاف پذیر در این حوزه فعالیت کنی. حرفه‌ای‌ها همیشه برای کار با حرفه‌ای‌ترین ابزارها اقدام می‌کنن و React می‌تونه یکی از همین فضاهای حرفه‌ای در زمینه برنامه نویسی وب باشه. بدون اغراق React برجسته‌ترین ابزار برنامه‌نویسی برای خلق پروژه‌های بزرگ هست. ابزاری که دنیای وب رو دگرگون کرده. اگه برای آموزش React دست به کار شدی، از همین حالا خودت رو برای یه دنیای متفاوت، انعطاف‌پذیر و خیلی قدرتمند آماده کردی.
در React می‌تونی با کد نویسی کامپوننت‌ها از آنها در جاهای مختلف هر پروژه و حتی چندین پروژه متفاوت استفاده کنی. حتی می‌تونی بدون نیاز به رِفرش صفحات برای تغییر دیتا در هر صفحه وب‌سایت اقدام کنی. خیلی خوبه که حالا داری این مطلب رو می‌خونی و احتمالا برای آموزش ری اکت آمادگی کامل داری. ولی خیلی مهمه که این ابزار رو از پایه و کاملاً اصولی یاد بگیری. من علی رضایی در دوره React زیر نظر گروه آموزشی گاتاکد همراهت هستم. اینجا قراره تا با نقشه راه برای آموزش ری اکت اقدام کنی. حالا با من همراه شو تا بهت بگم در دوره ری اکت گاتاکد قراره که چی یاد بگیری.
چرا React مهمه؟
React یکی از کتابخانه‌های جاوا اسکریپت هست که با هدف ایجاد وب‌سایت های SPA توسعه پیدا کرده. بنابراین لازمه تا حداقل دانش کافی از روش برنامه‌نویسی جاوا اسکریپت رو بدونی تا شرایط استفاده از این کتابخونه رو داشته باشی. تمام متخصصینی که در دنیای برنامه‌نویسی وب فعالیت می‌کنن از اهمیت جاوا اسکریپت اطلاع دارند. جاوا اسکریپت دست بازترین زبان برای ایجاد صفحات تعاملی و پویا و واکنشگرا در دنیای وب هست.
هر کسی برای طراحی سایت لازمه که مهارت کافی در کد نویسی جاوا اسکریپت رو داشته باشه. ولی قطعاً می‌دونی که کد نویسی در جاوا اسکریپت طولانی، خسته کننده و حتی گیج کننده هست. برای همین چندین نوع کتابخانه و یا فریم ورک برای ساده سازی و توسعه قدرت کد نویسی جاوا اسکریپت توسعه پیدا کرده و React قوی‌ترین این کتابخانه‌ها است.
کافیه بدونی شرکت‌های بزرگ مثل FaceBook (فیس‌بوک)، Paypal (پی پال) و یا نتفلیکس از همین React برای توسعه سایت و طراحی اپلیکیشن خودشون استفاده کردن. خلاصه وقتی پا در دوره ری اکت گذاشتی، خیالت راحت باشه که قراره یکی از قوی‌ترین، بروزترین و کاربردی‌ترین کتابخانه‌ها برای ساده‌سازی و بهینه شدن کد نویسی جاوا اسکریپت رو یاد بگیری.
دوره آموزش React برای چه کسانی مناسب است؟
React یکی از قدرتمندترین کتابخانه‌های جاوا اسکریپت هست که با هدف ساده‌سازی مراحل کد نویسی جاوا اسکریپت و خلق وب‌سایت های بزرگ و واکنشگرا با قابلیت‌های تعاملی گسترده طراحی شده تا هر کسی بتونه از این ابزار برای کد نویسی سریع‌تر، حرفه‌ای‌تر و کارآمدتر استفاده کنه. دوره آموزش React برای تمام دانشجویان پس از اتمام دوره جاوا اسکریپت مفید و کاربردی هست.
اگه دوره جاوا اسکریپت رو تمام کردی و یا در این فضا کار می‌کنی و حسابی از محیط کد نویسی در جاوا اسکریپت اطلاع داری و لازمه تا شرایط کار حرفه‌ای‌تر و سریع‌تر رو تجربه کنی، می‌تونی برای شرکت در دوره ری اکت اقدام کنی. این دوره برای متخصص React نیز سودمنده. به هر حال ممکنه که از قبل آموزش دیده باشی و حتی در این فضا کار کرده باشی، اما مهارت کافی رو نداری و یا فکر می‌کنی دوره آموزش شما به اندازه کافی جامع و مفید نبوده. در هر صورت برای حرفه‌ای‌تر شدن در کار با ری اکت می‌تونی از آموزش جامع دوره React گاتاکد استفاده کنی. از طرفی اگه برای خلق وب‌سایت های SPA علاقمند هستی و یا لازمه که چنین وب‌سایتی رو بسازی و حتی مدیریت می‌کنی، آموزش ری اکت برای شما مفید و کاربردی هست.
نقشه راه دوره آموزش React
کل مفاهیم React رو می‌تونی با یه سرچ ساده اینترنتی پیدا کنی. تازه در همون سرچ ساده می‌تونی برای یادگیری و کلیات مفاهیم React اقدام کنی. در این صورت واقعاً چه نیازی هست که برای شرکت در دوره ری اکت اقدام کنی؟ مگه قراره در این دوره چی یاد بگیری؟
با پشتوانه سال‌ها تجربه خودم در برنامه‌نویسی حوزه وب میگم که صرفاً با در اختیار داشتن اطلاعات قادر به اجرای پروژه‌های React نیستی. یادت باشه که React در نهایت یک ابزاره که به تو در کد نویسی داخل جاوا اسکریپت کمک می‌کنه. شاید این ابزار رو بشناسی؛ اما مهمه که به موقع و درست از این ابزار استفاده کنی. من در دوره React مجموعه گاتاکد یه نقشه راه تدارک دیدم که قراره هر پروژه React رو ساختار یافته بررسی کنه. داخل نقشه راهی که برات تهیه کردم، قراره که این مراحل رو سپری کنی:
- گام اول: با اصول جاوا اسکریپت و پیش نیازهای دوره ری اکت آشنا می‌شی.
- گام دوم: میری تو دل React و قراره تا کاملاً جامع با تمام محیط این کتابخانه آشنا بشی و بتونی روش کار با پکیج‌ها مانند React Bootstrap، mui و همچنین React-icons رو یاد بگیری.
- گام سوم: مهارت و اصول کار با api رو یاد می‌گیری و می‌تونی با انواع متدهای Life Cycle کار کنی. در ضمن در همین قدم آموزشی لازمه اصول کار با انواع هوک‌ها رو یاد بگیری.
- گام چهارم: برای یادگیری مفاهیم React Router و اصول کد نویسی در این فضا اقدام می‌کنی. در این مرحله یاد می‌گیری که چطور در محیط spa و با استفاده از دیتابیس کد نویسی کنی.
- گام پنجم: در این مرحله از نقشه راه آموزش React قراره تا کاملاً جامع و هدفمند کانسپت‌های مهم مثل memo، uoc، API و Context Custom Hook رو یاد بگیری.
- گام ششم: وارد فاز پروژه‌ای می‌شی و قراره تا تمام دانسته‌های خودت از React رو داخل پروژه‌های واقعی شبیه به بازار کار تجربه کنی.
- گام پایانی: در آخر اصول پیاده‌سازی عملی پروژه‌ها رو یاد می‌گیری و می‌تونی کاملاً حرفه‌ای به عنوان یک متخصص React همه فن حریف با دوره خداحافظی کنی و برای ورود به بازار کار آماده بشی.
پیش نیاز آغاز دوره React چیست؟
محیط React برای ساده‌سازی کد نویسی در جاوا اسکریپت توسعه پیدا کرده. قطعاً React از قوی‌ترین کتابخانه‌ها برای ساده سازی فرایند کد نویسی هست. اما در قدم اول لازمه تا خود کد نویسی در فضاهای مختلف وب‌سایت خصوصاً فرانت اند رو بلد باشی.
آشنایی کامل با محیط HTML، CSS و کد نویسی جاوا اسکریپت برای آغاز دوره React الزامیه. اگه هم فکر می‌کنی در این زمینه‌ها ضعیف هستی و یا اطلاعات کافی رو در اختیار نداری، بهتره که از دوره HTML آغاز کنی. در کنارش می‌تونی برای آموزش CSS دست به کار بشی و قدم به قدم بیای بالا تا برسی به ابزار قدرتمند React. این شکلی کاملاً هدفمند مسیر رو طی کردی و دقیق می‌دونی که از محیط وب چی می‌خوای و قراره که چه چیزهایی رو یاد بگیری. در کل اگه از HTML و CSS به اندازه کافی اطلاع داری و با کد نویسی جاوا اسکریپت کامل آشنا هستی، برای ورود به دوره ری اکت اقدام کن. در غیر این صورت کل دوره برات گنگ و تمام مفاهیم برای تو گیج کننده هست و قطعاً چیز خاصی یاد نمی‌گیری.
چرا دوره React در گاتاکد؟
طراحی سایت در محیط فرانت اند مجموعه‌ای از مهارت‌های به هم پیوسته است. وقتی تصمیم گرفتی متخصص کامل فرانت اند بشی، لازمه تا قدم به قدم از HTML و CSS مسیر رو شروع کنی و مرحله به مرحله بالا بیای تا برسی به React. ولی خیلی از افراد رو دیدم که با وجود آموزش React و اطلاعات کامل از این محیط قادر به اجرای پروژه عملی نیستند. چرا؟ چون نقشه راه ندارند. یادت باشه که صرفاً با حفظ کردن مفاهیم نمی‌تونی پروژه‌های تخصصی React رو دست بگیری و لازمه تا بدونی هر پروژه از کجا شروع می‌شه و قراره تا در مسیر از چه ابزارهایی و چطور استفاده کنی.
من در تهیه دوره ری اکت گروه گاتاکد این نقشه راه رو برات تهیه کردم تا از وقتی وارد دوره شدی تا پایان دوره و زمانی که در بازار کار با ده‌ها پروژه واقعی روبه‌رو هستی، دقیق بدونی چه هنگام از React استفاده کنی و چطور از این ابزار قدرتمند نهایت استفاده رو ببری و حجم کد نویسی رو کم کنی و در عین حال صفحات وب‌سایت حرفه‌ای‌تری رو آماده کنی. این مسیر خیلی سخت نیست، فقط کافیه با من در دوره آموزش گاتاکد همراه بشی تا قدم به قدم تمام مهارت‌های عملیاتی این فضا رو یاد بگیری.
درآمد پس از یادگیری React چطوره؟
React برای کامل‌تر شدن محیط کد نویسی جاوا اسکریپت طراحی شده. پس تمام فضای کار React در امتداد پروژه‌های جاوا اسکریپت شکل می‌گیره. درآمد متخصص React هم به محیط کار و نوع پروژه‌های جاوا اسکریپت بستگی داره. ولی وقتی React بلد هستی، یه قدم جلوتر رفتی. چون حالا تبدیل به متخصص فرانت اند کامل‌تری شدی که راحت‌تر، سریع‌تر و قابل اعتمادتر می‌تونه انواع پروژه برای توسعه وب‌سایت سمت کاربر رو بپذیره. کارفرماها همیشه به متخصصین جاوا اسکریپت با مهارت کامل در React بیشتر و بهتر اعتماد می‌کنن. رو این حساب اگه آموزش React رو کامل کنی و در این محیط به اندازه تمرین داشته باشی و با نگاه تجربی و عملیاتی در این فضا مسلط بشی، قطعاً شانس بیشتری برای استخدام در شرکت‌های بزرگتر داری و حتی می‌تونی برای انجام پروژه‌های فرایلنسری بزرگتر و دست بازتری اقدام کنی.
من بهت قول می‌دم که در پایان دوره ری اکت گروه گاتاکد همه‌ی سیر تا پیاز این کتابخانه رو بلدی و می‌تونی از تمام چارچوب React در کد نویسی جاوا اسکریپت استفاده کنی. ولی اگه تمرین و مهارت نداشته باشی، تضمینی نیست که با تسلط کامل در این فضا پروژه بگیری. در دوره React نقشه راه در اختیارت هست تا هدفمند تمرین کنی و حالا این به شما بستگی داره که با تمرین کردن چه اندازه در چارچوب این نقشه راه ماهرتر بشی.
قدم بعدی پس از آموزش React چیه؟
مهارت‌ها در توسعه وب پایانی ندارند و هیچ کسی نمی‌تونه و یا نمی‌خواد ادعا کنه که همه چیز رو بلده. حرفه‌ای‌ها اصلاً علاقه ندارند که بگن ما همه چیز رو می‌دونیم. چون در همین لحظه متوقف می‌شن و درجا می‌زنن. خیلی خوبه که در دنیای توسعه وب وارد شدی و خیلی خوب‌تر که تا اینجا پیش اومدی و قراره تا تبدیل به متخصص React بشی. ولی یادت باشه که تازه اول یه دنیای خیلی بزرگتر هستی.
React هم می‌تونه پایان مرحله آموزشت باشه که در این صورت یه متخصص توسعه سمت کاربر هستی. ولی همین React می‌تونه یه دریچه باشه که تو رو به دنیای خیلی بزرگتر و دست بازتری از مهارت‌های جدید برسونه. ولی باید بدونی که مهارت‌های جدید برای سریع‌تر شدن کارها و حرفه‌ای‌تر شدن کد نویسی ها الزامی هستند. به هر حال اگه دوره ری اکت رو تمام کردی، برای قدم بعدی توصیه می‌کنم تا آموزش Next.js رو آغاز کنی. این Next.js یک ابزار تعاملی قدرتمند با React هست و در هر چه حرفه‌ای‌تر شدن پروژه‌ها به کارت میاد.
آیا تضمینی هست که React رو کامل و حرفه‌ای یاد بگیری؟
یادگیری یه تعامل هست. تعاملی که میان شما و معلم شما برقرار می‌شه. این تعامل وقتی سازنده هست که هر دو طرف حرفه‌ای باشید. پس برای یادگیری هم به معلم حرفه‌ای نیاز داری و لازمه که خودت هم با نگاه حرفه ای از دانش عرضه شده استفاده کنی.
دوره ری اکت تهیه شده در گروه گاتاکد براساس نقشه راه کامل این مهارت تهیه شده و قراره تا با جزئیات کامل بهت بگم که چطور و چگونه مرحله به مرحله پروژه‌های واقعی رو دست بگیری، اما در مقابل زمانی موفق هستی که خودت هم نگاه حرفه‌ای و مشتاق و کنجکاو داشته باشی. شما می‌تونی روی کیفیت محتوای آموزشی گاتاکد حساب کنی. حتی می‌تونی از پشتیبانی قوی هنگام طی شدن دوره آموزش ری اکت برخوردار باشی. اما در نهایت وقتی کامل هستی که با علاقه کافی و همراه با اشتیاق، مطالب رو بخونی و تمارین رو انجام بدی و برای تمرینات بعدی آماده باشی. در پایان دوره ری اکت گاتاکد در مورد همه چیز این ابزار اطلاعات کامل در اختیار داری و مطالب رو ساختاریافته طبق الگوی نقشه راه یاد گرفتی. اما این تازه اول ماجرای تو برای تبدیل شدن به متخصص React هست و باید حسابی تمرین و ممارست داشته باشی. یادت باشه که در نهایت این خودت هستی که یادگیری کامل خودت رو تضمین می‌کنی.
توصیه برای خرید دوره React
در پایان بهت تبریک میگم. چون در مسیر طولانی یادگیری مهارت‌های طراحی سایت و توسعه سمت کاربر تا این مرحله جلو اومدی و حالا کاملاً جدی تصمیم داری تا به یک متخصص React حرفه‌ای تبدیل بشی. یادت باشه که حالا در یک نقطه عطف بزرگ درست وسط مهارت‌های طراحی سایت قرار گرفتی. آن طرف React قراره تا با یه دنیای کاملاً حرفه‌ای ملاقات کنی و بهتره که در همین لحظه بهترین مسیر رو برای طی شدن این قدم کلیدی انتخاب کنی.
خیلی خوبه که برای آموزش React دست به کار شدی، اما مهمه که از چه مسیری برای این آموزش اقدام می‌کنی. در پایان بهت توصیه می‌کنم که دوره آموزش متکی بر نقشه راه رو انتخاب کنی. مهم این نیست که در دوره React گاتاکد همراه من باشی؛ مهم این هست که در هر دوره از قبل با جزئیات مسیر آموزش رو بررسی کنی و مطمئن باشی که در آن دوره قراره کاملاً مسلط و متکی بر نقشه راه تمام مفاهیم React رو یاد بگیری. چون صرفاً نیومدی تا یه سری اطلاعات رو حفظ کنی، بلکه لازمه تا بعدها از تک‌تک این ابزارها برای کد نویسی حرفه‌ای‌تر، سریع‌تر و دست بازتر استفاده کنی. پس بهت توصیه می‌کنم تا حتماً از خدمات دوره متکی بر نقشه راه استفاده کنی.
React چیست؟
ساخت UI با استفاده از JS
Hello World With React
JSX و ویژگی‌های آن
Component چست؟
نحوه ساخت functinal component
ایجاد Component با استفاده از Class
React Component Props
آشنایی با Create React App
List rendering
state چست؟
Event handeling
Event Handling (part ۲)
ایجاد ارتباط بین کامپوننت ها
ایجاد ارتباط بین کامپوننت‌ها (جلسه دوم)
Conditional Rendering
تبدیل template ساده چت به React
json server
Hello World With React (React ۱۸)
React Class Components
componentDidMount
مینی پروژه دریافت اطلاعات بر اساس IP کاربر
componentDidUpdate
مینی پروژه نمایش پست‌ها به همراه سایدبار
مینی پروژه نمایش پست‌ها به همراه سایدبار (پارت دوم)
componentWillUnmount
مثال استفاده از componentWillUnmount
getDerivedStateFromProps
مثال استفاده از getDerivedStateFromProps (پارت اول)
مثال استفاده از getDerivedStateFromProps (پارت دوم)
shouldComponentUpdate
نحوه اضافه کردن shouldComponentUpdate
createRef
مثال استفاده از createRef
getSnapshotBeforeUpdate
مثال استفاده از getSnapshotBeforeUpdate
مشکلات class components و دلایل اضافه شدن React Hooks
آشنایی اولیه با useState
آشنایی اولیه با useEffect
ساده‌ترین مثال استفاده از Hooks
Closure functions
Stale Closure
مثال slider (part ۱)
مثال slider (part ۲)
مهمترین تفاوت بنیادی functional و class کامپوننت‌ها (part ۱)
مهمترین تفاوت بنیادی functional و class کامپوننت‌ها (part ۲)
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 (دریافت لینک تصویر و راهنمایی برای دریافت اطلاعات به زبان فارسی)
آشنایی با 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 ۱۷
حذف Event Pooling در React ۱۷
تغییرات Effect Cleanup در React ۱۷
پرسش و پاسخ دانشجویان در پایان وبینار React ۱۷
معرفی مفهوم 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
معرفی پکیج Redux
آشنایی با ساختار ذخیره سازی State
آشنایی با action و کاربرد آن
تعریف ساده از توابع pure
آشنایی با Reducer و کاربرد آن
آشنایی و پیاده سازی Store
اضافه کردن قابلیت subscribe به Store
اضافه کردن قابلیت subscribe به Store
اولین مثال ساده استفاده از 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 (بخش دهم)
وبینار - آیا ریداکس مرده و منسوخ شده است؟
وبینار - پرسش و پاسخ (بخش اول)
وبینار - پرسش و پاسخ (بخش دوم)
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 (بخش پنجم)
معرفی
نوشتن یک نمونه تست ساده بدون هیچ ابزاری
معرفی و استفاده از 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
