آموزش React Js Pagination with API Data
React Js Pagination With API Data
به این کلاس خوش آمدید. React js یک موضوع داغ در زمینه توسعه وب است. در این کلاس، نحوه طراحی و ساخت صفحه بندی کاملا کاربردی در react js با API Data را خواهید آموخت.
اول از همه، می‌خواهید یاد بگیرید که چگونه داده‌های API را دریافت کرده و آن‌ها را روی کارت نشان دهید. شما یاد خواهید گرفت که چگونه داده ها را از یک مؤلفه به مؤلفه دیگر منتقل کنید و داده های API را به صورت پویا روی کارت نشان دهید.
پس از آن، نحوه افزودن صفحه‌بندی واکنشی را در داده‌های API که در نمای کارت نشان می‌دهیم، خواهید آموخت.
در اینجا لیست هایی وجود دارد که می خواهید تا پایان این کلاس یاد بگیرید:
- نحوه دریافت داده های JSON API در برنامه react.
- برای هر مورد API یک کارت طراحی کنید.
- کوچک کردن گزینه برای هر کارت و نحوه نمایش داده های بیشتر پس از باز کردن کارت را بیاموزید.
- نحوه استفاده از نمادهای react در برنامه react js
- نحوه به‌روزرسانی وضعیت واکنش به صورت پویا را بیاموزید.
- داده‌ها را از مؤلفه والد به مؤلفه‌های فرزند منتقل کنید.
- نحوه استفاده از صفحه بندی react برای برنامه react js
- طراحی صفحه‌بندی و به‌روزرسانی پویا مورد جدید API
- نحوه علامت گذاری صفحه بندی فعال را بیاموزید.
این کلاس برای چه کسانی است؟
اگر مایل به یادگیری و ساخت برنامه react js هستید.
اگر می خواهید یاد بگیرید که چگونه صفحه بندی را در برنامه react js اضافه کنید.
- اگر می خواهید یاد بگیرید که چگونه داده های API را دریافت کنید و آن را در برنامه react js نشان دهید.
چه دانش و ابزاری برای این کلاس مورد نیاز است؟
- دانش آموزان برای شرکت در این کلاس نیازی به داشتن دانش قبلی ندارند.
در این کلاس، شما در حال یادگیری نحوه اضافه کردن صفحه‌بندی واکنش با داده‌های API هستید. من به شما پیشنهاد می کنم که پروژه ای مشابه را خودتان با کمی تغییرات بسازید. تا بتوانید مفهوم اصلی را که از این کلاس آموخته اید به کار ببرید.
در اینجا لیستی از ویژگی های اصلی است که باید به پروژه خود اضافه کنید:
- از نقطه پایانی API استفاده کنید. می توانید از همان API استفاده کنید یا از هر نقطه پایانی API دیگری استفاده کنید.
- نمایش داده های API در کارت و افزودن گزینه جمع کردن. شما فقط می توانید عنوان یا نام را روی کارت نشان دهید و هنگامی که کاربر روی کارت کلیک کرد، باید آن را بزرگ کنید و همه جزئیات را نشان دهید.
- هنگامی که کاربر روی کارت کلیک می‌کند، نماد جمع‌کردن را به صورت پویا تغییر دهید.
- صفحه بندی را اضافه کنید و 10 مورد را در هر صفحه نشان دهید.
- در صفحه بندی فعال یک حاشیه حاشیه اضافه کنید.
- اگر صفحه اول و آخر انتخاب شده باشد، دکمه های قبلی و بعدی را غیرفعال کنید.
پس از اتمام پروژه های خود، باید پروژه خود را در قسمت پروژه آپلود کنید.
درس ها Lessons
-
React Pagination را اضافه کنید Add React Pagination
-
صفحه بندی و طراحی فعال را برجسته کنید Highlight Active Pagination and Design
-
نمایش داده های API و طراحی کارت Show API Data and Card Design
-
React Pagination Design React Pagination Design
-
کارت جمع کردن را برجسته کنید Highlight Collapse Card
-
نمایش داده های API در یک کارت Show API Data in a Card
-
بسته های React را نصب کنید Install React Packages
-
مقدمه Introduction
-
ویژگی های جمع کردن کارت Card Collapse Features
-
پروژه React را ایجاد کنید Create React Project
-
داده های API را دریافت کنید Get API Data
-
پروژه React را برای Netlify اجرا کنید Deploy React Project to Netlify
-
برش داده ها برای صفحه بندی Slice Data for Pagination
https://donyad.com/d/4f33
Yazdani Chowdhury
کارشناس UI/UX، توسعه دهنده اپلیکیشن موبایل و وب
نمایش نظرات