آیا تا به حال فکر کرده اید که چگونه برنامه های رسانه های اجتماعی مانند اینستاگرام می توانند ما را در حرکت نگه دارند، تقریباً انگار محتوا بی پایان است؟ میدونم دارم! این فراتر از محتوای عالی است – به یک جریان پیوسته ضربه می‌زند که ما را درگیر نگه می‌دارد، منتظر آنچه بعد است. برخلاف صفحه‌بندی سنتی، که کاربران برای بارگیری بیشتر باید روی «بعدی» کلیک کنند، پیمایش بی‌نهایت تجربه‌ای بی‌نظیر ایجاد می‌کند. درست زمانی که به پایان محتوای قابل مشاهده می رسیم، موارد جدید بارگیری می شوند و کنجکاوی و انتظار را برمی انگیزند. این جادوی است طومار بی نهایت: ادامه سفر بدون وقفه.
بیایید درست در آن شیرجه بزنیم
در این راهنما، ما یک برنامه ساده React ایجاد می کنیم که از اسکرول بی نهایت برای نمایش اطلاعات کاربران GitHub استفاده می کند. ما استفاده خواهیم کرد:
- واکنش نشان دهید: برای ایجاد و مدیریت ساختار مبتنی بر مؤلفه برنامه ما.
- react-infinite-scroll-component: بسته ای محبوب برای مدیریت رفتار اسکرول بی نهایت.
- Tailwind CSS: برای یک ظاهر طراحی سریع و تمیز.
- Axios: برای درخواست HTTP به API GitHub.
1.) پروژه را راه اندازی کنید
npx create-react-app infinite-scroll-app
cd infinite-scroll-app
npm start
axios، react-infinite-scroll-component و tailwindcss را نصب کنید
npm install axios react-infinite-scroll-component tailwindcss
2.) یک توکن شخصی Github ایجاد کنید
از آنجایی که ما از Github استفاده خواهیم کرد…