RIOT.js এর বেসিক সিনট্যাক্স

Riot.js এর বেসিক সিনট্যাক্স কিছুটা সোজা এবং সহজে ব্যবহারযোগ্য, যা আপনার UI তৈরি করতে সাহায্য করে। এটি একটি কম্পোনেন্ট-ভিত্তিক লাইব্রেরি, তাই আপনাকে HTML, CSS, এবং JavaScript এর কম্পোনেন্টগুলি একত্রে লিখতে হবে। প্রতিটি Riot.js কম্পোনেন্ট .riot এক্সটেনশন দিয়ে একটি ফাইলে লেখা হয় এবং এটি সাধারণত তিনটি মূল অংশে বিভক্ত থাকে:

1. HTML: কম্পোনেন্টের UI (markup)।
2. CSS: কম্পোনেন্টের স্টাইলিং।
3. JavaScript: কম্পোনেন্টের লজিক (বিজনেস লজিক এবং ডাটা বাইন্ডিং)।

Riot.js এর বেসিক সিনট্যাক্স:

নিচে একটি সাধারণ Riot.js কম্পোনেন্টের উদাহরণ দেয়া হলো:

<!-- MyComponent.riot -->
<my-component>
  <!-- HTML - UI (markup) -->
  <h1>{opts.title}</h1>
  <p>{message}</p>
  
  <!-- Button that triggers a function -->
  <button onclick={changeMessage}>Change Message</button>

  <!-- JavaScript - logic (export default is mandatory for Riot.js components) -->
  <script>
    export default {
      onMounted() {
        this.message = 'Hello, World!';
      },

      changeMessage() {
        this.message = 'Message changed!';
      }
    }
  </script>

  <!-- CSS - optional (can be scoped to the component) -->
  <style>
    h1 {
      color: blue;
    }
    button {
      background-color: green;
      color: white;
    }
  </style>
</my-component>

Riot.js কম্পোনেন্টের তিনটি প্রধান অংশ:

1. HTML:
   • {opts.title}: opts দ্বারা প্রেরিত প্রপার্টি। এটি কম্পোনেন্টে প্রপস (properties) হিসাবে পাস করা হয়।
   • {message}: একটি বৈশিষ্ট্য যা কম্পোনেন্টের স্টেট (state) থেকে নেয়া হয়। এটি ডাটা বাইন্ডিংয়ের মাধ্যমে UI তে দেখানো হয়।
2. JavaScript:
   • export default: এই লাইনের মাধ্যমে কম্পোনেন্টটি রপ্তানি (export) করা হয়।
   • onMounted(): এটি একটি লাইফসাইকেল মেথড, যা কম্পোনেন্টটি DOM-এ মাউন্ট হওয়ার পর কল হয়।
   • this.message = 'Hello, World!': এটি একটি স্টেট মান সেট করা হচ্ছে, যা UI তে প্রদর্শিত হবে।
   • changeMessage(): একটি ফাংশন যা বোতামে ক্লিক করলে message পরিবর্তন করবে।
3. CSS (স্টাইলিং):
   • এটি শুধুমাত্র ঐ কম্পোনেন্টের জন্য প্রযোজ্য। আপনি কম্পোনেন্টের নির্দিষ্ট এলিমেন্টগুলির জন্য স্টাইল যোগ করতে পারেন এবং তা গ্লোবালভাবে প্রভাব ফেলবে না।

কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য:

• ডাটা বাইন্ডিং: Riot.js ডাটা বাইন্ডিং সমর্থন করে, যার মাধ্যমে আপনার কম্পোনেন্টের ডাটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।
• লাইফসাইকেল মেথড: onMounted, onBeforeUnmount ইত্যাদি লাইফসাইকেল মেথড থাকে, যা আপনাকে কম্পোনেন্টের বিভিন্ন অবস্থায় কোড চালানোর সুযোগ দেয়।
• স্টাইলিং: আপনি কম্পোনেন্টের স্টাইল CSS-এর মাধ্যমে করতে পারেন, এবং এটি শুধুমাত্র ঐ কম্পোনেন্টের উপাদানগুলোর উপর প্রভাব ফেলে।

আরও কিছু উদাহরণ:

ডাটা বাইন্ডিং:

<counter>
  <h2>{counter}</h2>
  <button onclick={increment}>Increase</button>

  <script>
    export default {
      onMounted() {
        this.counter = 0;
      },

      increment() {
        this.counter++;
      }
    }
  </script>
</counter>

এখানে, counter স্টেট পরিবর্তিত হলে UI তে তা প্রতিফলিত হবে। বোতাম ক্লিক করলে counter মান বাড়বে।

কিভাবে এটি ব্যবহৃত হবে:

• কম্পোনেন্ট তৈরি করা: .riot ফাইল তৈরি করুন এবং এতে HTML, CSS, এবং JavaScript কোড লিখুন।
• কম্পোনেন্ট রেন্ডার করা: আপনার JavaScript ফাইলে riot.mount() ব্যবহার করে কম্পোনেন্টটি মাউন্ট করুন এবং এটি পেজে রেন্ডার হবে।

উদাহরণ:

riot.mount('my-component', { title: 'My First Riot.js Component' });

এটি কম্পোনেন্টটি মাউন্ট করবে এবং title প্রপার্টি পাস করবে।

এইভাবে Riot.js আপনাকে UI-কে একটি পরিষ্কার ও মডুলার কম্পোনেন্টে ভাগ করে এবং এর মাধ্যমে কার্যকরভাবে ওয়েব ডেভেলপমেন্ট করতে সাহায্য করে।

Riot.js-এ ট্যাগ (Tag) হল কম্পোনেন্টের ভিত্তি। এটি একটি উপাদান যা HTML, JavaScript, এবং CSS এর সংমিশ্রণ দিয়ে তৈরি হয় এবং UI এর একক উপাদান হিসেবে কাজ করে। ট্যাগগুলিকে Riot.js কম্পোনেন্ট বলা হয় এবং এগুলিই অ্যাপ্লিকেশনের UI তৈরি করতে ব্যবহৃত হয়।

Riot.js ট্যাগ কীভাবে কাজ করে?

Riot.js-এ, ট্যাগগুলি এমন HTML উপাদান হিসেবে কাজ করে যা বিশেষভাবে নির্দিষ্ট আচরণ বা ফাংশনালিটি ধারণ করে। আপনি যখন একটি ট্যাগ তৈরি করেন, তখন সেটি HTML, CSS এবং JavaScript কোডের সংমিশ্রণ হিসাবে থাকে। প্রতিটি ট্যাগের জন্য কিছু নির্দিষ্ট কার্যক্রম থাকে, যেমন:

1. HTML অংশ: UI বা ভিজ্যুয়াল উপাদান, যেমন টেক্সট, ইমেজ, বাটন ইত্যাদি।
2. CSS অংশ: ট্যাগের স্টাইল এবং ডিজাইন।
3. JavaScript অংশ: ট্যাগের আচরণ এবং লজিক যেমন ইভেন্ট হ্যান্ডলিং, ডাটা বাইন্ডিং ইত্যাদি।

Riot.js ট্যাগের গঠন (Structure)

একটি Riot.js ট্যাগ সাধারণত এইভাবে গঠিত হয়:

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

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

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

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

  <style>
    h1 {
      color: blue;
    }
  </style>
</my-component>

এখানে, my-component একটি ট্যাগ যা:

1. HTML: <h1> এবং <p> উপাদানসহ UI উপস্থাপন করে।
2. JavaScript: onMounted() এবং changeMessage() ফাংশনগুলি ব্যবহারকারী ইন্টারঅ্যাকশন এবং ডেটা পরিচালনা করে।
3. CSS: h1 ট্যাগের রং নীল করার জন্য স্টাইল দেয়া হয়েছে।

কেন Riot.js ট্যাগ ব্যবহার করা হয়?

1. কম্পোনেন্ট ভিত্তিক আর্কিটেকচার: Riot.js-এর ট্যাগগুলি প্রতিটি UI অংশের জন্য একটি কম্পোনেন্ট তৈরি করে। এতে কোডটি মডুলার এবং পুনঃব্যবহারযোগ্য হয়, যার ফলে অ্যাপ্লিকেশন তৈরি করা সহজ এবং রক্ষণাবেক্ষণযোগ্য হয়।
2. HTML, CSS এবং JavaScript একত্রে: Riot.js ট্যাগে HTML, CSS এবং JavaScript একত্রে থাকে, যা কোডের মধ্যে এক ধরনের সঙ্গতি তৈরি করে। এর ফলে ডেভেলপাররা সহজেই UI এবং তার আচরণ একসঙ্গে ডিজাইন করতে পারে।
3. ডাটা বাইন্ডিং: Riot.js-এ ডাটা বাইন্ডিং ব্যবহার করা হয়, যা ব্যবহারকারীর অ্যাকশন বা ডেটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। এটি DOM ম্যানিপুলেশনের প্রয়োজন কমিয়ে দেয় এবং পারফরম্যান্স উন্নত করে।
4. রিয়েকটিভ আচরণ: Riot.js ট্যাগগুলি রিয়েকটিভ, অর্থাৎ ট্যাগের ডেটা পরিবর্তন হলে এটি স্বয়ংক্রিয়ভাবে UI আপডেট করে। এতে ডেভেলপারদের DOM ম্যানিপুলেশনের প্রয়োজন পড়ে না এবং UI রিয়েক্টিভ থাকে।
5. সহজ ব্যবহার: Riot.js ট্যাগ ব্যবহার করে, ডেভেলপাররা সোজা এবং পরিষ্কারভাবে UI ডিজাইন করতে পারে। এতে কোডের লজিক, স্টাইল এবং স্ট্রাকচার এক জায়গায় থাকে, যা কোডিং অভিজ্ঞতাকে আরো সহজ করে তোলে।

Riot.js ট্যাগের উপকারিতা:

• মডুলার এবং পুনঃব্যবহারযোগ্য কোড: ট্যাগের মাধ্যমে UI এর প্রতিটি অংশ আলাদা করা যায়, যা কোডের পুনঃব্যবহারযোগ্যতা বাড়ায়।
• সহজ এবং দ্রুত ডেভেলপমেন্ট: HTML, CSS, এবং JavaScript একসঙ্গে ব্যবহারের ফলে ডেভেলপমেন্ট প্রক্রিয়া দ্রুত হয়।
• ডাটা বাইন্ডিং এবং রিয়েকটিভিটি: ডাটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে পরিবর্তিত হয়, যা উন্নত ইউজার এক্সপেরিয়েন্স নিশ্চিত করে।

উদাহরণ:

ধরা যাক, আপনি একটি কাউন্টার তৈরি করতে চান:

<!-- Counter.riot -->
<counter>
  <h2>{count}</h2>
  <button onclick={increment}>Increment</button>

  <script>
    export default {
      onMounted() {
        this.count = 0;
      },

      increment() {
        this.count++;
      }
    }
  </script>
</counter>

এখানে, counter একটি ট্যাগ যা একটি সংখ্যা (count) প্রদর্শন করে এবং একটি বাটন প্রদান করে যা ক্লিক করলে সংখ্যাটি বাড়িয়ে দেয়। এটি HTML, JavaScript এবং স্টাইলের একটি সহজ সংমিশ্রণ।

সারসংক্ষেপ:

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

Riot.js দিয়ে একটি বেসিক ট্যাগ তৈরি করা খুবই সহজ এবং সরল। এখানে একটি বেসিক উদাহরণ দেয়া হলো, যা আপনাকে Riot.js দিয়ে প্রথম ট্যাগ তৈরি করতে সহায়তা করবে।

1. প্রথমে Riot.js ইনস্টল বা CDN ব্যবহার করা:

আপনি যদি একটি নতুন প্রকল্প তৈরি করছেন, তবে আপনি Riot.js ইনস্টল করতে পারেন NPM এর মাধ্যমে বা CDN ব্যবহার করতে পারেন।

CDN ব্যবহার করে:

<script src="https://cdn.jsdelivr.net/npm/riot@6.0.0/riot.min.js"></script>

NPM এর মাধ্যমে ইনস্টল:

npm install riot

2. বেসিক Riot.js ট্যাগ তৈরি করা:

Riot.js তে একটি ট্যাগ তৈরি করতে .riot এক্সটেনশনের একটি ফাইল তৈরি করতে হয়। এর মধ্যে HTML, JavaScript, এবং CSS কোড থাকে। এখানে একটি সিম্পল ট্যাগ তৈরি করা হলো:

বেসিক ট্যাগ উদাহরণ:

<!-- my-tag.riot -->
<my-tag>
  <h1>Hello, {opts.name}!</h1>
  <p>This is a basic Riot.js tag.</p>

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

  <script>
    export default {
      onMounted() {
        this.message = 'Welcome to Riot.js!';
      },

      changeMessage() {
        this.message = 'Message has been changed!';
      }
    }
  </script>
</my-tag>

3. এটি HTML ডকুমেন্টে ব্যবহার করা:

এখন, আপনি আপনার HTML ফাইলে এই my-tag.riot কম্পোনেন্টটি ব্যবহার করতে পারেন:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Riot.js Basic Tag</title>
  <script src="https://cdn.jsdelivr.net/npm/riot@6.0.0/riot.min.js"></script>
  <script type="riot/tag" src="my-tag.riot"></script>
</head>
<body>

  <!-- এখানে ট্যাগ ব্যবহার করা হবে -->
  <my-tag name="John"></my-tag>

  <script>
    // Riot.js ট্যাগ মাউন্টিং
    riot.mount('my-tag');
  </script>
  
</body>
</html>

বিস্তারিত ব্যাখ্যা:

1. HTML অংশ:
   • <my-tag> হল একটি কাস্টম ট্যাগ, যা my-tag.riot ফাইলের মধ্যে সংজ্ঞায়িত।
   • {opts.name} এখানে opts.name ব্যবহার করা হয়েছে, যা name="John" হিসেবে প্রেরিত হচ্ছে এবং "Hello, John!" দেখাবে।
2. JavaScript অংশ:
   • onMounted() ফাংশনটি কম্পোনেন্ট মাউন্ট হওয়ার পর চালু হয়। এখানে, আমরা একটি শুরুতে প্রদর্শিত বার্তা Welcome to Riot.js! সেট করেছি।
   • changeMessage() ফাংশনটি বোতামে ক্লিক করলে বার্তা পরিবর্তন করবে এবং এটি Message has been changed! দেখাবে।
3. Riot.mount():
   • riot.mount('my-tag') এই কমান্ডের মাধ্যমে, আমরা Riot.js কম্পোনেন্টটি DOM এ মাউন্ট করেছি।

ফলাফল:

এখন আপনি যখন ব্রাউজারে এই HTML ফাইলটি ওপেন করবেন, আপনি একটি সাইট দেখতে পাবেন যেখানে লেখা থাকবে "Hello, John!" এবং একটি বোতাম থাকবে যা ক্লিক করলে বার্তাটি পরিবর্তিত হবে।

এই হল একটি বেসিক Riot.js ট্যাগ তৈরির উদাহরণ। আপনি এই ট্যাগটি আরও কাস্টমাইজ এবং ডায়নামিক করতে পারেন।

আপনি কি Riot.js এর আরও কোনো দিক সম্পর্কে জানতে চান?

Riot.js এ HTML, CSS, এবং JavaScript একসঙ্গে ব্যবহার করা হয় একটি কম্পোনেন্ট ফাইলের মধ্যে। Riot.js কম্পোনেন্ট ফাইলের একক ইউনিট হিসেবে HTML, CSS, এবং JavaScript কন্টেন্ট রাখার মাধ্যমে একটি পুরো UI উপাদান তৈরি করতে সাহায্য করে। প্রতিটি কম্পোনেন্টের মধ্যে তিনটি অংশ থাকে:

1. HTML (টেমপ্লেট)
2. CSS (স্টাইল)
3. JavaScript (লজিক)

এটি একটি বিশেষ .riot এক্সটেনশনের ফাইল হিসেবে লেখা হয়। এই কম্পোনেন্টটি একসঙ্গে সবকিছু ধারণ করে, যা আপনাকে UI এর বিভিন্ন অংশ যেমন মার্কআপ, স্টাইল এবং ফাংশনালিটি একত্রে পরিচালনা করতে দেয়।

এখানে একটি উদাহরণ দেওয়া হলো যা HTML, CSS, এবং JavaScript কে একত্রে ব্যবহার করে:

উদাহরণ: কম্পোনেন্টে HTML, CSS, এবং JavaScript ব্যবহার

<!-- MyComponent.riot -->
<my-component>
  <!-- HTML: এখানে আমরা UI এর টেমপ্লেট লিখি -->
  <h1>{opts.title}</h1>
  <p>{message}</p>
  
  <button onclick={changeMessage}>বার্তা পরিবর্তন করুন</button>

  <!-- CSS: কম্পোনেন্টের জন্য স্টাইল -->
  <style>
    h1 {
      color: #4CAF50;
    }
    p {
      font-size: 16px;
    }
    button {
      background-color: #008CBA;
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
  </style>

  <!-- JavaScript: কম্পোনেন্টের জন্য লজিক -->
  <script>
    export default {
      // কম্পোনেন্ট মাউন্ট হওয়ার সময় রান হবে
      onMounted() {
        this.message = 'হ্যালো, বিশ্ব!';
      },

      // বোতাম ক্লিক হলে বার্তা পরিবর্তন হবে
      changeMessage() {
        this.message = 'বার্তা পরিবর্তিত হয়েছে!';
      }
    }
  </script>
</my-component>

বিস্তারিত ব্যাখ্যা:

1. HTML (টেমপ্লেট):
   • <h1>{opts.title}</h1>: এখানে opts.title একটি প্রপার্টি যা কম্পোনেন্টের বাইরের জায়গা থেকে পাস করা হয়। {opts.title} এক্সপ্রেশনটি ডাইনামিকালি এই মানটিকে UI তে রেন্ডার করে।
   • <p>{message}</p>: এখানে message একটি ভেরিয়েবল, যা কম্পোনেন্টের ডেটা স্টোরে সংরক্ষিত থাকে এবং এটি ব্যবহারকারীকে দেখানো হয়।
2. CSS (স্টাইল):
   • <style> ট্যাগের মধ্যে সমস্ত CSS কোড লেখা হয়, যা শুধু এই কম্পোনেন্টের জন্য প্রযোজ্য হবে। এই স্টাইলটি অন্য কোন অংশকে প্রভাবিত করবে না। উদাহরণস্বরূপ, h1, p, এবং button ট্যাগের স্টাইল নির্ধারণ করা হয়েছে।
3. JavaScript (লজিক):
   • কম্পোনেন্টের স্ক্রিপ্ট অংশে onMounted() ফাংশন ব্যবহার করা হয়েছে, যা কম্পোনেন্টটি DOM এ মাউন্ট হওয়ার পর প্রথমে রান হবে। এতে message ভেরিয়েবলকে হ্যালো, বিশ্ব! এর মান দেওয়া হয়েছে।
   • changeMessage() ফাংশনটি বোতাম ক্লিক হলে কল করা হয়, এবং এটি message ভেরিয়েবলটি পরিবর্তন করে।

Riot.js কম্পোনেন্টের কাঠামো:

• HTML অংশে, আপনি কম্পোনেন্টের UI গঠন করেন, যা ব্যবহারকারী দেখতে পাবে।
• CSS অংশে, আপনি UI উপাদানের জন্য স্টাইল নির্ধারণ করেন।
• JavaScript অংশে, আপনি UI-এর আচরণ এবং ডেটা স্টোরেজ পরিচালনা করেন।

উপকারিতা:

1. সব কিছু এক জায়গায়: HTML, CSS, এবং JavaScript একত্রে থাকা কারণে কম্পোনেন্টটি খুবই স্বতন্ত্র এবং পুনঃব্যবহারযোগ্য।
2. শুদ্ধ কোড অর্গানাইজেশন: একক কম্পোনেন্টের মধ্যে তিনটি গুরুত্বপূর্ণ অংশ থাকে, যা ডেভেলপারদের কোডটি সংগঠিত এবং পরিষ্কার রাখে।
3. স্বয়ংক্রিয় ডাটা বাইন্ডিং: JavaScript ব্যবহারকারীর ইনপুট অনুযায়ী ডাটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়, যার ফলে কোড সহজ এবং রিয়েকটিভ হয়ে ওঠে।

Riot.js কম্পোনেন্টে HTML, CSS, এবং JavaScript একত্রে ব্যবহার করা অত্যন্ত সহজ এবং কার্যকরী। এটি ডেভেলপারদের কোডিং ও রক্ষণাবেক্ষণ প্রক্রিয়া সহজ করে তোলে, কারণ সমস্ত উপাদান একত্রে থাকে এবং UI, স্টাইল এবং লজিকের মধ্যে সোজাসুজি সম্পর্ক তৈরি হয়।

আপনি যদি Riot.js ব্যবহার করতে চান বা এর মধ্যে কিছু নতুন কনসেপ্ট জানতে চান, তাহলে আমি আরও সাহায্য করতে পারি।

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 এ আরও কিছু জানতে চান বা কাস্টম ট্যাগ তৈরি করার আরও বিস্তারিত উদাহরণ চান, আমি সাহায্য করতে পারি!