Nuriddin MuhammadjanovNuriddin Muhammadjanovhttps://teletype.in/atom/nurikjohn2026-04-11T07:55:46.650Znurikjohn:telegram-animated-emojisReactda Telegramdagi animated emojilardan foydalanish.2023-08-02T13:07:34.601Z2023-08-03T06:36:42.570Z<img src="https://img4.teletype.in/files/b4/aa/b4aa562d-6888-41cd-9be4-26a5aceddaac.jpeg">Hozirda Telegram platformasida deyarli barcha emojilarning animated varianti bor, bundan tashqari community tomonidan qo’shilgan animated sticker va emojilar soni mingdan oshgan. Telegramdagi bu animatsiyalar lottie formatida bo’lib ularni websaytda ham ishlatish imkoni mavjud.
<p id="2I4z">Hozirda Telegram platformasida deyarli barcha <strong>emoji</strong>larning <strong>animated</strong> varianti bor, bundan tashqari <strong>community</strong> tomonidan qo’shilgan <strong>animated</strong> <strong>sticker</strong> va <strong>emoji</strong>lar soni mingdan oshgan. Telegramdagi bu animatsiyalar <strong>lottie</strong> formatida bo’lib ularni websaytda ham ishlatish imkoni mavjud. </p>
<p id="UJ0f"></p>
<p id="2GKE">1. <strong>React</strong>da Lottie animatsiyalaridan foydalanish uchun <code>react-lottie</code> kutubxonasini o’rnatamiz:</p>
<pre id="vlSL" data-lang="shell">npm install react-lottie</pre>
<p id="BSum">2. Telegramdan <strong>emoji</strong> animatsiyasini yuklab olamiz:</p>
<figure id="Ulva" class="m_column">
<img src="https://img4.teletype.in/files/b4/aa/b4aa562d-6888-41cd-9be4-26a5aceddaac.jpeg" width="406" />
</figure>
<p id="Oi4D">3.Lottie animatsiyalar odatda <code>.json</code> formatida bo’ladi, telegram animatsiyalari esa maxsus <code>.tgs</code> formatida bo’ladi. Saqlangan <code>.tgs</code> faylni shunchaki <strong>uncompress</strong> qilish orqali <code>.json</code> faylni olishimiz mumkun. Faylni loyihaga <code>cat.json</code> nomi bilan saqlaymiz. </p>
<p id="sQeA">4. Sahifaga <strong>Lottie</strong> <strong>component</strong>ini qo’shamiz:</p>
<pre id="EcLg" data-lang="javascript">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;</pre>
<p id="NnUQ"></p>
<p id="jU2e">Natija:</p>
<figure id="4drA" class="m_column">
<img src="https://img2.teletype.in/files/16/91/1691cd83-81a0-476b-8bd2-0a486338c97e.gif" width="584" />
</figure>
<p id="zev7">Bu fayllardan nafaqat <strong>react</strong>da balki istalgan <strong>lottie</strong> animatsiyalarini ishlatish mumkun bo’lgan platformada foydalanish mumkin.</p>
<p id="HkO1"></p>
<p id="Wmbv">Github: <a href="https://github.com/Nurikjohn/telegram-animated-emojis" target="_blank">https://github.com/nurikjohn/telegram-animated-emojis</a></p>
<p id="kTvy"></p>
<p id="O1iF">Bonus ✨</p>
<p id="YhcO">Lottie animatsiyalarini <a href="https://lottiefiles.com" target="_blank">https://lottiefiles.com</a> sayti orqali o’zgartirish, ranglarni almashtirish mumkun:</p>
<figure id="yaSu" class="m_column">
<img src="https://img1.teletype.in/files/c0/ee/c0ee8afa-2706-407a-b41e-98825dc7c5e2.png" width="1039" />
</figure>
nurikjohn:tdzO’zgaruvchi e’lon qilinishidan oldin ishlatilsa nima bo’ladi?2022-08-12T10:42:54.388Z2022-08-12T11:06:02.671Z<img src="https://img3.teletype.in/files/23/36/233681be-c9f6-4f4b-bd03-31004da70796.png">Agar o’zgaruvchi var bilan e’lon qilingan bo’lsa unda uning qiymati undefined bo’ladi.
<p id="5gqX">Agar o’zgaruvchi <code>var</code> bilan e’lon qilingan bo’lsa unda uning qiymati <code>undefined</code> bo’ladi.</p>
<figure id="HXA1" class="m_column" data-caption-align="center">
<img src="https://img3.teletype.in/files/23/36/233681be-c9f6-4f4b-bd03-31004da70796.png" width="1576" />
</figure>
<p id="kvZw"></p>
<p id="geCD">Agar o’zgaruvchi <code>let</code> yoki <code>const</code> bilan e’lon qilingan bo’lsa <code>ReferenceError</code> xatoligi kelib chiqadi.</p>
<figure id="Mu5X" class="m_column" data-caption-align="center">
<img src="https://img2.teletype.in/files/99/4a/994afcc7-a5ee-45b4-bb79-4be411efbabf.png" width="1566" />
</figure>
<h3 id="JOk3"></h3>
<h3 id="M8cl">Nega bu holatda <code>var</code> va <code>let</code>/<code>const</code> farq qiladi?</h3>
<p id="H4FK">Ko’pchilik bu holatni <strong>hoisting</strong> bilan bog’liq va <code>let</code>/<code>const</code> <strong>hoisting </strong>qilinmaydi deb o'ylashadi va bu noto’gri.</p>
<p id="5KO8"><code>let</code>/<code>const</code> o'zgaruvchilari ham <code>var</code> o'zgaruvchilari kabi <strong>hoisting</strong> qilinadi. Asosiy farq shundaki <code>var</code> o'zgaruvchilari hoisting qilinganda ularga boshlang'ich qiymat sifatida <code>undefined</code> beriladi. Ammo <code>let</code>/<code>const</code> o'zgaruvchilari <strong>hoisting</strong> qilinganida ularga boshlang'ich qiymat berilmaydi.</p>
<p id="yXXH">Bunga sabab <code>const</code> o'zgaruvchilariga e'lon qilingandagina qiymat beriladi va qayta qiymat o'zlashtirib bo'lmaydi, ya'ni <code>const</code> o'zgaruvchilari faqatgina bir dona qiymatni o'zida saqlay oladi, shu sababdan ularga boshlang'ich qiymat sifatida <code>undefined</code> berilishi notog'ri bo'ladi. Shuning uchun <code>const</code> bilan e'lon qilingan o'zgaruvchilar e'lon qilinishidan oldin ishlatilganda o'zgaruvchining hech qanday qiymati yo'q bo'lgani uchun xatolik kelib chiqadi (<code>ReferenceError</code>). <code>let</code> da bunday mu’ammo bo’lmasada u ham <code>const</code> kabi ishlaydi.</p>
<p id="Zi8Q">O’zgaruvchi ishlatilishi mumkun bo’lgan <code>scope</code> da u e’lon qilingungacha bo’lgan hudud <strong>“vaqtinchalik o’lik hudud”</strong> (temporal dead zone - TDZ) deb nomlanadi.</p>
<p id="imf3"><strong>"TDZ"</strong> da <code>let</code>/<code>const</code> oz'garuvchilari mavjudligi ma'lum bo'ladi, ammo ularni ishlatib bo'lmaydi.</p>