ট্যাগ লাইব্রেরি তৈরি এবং ব্যবস্থাপনা

Riot.js-এ ট্যাগ লাইব্রেরি তৈরি এবং ব্যবস্থাপনা খুবই সহজ। Riot.js কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার ব্যবহার করে, যেখানে প্রতিটি কম্পোনেন্ট (যা সাধারণত ট্যাগ নামে পরিচিত) HTML, JavaScript এবং CSS একত্রে থাকে। আপনি আপনার অ্যাপ্লিকেশনে পুনঃব্যবহারযোগ্য ট্যাগ লাইব্রেরি তৈরি করতে পারেন, যা বিভিন্ন কম্পোনেন্ট রেন্ডার করতে সাহায্য করবে।

Riot.js-এ ট্যাগ লাইব্রেরি তৈরি ও ব্যবস্থাপনা:

Riot.js-এ ট্যাগ লাইব্রেরি তৈরি করতে, আপনাকে .riot ফাইল ব্যবহার করতে হবে, যেখানে প্রতিটি ট্যাগ একটি স্বতন্ত্র কম্পোনেন্ট হিসেবে কাজ করবে। আপনি এই ট্যাগগুলিকে একটি লাইব্রেরি বা মডিউল আকারে সংকলন করতে পারেন এবং অন্য ট্যাগ বা কম্পোনেন্টে ব্যবহার করতে পারেন।

উদাহরণ 1: একটি সাধারণ ট্যাগ তৈরি করা

ধরা যাক আপনি একটি ট্যাগ তৈরি করতে চান যেটি একটি ইউজার প্রোফাইল প্রদর্শন করবে।

<!-- UserProfile.riot -->
<user-profile>
  <h2>{opts.name}</h2>
  <p>{opts.email}</p>

  <style>
    h2 {
      color: #4CAF50;
    }
    p {
      color: #555;
    }
  </style>
</user-profile>

এখানে, আমরা UserProfile নামে একটি ট্যাগ তৈরি করেছি, যা opts.name এবং opts.email ডেটা প্রপার্টি গ্রহণ করে। এই ট্যাগটি কোনও ডেটার উপর ভিত্তি করে ডাইনামিক ইউজার প্রোফাইল তথ্য রেন্ডার করবে।

উদাহরণ 2: ট্যাগ লাইব্রেরি তৈরি ও ব্যবস্থাপনা

ধরা যাক, আপনি অনেকগুলি ট্যাগ তৈরি করেছেন এবং সেগুলিকে একটি লাইব্রেরির মতো একত্রে সংকলন করতে চান।

1. ট্যাগ লাইব্রেরি তৈরি করা:

<!-- Header.riot -->
<header>
  <h1>Welcome to My Website</h1>
</header>

<!-- Footer.riot -->
<footer>
  <p>© 2024 My Website</p>
</footer>

<!-- UserProfile.riot -->
<user-profile>
  <h2>{opts.name}</h2>
  <p>{opts.email}</p>
</user-profile>

এখানে, আপনি তিনটি পৃথক ট্যাগ তৈরি করেছেন:

• Header: ওয়েবসাইটের শিরোনাম প্রদর্শন করে।
• Footer: ওয়েবসাইটের ফুটার প্রদর্শন করে।
• UserProfile: ইউজারের নাম এবং ইমেইল দেখায়।

2. লাইব্রেরি ব্যবহার করে ট্যাগ মাউন্ট করা:

<!-- App.riot -->
<app>
  <!-- Header ট্যাগ -->
  <header></header>

  <!-- UserProfile ট্যাগ -->
  <user-profile name="John Doe" email="johndoe@example.com"></user-profile>

  <!-- Footer ট্যাগ -->
  <footer></footer>

  <script>
    import riot from 'riot'
    import Header from './Header.riot'
    import Footer from './Footer.riot'
    import UserProfile from './UserProfile.riot'

    export default {
      onMounted() {
        // ট্যাগগুলো মাউন্ট করা
        riot.mount('header', Header)
        riot.mount('footer', Footer)
        riot.mount('user-profile', UserProfile)
      }
    }
  </script>
</app>

এখানে, আপনি আপনার App কম্পোনেন্টের মধ্যে Header, Footer এবং UserProfile ট্যাগগুলো মাউন্ট করেছেন। riot.mount() ব্যবহার করে আপনি প্রতিটি ট্যাগকে ডাইনামিকভাবে রেন্ডার করছেন।

উদাহরণ 3: ডাটা শেয়ার করা এবং রিয়েকটিভ লাইফসাইকেল

Riot.js-এ কম্পোনেন্টগুলোর মধ্যে ডাটা শেয়ার করা খুবই সহজ। আপনি একটি প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা পাঠাতে পারেন।

<!-- ParentComponent.riot -->
<parent-component>
  <user-profile name={parentName} email={parentEmail}></user-profile>

  <script>
    import UserProfile from './UserProfile.riot'

    export default {
      onMounted() {
        this.parentName = 'Jane Doe'
        this.parentEmail = 'janedoe@example.com'
      }
    }
  </script>
</parent-component>

এখানে, parentName এবং parentEmail ডেটা প্রপার্টি প্যারেন্ট কম্পোনেন্ট থেকে UserProfile ট্যাগে পাস করা হয়েছে।

উদাহরণ 4: কম্পোনেন্ট লাইফসাইকেল ব্যবহারের মাধ্যমে ট্যাগ পরিচালনা

Riot.js-এ কম্পোনেন্ট লাইফসাইকেল মেথড যেমন onMounted, onUpdated, onBeforeUnmount ইত্যাদি ব্যবহার করে আপনি ট্যাগের ডেটা বা লজিক পরিচালনা করতে পারেন।

<!-- Timer.riot -->
<timer>
  <p>Time Left: {time}</p>

  <script>
    export default {
      onMounted() {
        this.time = 10
        this.timerInterval = setInterval(() => {
          this.time--
          if (this.time <= 0) clearInterval(this.timerInterval)
        }, 1000)
      },

      onBeforeUnmount() {
        clearInterval(this.timerInterval)
      }
    }
  </script>
</timer>

এখানে, Timer কম্পোনেন্ট প্রতি সেকেন্ডে সময় গুণিত করে এবং যখন সময় শেষ হয় তখন টাইমার বন্ধ হয়ে যায়।

সারাংশ:

• ট্যাগ লাইব্রেরি তৈরি করা Riot.js-এ খুবই সহজ, যেখানে আপনি প্রতিটি ট্যাগকে একটি UI কম্পোনেন্ট হিসেবে ব্যবহার করতে পারেন।
• ডাটা শেয়ারিং: প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা পাস করা যায় এবং কম্পোনেন্টগুলি রিয়েকটিভভাবে আপডেট হয়।
• লাইফসাইকেল মেথডস ব্যবহার করে, আপনি ট্যাগের বিভিন্ন স্টেট এবং লজিক পরিচালনা করতে পারেন।

Riot.js আপনাকে মডুলার এবং পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করতে সাহায্য করে, যা বড় অ্যাপ্লিকেশনেও সহজে ব্যবহৃত হতে পারে।