@کدبانکCodeBucks
کمک به شما برای یادگیری کد! در اینجا می توانید آموزش های مربوط به توسعه وب را پیدا کنید. کدگذاری را ادامه دهید …
سلام مردم ،
من در حال یافتن یک روش خوب برای ساختن بارگذاری صفحه / انیمیشن برای برنامه کوچک React خود بودم و 3 روش مختلف برای ایجاد صفحه های بارگیری خوب پیدا کردم ،
نوع 1 : با استفاده از کتابخانه واکنش بارگذاری.
نوع 2 : استفاده از کتابخانه واکنش-لاتی.
نوع 3 : با استفاده از ساده CSS.
اگر ترجیح می دهید آموزش ویدیویی را تماشا کنید ، می توانید آن را اینجا تماشا کنید ، فقط 2 دقیقه اول را تماشا کنید تا از آنچه در اینجا می خواهیم بسازیم ، ایده بگیرید … و به خواندن ادامه دهید!
https://www.youtube.com/watch؟v=Y7pL5wG5QOg
بیایید شروع به ساختن کنیم …
برنامه واکنش خود را با ایجاد کنید ،
npx create-react-app React-Loading-Screen
در مرحله بعدی ، دو کتابخانه را که می خواهیم استفاده کنیم نصب کنید.
npm install react-loading react-lottie
توجه داشته باشید: در اینجا ، من از API jsonplaceholder برای بدست آوردن داده استفاده می کنم تا نشان دهد چگونه می توانیم هنگام استفاده از API از لودر قبلی استفاده کنیم.
نوع 1
مانند PreLoader1.js پرونده جداگانه ایجاد کنید.
کامپوننت عملکردی ایجاد کنید و در اینجا ، ما از دو حالت استفاده خواهیم کرد ،
const [data, setData] = useState([]);
const [done,setDone]=useState(undefined);حالت داده: برای ذخیره داده های حاصل از تماس API.
حالت انجام شده: تصمیم گیری در مورد آب و هوا برای نشان دادن پیش لودر یا عدم آن بولین است.
اکنون در useEffect ،
useEffect(() = {
setTimeout(() = {
fetch(