DEV Community: _TNKSHCC

การใช้งาน Lottie animations ร่วมกับ React

_TNKSHCC — Sun, 26 Sep 2021 16:57:45 +0000

Lottie Animation เป็นไฟล์ภาพอนิเมชั่นที่เบา เร็ว และมีภาพเคลื่อนไหวที่มีคุณภาพสูง คือ เร็วกว่า .gif หรือ png ที่เรียงซ้อนกัน หรือแม้กระทั่งวีดีโอที่เป็นไฟล์ใหญ่โดยปัจจุบันเว็บต้องการการโหลดเว็บที่เร็วแต่ยังต้องมีลูกเล่น การใช้ Lottie Animation เพื่อตอบโจทย์ในส่วนนี้

ในบทความนี้จะไม่พูดถึงการสร้างไฟล์ Lottie Animation แต่จะเป็นการพูดถึงการใช้งานไฟล์ Lottie ร่วมกับ React ซึ่งแน่นอนจะต้องมีการสร้างไฟล์ Lottie ที่เป็นไฟล์นามสกุล .json ขึ้นมาแล้ว ซึ่งทาง Lottie Animation จะมีตัวช่วยในการสร้างแบบออนไลน์อย่าง Lottie Editor แทนการสร้างในโปรแกรม Adobe After Effect

สร้างไฟล์ Lottie Animation ด้วย Lottie Editor

ต่อมาหลังจากที่เราได้ทำการสร้างไฟล์ .json ขึ้นมาแล้ว เนื้อหาในไฟล์จะอยู่ในรูปแบบของ json ซึ่งสิ่งที่สำคัญอีกส่วนหนึ่งในการใช้งานเพื่อ Render ไฟล์ .json ของเราให้อยู่ในรูปแบบ Animation บนหน้าเว็บนั้นในส่วนนี้เราจะใช้ Libraly ที่ชื่อว่า react-lottie

เริ่มต้นโปรเจค React ด้วย create-react-app ในที่นี้จะยกตัวอย่าง app ว่า app-use-lottie

หากผู้อ่านไม่เคยใช้งาน create-react-app สามารถอ่านบทความก่อนหน้านี้ได้ที่
เริ่มต้นโปรเจคด้วย React Typescript + Tailwind Css

ทำการติดตั้ง react-lottie ด้วยคำสั่ง

npm i --save-dev @types/react-lottie

ทำการ Import Lottie จาก react-lottie และไฟล์ .json ของเรา ในที่นี้คือ arrow-down.json

import Lottie from "react-lottie";
import LottieExample from "./arrow-down.json";

เพิ่มส่วนชองการ Render ไฟล์ lottie

options คือ ส่วนของการตั้งค่าการทำงานต่างๆขแง Lottie
- loop รับค่าเป็น Boolean ว่าต้องการให้ทำการวนซ้ำการทำงานหรือไม่
- autoplay รับค่าเป็น Boolean ว่าต้องการให้ทำการเริ่มต้นการทำงานแบบอัตโนมัติหรือไม่
- animationData ไฟล์ .json ที่ได้ทำการ Import เข้ามา
height ส่วนสูงของไฟล์ Lottie
width ความกว้างของไฟล์ Lottie

<Lottie
  options={{
    loop: true,
    autoplay: true,
    animationData: LottieExample,
  }}
  height={400}
  width={400}
/>

หากไม่เกิดข้อผิดพาดขึ้นมาจะปรากฏ Animation ที่ได้จากการ Render ไฟล์ Lottie Animation ตามที่เราสร้างขึ้นมา

เริ่มต้นโปรเจคด้วย React Typescript + Tailwind Css

_TNKSHCC — Thu, 02 Sep 2021 06:54:14 +0000

ในบทความนี้จะอธิบายถึงขั้นตอนพื้นฐานการเริ่มต้นโปรเจคด้วย React และ Tailwind

เกริ่นนำ

โดยปกติ React เป็น Javascript Library ตัวหนึ่งที่ช่วยในการสร้าง UI หรือส่วนที่

ติดต่อกับ Users ที่มีความซับซ้อน โดยการแบ่งย่อยเป็นส่วนเล็กๆ เป็นอิสระแยกจากกัน หรือที่เรียกกันว่า Component โดยอาศัยภาษา Javascript เป็นหลัก แต่ในบทความนี้เราจะเปลี่ยนการเขียนจากภาษา Javascript มาเป็นภาษา Typescript

ในที่นี้ผู้เขียนใช่ระบบปฏิบัติการ Mac os และตัวช่วยในการจัดการ Package Manager ของ Javascript ด้วย Yarn ส่วนโปรแกรมประเภื Text Editer ทางผู้เขียนใช้งานด้วย Visual Code

เริ่มต้นโปรเจค React + Typescript

เริ่มต้นโดยการเปิด Teminal เพื่อเรียกใช้งาน Command Line หลังจากนั้นทำการ

พิมพ์คำสั่งเพื่อทำการสร้างโปรเจค

yarn create react-app my-first-app --template typescript

หลังจากเสร็จสิ้นการทำงาน จะแสดงคำสั่งพื้นฐานเพิ่อเริ่มต้นแสดงผลโปรเจค

cd my-first-app
yarn start

หากทำการพิมพ์คำสั่งข้างบนแล้วเกิดข้อความแสดง Error ตามรูปนั้น ให้ลองทำ

ตามคำแนะนำขั้นต้น

หากทำตามแล้วใม่หายให้ทำการเปิดการใช้งานโปรแกรม Text Editer ตามที่ผู้อ่านถนัด พร้อมสร้างไฟล์นามสกุล .env อยู่ในไดเร็กทอรี่นอกสุดของโฟลเดอร์โปรเจคของผู้อ่าน หลังจากนั้นให้ทำการพิมพ์คำสั่งข้างล่างลงในไฟล์ .env นั้น เพื่อข้ามการตรวจสอบในส่วนนี้ไป

SKIP_PREFLIGHT_CHECK=true

หลังจากนั้นให้ทำการเกิด Terminal โดยการเลือกเมนู Terminal > New Terminal หากไดเร็กทอรี่ปัจจุบันไม่ใช่ที่อยู่เดีญวกับโปรเจคของผู้อ่าน ให้ทำการเลือกมาที่ไดเร็กทอรี่เดียวกันหลังจากนั้นพิมพ์คำสั่งตามนี้

yarn start

หากไม่มี Error เกิดขึ้น จะแสดงผลหน้าเว็บที่เป็นค่าเริ่มต้นของ React ขึ้นมา

ติดตั้ง Tailwind Css

เริ่มต้นโดยการเปิด Teminal หลังจากนั้นพิมพ์คำสั่งเพื่อติดตั้งลงไป

yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add @craco/craco

หลังจากทำการติดตั้ง craco เสร็จแล้วจะปรากฏไฟล์ craco.config.js ขึ้นมาในไดเร็กทอรี่ให้ทำการใส่การตั้งค่าลงไปในไฟล์ ดังนี้

module.exports = {
    style: {
        postcss: {
            plugins: [
                 require('tailwindcss'),
                 require('autoprefixer')
            ],
        },
    },
}

หลังจากนั้นให้ทำการพิมพ์คำสั่งลงไปใน Terminal เพื่อทำการสร้างไฟล์สำหรับ Config Tailwind Css

ืnpx tailwind init

หลังจากนั้นจะปรากฏไฟล์ tailwind.config.js ขึ้นมาในไดเร็กทอรี่

ทำการเปิดไฟล์ index.css ขั้นมาพร้อมทำการ import Package ของ tailwind เข้ามา

Base
Component
Utilities

ทดสอบการทำงานของ Tailwind Css โดยไปที่ไฟล์ app.tsx หลังจากนั้นทำการวางโค้ดลงไปในไฟล์แล้วทำการบันทึก

import React from 'react';
import './App.xss';

function App() {
  return (
    <div className='container m-auto'>
      <div className='flex justify-center items-center h-screen bg-green-50'>
        <label className='text-3xl font-bold'>FIRST MY APP</label>
      </div>
    </div>
  )
}

หากไม่มี Error เกิดขึ้นจะปรากฏหน้าเว็บขึ้นดังนี้

Credit