Custom ট্যাগ এবং তার গঠন

Riot.js একটি কম্পোনেন্ট-ভিত্তিক লাইব্রেরি, যেখানে আপনি Custom Tags তৈরি করতে পারেন। Custom Tags হচ্ছে কাস্টম কম্পোনেন্ট, যা HTML, CSS এবং JavaScript কোডের মাধ্যমে UI উপাদান তৈরি করতে সাহায্য করে। Riot.js এ Custom Tag তৈরি করার জন্য .riot ফাইল ব্যবহার করা হয়, যেখানে HTML, JavaScript এবং CSS একত্রে থাকে।

Riot.js এ Custom Tag তৈরি করার গঠন

Riot.js এ Custom Tag তৈরি করার জন্য, নিচে একটি সাধারণ গঠন দেওয়া হলো:

<!-- MyComponent.riot -->
<my-component>
  <h1>{opts.title}</h1>
  <p>{message}</p>

  <button onclick={changeMessage}>Change Message</button>

  <style>
    h1 {
      color: blue;
    }
    p {
      font-size: 16px;
    }
  </style>

  <script>
    export default {
      onMounted() {
        this.message = 'Hello, World!';
      },

      changeMessage() {
        this.message = 'Message Changed!';
      }
    }
  </script>
</my-component>

Riot.js Custom Tag এর গঠন:

1. HTML Section:
   • .riot ফাইলের প্রথম অংশে আপনার HTML লেখা থাকে। এখানে আপনি কাস্টম কম্পোনেন্টের স্ট্রাকচার এবং UI উপাদান (যেমন, হেডিং, প্যারাগ্রাফ, বোতাম) তৈরি করবেন।
   • {} ব্রেসেসের ভিতরে লেখা ডাটা বাইন্ডিং এর মাধ্যমে কম্পোনেন্টের ডেটা বা প্রপার্টি (যেমন, opts.title বা message) দেখানো হয়।
2. CSS Section:
   • আপনি এই অংশে স্টাইলশিট লিখে আপনার কম্পোনেন্টের ডিজাইন কাস্টমাইজ করতে পারেন। Riot.js এর ক্ষেত্রে, এই CSS শুধুমাত্র সেই কম্পোনেন্টের জন্য প্রযোজ্য থাকে। অর্থাৎ, এটি স্কোপড স্টাইলিং হিসেবে কাজ করে।
3. JavaScript Section:
   • এখানে আপনার কম্পোনেন্টের লজিক থাকে। এই স্ক্রিপ্টের মাধ্যমে আপনি বিভিন্ন ফাংশন এবং ডেটা ম্যানিপুলেশন করতে পারেন।
   • export default ব্যবহার করে আপনি কম্পোনেন্টের কার্যক্রম (methods, lifecycle hooks) সংজ্ঞায়িত করতে পারেন। উদাহরণস্বরূপ, onMounted() হল একটি লাইফসাইকেল হুক যা কম্পোনেন্টটি DOM এ যুক্ত হওয়ার পর কার্যকর হয়।
4. Options:
   • opts হল একটি অবজেক্ট, যা কম্পোনেন্টের বাহ্যিক ডেটা গ্রহণ করতে ব্যবহৃত হয়। কম্পোনেন্টটির বাইরের পৃথিবী থেকে কিছু প্রপার্টি অথবা ডেটা পাঠানোর জন্য এটি ব্যবহৃত হয়। যেমন উপরের উদাহরণে {opts.title} দ্বারা আপনি বাহ্যিকভাবে প্রেরিত শিরোনাম দেখাতে পারেন।

Custom Tag এর ব্যবহার:

যখন আপনি একটি কাস্টম ট্যাগ তৈরি করবেন, তখন সেই ট্যাগটি HTML এ যেমন ব্যবহার করা যাবে:

<my-component title="Welcome to Riot.js"></my-component>

এখানে, <my-component> হল আপনার কাস্টম ট্যাগ এবং title="Welcome to Riot.js" হল বাইরের থেকে প্রেরিত ডেটা, যা কম্পোনেন্টের opts অবজেক্টে পৌঁছাবে।

লাইফসাইকেল হুকস:

Riot.js এর কম্পোনেন্টে কিছু গুরুত্বপূর্ণ লাইফসাইকেল হুকস রয়েছে:

1. onMounted(): এই ফাংশনটি কম্পোনেন্ট DOM এ যুক্ত হওয়ার পর কল হয়।
2. onUpdated(): যখন কম্পোনেন্টের ডেটা পরিবর্তিত হয় এবং UI আপডেট হয়, তখন এই ফাংশনটি কল হয়।
3. onBeforeUnmount(): কম্পোনেন্টটি DOM থেকে সরানোর আগে কল হয়।

উদাহরণ: Custom Tag ব্যবহার:

<!-- HelloWorld.riot -->
<hello-world>
  <h2>{opts.greeting}</h2>
  <p>{message}</p>
  
  <style>
    h2 {
      color: green;
    }
    p {
      font-size: 18px;
    }
  </style>

  <script>
    export default {
      onMounted() {
        this.message = 'Hello, World!';
      },

      changeGreeting() {
        this.message = 'Greeting Changed!';
      }
    }
  </script>
</hello-world>

এটি ব্যবহার করা হবে:

<hello-world greeting="Welcome to Riot.js"></hello-world>

এখানে greeting হল বাহ্যিক ডেটা, যা কম্পোনেন্টের opts.greeting হিসেবে ব্যবহৃত হবে।

Summary:

• Custom Tags তৈরি করতে .riot ফাইল ব্যবহার করা হয়, যেখানে HTML, CSS এবং JavaScript থাকে।
• HTML অংশে আপনি UI উপাদানগুলি তৈরি করবেন।
• CSS অংশে আপনার কম্পোনেন্টের স্টাইল লেখা হবে, যা স্কোপড থাকে।
• JavaScript অংশে কম্পোনেন্টের লজিক এবং ডেটা ম্যানিপুলেশন থাকে।
• Options (opts) ব্যবহার করে বাহ্যিক ডেটা পাঠানো হয় এবং লাইফসাইকেল হুকস এর মাধ্যমে কম্পোনেন্টের আচরণ নিয়ন্ত্রণ করা হয়।

আপনি যদি Riot.js এ আরও কিছু জানতে চান বা কাস্টম ট্যাগ তৈরি করার আরও বিস্তারিত উদাহরণ চান, আমি সাহায্য করতে পারি!