آموزش 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
آموزش تبلیغات اینستاگرام برای کسب و کار: فرآیند گام به گام برای یک کمپین تبلیغاتی اینستاگرام موفق
Instagram Ads for Business: Step by Step Process to a Successful Instagram Ad Campaign
"در این کلاس اشتراک مهارت، یاد خواهید گرفت که چگونه از تمام قدرت تبلیغات اینستاگرام برای دستیابی به هزاران طرفدار که به محتوای اینستاگرام شما علاقه مند هستند استفاده کنید! . .."
آموزش طراحی داخلی: Mood-board in Scale with Procreate | پاداش محاسبه بودجه
Interior Design: Mood-board in Scale with Procreate | Budget Calculation Bonus
"با استفاده از مقیاس واقعی مواردی که قصد استفاده از آنها را دارید، یک تابلوی خلق و خو ایجاد کنید. این به شما کمک می‌کند طراحی خود را تجسم کنید و بودجه‌بندی کنید. در این کلاس شما. .."
آموزش عکس نقاشی منظره با رنگ روغن - تفکر
Photo To Painting A Landscape In Oil - Contemplation
"به این کلاس خوش آمدید که در آن صحنه غروب خورشید را بر اساس یک عکس نقاشی خواهم کرد. به من این تمرین کامل را به صورت گام به گام انجام خواهم داد. .."
آموزش زبان فارسی: دوره کامل فارسی (فارسی) - از مبتدی تا متوسط
Learn Persian language: a complete Persian (Farsi) course - from beginner to intermediate levels
"دانستن الفبای فارسی برای این دوره الزامی است. اگر الفبای فارسی را نمی دانید، من یک دوره دوم با الفبای لاتین ایجاد کرده ام - و پیشنهاد می کنم ...."
Yazdani Chowdhury
کارشناس UI/UX، توسعه دهنده اپلیکیشن موبایل و وب
Skillshare (اسکیل شیر)
اسکیل‌شر یک پلتفرم آموزشی آنلاین است که به میلیون‌ها افراد در سراسر جهان امکان یادگیری مهارت‌های جدید را فراهم می‌کند. این پلتفرم با ارائه دوره‌های متنوع در زمینه‌هایی از جمله هنر و طراحی، فناوری، کسب و کار، و زندگی موفق، به کاربران خود این امکان را می‌دهد تا به صورت آنلاین به یادگیری بپردازند.
یکی از ویژگی‌های منحصر به فرد سکیل‌شر، ارائه دوره‌های تدریس شده توسط صاحبان مهارت‌ها و افراد موفق در زمینه‌های مختلف است. این امر باعث می‌شود که کاربران از تجربیات و دانش عملی افرادی که در حوزه‌های مورد نظرشان موفق عمل کرده‌اند، بهره‌مند شوند و بهترین اطلاعات را برای بهبود مهارت‌های خود دریافت کنند. به این ترتیب، سکیل‌شر نه تنها یک پلتفرم آموزشی است، بلکه یک جامعه آموزشی است که افراد را به اشتراک گذاری دانش و تجربیات تشویق می‌کند و به آنها کمک می‌کند تا در مسیر پیشرفت و موفقیت خود ادامه دهند.