মডুলার কম্পোনেন্ট তৈরি এবং রিইউজ করা

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

Riot.js-এ কম্পোনেন্ট তৈরি করার প্রক্রিয়া খুবই সহজ। একটি কম্পোনেন্টের মধ্যে HTML, JavaScript, এবং CSS একত্রে থাকে। একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেটিকে অন্য কোথাও পুনরায় ব্যবহার করতে পারবেন।

Riot.js-এ মডুলার কম্পোনেন্ট তৈরি এবং রিইউজ করার পদ্ধতি:

1. কম্পোনেন্ট তৈরি:

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

<!-- MyButton.riot -->
<my-button>
  <button onclick={handleClick}>{opts.label}</button>

  <style>
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>

  <script>
    export default {
      handleClick() {
        alert('Button clicked!');
      }
    }
  </script>
</my-button>

এখানে:

• HTML: <button> ট্যাগ ব্যবহার করে একটি বাটন তৈরি করা হয়েছে।
• CSS: বাটনের জন্য কিছু স্টাইল যোগ করা হয়েছে।
• JavaScript: handleClick ফাংশনটি ক্লিক করার সময় একটি alert বার্তা প্রদর্শন করবে।
• opts.label: এটি কাস্টম প্রপার্টি যা বাহ্যিকভাবে পাঠানো হবে এবং বাটনের টেক্সট হিসেবে প্রদর্শিত হবে।

2. কম্পোনেন্ট রিইউজ করা:

একবার কম্পোনেন্ট তৈরি হলে, আপনি এটি অন্য কম্পোনেন্ট বা পৃষ্ঠায় ব্যবহার করতে পারবেন। নিচে দেখানো হলো কিভাবে MyButton কম্পোনেন্টটি অন্য একটি কম্পোনেন্টে ব্যবহার করা যায়।

<!-- App.riot -->
<app>
  <h1>Welcome to My App!</h1>
  <my-button label="Click Me"></my-button>
  <my-button label="Submit"></my-button>

  <script>
    import './MyButton.riot';
  </script>
</app>

এখানে:

• <my-button label="Click Me"></my-button>: MyButton কম্পোনেন্টটি এখানে ব্যবহার করা হয়েছে এবং label প্রপার্টির মাধ্যমে কম্পোনেন্টে ডাইনামিক টেক্সট পাঠানো হয়েছে।

3. কম্পোনেন্টের ডেটা পাস করা (Props):

Riot.js-এ কম্পোনেন্টের মধ্যে বাহ্যিক ডেটা পাঠানোর জন্য Props ব্যবহার করা হয়। এটি opts (options) অবজেক্টের মাধ্যমে ঘটে। উপরে উল্লেখ করা label হল একটি Prop যা আপনি বাহ্যিকভাবে পাঠাতে পারেন।

<!-- AnotherComponent.riot -->
<another-component>
  <my-button label="Dynamic Label 1"></my-button>
  <my-button label="Dynamic Label 2"></my-button>

  <script>
    import './MyButton.riot';
  </script>
</another-component>

এখানে:

• Props label: এটি MyButton কম্পোনেন্টে পাঠানো হচ্ছে, যার মাধ্যমে প্রতিটি বাটনের টেক্সট ডাইনামিকভাবে নির্ধারিত হবে।

4. কম্পোনেন্টের স্টেট (State) ব্যবহার:

একটি কম্পোনেন্টের অভ্যন্তরে state ব্যবহার করে আপনি ডেটার মান পরিবর্তন করতে পারেন এবং তা UI তে রেন্ডার করতে পারেন।

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

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

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

এখানে:

• State: count হল একটি স্টেট ভেরিয়েবল, যা increment ফাংশনের মাধ্যমে আপডেট হয় এবং UI তে পরিবর্তিত হয়।
• onMounted(): এটি একটি লাইফসাইকেল হুক, যা কম্পোনেন্ট DOM এ যুক্ত হওয়ার পর চালু হয়।

5. কম্পোনেন্টে ইভেন্ট হ্যান্ডলিং:

Riot.js-এ ইভেন্ট হ্যান্ডলিং খুব সহজ। আপনি ইভেন্ট বাইন্ডিং ব্যবহার করে কম্পোনেন্টের ইন্টারঅ্যাকশন পরিচালনা করতে পারেন।

<!-- ClickTracker.riot -->
<click-tracker>
  <button onclick={handleClick}>Click Me!</button>
  <p>You clicked {clickCount} times.</p>

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

      handleClick() {
        this.clickCount++;
      }
    }
  </script>
</click-tracker>

এখানে:

• Event Handling: onclick={handleClick} ব্যবহার করে বাটনে ক্লিক ইভেন্ট বাইন্ড করা হয়েছে, যা handleClick ফাংশনটি কল করে এবং clickCount বাড়ায়।

6. কম্পোনেন্টের শৈলী (Scoped Styling):

Riot.js-এ CSS কম্পোনেন্ট-ভিত্তিক, অর্থাৎ প্রতিটি কম্পোনেন্টের স্টাইল শুধুমাত্র সেই কম্পোনেন্টের জন্য প্রযোজ্য। এতে কোডের স্কোপড স্টাইলিং করা সহজ হয়ে যায়।

<!-- StyledComponent.riot -->
<styled-component>
  <h2>Styled Component</h2>
  <p>This is a styled component.</p>

  <style>
    h2 {
      color: darkblue;
    }

    p {
      font-size: 16px;
    }
  </style>
</styled-component>

এখানে:

• Scoped Styling: h2 এবং p ট্যাগের জন্য CSS স্টাইল ব্যবহার করা হয়েছে, যা শুধু এই কম্পোনেন্টের জন্য প্রযোজ্য।

Riot.js-এ মডুলার কম্পোনেন্ট তৈরি এবং রিইউজ করা অত্যন্ত সহজ এবং কার্যকরী। একবার একটি কম্পোনেন্ট তৈরি করলে, আপনি সেই কম্পোনেন্টকে যেকোনো স্থানে পুনরায় ব্যবহার করতে পারবেন। Props এবং State ব্যবহার করে আপনি কম্পোনেন্টের মধ্যে ডেটা পাস এবং আপডেট করতে পারেন। Scoped Styling এর মাধ্যমে প্রতিটি কম্পোনেন্টের জন্য আলাদা স্টাইল রাখতে পারবেন।