1. Reactda Lottie animatsiyalaridan foydalanish uchun react-lottie kutubxonasini o’rnatamiz:

npm install react-lottie

2. Telegramdan emoji animatsiyasini yuklab olamiz:

3.Lottie animatsiyalar odatda .json formatida bo’ladi, telegram animatsiyalari esa maxsus .tgs formatida bo’ladi. Saqlangan .tgs faylni shunchaki uncompress qilish orqali .json faylni olishimiz mumkun. Faylni loyihaga cat.json nomi bilan saqlaymiz.

4. Sahifaga Lottie componentini qo’shamiz:

import Lottie from "react-lottie";
import "./App.css";

const animationData = require("./cat.json");

const App = () => {
    const options = {
        loop: false,
        autoplay: true,
        animationData: animationData,
    };
    
    return (
        <div className="App">
            <Lottie options={options} height={400} width={400} />
        </div>
    );
};

export default App;

Natija:

Bu fayllardan nafaqat reactda balki istalgan lottie animatsiyalarini ishlatish mumkun bo’lgan platformada foydalanish mumkin.

Github: https://github.com/nurikjohn/telegram-animated-emojis

Bonus ✨

Lottie animatsiyalarini https://lottiefiles.com sayti orqali o’zgartirish, ranglarni almashtirish mumkun:

Agar o’zgaruvchi let yoki const bilan e’lon qilingan bo’lsa ReferenceError xatoligi kelib chiqadi.

Nega bu holatda var va let/const farq qiladi?

Ko’pchilik bu holatni hoisting bilan bog’liq va let/const hoisting qilinmaydi deb o'ylashadi va bu noto’gri.

let/const o'zgaruvchilari ham var o'zgaruvchilari kabi hoisting qilinadi. Asosiy farq shundaki var o'zgaruvchilari hoisting qilinganda ularga boshlang'ich qiymat sifatida undefined beriladi. Ammo let/const o'zgaruvchilari hoisting qilinganida ularga boshlang'ich qiymat berilmaydi.

Bunga sabab const o'zgaruvchilariga e'lon qilingandagina qiymat beriladi va qayta qiymat o'zlashtirib bo'lmaydi, ya'ni const o'zgaruvchilari faqatgina bir dona qiymatni o'zida saqlay oladi, shu sababdan ularga boshlang'ich qiymat sifatida undefined berilishi notog'ri bo'ladi. Shuning uchun const bilan e'lon qilingan o'zgaruvchilar e'lon qilinishidan oldin ishlatilganda o'zgaruvchining hech qanday qiymati yo'q bo'lgani uchun xatolik kelib chiqadi (ReferenceError). let da bunday mu’ammo bo’lmasada u ham const kabi ishlaydi.

O’zgaruvchi ishlatilishi mumkun bo’lgan scope da u e’lon qilingungacha bo’lgan hudud “vaqtinchalik o’lik hudud” (temporal dead zone - TDZ) deb nomlanadi.

"TDZ" da let/const oz'garuvchilari mavjudligi ma'lum bo'ladi, ammo ularni ishlatib bo'lmaydi.