Component ভিত্তিক আর্কিটেকচার

Riot.js একটি কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার ব্যবহার করে, যা UI (User Interface) ডিজাইন এবং ডেভেলপমেন্টের জন্য একটি শক্তিশালী পদ্ধতি। কম্পোনেন্ট ভিত্তিক আর্কিটেকচার একটি অ্যাপ্লিকেশনকে ছোট, পুনঃব্যবহারযোগ্য এবং বিচ্ছিন্ন কম্পোনেন্টে বিভক্ত করার ধারণা। এতে, প্রতিটি কম্পোনেন্ট তার নিজস্ব লজিক, ডেটা এবং UI উপাদান ধারণ করে এবং সহজে পরিচালনা, রক্ষণাবেক্ষণ এবং পুনঃব্যবহারযোগ্য হয়।

Riot.js এর কম্পোনেন্ট ভিত্তিক আর্কিটেকচার:

Riot.js-এ, আপনি UI কম্পোনেন্ট তৈরি করেন যা তিনটি মূল অংশে বিভক্ত থাকে:

1. HTML - UI এর স্ট্রাকচার (Markup)
2. CSS - কম্পোনেন্টের স্টাইল
3. JavaScript - কম্পোনেন্টের লজিক

এগুলি একত্রে একটি .riot ফাইলে রাখা হয়, যা Riot.js কম্পোনেন্টের কাঠামো।

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;
    }
    button {
      background-color: #4CAF50;
      color: white;
    }
  </style>
</my-component>

ব্যাখ্যা:

1. HTML: এখানে, {opts.title} এবং {message} হল ডাটা বাইন্ডিং পয়েন্ট, যা কম্পোনেন্টের ডেটার সাথে যুক্ত থাকে। ক্লিক করা হলে, changeMessage ফাংশন চালু হবে, যা message পরিবর্তন করবে।
2. JavaScript: এখানে কম্পোনেন্টের লজিক রয়েছে। onMounted ফাংশনটি কম্পোনেন্টটি DOM-এ যুক্ত হওয়ার পরে চালু হবে, এবং changeMessage ফাংশনটি বার্তা পরিবর্তন করবে।
3. CSS: CSS অংশে কম্পোনেন্টের স্টাইল থাকে। উদাহরণস্বরূপ, h1 ট্যাগের জন্য ব্লু রঙ এবং button এর জন্য সবুজ ব্যাকগ্রাউন্ড দেওয়া হয়েছে।

কম্পোনেন্ট ভিত্তিক আর্কিটেকচারের সুবিধা:

1. মডুলারিটি: কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার UI এর ভিন্ন অংশকে আলাদা করে দেয়, যার ফলে প্রতিটি অংশ সহজে আলাদা করে পরিচালনা করা যায়।
2. পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা কম্পোনেন্ট একাধিক জায়গায় ব্যবহার করা যায়। এটি কোডের পুনঃব্যবহারযোগ্যতা নিশ্চিত করে।
3. রক্ষণাবেক্ষণযোগ্যতা: কম্পোনেন্টগুলো একে অপর থেকে স্বাধীন থাকে, তাই একটি কম্পোনেন্টে পরিবর্তন করার ফলে অন্য কম্পোনেন্টগুলিতে প্রভাব পড়ে না, যা রক্ষণাবেক্ষণ সহজ করে।
4. পরীক্ষা (Testing): কম্পোনেন্টগুলো পৃথকভাবে পরীক্ষিত হতে পারে, তাই ইউনিট টেস্টিং করা সহজ।
5. স্বতন্ত্র ডেটা এবং স্টেট: প্রতিটি কম্পোনেন্টের নিজস্ব ডেটা এবং স্টেট থাকতে পারে, যা তাদেরকে আরও স্বাধীন ও স্থিতিশীল করে।

Riot.js এর কম্পোনেন্ট লাইফসাইকেল:

Riot.js কম্পোনেন্টগুলোরও একটি লাইফসাইকেল থাকে, যার মাধ্যমে আপনি নির্দিষ্ট সময়ের মধ্যে কিছু কাজ করতে পারেন, যেমন:

• onMounted: কম্পোনেন্টটি DOM এ মাউন্ট হওয়ার পর কল করা হয়।
• onUpdated: যখন ডেটা পরিবর্তিত হয় এবং কম্পোনেন্টটি পুনরায় রেন্ডার হয় তখন কল করা হয়।
• onBeforeUnmount: কম্পোনেন্টটি DOM থেকে সরানোর আগে কল করা হয়।

এছাড়াও, Riot.js কম্পোনেন্টগুলির মধ্যে প্রপার্টি (props) এবং ইভেন্ট ব্যবহার করে কমিউনিকেশন করা যায়। একটি কম্পোনেন্ট অন্য একটি কম্পোনেন্টকে ডেটা পাঠাতে পারে এবং ইভেন্টের মাধ্যমে পারস্পরিক ক্রিয়া করতে পারে।

সারাংশ:

Riot.js কম্পোনেন্ট ভিত্তিক আর্কিটেকচার UI ডিজাইন এবং ডেভেলপমেন্টকে আরও সহজ, পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে। কম্পোনেন্ট ভিত্তিক ডিজাইন ব্যবস্থার মাধ্যমে, একটি অ্যাপ্লিকেশনকে ছোট এবং স্বাধীন অংশে ভেঙে ফেলা যায়, যা কার্যকরীভাবে একটি বড় এবং জটিল অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

Riot.js একটি কম্পোনেন্ট-ভিত্তিক আর্কিটেকচার ব্যবহার করে, যার মাধ্যমে আপনি আপনার ওয়েব অ্যাপ্লিকেশনকে ছোট ছোট, পুনঃব্যবহারযোগ্য এবং স্বতন্ত্র কম্পোনেন্টে বিভক্ত করতে পারেন। এতে প্রতিটি কম্পোনেন্ট HTML, CSS এবং JavaScript কে একত্রে ধারণ করে, ফলে কোড আরও সুষম, পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য হয়।

RIOT.js এ কম্পোনেন্ট ভিত্তিক আর্কিটেকচার

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

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

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

1. HTML: UI এর লেআউট (Markup) এখানে থাকে।
2. CSS: কম্পোনেন্টের জন্য প্রয়োজনীয় স্টাইলিং এখানে লেখা হয়।
3. JavaScript: কম্পোনেন্টের আচরণ বা লজিক (Logic) এখানে থাকে।

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

Riot.js কম্পোনেন্টের উদাহরণ

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

<!-- MyComponent.riot -->
<my-component>
  <h1>{opts.title}</h1>
  <p>{message}</p>
  <button onclick={changeMessage}>Change Message</button>

  <style>
    h1 {
      color: blue;
    }
    button {
      padding: 10px;
      background-color: green;
      color: white;
    }
  </style>

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

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

ব্যাখ্যা:

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

Riot.js কম্পোনেন্টের জীবনচক্র

Riot.js এ একটি কম্পোনেন্টের কিছু জীবনচক্র পদ্ধতি রয়েছে যা আপনাকে কম্পোনেন্টের জীবনের বিভিন্ন পর্যায়ে কার্য সম্পাদন করতে সহায়তা করে। এর মধ্যে কিছু গুরুত্বপূর্ণ জীবনচক্র পদ্ধতি:

1. onMounted(): এই ফাংশনটি কম্পোনেন্টটি DOM-এ মাউন্ট হওয়ার পরে চলে। এটি সাধারণত ইনিশিয়ালাইজেশন বা ডেটা লোড করার জন্য ব্যবহৃত হয়।
2. onBeforeUpdate(): এই ফাংশনটি ডেটা আপডেট হওয়ার আগের অবস্থায় চলে।
3. onUpdated(): এই ফাংশনটি ডেটা আপডেট হওয়ার পর চলে।
4. onBeforeUnmount(): এই ফাংশনটি কম্পোনেন্টটি DOM থেকে আনমাউন্ট হওয়ার আগে চলে।
5. onUnmount(): এই ফাংশনটি কম্পোনেন্টটি DOM থেকে আনমাউন্ট হওয়ার পরে চলে।

Riot.js কম্পোনেন্টের ব্যবহারের উপকারিতা

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

RIOT.js কম্পোনেন্ট মাউন্ট করা

কম্পোনেন্ট তৈরি করার পর, আপনাকে এটি মাউন্ট করতে হবে। মাউন্ট করা মানে হল সেই কম্পোনেন্টটি DOM-এ প্রদর্শন করা।

// JavaScript কোডে
import riot from 'riot';
import './MyComponent.riot';

// কম্পোনেন্ট মাউন্ট করা
riot.mount('my-component', { title: 'Welcome to Riot.js!' });

এখানে, riot.mount('my-component', {...}) দিয়ে my-component কম্পোনেন্টটি মাউন্ট করা হচ্ছে এবং title অপশনটি পাস করা হচ্ছে।

Riot.js এর কম্পোনেন্ট ভিত্তিক আর্কিটেকচার আপনাকে ওয়েব অ্যাপ্লিকেশনগুলোকে ছোট, পুনঃব্যবহারযোগ্য, এবং সহজে রক্ষণাবেক্ষণযোগ্য অংশে ভেঙে ফেলতে সাহায্য করে। এই আর্কিটেকচার আপনার কোডকে সুশৃঙ্খল এবং পরিচালনা করা সহজ করে তোলে, এবং এর রিয়েকটিভ ডাটা বাইন্ডিং ফিচার UI আপডেট করার কাজটিকে আরও সরল এবং কার্যকরী করে।

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

Riot.js কম্পোনেন্ট: বেসিক ধারণা

একটি Riot.js কম্পোনেন্ট সাধারণত তিনটি মূল অংশের মধ্যে বিভক্ত হয়:

1. HTML - UI এর কাঠামো
2. CSS - কম্পোনেন্টের স্টাইল
3. JavaScript - কম্পোনেন্টের কার্যকলাপ (লজিক)

কম্পোনেন্ট তৈরি করা

Riot.js তে কম্পোনেন্টগুলি .riot ফাইলের মধ্যে তৈরি করা হয়। নিচে একটি উদাহরণ দেওয়া হল:

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

  <button onclick={changeMessage}>Message পরিবর্তন করুন</button>

  <script>
    export default {
      onMounted() {
        this.message = 'হ্যালো, বিশ্ব!';
      },

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

এখানে:

• HTML অংশে {opts.title} এবং {message} ডাটা বাইন্ডিং দেখাচ্ছে।
• JavaScript অংশে onMounted হুক এবং changeMessage ফাংশন রয়েছে, যা কম্পোনেন্ট লজিক পরিচালনা করে।

কম্পোনেন্ট ব্যবস্থাপনা

Riot.js তে কম্পোনেন্ট ব্যবস্থাপনা কিছু সহজ ধাপ অনুসরণ করে করা হয়। নিচে কিছু গুরুত্বপূর্ণ বিষয় তুলে ধরা হলো:

১. কম্পোনেন্ট রেজিস্ট্রেশন

একটি কম্পোনেন্ট ব্যবহার করার জন্য, আপনাকে সেটি রেজিস্টার করতে হবে। এটি করতে Riot.component ফাংশন ব্যবহার করা হয়। উদাহরণ:

import Riot from 'riot';
import MyComponent from './components/MyComponent.riot';

// কম্পোনেন্ট রেজিস্টার করুন
Riot.component(MyComponent);

২. কম্পোনেন্ট মাউন্টিং

একবার কম্পোনেন্ট রেজিস্টার হলে, আপনি Riot.mount ফাংশন ব্যবহার করে কম্পোনেন্ট মাউন্ট (ইনস্ট্যানশিয়েট) করতে পারেন। এটি HTML এ <my-component></my-component> ট্যাগে কম্পোনেন্ট রেন্ডার করে। উদাহরণ:

// কম্পোনেন্ট মাউন্ট করুন এবং ডাটা পাস করুন
Riot.mount('my-component', { title: 'My First Riot Component' });

এখানে, { title: 'My First Riot Component' } ডাটা opts প্রপার্টি হিসেবে কম্পোনেন্টে পাঠানো হচ্ছে, যা {opts.title} দ্বারা কম্পোনেন্টের মধ্যে অ্যাক্সেস করা যাবে।

৩. কম্পোনেন্টের মধ্যে ডাটা বাইন্ডিং

Riot.js ডাটা বাইন্ডিং ব্যবস্থার মাধ্যমে আপনি কম্পোনেন্টের মধ্যে ডাটা সরাসরি রেন্ডার করতে পারেন। উপরের উদাহরণে {opts.title} এবং {message} দিয়ে আমরা ডাটা বাইন্ডিং করেছি। যখন ডেটা পরিবর্তিত হয়, UI স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়।

৪. কম্পোনেন্ট হুক

Riot.js-এ কিছু life cycle hooks আছে যা কম্পোনেন্টের নির্দিষ্ট অবস্থায় কার্যকরী হয়:

• onMounted: কম্পোনেন্টটি DOM-এ মাউন্ট হলে এটি কল হয়।
• onBeforeUpdate: ডাটা পরিবর্তিত হওয়ার আগেই কল হয়।
• onUpdated: ডাটা পরিবর্তন হওয়ার পরে কল হয়।
• onUnmounted: কম্পোনেন্টটি DOM থেকে মুছে গেলে কল হয়।

উদাহরণ:

export default {
  onMounted() {
    console.log('কম্পোনেন্ট মাউন্ট হয়েছে');
  },
  onBeforeUpdate() {
    console.log('ডাটা পরিবর্তনের আগে');
  },
  onUpdated() {
    console.log('ডাটা পরিবর্তনের পরে');
  },
  onUnmounted() {
    console.log('কম্পোনেন্ট মুছে গেছে');
  }
};

৫. কম্পোনেন্টের মধ্যে ইভেন্ট হ্যান্ডলিং

Riot.js তে আপনি ইভেন্ট হ্যান্ডলিং খুব সহজভাবে করতে পারেন। একটি ইভেন্ট হ্যান্ডলার ফাংশন onclick বা অন্য ইভেন্টে বাইন্ড করা যেতে পারে। উদাহরণ:

<button onclick={changeMessage}>Message পরিবর্তন করুন</button>

এখানে changeMessage ফাংশনটি onclick ইভেন্টের সাথে যুক্ত করা হয়েছে। যখন বাটনটি ক্লিক করা হবে, তখন changeMessage ফাংশন কল হবে এবং message ভ্যালু পরিবর্তিত হবে।

৬. স্টেট ম্যানেজমেন্ট

Riot.js তে কম্পোনেন্টের মধ্যে একটি স্থানীয় স্টেট থাকে, যেটি আপনি this দিয়ে অ্যাক্সেস করতে পারেন। উদাহরণ:

export default {
  onMounted() {
    this.message = 'হ্যালো, বিশ্ব!';
  },

  changeMessage() {
    this.message = 'বার্তা পরিবর্তিত হয়েছে!';
  }
};

এখানে this.message হচ্ছে কম্পোনেন্টের স্থানীয় স্টেট, যা পরিবর্তন হলে UI তে পরিবর্তন প্রতিফলিত হয়।

৭. কম্পোনেন্টের মধ্যে স্টাইল

Riot.js-এ আপনি কম্পোনেন্টের মধ্যে CSS কোডও অন্তর্ভুক্ত করতে পারেন, যা ওই কম্পোনেন্টের জন্য স্কোপড (scoped) থাকবে। এটি অন্যান্য কম্পোনেন্ট বা DOM-এর সাথে কনফ্লিক্ট করবে না। উদাহরণ:

<style>
  h1 {
    color: blue;
  }
</style>

এখানে, <h1> ট্যাগটির জন্য নির্দিষ্ট স্টাইল দেওয়া হয়েছে যা শুধু এই কম্পোনেন্টের মধ্যে প্রযোজ্য।

কম্পোনেন্ট ব্যবস্থাপনার ভালো অভ্যাস

1. কম্পোনেন্টে শুধুমাত্র একাধিক দায়িত্ব নেবেন না: একটি কম্পোনেন্ট একটি নির্দিষ্ট কাজের জন্য তৈরি করুন, যেমন একটি বাটন, একটি টেবিল, বা একটি ফর্ম। এটি কোড পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য রাখে।
2. স্টেট এবং প্রপস ব্যবস্থাপনা: কম্পোনেন্টে স্টেট (অথবা লজিক) এবং প্রপস (অথবা আউটপুট) সঠিকভাবে পৃথক করুন। স্টেট পরিবর্তন করলে কম্পোনেন্টের UI আপডেট হবে, এবং প্রপস কম্পোনেন্টের বাইরের তথ্যকে প্রেরণ করে।
3. লাইফ সাইকেল হুক ব্যবহার করুন: কম্পোনেন্টের জীবনচক্রের নির্দিষ্ট মুহূর্তে কার্যকলাপ চালানোর জন্য লাইফ সাইকেল হুকগুলি ব্যবহার করুন।
4. ইভেন্ট হ্যান্ডলিং সাবলীল রাখুন: ইভেন্টগুলিকে সঠিকভাবে ম্যানেজ করুন, যেন কম্পোনেন্টে অবাঞ্ছিত রেন্ডারিং বা লজিক সমস্যা না হয়।

সারসংক্ষেপ

Riot.js কম্পোনেন্ট ব্যবস্থাপনা সহজ এবং কার্যকর। আপনি আপনার অ্যাপ্লিকেশনকে ছোট ছোট কম্পোনেন্টে ভাগ করে, ডাটা বাইন্ডিং এবং লাইফ সাইকেল হুক ব্যবহার করে অ্যাপ্লিকেশনের স্টেট এবং লজিক পরিচালনা করতে পারেন। এর ফলে কোডিং সহজ হয়, এবং বড় প্রকল্পগুলিতে কাজ করা আরও সুবিধাজনক হয়।

আপনি যদি আরও কিছু জানতে চান বা একটি নির্দিষ্ট দিক নিয়ে সাহায্য চান, তাহলে আমাকে জানাতে পারেন!

Riot.js-এ Reusable Components তৈরি করা অত্যন্ত সহজ। Riot.js এর মূল ধারণা হচ্ছে কম্পোনেন্ট-ভিত্তিক ডেভেলপমেন্ট, যেখানে UI একাধিক ছোট, স্বতন্ত্র, এবং পুনঃব্যবহারযোগ্য কম্পোনেন্টে ভাগ করা হয়। প্রতিটি কম্পোনেন্ট নিজেই HTML, CSS এবং JavaScript ধারণ করে, যা কোডকে মডুলার এবং পুনঃব্যবহারযোগ্য করে তোলে।

1. Riot.js কম্পোনেন্টের গঠন

Riot.js কম্পোনেন্টের একটি সাধারণ গঠন নিম্নরূপ:

<!-- ComponentName.riot -->
<component-name>
  <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 has changed!';
      }
    }
  </script>

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

2. কম্পোনেন্টের ব্যাখ্যা:

• HTML: কম্পোনেন্টের UI সংজ্ঞায়িত করা হয়। {opts.title} এবং {message} হল ডাটা বাইন্ডিং সিস্টেম। opts.title কম্পোনেন্টের প্রোপার্টি থেকে আসে এবং message কম্পোনেন্টের অভ্যন্তরীণ স্টেট থেকে আসে।
• JavaScript: এখানে কম্পোনেন্টের লজিক থাকে। onMounted ফাংশনটি কম্পোনেন্টটি DOM-এ মাউন্ট হওয়ার পর রান হয়। changeMessage ফাংশনটি বোতাম ক্লিকের মাধ্যমে message পরিবর্তন করে।
• CSS: কম্পোনেন্টের স্টাইলিং এখানে করা হয়। এটি স্কোপড CSS, যা শুধুমাত্র এই কম্পোনেন্টের জন্য প্রযোজ্য।

3. Reusable Components তৈরি করা

Riot.js-এ একটি কম্পোনেন্ট তৈরি করে সেটি পুনঃব্যবহার করা খুবই সহজ। নীচে একটি উদাহরণ দেওয়া হলো, যেখানে আমরা একটি Reusable Button কম্পোনেন্ট তৈরি করবো:

Button.riot কম্পোনেন্ট:

<!-- Button.riot -->
<button class="my-button" onclick={clickHandler}>{opts.label}</button>

<script>
  export default {
    clickHandler() {
      console.log(`${this.opts.label} button clicked!`);
    }
  }
</script>

<style>
  .my-button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    color: white;
  }

  .my-button:hover {
    background-color: #0056b3;
  }
</style>

ব্যাখ্যা:

• HTML: এখানে আমরা একটি button তৈরি করেছি, যা opts.label দ্বারা টেক্সট ধারণ করে।
• JavaScript: clickHandler ফাংশনটি বোতাম ক্লিক হলে একটি মেসেজ কনসোলে লগ করবে।
• CSS: বোতামটির স্টাইলিং সংজ্ঞায়িত করা হয়েছে। এটি একটি সাধারণ, সুন্দর বোতাম তৈরি করবে।

মূল কোড:

এখন, আপনি এই কম্পোনেন্টটি অন্য কোথাও ব্যবহার করতে পারেন:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reusable Button Component</title>
  <script src="https://cdn.jsdelivr.net/npm/riot@5.3.2/riot.min.js"></script>
  <script type="module">
    import './Button.riot';
  </script>
</head>
<body>
  <button label="Click Me"></button>
  <button label="Submit"></button>

  <script>
    riot.mount('button', { label: 'Click Me' });
    riot.mount('button', { label: 'Submit' });
  </script>
</body>
</html>

এখানে, Button.riot কম্পোনেন্টটি দুটি জায়গায় ব্যবহৃত হয়েছে: একটি "Click Me" বোতামের জন্য এবং অন্যটি "Submit" বোতামের জন্য। আপনি প্রতিটি বোতামের লেবেল ভিন্নভাবে পরিবর্তন করতে পারেন।

4. কম্পোনেন্টের পুনঃব্যবহারযোগ্যতা বাড়ানো

একই কম্পোনেন্টকে পুনঃব্যবহারযোগ্য করার জন্য আপনাকে কেবলমাত্র props (যেমন opts.label) ব্যবহার করতে হবে, যা কম্পোনেন্টের বাহির থেকে ডাটা পাস করে। আপনি অন্যান্য ইনপুট বা এভেন্ট হ্যান্ডলারও ব্যবহার করতে পারেন কম্পোনেন্টে, যেমন:

<my-component title="Hello" color="red"></my-component>

এবং আপনার কম্পোনেন্টের মধ্যে এই props কে ব্যবহার করতে পারেন:

this.opts.title;  // 'Hello'
this.opts.color;  // 'red'

এভাবে, আপনার কম্পোনেন্টগুলি বিভিন্ন ডাটা এবং আচরণের সাথে পুনঃব্যবহারযোগ্য হবে।

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

Riot.js-এ Parent এবং Child Components এর মধ্যে ডেটা আদান-প্রদান করা খুবই সহজ এবং তা props এবং events ব্যবহার করে করা যায়। Riot.js এ Parent Component থেকে Child Component-এ ডেটা পাস করতে হলে opts (options) ব্যবহার করতে হবে এবং Child Component থেকে Parent Component-এ ডেটা পাঠাতে হলে ইভেন্ট ব্যবহার করতে হবে।

১. Parent Component থেকে Child Component-এ ডেটা পাস করা

Riot.js-এ Parent Component এর মাধ্যমে Child Component-এ ডেটা পাস করার জন্য opts (options) ব্যবহার করা হয়। opts হল সেই ডেটা যা Parent Component এর মাধ্যমে Child Component কে পাস করা হয়।

উদাহরণ:

Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>
  <child-component title="Hello from Parent!" message={parentMessage}></child-component>

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

  <script>
    import './Child.riot';

    export default {
      onMounted() {
        this.parentMessage = 'This is the parent message.';
      },

      changeMessage() {
        this.parentMessage = 'Parent message has been updated!';
      }
    }
  </script>
</app>

এখানে, parentMessage প্যারেন্ট কম্পোনেন্টের একটি ডেটা, যা child-component কে message নামে পাস করা হচ্ছে। এছাড়াও, title নামে একটি স্ট্যাটিক ডেটা পাস করা হচ্ছে।

Child Component (Child.riot)

<!-- src/components/Child.riot -->
<child-component>
  <h2>{opts.title}</h2>
  <p>{opts.message}</p>

  <button onclick={notifyParent}>Notify Parent</button>

  <script>
    export default {
      notifyParent() {
        this.emit('childEvent', 'Hello Parent, I am the Child!');
      }
    }
  </script>
</child-component>

এখানে:

• opts.title এবং opts.message দিয়ে Parent Component থেকে Child Component এ পাস করা ডেটা অ্যাক্সেস করা হচ্ছে।
• একটি notifyParent ফাংশন রয়েছে, যা Parent Component-এ ইভেন্ট পাঠানোর জন্য ব্যবহৃত হবে।

২. Child Component থেকে Parent Component-এ ডেটা পাঠানো

Riot.js-এ Child Component থেকে Parent Component-এ ডেটা পাঠাতে হলে emit ফাংশন ব্যবহার করতে হয়। emit ফাংশনটি একটি কাস্টম ইভেন্ট তৈরি করে এবং Parent Component সেটি শ্রবণ (listen) করতে পারে।

উদাহরণ:

Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>
  <child-component title="Hello from Parent!" message={parentMessage} onchildEvent={handleChildEvent}></child-component>

  <p>{childMessage}</p>

  <script>
    import './Child.riot';

    export default {
      onMounted() {
        this.parentMessage = 'This is the parent message.';
        this.childMessage = '';
      },

      handleChildEvent(event) {
        this.childMessage = event.detail; // Child থেকে পাওয়া বার্তা
      }
    }
  </script>
</app>

এখানে:

• Parent Component onchildEvent ইভেন্টের মাধ্যমে Child Component এর childEvent ইভেন্টটি গ্রহণ করছে।
• ইভেন্টের detail প্রপার্টি দ্বারা Child Component থেকে পাঠানো ডেটা নেওয়া হচ্ছে।

Child Component (Child.riot)

<!-- src/components/Child.riot -->
<child-component>
  <h2>{opts.title}</h2>
  <p>{opts.message}</p>

  <button onclick={notifyParent}>Notify Parent</button>

  <script>
    export default {
      notifyParent() {
        this.emit('childEvent', 'Hello Parent, I am the Child!');
      }
    }
  </script>
</child-component>

এখানে, notifyParent ফাংশনটি childEvent নামক কাস্টম ইভেন্ট তৈরি করছে এবং Parent Component এর কাছে ডেটা পাঠাচ্ছে।

সারাংশ

1. Parent থেকে Child এ ডেটা পাস করতে opts (options) ব্যবহার করুন।
2. Child থেকে Parent এ ডেটা পাঠাতে emit এবং ইভেন্ট লিসেনিং ব্যবহার করুন।

এভাবে, Riot.js-এ Parent এবং Child Components এর মধ্যে ডেটা আদান-প্রদান করা হয়।

আপনি যদি কোনো নির্দিষ্ট প্রশ্ন বা সমস্যা নিয়ে কাজ করতে চান, আমি আরও বিস্তারিতভাবে সহায়তা করতে পারি!