آموزش با استفاده از Redux-thunk و JSON Fake Application React Full CRUD بسازید
Build React Full CRUD Application using Redux-thunk and JSON Fake Server
با افزودن مهارت Redux به دانش React خود، به یک توسعه‌دهنده Frontend با تقاضای بالا تبدیل شوید. شما نسبت به افرادی که فقط در مورد React اطلاعات دارند برتری کمی خواهید داشت.
این دوره مبتنی بر پروژه شما را بلافاصله کدنویسی می کند. ساخت اپلیکیشن با کمک React و Redux در این دوره مهارت های شما را در توسعه وب مدرن تقویت می کند.
با میان‌افزار Redux-thunk، نحوه کار با api را در React Application خواهید آموخت. و من مطمئن هستم که پس از گذراندن این دوره، استاد پیاده سازی Redux در هر یک از برنامه های React خود خواهید شد.
نیاز اساسی
- به نوعی دانش HTML، CSS و جاوا اسکریپت نیاز است.
- درک اولیه ماژول ES6
- دانش اولیه React یک مزیت اضافه خواهد کرد.
- دانش Redux کمی نیاز دارد، اما من از ابتدا توضیح خواهم داد.
- هیچ تجربه کاری قبلی با سرور JSON لازم نیست.
نرم افزار مورد نیاز
- .
- .
حالا بیایید به React JS و Redux شیرجه بزنیم. و شروع به کدنویسی کنید!
در این دوره، ما یک برنامه کامل React CRUD را با کمک سرور جعلی Redux-thunk JSON خواهیم ساخت. در این دوره، ما از سرور جعلی JSON برای انجام تمام عملیات CRUD مانند، ایجاد، خواندن، به‌روزرسانی و حذف در برنامه React خود استفاده خواهیم کرد.
با کمک Redux-thunk، ما درخواست api مانند، GET، PUT، POST و DELETE را با سرور جعلی JSON خود انجام خواهیم داد.
ما در این دوره از Material-UI برای کار بر روی مؤلفه React خود مانند جدول، فیلد ورودی، دکمه و فرم استفاده خواهیم کرد.
درس ها Lessons
-
کار بر روی Add Action & Reducer برای افزودن کاربر به سرور JSON Working on Add Action & Reducer for Adding User to JSON sever
-
Redux & Route را تنظیم کنید Set up Redux & Route
-
با استفاده از Action یک مقدار موجود را در Edit Form پر کنید Populate an Existing value on Edit Form using Action
-
کار بر روی ویرایش فرم Working on Edit Form
-
سرور JSON را در React App راه اندازی کنید Set-up JSON Server in React App
-
اقدام برای حذف داده های کاربر از جدول Dispatch action to remove user data from Table
-
کار بر روی کامپوننت فرم Working on Form Component
-
Redux، Redux-thunk و نمودار جریان آن را درک کنید Understand Redux, Redux-thunk & it's Flow Diagram
-
اضافه کردن دکمه حذف و ویرایش روی جدول Adding Delete & Edit Button on Table
-
کار بر روی Delete Action & Reducer Working on Delete Action & Reducer
-
کار با جدول در صفحه اصلی Working with Table on Home Page
-
یک اقدام برای به‌روزرسانی جزئیات کاربر ارسال کنید Dispatch an Action to Update User Detail
-
یک اقدام برای افزودن داده های کاربر ارسال کنید Dispatch an action to add User Data
-
بسته ها و سرور JSON را نصب کنید Install Packages & JSON Server
-
مقدمه Introduction
-
راه اندازی پروژه React Set-up React Project
-
ایجاد ساختار پوشه Create Folder Structure
-
نوشتن اولین اکشن و کاهش دهنده Redux ما برای دریافت داده های کاربر از سرور JSON Writing Our First Redux Action & Reducer to Get User Data from JSON Server
-
برای دریافت اطلاعات کاربر روی جدول، اقدامی را ارسال کنید Dispatch an Action to Get User Data on Table
-
نتیجه Conclusion
https://donyad.com/d/f306
Saumitra Vishal
توسعه دهنده Front End
من توسعه دهنده وب جلویی هستم و در زمینه React JS تخصص دارم
من مدرک لیسانس علوم کامپیوتر از دانشگاه KIIT دارم.
خوشحال می شوم دانش خود را به اشتراک بگذارم و محتوای عالی برای همه کسانی که می خواهند به کلاس های من بپیوندند ایجاد کنم.
شما همچنین می توانید در پلتفرم یوتیوب من به من بپیوندید، من بیش از 8 هزار مشترک در کانال یوتیوب خود دارم.
بیایید با هم چیزهای عالی بسازیم :)
نمایش نظرات