React experimental_useFormStatus রিয়েল-টাইম ইঞ্জিন: লাইভ ফর্ম মনিটরিং

আধুনিক ওয়েবে প্রতিক্রিয়াশীল এবং স্বজ্ঞাত ইউজার ইন্টারফেস প্রয়োজন। ফর্মগুলি, ওয়েব অ্যাপ্লিকেশনগুলির একটি মৌলিক উপাদান হওয়ায়, ব্যবহারকারীর অভিজ্ঞতার (UX) দিকে মনোযোগ দেওয়া দরকার। React-এর experimental_useFormStatus হুক ফর্ম জমা দেওয়ার সময় রিয়েল-টাইম প্রতিক্রিয়া সরবরাহ করার জন্য একটি শক্তিশালী প্রক্রিয়া সরবরাহ করে, যা ব্যবহারকারীর অভিজ্ঞতা উল্লেখযোগ্যভাবে উন্নত করে। এই নিবন্ধটি এই পরীক্ষামূলক API-এর ক্ষমতা, এর ব্যবহারের ক্ষেত্র, বাস্তবায়নের বিবরণ এবং বিশ্বব্যাপী দর্শকদের জন্য আকর্ষক এবং তথ্যপূর্ণ ফর্ম তৈরি করার জন্য সেরা অনুশীলনগুলি অনুসন্ধান করবে।

experimental_useFormStatus কি?

experimental_useFormStatus হল একটি React হুক যা React সার্ভার কম্পোনেন্ট দ্বারা শুরু করা ফর্ম জমা দেওয়ার স্থিতি সম্পর্কে তথ্য সরবরাহ করার জন্য ডিজাইন করা হয়েছে। এটি সার্ভার অ্যাকশনগুলির React-এর চলমান অনুসন্ধানের অংশ, যা ডেভেলপারদের React কম্পোনেন্ট থেকে সরাসরি সার্ভার-সাইড লজিক কার্যকর করার অনুমতি দেয়। এই হুকটি মূলত সার্ভারের ফর্ম প্রক্রিয়াকরণের অবস্থার একটি ক্লায়েন্ট-সাইড ভিউ সরবরাহ করে, যা ডেভেলপারদের অত্যন্ত ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল ফর্ম অভিজ্ঞতা তৈরি করতে সক্ষম করে।

experimental_useFormStatus এর আগে, ফর্ম জমা দেওয়ার বিষয়ে রিয়েল-টাইম আপডেট সরবরাহ করার জন্য প্রায়শই জটিল স্টেট ম্যানেজমেন্ট, অ্যাসিঙ্ক্রোনাস অপারেশন এবং লোডিং এবং ত্রুটি অবস্থার ম্যানুয়াল হ্যান্ডলিং জড়িত থাকত। এই হুকটি এই প্রক্রিয়াটিকে সুগম করে, ফর্ম জমা দেওয়ার স্থিতি অ্যাক্সেস করার জন্য একটি ঘোষণামূলক এবং সংক্ষিপ্ত উপায় সরবরাহ করে।

experimental_useFormStatus ব্যবহারের মূল সুবিধা

• উন্নত ব্যবহারকারীর অভিজ্ঞতা: তাদের ফর্ম জমা দেওয়ার অগ্রগতি সম্পর্কে ব্যবহারকারীদের তাৎক্ষণিক প্রতিক্রিয়া সরবরাহ করে, অনিশ্চয়তা হ্রাস করে এবং সামগ্রিক সন্তুষ্টি উন্নত করে।
• রিয়েল-টাইম ত্রুটি হ্যান্ডলিং: ডেভেলপারদের ফর্ম ফিল্ডের সাথে ইনলাইন নির্দিষ্ট ত্রুটি বার্তা প্রদর্শন করার অনুমতি দেয়, যা ব্যবহারকারীদের তাদের ইনপুট সংশোধন করা সহজ করে তোলে।
• সরলীকৃত স্টেট ম্যানেজমেন্ট: ফর্ম জমা দেওয়ার স্থিতির সাথে সম্পর্কিত ম্যানুয়াল স্টেট ম্যানেজমেন্টের প্রয়োজনীয়তা দূর করে, কোডের জটিলতা হ্রাস করে।
• উন্নত অ্যাক্সেসযোগ্যতা: প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্যতা উন্নত করে, ফর্মের স্থিতির রিয়েল-টাইম আপডেট সহ সহায়ক প্রযুক্তি সরবরাহ করতে ডেভেলপারদের সক্ষম করে।
• প্রগ্রেসিভ এনহ্যান্সমেন্ট: জাভাস্ক্রিপ্ট নিষ্ক্রিয় থাকলে বা লোড হতে ব্যর্থ হলেও ফর্মগুলি কাজ করতে থাকে, কার্যকারিতার একটি বেসলাইন স্তর নিশ্চিত করে।

experimental_useFormStatus কিভাবে কাজ করে

হুকটি নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে একটি অবজেক্ট প্রদান করে:

• pending: ফর্ম জমা দেওয়া বর্তমানে চলছে কিনা তা নির্দেশ করে একটি বুলিয়ান।
• data: সফল ফর্ম জমা দেওয়ার পরে সার্ভার অ্যাকশন দ্বারা প্রত্যাবর্তিত ডেটা। এর মধ্যে নিশ্চিতকরণ বার্তা, আপডেট হওয়া ডেটা বা অন্য কোনও প্রাসঙ্গিক তথ্য অন্তর্ভুক্ত থাকতে পারে।
• error: ফর্ম জমা দেওয়ার সময় ঘটে যাওয়া কোনও ত্রুটি সম্পর্কে বিশদযুক্ত একটি ত্রুটি অবজেক্ট।
• action: ফর্ম জমা দেওয়ার সময় কল করা সার্ভার অ্যাকশন ফাংশন। এটি আপনাকে সম্পাদিত নির্দিষ্ট অ্যাকশনের উপর ভিত্তি করে বিভিন্ন UI উপাদানগুলি শর্তসাপেক্ষে রেন্ডার করতে দেয়।

ব্যবহারিক উদাহরণ এবং বাস্তবায়ন

আসুন একটি সাধারণ কন্টাক্ট ফর্মের কথা বিবেচনা করি যা experimental_useFormStatus ব্যবহার করে:

উদাহরণ 1: বেসিক কন্টাক্ট ফর্ম

প্রথমে, ফর্ম জমা দেওয়ার জন্য একটি সার্ভার অ্যাকশন সংজ্ঞায়িত করুন (একটি পৃথক ফাইলে স্থাপন করা হয়েছে, যেমন `actions.js`):

"use server";

import { revalidatePath } from 'next/cache';

export async function submitContactForm(prevState: any, formData: FormData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    return {
      message: 'Please fill in all fields.',
    };
  }

  // Simulate a database operation or API call
  await new Promise((resolve) => setTimeout(resolve, 2000));

  try {
    // In a real application, you would send the data to your backend
    console.log('Form data submitted:', { name, email, message });
    // Simulate success
    revalidatePath('/'); // Optional: revalidate the root route if needed
    return { message: 'Thank you for your message!' };

  } catch (error: any) {
    console.error('Error submitting form:', error);
    return { message: 'Failed to submit the form. Please try again later.' };
  }
}

এখন, experimental_useFormStatus ব্যবহার করে ফর্ম কম্পোনেন্টটি বাস্তবায়ন করুন:

'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { submitContactForm } from './actions';

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

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p className="error">Error: {error.message}</p>}
      {data && data.message && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<p>এই উদাহরণে:</p>

<ul>
  <li>ফর্ম জমা দেওয়ার স্থিতি পুনরুদ্ধার করতে <code>useFormStatus</code> হুক কল করা হয়।</li>
  <li>ফর্ম জমা দেওয়ার সময় <code>pending</code> বৈশিষ্ট্যটি ফর্ম ইনপুট এবং জমা বোতামটি অক্ষম করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের একাধিকবার ফর্ম জমা দেওয়া থেকে বিরত করে।</li>
  <li>ফর্ম জমা দিতে ব্যর্থ হলে <code>error</code> বৈশিষ্ট্যটি একটি ত্রুটি বার্তা প্রদর্শন করতে ব্যবহৃত হয়।</li>
  <li>ফর্মটি সফলভাবে জমা দেওয়ার পরে একটি সাফল্যের বার্তা প্রদর্শন করতে <code>data</code> বৈশিষ্ট্য (বিশেষত, `data.message`) ব্যবহৃত হয়।</li>
</ul>

<h3>উদাহরণ 2: লোডিং সূচক প্রদর্শন করা হচ্ছে</h3>

<p>ফর্ম জমা দেওয়ার সময় একটি লোডিং সূচক প্রদর্শন করে আপনি ব্যবহারকারীর অভিজ্ঞতা আরও বাড়িয়ে তুলতে পারেন। এটি CSS অ্যানিমেশন বা তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে অর্জন করা যেতে পারে:</p>

<pre>
<code>
'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { submitContactForm } from './actions';

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

  return (
    <form action={submitContactForm}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? (
          <span className="loading">Submitting...</span>
        ) : (
          'Submit'
        )}
      </button>
      {error && <p className="error">Error: {error.message}</p>}
      {data && data.message && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<p>CSS (উদাহরণস্বরূপ, একটি পৃথক CSS ফাইলে বা স্টাইলযুক্ত কম্পোনেন্টগুলিতে):</p>

<pre>
<code>
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-top-color: #0070f3; /* Example color */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</code>
</pre>

<p>এই উদাহরণটি ফর্মটি <code>pending</code> অবস্থায় থাকলে জমা বোতামটিতে একটি সাধারণ CSS অ্যানিমেশন যুক্ত করে।</p>

<h3>উদাহরণ 3: ইনলাইন ত্রুটি যাচাইকরণ</h3>

<p>ইনলাইন ত্রুটি যাচাইকরণ সরবরাহ করা ব্যবহারকারীদের তাদের ইনপুটে ত্রুটিগুলি সনাক্ত এবং সংশোধন করা সহজ করে তোলে। আপনি সংশ্লিষ্ট ফর্ম ফিল্ডের পাশে ত্রুটি বার্তা প্রদর্শন করতে <code>error</code> বৈশিষ্ট্যটি ব্যবহার করতে পারেন।</p>

<pre>
<code>
'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { submitContactForm } from './actions';

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

  // Simulated validation errors (replace with your actual validation logic)
  const validationErrors = {
    name: error?.message?.includes('name') ? 'Name is required.' : null,
    email: error?.message?.includes('email') ? 'Invalid email address.' : null,
    message: error?.message?.includes('message') ? 'Message is required.' : null,
  };

  return (
    <form action={submitContactForm}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" disabled={pending} />
        {validationErrors.name && <p className="error">{validationErrors.name}</p>}
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input type="email" id="email" name="email" disabled={pending} />
        {validationErrors.email && <p className="error">{validationErrors.email}</p>}
      </div>
      <div>
        <label htmlFor="message">Message:</label>
        <textarea id="message" name="message" disabled={pending} />
        {validationErrors.message && <p className="error">{validationErrors.message}</p>}
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {data && data.message && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<p>এই উদাহরণে, আমরা প্রাপ্ত ত্রুটির উপর ভিত্তি করে বিভিন্ন ত্রুটি বার্তা অনুকরণ করি। একটি বাস্তব বাস্তবায়নে আরও পরিশীলিত বৈধতা যুক্তি জড়িত থাকবে, সম্ভবত সার্ভার অ্যাকশনের মধ্যেই, যা ফর্ম ফিল্ডের উপর ভিত্তি করে কাঠামোগত ত্রুটি তথ্য প্রদান করে। এই কাঠামোগত ডেটা ক্লায়েন্ট কম্পোনেন্টে সঠিক ইনপুট ফিল্ডগুলিতে ত্রুটিগুলি ম্যাপ করা সহজ করে তোলে।</p>

<h2>experimental_useFormStatus ব্যবহারের জন্য সেরা অনুশীলন</h2>

<ul>
  <li><b>ব্যবহারকারীর অভিজ্ঞতাকে অগ্রাধিকার দিন:</b> <code>experimental_useFormStatus</code> ব্যবহারের প্রাথমিক লক্ষ্য হল ব্যবহারকারীর অভিজ্ঞতা উন্নত করা। তাদের ফর্ম জমা দেওয়ার স্থিতি সম্পর্কে ব্যবহারকারীদের কাছে স্পষ্ট এবং সংক্ষিপ্ত প্রতিক্রিয়া প্রদানের দিকে মনোযোগ দিন।</li>
  <li><b>সুন্দরভাবে ত্রুটিগুলি পরিচালনা করুন:</b> অপ্রত্যাশিত ত্রুটিগুলি সুন্দরভাবে পরিচালনা করতে শক্তিশালী ত্রুটি হ্যান্ডলিং বাস্তবায়ন করুন। সমস্যা সমাধানে সহায়তা করার জন্য ব্যবহারকারীদের সহায়ক ত্রুটি বার্তা সরবরাহ করুন।</li>
  <li><b>উপযুক্ত লোডিং সূচক ব্যবহার করুন:</b> ফর্ম জমা দেওয়া হচ্ছে তা দৃশ্যমানভাবে জানাতে লোডিং সূচক ব্যবহার করুন। লোডিং সূচকগুলি চয়ন করুন যা প্রসঙ্গ এবং জমা দেওয়ার সময়কালের জন্য উপযুক্ত।</li>
  <li><b>জমা দেওয়ার সময় ফর্ম ইনপুটগুলি অক্ষম করুন:</b> ব্যবহারকারীদের একাধিকবার ফর্ম জমা দেওয়া থেকে বিরত রাখতে ফর্ম জমা দেওয়ার সময় ফর্ম ইনপুটগুলি অক্ষম করুন।</li>
  <li><b>অ্যাক্সেসযোগ্যতা বিবেচনা করুন:</b> নিশ্চিত করুন যে আপনার ফর্মগুলি প্রতিবন্ধী ব্যবহারকারীদের জন্য অ্যাক্সেসযোগ্য। ARIA বৈশিষ্ট্যগুলি ব্যবহার করে ফর্ম স্থিতির রিয়েল-টাইম আপডেট সহ সহায়ক প্রযুক্তি সরবরাহ করুন।</li>
  <li><b>সার্ভার-সাইড বৈধতা প্রয়োগ করুন:</b> ডেটা অখণ্ডতা এবং সুরক্ষা নিশ্চিত করতে সর্বদা সার্ভার-সাইডে ফর্ম ডেটা যাচাই করুন।</li>
  <li><b>প্রগ্রেসিভ এনহ্যান্সমেন্ট:</b> নিশ্চিত করুন যে জাভাস্ক্রিপ্ট নিষ্ক্রিয় থাকলে বা লোড হতে ব্যর্থ হলেও আপনার ফর্মগুলি এখনও কাজ করে। জাভাস্ক্রিপ্ট উপলব্ধ না থাকলে বেসিক ফর্ম জমা দেওয়া স্ট্যান্ডার্ড HTML ফর্ম জমা ব্যবহার করে কাজ করা উচিত।</li>
  <li><b>সার্ভার অ্যাকশন অপ্টিমাইজ করুন:</b> দক্ষতার সাথে পারফর্ম করার জন্য আপনার সার্ভার অ্যাকশনগুলি অপ্টিমাইজ করুন। দীর্ঘ-চলমান ক্রিয়াকলাপগুলি এড়িয়ে চলুন যা মূল থ্রেডকে ব্লক করতে পারে এবং কর্মক্ষমতাকে নেতিবাচকভাবে প্রভাবিত করতে পারে।</li>
  <li><b>সতর্কতার সাথে ব্যবহার করুন (পরীক্ষামূলক API):</b> সচেতন থাকুন যে <code>experimental_useFormStatus</code> একটি পরীক্ষামূলক API এবং ভবিষ্যতের React রিলিজে পরিবর্তন সাপেক্ষ হতে পারে। উত্পাদন পরিবেশে সতর্কতার সাথে এটি ব্যবহার করুন এবং প্রয়োজনে আপনার কোড অভিযোজিত করতে প্রস্তুত থাকুন।</li>
  <li><b>আন্তর্জাতিকীকরণ এবং স্থানীয়করণ (i18n/l10n):</b> বিশ্বব্যাপী অ্যাপ্লিকেশনগুলির জন্য, নিশ্চিত করুন যে সমস্ত বার্তা (সাফল্য, ত্রুটি, লোডিং) বিভিন্ন ভাষা এবং অঞ্চল সমর্থন করার জন্য সঠিকভাবে আন্তর্জাতিকীকরণ এবং স্থানীয়করণ করা হয়েছে।</li>
</ul>

<h2>বৈশ্বিক বিবেচনা এবং অ্যাক্সেসযোগ্যতা</h2>

<p>একটি বিশ্বব্যাপী দর্শকদের জন্য ফর্ম তৈরি করার সময়, নিম্নলিখিত বিষয়গুলি বিবেচনা করা জরুরি:</p>

<ul>
  <li><b>আন্তর্জাতিকীকরণ (i18n):</b> লেবেল, ত্রুটি বার্তা এবং সাফল্যের বার্তা সহ সমস্ত পাঠ্য একাধিক ভাষা সমর্থন করার জন্য আন্তর্জাতিকীকরণ করা উচিত। অনুবাদগুলি পরিচালনা করতে <code>react-intl</code> বা <code>i18next</code> এর মতো একটি লাইব্রেরি ব্যবহার করুন।</li>
  <li><b>স্থানীয়করণ (l10n):</b> তারিখ, সংখ্যা এবং মুদ্রার বিন্যাস ব্যবহারকারীর লোকেল সাথে মেলে স্থানীয়করণ করা উচিত। ডেটা যথাযথভাবে বিন্যাস করতে <code>Intl</code> অবজেক্ট বা <code>date-fns</code> এর মতো একটি লাইব্রেরি ব্যবহার করুন।</li>
  <li><b>ডান থেকে বাম (RTL) বিন্যাস:</b> নিশ্চিত করুন যে আপনার ফর্ম বিন্যাস আরবি এবং হিব্রুর মতো ডান থেকে বাম ভাষাগুলি সঠিকভাবে পরিচালনা করে। বিভিন্ন লেখার দিকনির্দেশের সাথে খাপ খায় এমন একটি নমনীয় বিন্যাস তৈরি করতে CSS লজিক্যাল বৈশিষ্ট্য এবং বিন্যাস কৌশল ব্যবহার করুন।</li>
  <li><b>অ্যাক্সেসযোগ্যতা (a11y):</b> নিশ্চিত করুন যে আপনার ফর্মগুলি প্রতিবন্ধী ব্যক্তিদের দ্বারা ব্যবহারযোগ্য তা নিশ্চিত করতে অ্যাক্সেসযোগ্যতার নির্দেশিকা অনুসরণ করুন। সিমান্টিক HTML উপাদান ব্যবহার করুন, চিত্রগুলির জন্য বিকল্প পাঠ্য সরবরাহ করুন এবং নিশ্চিত করুন যে আপনার ফর্মটি কীবোর্ড-অ্যাক্সেসযোগ্য। সহায়ক প্রযুক্তিগুলিতে অতিরিক্ত তথ্য সরবরাহ করতে ARIA বৈশিষ্ট্য ব্যবহার করুন।</li>
  <li><b>আন্তর্জাতিক ডেটার জন্য বৈধতা:</b> ফোন নম্বর, ঠিকানা এবং পোস্টাল কোডের মতো ডেটা যাচাই করার সময়, আন্তর্জাতিক বিন্যাস সমর্থন করে এমন বৈধতা লাইব্রেরি ব্যবহার করুন।</li>
  <li><b>সময় অঞ্চল:</b> তারিখ এবং সময় সংগ্রহ করার সময়, সময় অঞ্চল সম্পর্কে সচেতন থাকুন এবং ব্যবহারকারীদের তাদের পছন্দের সময় অঞ্চল নির্বাচন করার বিকল্প সরবরাহ করুন।</li>
</ul>

<h2>উপসংহার</h2>

<p>React-এর <code>experimental_useFormStatus</code> হুক ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরিতে একটি উল্লেখযোগ্য অগ্রগতি সরবরাহ করে। ফর্ম জমা দেওয়ার স্থিতিতে রিয়েল-টাইম প্রতিক্রিয়া সরবরাহ করে, ডেভেলপাররা আকর্ষক অভিজ্ঞতা তৈরি করতে পারে যা ব্যবহারকারীর সন্তুষ্টি উন্নত করে এবং হতাশা হ্রাস করে। যদিও এটি বর্তমানে একটি পরীক্ষামূলক API, ফর্ম স্টেট ম্যানেজমেন্টকে সরলীকরণ এবং UX বাড়ানোর সম্ভাবনা এটিকে অন্বেষণ করার জন্য একটি মূল্যবান সরঞ্জাম করে তোলে। বিশ্বজুড়ে ব্যবহারকারীদের জন্য অন্তর্ভুক্তিমূলক ফর্ম তৈরি করতে বিশ্বব্যাপী অ্যাক্সেসযোগ্যতা এবং আন্তর্জাতিকীকরণের সেরা অনুশীলনগুলি বিবেচনা করতে ভুলবেন না। React ক্রমাগত বিকাশের সাথে সাথে <code>experimental_useFormStatus</code> এর মতো সরঞ্জামগুলি আধুনিক এবং প্রতিক্রিয়াশীল ওয়েব অ্যাপ্লিকেশন তৈরির জন্য ক্রমবর্ধমান গুরুত্বপূর্ণ হয়ে উঠবে।</p></div><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">রিঅ্যাক্ট</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">ফর্ম মনিটরিং</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">রিঅ্যাক্ট সার্ভার কম্পোনেন্ট</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">সার্ভার অ্যাকশন</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">ফর্ম ভ্যালিডেশন</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">UX</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">রিয়েল-টাইম ফিডব্যাক</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">প্রগ্রেসিভ এনহ্যান্সমেন্ট</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">ওয়েব ডেভেলপমেন্ট</span></div></footer></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><script>$RC("B:1","S:1")</script></body></html>