Redux & Advanced React.js Tutorial

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

آموزش ریداکس

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

مباحث آموزشی:

1. معرفی ریداکس و موب‌اکس
2. مادل کردن با ریداکس
3. کار با reducers
4. نوشتن آخرین reducers
5. ساخت Store
6. فایل‌ها و گیت‌هاب
7. نصب ریداکس و ری‌اکت ریداکس
8. ایندکس جی‌اس
9. ساخت اکشن
10. ساخت reducers
11. اتصال ری‌اکت و ریداکس
12. کانکت در ریداکس
13. استایل کامپوننت‌ها
14. استفاده از اکشن داخل کامپوننت
15. ریداکس جادو نیست!
16. فانکشنال کامپوننت
17. رندر شرطی
18. نصب redux thunk
19. ساخت اپلیکیشن جدید
20. کامپوننت PostList
21. دیزاین اشتباه
22. استفاده از middleware و thunk
23. قانون‌های reducerها
24. چطور stateهای قبلی رو تغییر ندهیم؟
25. نمایش مقاله‌ها
26. نمایش کاربرها
27. مشکل درخواست‌های تکراری
28. تغییر mapStateToProps
29. استفاده از memoize لودش
30. روش جدیدی برای لود کردن
31. استفاده از chain برای refactor
32. ساخت اپ پیشرفته در ری‌اکت
33. ستاپ اپ برای ری‌اکت
34. کار با react router dom
35. کار با کامپوننت Link
36. فرق بین BrowserRouter/HashRouter/MemoryRouter
37. شالوده اپ در ری‌اکت
38. ساخت مسیر
39. Google OAuth
40. Google APi
41. ورود و خروج با Google Auth
42. ورود و خروج دستی
43. بروزرسانی Auth State
44. اتمام ورود و خروج با گوگل
45. نصب ریداکس
46. اتصال Auth و Action Creator
47. ساخت Auth Reducer
48. موقعیت Auth با ریداکس
49. فایل مهم types js
50. گرفتن User ID
51. کار با Redux DevTools
52. نصب Redux Form
53. اتصال Redux Form
54. ساختن فرم در ری‌اکت
55. اتوماتیک هندل کردن رویدادها
56. دستکاری فرم فیلدها
57. سابمیت کردن فرم توسط ریداکس
58. نمایش ارورها
59. اتمام Form Validation
60. نصب json server
61. ساخت اکشن برای کار با API
62. وصل کردن connect با redux form
63. دیسپچ کردن اکشن بعد از درخواست POST
64. ساختن فله‌ای Action Creators
65. ایجاد Fetch/Create/Update
66. ایجاد Delete
67. لیست رکوردها با لودش
68. نمایش تمام رکوردها
69. راه حل Authorization
70. نمایش Edit و Delete
71. لینک با کامپوننت Link
72. استفاده از history
73. ریدارکت توسط history
74. استفاده از Route Params
75. هر کامپوننت باید به تنهایی برای خودش کار کنه
76. ری‌فکتور فرم
77. استفاده از فرم برای ساختن در ری‌اکت
78. استفاده از فرم برای ویرایش در ری‌اکت
79. فرق PUT و PATCH
80. ساخت مودال با Portals
81. مشکلات ساخت مودال و stopPropagation
82. داینامیک کردن مودال
83. مروری درباره رویدادها
84. گرفتن رکورد از ID
85. نمایش اطلاعات به صورت شرطی
86. حذف در ری‌اکت
87. اتمام فوندانسیون در ری‌اکت و ریداکس
88. نصب Node Media Server
89. نصب OBS
90. نصب FLV
91. ساخت Video Player
92. نمایش Stream
93. اتمام اپلیکیشن Streamer

آموزش Context در ری‌اکت جی‌اس

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

مباحث آموزشی:

1. مبحث Context در ری‌اکت
2. ساخت اپ Translate
3. ساخت کامپوننت‌های Button و Field
4. ساخت آبجکت Context
5. استفاده از مقدار Context
6. استفاده از Provider در Context
7. استفاده از Consumer و Provider
8. استفاده هم‌زمان از چند Context
9. آیا Context جایگزینی برای Redux در ری‌اکت هست؟
10. ساخت Store برای Context
11. اتصال Selector به Store
12. اتمام جایگزینی Context بجای Redux

آموزش Hocks در ری‌اکت جی‌اس

بخش سوم آموزش پیشرفته ری‌اکت جی‌اس به مبحث Hocks در ری‌اکت می‌پردازد. هوک‌ها قابلیت جدیدی هستند که در نسخه ۱۶.۸ به ری‌اکت اضافه شده و با کمک آنها می‌توانیم در کامپوننت فانکشنال ری‎اکت علاوه بر state از LifeCycle متد‎ها استفاده کنیم. همچنین با استفاده از هوک‌ها می‌توانیم کدهای خواناتر و خلاصه‌تری را به صورت reusable بنویسیم.

مباحث آموزشی:

1. معرفی هوک‌ها در ری‌اکت
2. ساخت اپ برای کار با Hooks
3. مقدمات اپ برای کار با هوک‌ها
4. کار با useState
5. توضیحات تکمیلی useState
6. ساخت ResourceList
7. فتچ کردن Resource با Axios
8. تفاوت componentDidMount و componentDidUpdate
9. ری‌فکتور در ری‌اکت
10. کار با هوک useEffect
11. دو راه برای کار با useEffect
12. اتمام اپ برای هوک‌ها
13. مبحث Code Reuse برای هوک‌ها
14. بیشتر حال کردن با هوک‌ها
15. تبدیل کامپوننت کلاسی به کامپوننت دارای هوک
16. اتمام بحث هوک‌ها با ری‌فکتور کردن در ری‌اکت

آموزش SSR در ری‌اکت جی‌اس

بخش چهارم آموزش پیشرفته ری‌اکت جی‌اس به مبحث SSR در ری‌اکت می‌پردازد. SSR مخفف Server Side Rendering تکنیکی جهت تولید محتوای اولیه مناسب و تگ‌های صفحات وب در برنامه‌های مبتنی بر SPA است. در این روش به جای ارسال صفحه HTML خالی از محتوا به کاربر، یک بار کدهای جاوااسکریپت برنامه SPA بر روی سرور اجرا می‌شود و کدهای HTML تولید شده به همراه محتوای مناسب در قالب فایل HTML در اختیار کاربر قرار می‌گیرد.

مباحث آموزشی:

1. اسکریپت‌نویسی سمت سرور در ری‌اکت
2. نصب اکسپرس در ری‌اکت
3. فانکشن renderToString
4. استفاده از Webpack برای SSR
5. استفاده وب پک سمت سرور
6. استفاده از nodemon در ری‌اکت
7. تبدیل CommonJS به ES6
8. چرا جاواسکریپت اجرا نمیشه؟!
9. استفاده از client js
10. بوت کردن سمت کاربر
11. ریفکتور با webpack merge
12. ریفکتور با npm run all
13. ریفکتور با webpack node externals
14. ریفکتور با فایل renderer
15. استفاده از Routes
16. استفاده از StaticRouter
17. بروزرسانی و ردیف کردن مسیرها
18. استفاده از ریداکس برای SSR
19. استفاده از ریداکس سمت سرور برای SSR
20. ساخت actions برای SSR
21. ساخت reducers برای SSR
22. رندر کردن کامپوننت برای SSR
23. استفاده از babel polyfill برای SSR
24. کار با react router config برای SSR
25. بروزرسانی مسیرها برای SSR
26. استفاده از matchRoutes برای SSR
27. لود کردن داده‌ها برای SSR
28. اتمام ستاپ SSR
29. ریفکتور کردن مسیرها
30. چرا باید از INITIAL STATE استفاده کنیم؟
31. جلوگیری از XSS
32. نصب و استفاده از proxy
33. ستاپ axios سمت کاربر
34. ستاپ axios سمت سرور
35. اضافه کردن کامپوننت App
36. اضافه کردن Header
37. فتچ کردن حالت Auth
38. صدا زدن اکشن
39. اتصال ریداکس به Header
40. ورود و خروج برای SSR
41. استایل با CSS برای SSR
42. ارور ۴۰۴ برای SSR
43. تغییر موقعیت به ۴۰۴
44. ساختن ادمین
45. ساختن کامپوننت برای ادمین‌ها
46. مسیر برای ادمین‌ها
47. راه حل اول خطای Promise
48. راه حل دوم خطای Promise
49. راه حل سوم خطای Promise
50. ساخت Higher Order Component
51. استفاده از Higher Order Component
52. ریدایرکت کردن
53. بهتر کردن SEO در ری‌اکت
54. بهتر کردن SEO با استفاده از Helmet
55. مشکل Helmet هنگام استفاده از JSX
56. ویدیوی آخر در مورد ری‌اکت

[custom-related-posts title=”آموزشهای پایه React.js” none_text=”None found” order_by=”title” order=”ASC”]