8-sentabr, 2025O'zbek

Shaklni yuborishni boshqarish, real vaqtda yangilanishlar va foydalanuvchi tajribasini yaxshilash uchun Reactning experimental_useFormStatus xukini o'rganing. Amaliy misollar bilan uni qanday qo'llashni bilib oling.

React experimental_useFormStatus: Haqiqiy Vaqtdagi Yangilanishlar va Jonli Forma Holati

Reactdagi experimental_useFormStatus xuki shaklni yuborish holatlarini boshqarishning yangi va kuchli usulini taklif etadi, bu real vaqtda yangilanishlarni ta'minlaydi va foydalanuvchi tajribasini sezilarli darajada yaxshilaydi. Ushbu maqolada xuk chuqur o'rganilib, uning funksionalligi, afzalliklari va amaliy misollar bilan qo'llanilishi tushuntiriladi.

`experimental_useFormStatus` nima?

experimental_useFormStatus - bu React xuki bo'lib, u shakl yuborilishining holati haqida ma'lumot beradi. U server harakatlari (server actions) bilan uzluksiz ishlash uchun mo'ljallangan bo'lib, dasturchilarga shakl yuborilayotganligini, xatolikka duch kelganligini yoki muvaffaqiyatli yakunlanganligini osonlikcha kuzatish imkonini beradi. Bu esa yanada sezgir va ma'lumotli foydalanuvchi interfeyslarini yaratishga imkon beradi.

Asosiy Xususiyatlari:

Haqiqiy Vaqtdagi Holat Yangilanishlari: Shakl yuborilishi jarayonida foydalanuvchiga darhol fikr-mulohaza bildiradi.
Xatoliklarni Qayta Ishlash: Foydalanuvchiga xato xabarlarini ko'rsatish jarayonini soddalashtiradi.
Yuklanish Ko'rsatkichlari: Yuborish paytida yuklanish belgilarini (spinner) yoki boshqa vizual ko'rsatkichlarni ko'rsatishni osonlashtiradi.
Server Harakatlari bilan Uzluksiz Integratsiya: Server harakatlari bilan ishlash uchun maxsus ishlab chiqilgan bo'lib, bu sizga React komponentlaringizdan to'g'ridan-to'g'ri server tomonidagi kodni bajarish imkonini beruvchi yangi xususiyatdir.

Nima uchun `experimental_useFormStatus` dan foydalanish kerak?

Reactda an'anaviy shakllarni boshqarish ko'pincha holatni qo'lda boshqarishni o'z ichiga oladi, bu esa noqulay va xatoliklarga moyil bo'lishi mumkin. experimental_useFormStatus bu jarayonni shakl yuborish holatiga markazlashtirilgan kirish usulini taqdim etish orqali soddalashtiradi. Mana nima uchun uni ishlatishni o'ylab ko'rishingiz kerak:

Yaxshilangan Foydalanuvchi Tajribasi: Foydalanuvchilar o'z harakatlariga darhol javob oladilar, bu esa yanada qoniqarli tajribaga olib keladi. Tasavvur qiling, foydalanuvchi murakkab xalqaro buyurtma shaklini yubormoqda. Haqiqiy vaqtdagi fikr-mulohaza bilan ular yetkazib berish manzili global ma'lumotlar bazasida tekshirilayotganda yuklanish ko'rsatkichini, kredit karta ma'lumotlari xalqaro standartlarga mos kelmasa xato xabarlarini va muvaffaqiyatli qayta ishlanganida muvaffaqiyat xabarini ko'radilar. Bu ularning tizimga bo'lgan ishonchini oshiradi.
Shablon Kodni Kamaytirish: Xuk shakl holatini kuzatish mantiqini o'z ichiga oladi, bu siz yozishingiz kerak bo'lgan kod miqdorini kamaytiradi.
Kengaytirilgan Xatolarni Qayta Ishlash: Shaklni yuborishdagi muvaffaqiyatsizliklar bilan bog'liq xato xabarlarini osongina ko'rsatish. Tasavvur qiling, Yaponiyadagi foydalanuvchi xizmatga ro'yxatdan o'tishga harakat qilmoqda. Agar uning pochta indeksi Yaponiya manzillari uchun talab qilinadigan formatga mos kelmasa, aniq va darhol xato xabari uni tuzatishga yo'naltirishi mumkin, bu esa ro'yxatdan o'tish tajribasini yaxshilaydi.
Kodning Yaxshi Qo'llab-quvvatlanishi: Markazlashtirilgan holatni boshqarish kodingizni tushunish va saqlashni osonlashtiradi.

`experimental_useFormStatus` qanday ishlatiladi

Keling, React komponentida experimental_useFormStatus dan qanday foydalanishning amaliy misolini ko'rib chiqamiz.

Dastlabki Talablar:

React 18 yoki undan yuqori
React Server Komponenti muhiti (masalan, Next.js App Router)
Eksperimental xususiyatni yoqish: Bu odatda eksperimental xususiyatlarni yoqish uchun bandlerni (masalan, webpack) sozlashni o'z ichiga oladi. O'z muhitingizga asoslangan aniq ko'rsatmalar uchun React hujjatlariga murojaat qiling.

Misol: Oddiy Aloqa Shakli

Bu yerda experimental_useFormStatus dan foydalanadigan oddiy aloqa shakli keltirilgan:

            
// Bu server harakati, shuning uchun u komponentdan tashqarida aniqlanishi kerak
async function submitForm(formData) {
  'use server'; // Ushbu funksiyani server harakati sifatida belgilang

  // Namoyish maqsadida kechikishni simulyatsiya qilish
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    return { message: 'Barcha maydonlar to\'ldirilishi shart.' };
  }

  try {
    // E-pochtani yuborishni simulyatsiya qilish. Haqiqiy ilovada siz SendGrid yoki Mailgun kabi xizmatdan foydalanasiz.
    console.log('E-pochta yuborilmoqda...', { name, email, message });
    // ... (E-pochtani yuborish mantig'i shu yerda)
    return { message: 'Rahmat! Xabaringiz yuborildi.' };
  } catch (error) {
    console.error('E-pochtani yuborishda xatolik:', error);
    return { message: 'Xabaringizni yuborishda xatolik yuz berdi. Iltimos, keyinroq qayta urinib ko\'ring.' };
  }
}

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    
      
        Ism:
        
      
      
        Email:
        
      
      
        Xabar:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Yuborilmoqda...' : 'Xabarni yuborish'}
      </button>

      {data && <p style={{ color: 'green' }}>{data.message}</p>}
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ci8vIEJ1IHNlcnZlciBoYXJha2F0aSwgc2h1bmluZyB1Y2h1biB1IGtvbXBvbmVudGRhbiB0YXNocWFyaWRhIGFuaXFsYW5pc2hpIGtlcmFrCmFzeW5jIGZ1bmN0aW9uIHN1Ym1pdEZvcm0oZm9ybURhdGEpIHsKICAndXNlIHNlcnZlcic7IC8vIFVzaGJ1IGZ1bmtzaXlhbmkgc2VydmVyIGhhcmFrYXRpIHNpZmF0aWRhIGJlbGdpbGFuZwoKICAvLyBOYW1veWlzaCBtYXFzYWRpZGEga2VjaGlraXNobmkgc2ltdWx5YXRzaXlhIHFpbGlzaAogIGF3YWl0IG5ldyBQcm9taXNlKHJlc29sdmUgPT4gc2V0VGltZW91dChyZXNvbHZlLCAyMDAwKSk7CgogIGNvbnN0IG5hbWUgPSBmb3JtRGF0YS5nZXQoJ25hbWUnKTsKICBjb25zdCBlbWFpbCA9IGZvcm1EYXRhLmdldCgnZW1haWwnKTsKICBjb25zdCBtZXNzYWdlID0gZm9ybURhdGEuZ2V0KCdtZXNzYWdlJyk7CgogIGlmICghbmFtZSB8fCAhZW1haWwgfHwgIW1lc3NhZ2UpIHsKICAgIHJldHVybiB7IG1lc3NhZ2U6ICdCYXJjaGEgbWF5ZG9ubGFyIHRvXCdsZGlyaWxpc2hpIHNoYXJ0LicgfTsKICB9CgogIHRyeSB7CiAgICAvLyBFLXBvY2h0YW5pIHl1Ym9yaXNobmkgc2ltdWx5YXRzaXlhIHFpbGlzaC4gSGFxaXFpeSBpbG92YWRhIHNpeiBTZW5kR3JpZCB5b2tpIE1haWxndW4ga2FiaSB4aXptYXRkYW4gZm95ZGFsYW5hc2l6LgogICAgY29uc29sZS5sb2coJ0UtcG9jaHRhIHl1Ym9yaWxtb3FkYS4uLicsIHsgbmFtZSwgZW1haWwsIG1lc3NhZ2UgfSk7CiAgICAvLyAuLi4gKEUtcG9jaHRhbmkgeXVib3Jpc2ggbWFudGlnJ2kgc2h1IHllcmRhKQogICAgcmV0dXJuIHsgbWVzc2FnZTogJ1JhaG1hdCEgWGFiYXJpbmdpeiB5dWJvcmlsZGkuJyB9OwogIH0gY2F0Y2ggKGVycm9yKSB7CiAgICBjb25zb2xlLmVycm9yKCdFLXBvY2h0YW5pIHl1Ym9yaXNoZGEgeGF0b2xpazonLCBlcnJvcik7CiAgICByZXR1cm4geyBtZXNzYWdlOiAnWGFiYXJpbmdpem5pIHl1Ym9yaXNoZGEgeGF0b2xpayB5dXogYmVyZGkuIElsdGltb3MsIGtleWlucm9xIHFheXRhIHVyaW5pYiBrb1wncmluZy4nIH07CiAgfQp9CgppbXBvcnQgeyBleHBlcmltZW50YWxfdXNlRm9ybVN0YXR1cyBhcyB1c2VGb3JtU3RhdHVzIH0gZnJvbSAncmVhY3QtZG9tJzsKCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IHsgcGVuZGluZywgZGF0YSwgZXJyb3IgfSA9IHVzZUZvcm1TdGF0dXMoKTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17c3VibWl0Rm9ybX0+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im5hbWUiPklzbTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgZGlzYWJsZWQ9e3BlbmRpbmd9IC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJlbWFpbCI+RW1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibWVzc2FnZSI+WGFiYXI6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIGRpc2FibGVkPXtwZW5kaW5nfSAvPgogICAgICA8L2Rpdj4KICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiIGRpc2FibGVkPXtwZW5kaW5nfT4KICAgICAgICB7cGVuZGluZyA/ICdZdWJvcmlsbW9xZGEuLi4nIDogJ1hhYmFybmkgeXVib3Jpc2gnfQogICAgICA8L2J1dHRvbj4KCiAgICAgIHtkYXRhICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAnZ3JlZW4nIH19PntkYXRhLm1lc3NhZ2V9PC9wPn0KICAgICAge2Vycm9yICYmIDxwIHN0eWxlPXt7IGNvbG9yOiAncmVkJyB9fT57ZXJyb3IubWVzc2FnZX08L3A+fQogICAgPC9mb3JtPgogICk7Cn0KCmV4cG9ydCBkZWZhdWx0IENvbnRhY3RGb3JtOwo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>Tushuntirish:</h3>

<ol>
  <li><b><code>experimental_useFormStatus</code> ni import qilish:</b> Xukni <code>react-dom</code> dan import qiling. "experimental_" prefiksi API o'zgarishi mumkinligini bildirishiga e'tibor bering.</li>
  <li><b>Server Harakatini Aniqlash:</b> <code>submitForm</code> funksiyasi server harakatidir. U <code>'use server'</code> bilan belgilangan. Bu funksiya serverda ishlaydi va shakl yuborish mantiqini boshqaradi. U ma'lumotlar bazalariga va boshqa server tomonidagi resurslarga mijozga oshkor qilmasdan to'g'ridan-to'g'ri kirishi mumkin.</li>
  <li><b>Xukdan Foydalanish:</b> Komponentingiz ichida <code>useFormStatus()</code> ni chaqiring. U quyidagi xususiyatlarga ega obyektni qaytaradi:
    <ul>
      <li><code>pending</code>: Shakl hozirda yuborilayotganini ko'rsatuvchi mantiqiy (boolean) qiymat.</li>
      <li><code>data</code>: Server harakati tomonidan qaytarilgan ma'lumotlar. Bu foydalanuvchiga muvaffaqiyat xabarlari yoki boshqa ma'lumotlarni ko'rsatish uchun foydalidir.</li>
      <li><code>error</code>: Agar server harakati muvaffaqiyatsiz bo'lsa, xatolik obyekti. Bu foydalanuvchiga xato xabarlarini ko'rsatish imkonini beradi.</li>
      <li><code>action</code>: Server harakatining o'zi. Bu avtomatik ravishda <code><form></code> elementining <code>action</code> propiga uzatiladi.</li>
    </ul>
  </li>
  <li><b>Server Harakatini Shaklga Bog'lash:</b> Server harakati funksiyasini <code><form></code> elementining <code>action</code> atributiga tayinlang. React avtomatik ravishda shakl yuborilishini boshqaradi va shakl ma'lumotlarini server harakatiga uzatadi.</li>
  <li><b>Holatga Asosan UI ni Yangilash:</b> UI ni yangilash uchun <code>pending</code>, <code>data</code>, va <code>error</code> xususiyatlaridan foydalaning. Masalan, shakl yuborilayotganda yuborish tugmasini o'chirib qo'yishingiz va yuklanish ko'rsatkichini ko'rsatishingiz mumkin. Shuningdek, <code>data</code> va <code>error</code> xususiyatlariga asoslanib muvaffaqiyat yoki xato xabarlarini ko'rsatishingiz mumkin.</li>
</ol>

<h3>Batafsil Tahlil:</h3>

<ul>
  <li><b>Server Harakatlari va Xavfsizlik:</b> Server harakatlari muhim xavfsizlik afzalliklarini taklif etadi. Ular serverda ishlaganligi sababli, nozik ma'lumotlarga xavfsiz kirishlari va operatsiyalarni mijozga oshkor qilmasdan bajarishlari mumkin. Bu zararli foydalanuvchilarning ma'lumotlaringizni buzishini yoki zararli kod kiritishini oldini olishga yordam beradi. Biroq, SQL in'ektsiyasi kabi zaifliklarning oldini olish uchun mijozdan olingan barcha ma'lumotlarni tekshirish va tozalash hali ham muhimdir.</li>
  <li><b>Turli Ma'lumot Turlarini Boshqarish:</b> Server Harakatlari turli xil ma'lumot turlarini, shu jumladan JSON obyektlari, satrlar va hatto React komponentlarini (fragmentlar) qaytarishi mumkin. Qaytarilgan ma'lumotlar `useFormStatus` tomonidan qaytarilgan obyektning `data` xususiyatida mavjud bo'ladi. Siz ushbu ma'lumotlardan UI ni dinamik ravishda yangilash uchun foydalanishingiz mumkin.</li>
  <li><b>Xatolik Chegaralari (Error Boundaries):</b> Shakl yuborish paytida yuzaga kelishi mumkin bo'lgan har qanday kutilmagan xatolarni ushlash uchun shakl komponentingizni Xatolik Chegarasiga o'rashni o'ylab ko'ring. Bu ilovangizning ishdan chiqishini oldini olishga va yanada qulay foydalanuvchi tajribasini ta'minlashga yordam beradi.</li>
  <li><b>Progressiv Yaxshilanish:</b> Server harakatlari progressiv yaxshilanishni qo'llab-quvvatlaydi. Agar JavaScript o'chirilgan bo'lsa yoki yuklanmasa, shakl an'anaviy shakl yuborish usullari yordamida baribir yuboriladi. Siz serveringizni ushbu zaxira yuborishlarni muammosiz boshqarish uchun sozlashingiz mumkin.</li>
</ul>

<h2>Ilg'or Foydalanish va Mulohazalar</h2>

<h3>Optimistik Yangilanishlar</h3>

<p>Yana ham sezgir foydalanuvchi tajribasi uchun siz optimistik yangilanishlarni amalga oshirishingiz mumkin. Bu, server tasdiqlashidan oldin, shakl yuborilishi muvaffaqiyatli bo'lgandek UI ni yangilashni o'z ichiga oladi. Agar server xato qaytarsa, siz UI ni avvalgi holatiga qaytarishingiz mumkin.</p>

<h3>Maxsus Xatolarni Qayta Ishlash</h3>

<p>Foydalanuvchiga yanada aniq va ma'lumotli xato xabarlarini taqdim etish uchun xatolarni qayta ishlash mantiqini sozlashingiz mumkin. Masalan, serverda shakl ma'lumotlarini tekshirish uchun validatsiya kutubxonasidan foydalanishingiz va har bir maydon uchun maxsus xato xabarlarini qaytarishingiz mumkin.</p>

<h3>Xalqarolashtirish (i18n)</h3>

<p>Global auditoriya uchun ilovalar yaratishda xalqarolashtirishni hisobga olish juda muhimdir. Foydalanuvchiga ko'rsatiladigan xato xabarlari va boshqa matnlarni tarjima qilish uchun <code>react-intl</code> yoki <code>i18next</code> kabi kutubxonadan foydalaning. Masalan, xato xabarlari foydalanuvchining brauzer sozlamalari yoki joylashuviga qarab afzal ko'rgan tiliga tarjima qilinishi kerak.</p>

<h3>Foydalanish Imkoniyati (a11y)</h3>

<p>Shakllaringiz nogironligi bo'lgan foydalanuvchilar uchun ochiq ekanligiga ishonch hosil qiling. Semantik HTML elementlaridan foydalaning, barcha shakl maydonlari uchun aniq yorliqlar taqdim eting va yordamchi texnologiyalarga qo'shimcha ma'lumot berish uchun ARIA atributlaridan foydalaning. Masalan, shakl maydoni talab qilinishini yoki unda xatolik borligini ko'rsatish uchun ARIA atributlaridan foydalanishingiz mumkin.</p>

<h2>Eng Yaxshi Amaliyotlar</h2>

<ul>
  <li><b>Nozik Operatsiyalar uchun Server Harakatlaridan Foydalaning:</b> Nozik ma'lumotlarni o'z ichiga olgan yoki server tomonidagi resurslarga kirishni talab qiladigan operatsiyalar uchun har doim server harakatlaridan foydalaning.</li>
  <li><b>Ma'lumotlarni Tekshirish va Tozalash:</b> Zaifliklarning oldini olish uchun mijozdan olingan ma'lumotlarni har doim tekshiring va tozalang. Bu, ayniqsa, turli xil hududlardan foydalanuvchilarning ma'lumotlari bilan ishlashda muhim, chunki ma'lumotlar formatlari va kutilmalari keng farq qilishi mumkin.</li>
  <li><b>Aniq Xato Xabarlarini Taqdim Eting:</b> Foydalanuvchiga xatolarini tuzatishda yordam berish uchun aniq va ma'lumotli xato xabarlarini taqdim eting. Ushbu xabarlarni madaniy jihatdan moslashtiring va barcha foydalanuvchilar tushunmasligi mumkin bo'lgan jargon yoki iboralardan foydalanishdan saqlaning.</li>
  <li><b>Yuklanish Ko'rsatkichlaridan Foydalaning:</b> Shakl yuborilayotganda foydalanuvchiga fikr-mulohaza bildirish uchun yuklanish ko'rsatkichlaridan foydalaning. Uzoq davom etadigan operatsiyalar uchun progress barlaridan foydalanishni o'ylab ko'ring.</li>
  <li><b>Puxta Sinovdan O'tkazing:</b> Shakllaringiz barcha stsenariylarda to'g'ri ishlashiga ishonch hosil qilish uchun ularni puxta sinovdan o'tkazing. Chekka holatlar va xatolik sharoitlariga alohida e'tibor bering. Sinov, shuningdek, turli qurilmalar va tarmoq sharoitlarida foydalanish imkoniyatini ta'minlash uchun turli geografik joylardan foydalanuvchilarni o'z ichiga olishi kerak.</li>
  <li><b>Ishlash Samaradorligini Kuzatib Boring:</b> Har qanday to'siqlarni aniqlash va bartaraf etish uchun server harakatlaringizning ishlash samaradorligini kuzatib boring.</li>
</ul>

<h2>Xulosa</h2>

<p><code>experimental_useFormStatus</code> Reactda yanada sezgir va foydalanuvchiga qulay shakllar yaratish uchun qimmatli vositadir. Haqiqiy vaqtdagi holat yangilanishlarini ta'minlash va xatolarni qayta ishlashni soddalashtirish orqali u foydalanuvchi tajribasini sezilarli darajada yaxshilashi va siz yozishingiz kerak bo'lgan shablon kod miqdorini kamaytirishi mumkin. React rivojlanishda davom etar ekan, <code>experimental_useFormStatus</code> kabi xususiyatlar shakllarni boshqarish uchun yangi standartlarni o'rnatmoqda va dasturchilarga global auditoriya uchun ajoyib veb-ilovalar yaratish uchun kuchli vositalarni taqdim etmoqda.</p>

<p>Ushbu yutuqlarni qabul qilish va eng yaxshi amaliyotlarga rioya qilish orqali dasturchilar nafaqat funksional va samarali, balki turli xil va global auditoriya uchun ochiq, xavfsiz va foydalanuvchiga qulay veb-ilovalarni yaratishlari mumkin. Asosiysi, foydalanuvchi tajribasini birinchi o'ringa qo'yish, madaniy nuanslarni hisobga olish va har doim hamma uchun inklyuziv va ochiq bo'lgan ilovalarni yaratishga intilishdir.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">forma holati</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">forma yuborish</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React experimental</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React xuklari</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asinxron forma</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">foydalanuvchi tajribasi</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">veb-dasturlash</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">forma validatsiyasi</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>