มาทำ Loading Screen คูลๆ แบบง่ายๆ ด้วย React กันเถอะ
หลังจากที่เจ้าของบล็อกห่างหายจากวงการไปนาน วันนี้จะพาเพื่อนๆพี่ๆมาทำ loading screens ในหน้าเว็บของเราโดยใช้ react เน้ออออ
ทำไมในเว็บของเราต้องมี loading screens กันน้า?
มีคนเคยบอกไว้ว่า “ถ้า Application ของเราให้ความรู้สึกที่ดีต่อ user มันจะยิ่งทำให้ user อยากจะใช้ Application ของเราต่อไปเรื่อยๆ” ซึ่งเจ้าตัว loading ก็เป็นส่วนหนึ่งที่จะช่วยเพิ่ม UX ให้กับ user ทุกคนได้นั่นเอง
เอาละมาเริ่มกันเถอะ !!
ก่อนอื่นก็สร้าง react app กันก่อน
npx create-react-app loading-app
cd loading-appInstall package ที่เราต้องใช้ในวันนี้
npm i --save react-lottie react-fade-inreact-fade-in จะช่วยเพิ่ม animation fade ให้กับ component ของเรา
react-lottie จะเป็นการนำ animation จากคนอื่นที่เขาทำไว้แล้วแปลงเป็น file json เพื่อให้เราสามารถนำไปใช้ต่อได้
ก่อนที่ทุกคนจะเริ่มเขียน code กันต่อนั้น อยากให้ทุกคนลองเข้าไปดู
ที่เว็บ https://lottiefiles.com/ เสียก่อน เพราะว่ามันมี animation สำหรับการทำ loading เยอะมาก พอเราเลือกแบบที่ถูกใจได้แล้ว ให้กด <html> ตามรูปด้านล่าง
copy link ตรง Generate Code ไปเปิดที่ browser จะได้ json ออกมา แล้วก็ copy json นั้นมาวางที่โปรเจคของเราได้เลยครับ
ถ้าทุกอย่างพร้อมแล้ว ลุยกันเถอะ !!
น่าจะไม่ต้องอธิบาย code กันมากนะครับ เจ้าของบล็อคเชื่อว่าทุกคนที่เขียน react มาน่าจะอ่าน code ในส่วนนี้เข้าใจกันหมด หรือถ้าใครไม่เข้าใจตรงไหนก็ลอง comment มาได้เลยครับ
สรุป
การทำ loading screens ให้กับเว็บหรือ Application ของเรานั้นก็เป็นสิ่งสำคัญอย่างนึงที่จะช่วยเพิ่ม UX ให้กับ Application เพราะฉะนั้นแล้วเราควรจะทำมันเถอะนะ เพื่อให้ user ร้อง Wowwwww ทำไมมันคูลลลลลลขนาดนี้ วันนี้เจ้าของบล็อคก็ได้มาแนะนำวิธีง่ายๆที่เพื่อนๆน่าจะทำกันได้ทุกคน สำหรับเพื่อนๆคนไหนมีเทคนิคหรือ
ไอเดียดีๆ ก็มาเล่าสู่กันฟังได้นะครับผม เอาไว้เจอกันใหม่โอกาสหน้า สวีดัดดดดดดด
Demo Code :
