Component Communication এবং Props ব্যবস্থাপনা

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

১. Component Communication (কম্পোনেন্ট কমিউনিকেশন)

Riot.js-এ কম্পোনেন্ট কমিউনিকেশন মূলত দুইটি প্রধান উপায়ে করা হয়:

• Props: বাইরের কম্পোনেন্ট বা উপাদান থেকে ইনপুট বা ডেটা গ্রহণ।
• Events: কম্পোনেন্টের মধ্যে বা এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে তথ্য আদান-প্রদান।

Props ব্যবস্থাপনা

Props হল ডেটার সেই অংশ যা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হয়। এটি সাধারণত কম্পোনেন্টের জন্য ইনপুট হিসেবে কাজ করে, যেখানে প্যারেন্ট কম্পোনেন্ট চাইল্ড কম্পোনেন্টে ডেটা প্রেরণ করে এবং চাইল্ড কম্পোনেন্ট সেই ডেটা ব্যবহার করে UI প্রদর্শন করে বা অন্য কোন কাজ করে।

Props ব্যবহারের উদাহরণ:

<!-- ParentComponent.riot -->
<parent-component>
  <child-component title="Hello, World!" message="This is a message"></child-component>
</parent-component>

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

এখানে, ParentComponent প্যারেন্ট কম্পোনেন্টে title এবং message নামে দুটি প্রপস পাঠানো হচ্ছে, যা ChildComponent কম্পোনেন্টে ব্যবহার করা হবে।

<!-- ChildComponent.riot -->
<child-component>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>
</child-component>

<script>
  export default {
    // `opts` এর মাধ্যমে প্যারেন্ট কম্পোনেন্ট থেকে প্রপ্স গ্রহণ করা হচ্ছে
  }
</script>

এখানে, ChildComponent কম্পোনেন্টে opts.title এবং opts.message দ্বারা প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত ডেটা ব্যবহার করা হচ্ছে।

বাইন্ডিং:

Props-এর সাথে ডাটা বাইন্ডিং করা যায়। এর মাধ্যমে, ডেটা পরিবর্তিত হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়। উদাহরণস্বরূপ:

<!-- ParentComponent.riot -->
<parent-component>
  <child-component title={dynamicTitle} message="Message from parent"></child-component>
  <button onclick={changeTitle}>Change Title</button>
</parent-component>

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

  export default {
    dynamicTitle: 'Initial Title',

    changeTitle() {
      this.dynamicTitle = 'Updated Title';
    }
  }
</script>

এখানে, dynamicTitle প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাস হচ্ছে। যখন dynamicTitle পরিবর্তিত হবে, তখন তা চাইল্ড কম্পোনেন্টে স্বয়ংক্রিয়ভাবে আপডেট হবে।

২. Event Communication (ইভেন্ট কমিউনিকেশন)

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

চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে ইভেন্ট পাঠানো

চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ইভেন্ট পাঠানোর জন্য, আপনি this.fire() ব্যবহার করতে পারেন।

<!-- ChildComponent.riot -->
<child-component>
  <button onclick={sendMessage}>Send Message</button>

  <script>
    export default {
      sendMessage() {
        this.fire('messageSent', 'Hello from child');
      }
    }
  </script>
</child-component>

এখানে, sendMessage ফাংশনটি ক্লিক ইভেন্টের মাধ্যমে messageSent নামে একটি ইভেন্ট ফায়ার করবে এবং একটি মেসেজ পাঠাবে।

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

প্যারেন্ট কম্পোনেন্টে চাইল্ড কম্পোনেন্ট থেকে আসা ইভেন্ট গ্রহণ করতে, riot.mount() এর মাধ্যমে ইভেন্ট হ্যান্ডলার সংযুক্ত করা হয়।

<!-- ParentComponent.riot -->
<parent-component>
  <child-component onmessageSent={messageHandler}></child-component>

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

    export default {
      messageHandler(message) {
        console.log('Received message: ' + message);
      }
    }
  </script>
</parent-component>

এখানে, ParentComponent কম্পোনেন্টে messageSent ইভেন্ট শোনার জন্য onmessageSent হ্যান্ডলার ব্যবহার করা হয়েছে। চাইল্ড কম্পোনেন্ট যখন fire করবে, তখন প্যারেন্ট কম্পোনেন্টের messageHandler ফাংশনটি চলবে।

৩. Event Bus (ইভেন্ট বাস)

Riot.js-এ একটি Event Bus ব্যবহার করে কম্পোনেন্টের মধ্যে ইভেন্ট কমিউনিকেশন করা যেতে পারে। ইভেন্ট বাস হল একটি সাধারণ ইভেন্ট সিস্টেম যা একই অ্যাপ্লিকেশনে বিভিন্ন কম্পোনেন্টের মধ্যে ইভেন্ট শেয়ার করতে সহায়তা করে।

ইভেন্ট বাসের উদাহরণ

// eventBus.js
export const EventBus = riot.observable();

এখন, আপনি EventBus ব্যবহার করে দুইটি কম্পোনেন্টের মধ্যে ইভেন্ট শেয়ার করতে পারেন:

<!-- ComponentA.riot -->
<component-a>
  <button onclick={sendEvent}>Send Event</button>

  <script>
    import { EventBus } from './eventBus.js';

    export default {
      sendEvent() {
        EventBus.trigger('eventFromA', 'Hello from Component A');
      }
    }
  </script>
</component-a>

<!-- ComponentB.riot -->
<component-b>
  <h1>{message}</h1>

  <script>
    import { EventBus } from './eventBus.js';

    export default {
      message: '',

      onBeforeMount() {
        EventBus.on('eventFromA', (msg) => {
          this.message = msg;
        });
      },

      onUnmount() {
        EventBus.off('eventFromA');
      }
    }
  </script>
</component-b>

এখানে, ComponentA থেকে একটি ইভেন্ট পাঠানো হচ্ছে এবং ComponentB এ সেটি শোনা হচ্ছে। এভাবে ইভেন্ট বাস ব্যবহার করে আপনি একাধিক কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে পারেন।

Riot.js-এ Component Communication এবং Props Management খুবই গুরুত্বপূর্ণ এবং শক্তিশালী ফিচার। আপনি props ব্যবহার করে ডেটা পাস করতে পারেন, events ব্যবহার করে কম্পোনেন্টের মধ্যে তথ্য আদান-প্রদান করতে পারেন, এবং event bus ব্যবহার করে আপনার অ্যাপ্লিকেশনের মধ্যে ইভেন্ট শেয়ার করতে পারেন। এইসব কৌশল ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও কার্যকরী এবং সুষমভাবে গঠন করতে পারবেন।

Riot.js-এ Components এর মধ্যে ডেটা প্রেরণ (Props) করার জন্য opts (options) ব্যবহার করা হয়। এটি Parent Component থেকে Child Component-এ ডেটা পাস করার একটি সহজ এবং কার্যকর পদ্ধতি।

Props এর মাধ্যমে ডেটা প্রেরণ

Riot.js-এ Props হল Parent Component থেকে Child Component-এ প্রেরিত ডেটা। opts এর মাধ্যমে এটি একসাথে উপস্থাপন করা হয়। Child Component এর মধ্যে এই opts ব্যবহার করে Parent থেকে প্রাপ্ত ডেটা অ্যাক্সেস করা হয়।

উদাহরণ: Parent থেকে Child Component এ Props প্রেরণ

এখানে আমরা একটি Parent Component এবং একটি Child Component তৈরি করব, যেখানে Parent Component থেকে Child Component-এ ডেটা পাস করা হবে।

১. Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Props পাস করা হচ্ছে Child Component-এ -->
  <child-component title="Hello, Child!" message={parentMessage}></child-component>

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

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

    export default {
      onMounted() {
        this.parentMessage = 'This is a message from Parent Component';
      },

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

এখানে:

• parentMessage হল একটি ডেটা যা Parent Component এর মধ্যে সংরক্ষিত, এবং এটি message নামক Props হিসেবে Child Component-এ পাস করা হচ্ছে।
• title="Hello, Child!" একটি স্ট্যাটিক Props যা Child Component-এ পাস করা হচ্ছে।

২. Child Component (Child.riot)

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

  <button onclick={sendMessage}>Send Message to Parent</button>

  <script>
    export default {
      sendMessage() {
        this.emit('childMessage', 'Hello, Parent! This is a message from Child!');
      }
    }
  </script>
</child-component>

এখানে:

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

৩. Parent Component থেকে Child Component এর ইভেন্ট গ্রহণ

আমরা Parent Component-এ childMessage ইভেন্টটি লিসেন করতে পারি এবং Child Component থেকে ডেটা গ্রহণ করতে পারি।

৩.১. Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Props পাস করা হচ্ছে Child Component-এ -->
  <child-component title="Hello, Child!" message={parentMessage} onchildMessage={handleChildMessage}></child-component>

  <p>{childMessage}</p>

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

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

    export default {
      onMounted() {
        this.parentMessage = 'This is a message from Parent Component';
        this.childMessage = '';
      },

      changeMessage() {
        this.parentMessage = 'The message has been updated!';
      },

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

এখানে:

• onchildMessage={handleChildMessage} দ্বারা Parent Component-এ childMessage নামক ইভেন্ট গ্রহণ করা হচ্ছে।
• handleChildMessage ফাংশনে event.detail দ্বারা Child থেকে পাওয়া ডেটা নেয়া হচ্ছে এবং সেটি childMessage এ সংরক্ষিত হচ্ছে, যা HTML-এ দেখানো হচ্ছে।

সারাংশ

1. Props পাস করা: Parent Component থেকে Child Component-এ ডেটা পাঠাতে opts ব্যবহার করা হয়। উদাহরণস্বরূপ, {parentMessage}।
2. Child Component-এ Props অ্যাক্সেস করা: Child Component-এ opts অবজেক্ট ব্যবহার করে Parent থেকে প্রাপ্ত ডেটা অ্যাক্সেস করা হয়।
3. কাস্টম ইভেন্ট: Child Component থেকে Parent Component-এ ডেটা পাঠাতে emit ব্যবহার করা হয়। Parent Component এই ইভেন্টটি গ্রহণ করতে পারে এবং ডেটা ব্যবহার করতে পারে।

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

Riot.js-এ Parent এবং Child কম্পোনেন্টের মধ্যে ডেটা পাস করার জন্য Props বা opts ব্যবহার করা হয়। Parent Component থেকে Child Component এ ডেটা পাস করার জন্য opts ব্যবহার করা হয়, যেখানে Parent Component থেকে পাস করা ডেটা Child Component এ প্রোপস হিসেবে পাওয়া যায়।

এখানে, আমরা একটি Parent এবং Child কম্পোনেন্ট তৈরি করব, যেখানে Parent Component তার Child Component-এ ডেটা পাঠাবে।

১. Parent থেকে Child এ ডেটা পাস করা (Props বা opts)

Riot.js-এ Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা পাস করার জন্য opts ব্যবহার করা হয়। opts হল এমন একটি অবজেক্ট যা Parent থেকে Child-এ ডেটা পাস করার জন্য ব্যবহৃত হয়।

উদাহরণ:

Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে ডেটা পাস করা -->
  <child-component title={parentTitle} message={parentMessage}></child-component>

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

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

    export default {
      onMounted() {
        this.parentTitle = 'Hello from Parent!';
        this.parentMessage = 'This is a message from the parent.';
      },

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

এখানে, parentTitle এবং parentMessage ডেটা Child Component-এ title এবং message নামে প্রোপস হিসেবে পাস করা হচ্ছে।

Child Component (Child.riot)

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

  <script>
    export default {
      onMounted() {
        console.log('Child component mounted!');
      }
    }
  </script>
</child-component>

এখানে:

• Child Component এর মধ্যে opts.title এবং opts.message ব্যবহার করা হচ্ছে, যা Parent Component থেকে প্রাপ্ত ডেটা।
• Parent কম্পোনেন্ট যখন parentTitle বা parentMessage পরিবর্তন করে, Child কম্পোনেন্ট সেই নতুন ডেটা স্বয়ংক্রিয়ভাবে রেন্ডার করবে।

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

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

উদাহরণ:

Parent Component (App.riot)

<!-- src/components/App.riot -->
<app>
  <h1>Welcome to Riot.js</h1>

  <!-- Parent কম্পোনেন্টে Child থেকে পাঠানো ডেটা -->
  <child-component title={parentTitle} onchildEvent={handleChildEvent}></child-component>

  <p>{childMessage}</p>

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

    export default {
      onMounted() {
        this.parentTitle = 'Hello from Parent!';
        this.childMessage = '';
      },

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

এখানে:

• onchildEvent={handleChildEvent} Parent কম্পোনেন্টের childEvent ইভেন্টে একটি হ্যান্ডলার যোগ করছে।
• handleChildEvent ফাংশনটি Child Component থেকে পাঠানো ডেটা গ্রহণ করছে (এটি event.detail এর মাধ্যমে).

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 কম্পোনেন্টে ডেটা পাঠাচ্ছে।
• this.emit('childEvent', 'Hello Parent, I am the Child!') এই ইভেন্টটি Parent কম্পোনেন্টে পাঠানো হচ্ছে।

সারাংশ

1. Parent থেকে Child এ ডেটা পাস করতে opts বা প্রোপস ব্যবহার করা হয়।
2. Child থেকে Parent-এ ডেটা পাঠাতে হলে emit ফাংশন এবং কাস্টম ইভেন্ট ব্যবহার করা হয়।
3. Child Component একটি ইভেন্ট emit করলে Parent Component সেই ইভেন্টটি গ্রহণ করতে পারে এবং ডেটা ব্যবহার করতে পারে।

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

Riot.js-এ Props ব্যবহারের মাধ্যমে আপনি Dynamic Components তৈরি করতে পারেন। Props হল কম্পোনেন্টের বাইরে থেকে পাস করা ডাটা, যা কম্পোনেন্টের ভিতরে ব্যবহার করা হয়। এই Props এর মাধ্যমে, আপনি কম্পোনেন্টের আচরণ বা UI ডাইনামিকভাবে পরিবর্তন করতে পারেন।

Props এর মাধ্যমে Dynamic Components তৈরি

Riot.js-এ, যখন আপনি কম্পোনেন্ট তৈরি করেন, তখন আপনি opts (অথবা Props) ব্যবহার করে বাহির থেকে ডাটা পাস করতে পারেন। এতে করে কম্পোনেন্টটির অভ্যন্তরীণ আচরণ পরিবর্তিত হতে পারে এবং UI রেন্ডারিংও ডাইনামিকভাবে বদলাতে পারে।

উদাহরণ: Props দিয়ে Dynamic Title কম্পোনেন্ট তৈরি

ধরা যাক, আপনি একটি Card কম্পোনেন্ট তৈরি করতে চান, যার শিরোনাম Dynamic হতে পারে, অর্থাৎ Props এর মাধ্যমে শিরোনাম পরিবর্তন করা যাবে।

১. Card.riot কম্পোনেন্ট তৈরি:

<!-- Card.riot -->
<card>
  <div class="card">
    <h2>{opts.title}</h2> <!-- Use props to display the title -->
    <p>{opts.content}</p> <!-- Use props to display dynamic content -->
  </div>

  <style>
    .card {
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 5px;
      margin: 10px 0;
    }

    h2 {
      color: #333;
    }
  </style>
</card>

এখানে:

• opts.title এবং opts.content হলো Props যা বাহির থেকে কম্পোনেন্টে পাস করা হবে।
• এই Props দ্বারা শিরোনাম এবং কন্টেন্ট ডাইনামিকভাবে প্রদর্শিত হবে।

২. App.riot ফাইলে Card কম্পোনেন্ট ব্যবহার:

<!-- App.riot -->
<app>
  <h1>Dynamic Card Components</h1>

  <!-- Passing dynamic title and content to the Card component -->
  <card title="Card 1 Title" content="This is the content of Card 1"></card>
  <card title="Card 2 Title" content="This is the content of Card 2"></card>
  <card title="Card 3 Title" content="This is the content of Card 3"></card>
</app>

<script>
  import './Card.riot';  // Importing the Card component
</script>

এখানে:

• Props (title, content) কে Card কম্পোনেন্টে পাস করা হচ্ছে।
• প্রতিটি Card কম্পোনেন্টের জন্য ভিন্ন ভিন্ন শিরোনাম এবং কন্টেন্ট পাস করা হচ্ছে।

আরও ডাইনামিক কম্পোনেন্ট তৈরি:

আমরা যদি আরও ডাইনামিক বা কনফিগারযোগ্য কম্পোনেন্ট তৈরি করতে চাই, তবে Props এর সাথে JavaScript ফাংশন, ইভেন্ট হ্যান্ডলার, বা অবজেক্ট পাস করেও আরও বেশি কার্যকারিতা যোগ করতে পারি।

উদাহরণ: Dynamic Button কম্পোনেন্ট

ধরা যাক, আমরা একটি Button কম্পোনেন্ট তৈরি করতে চাই, যেখানে label (লেবেল) এবং onClick (ক্লিক হ্যান্ডলার) Props হিসেবে পাস করা যাবে।

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

<style>
  .dynamic-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }

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

এখানে:

• opts.label দ্বারা Button এর টেক্সট ডাইনামিকভাবে পরিবর্তিত হবে।
• opts.onClick দ্বারা ক্লিকের জন্য একটি কাস্টম ফাংশন পাস করা যাবে।

App.riot এ Dynamic Button ব্যবহার:

<app>
  <h1>Dynamic Button Example</h1>

  <!-- Passing label and onClick function dynamically -->
  <button label="Click Me" onClick={handleClick}></button>
  <button label="Submit" onClick={submitForm}></button>
  <button label="Cancel" onClick={cancelAction}></button>
</app>

<script>
  import './Button.riot';  // Importing the Button component

  export default {
    handleClick() {
      alert('Button Clicked!');
    },

    submitForm() {
      alert('Form Submitted!');
    },

    cancelAction() {
      alert('Action Cancelled!');
    }
  }
</script>

এখানে:

• প্রতিটি Button কম্পোনেন্টে ভিন্ন ভিন্ন label এবং onClick পাস করা হয়েছে।
• handleClick, submitForm, এবং cancelAction ফাংশনগুলি পাস করা হয়েছে, যেগুলি বোতাম ক্লিক হলে কার্যকর হবে।

Props দিয়ে Dynamic কম্পোনেন্ট তৈরি করার সুবিধা:

1. Reusability (পুনঃব্যবহারযোগ্যতা): একবার তৈরি করা কম্পোনেন্ট বিভিন্ন ডাটা এবং কনফিগারেশন দিয়ে পুনঃব্যবহার করা যায়।
2. Modularity (মডুলারিটি): কম্পোনেন্টের ভিতরে শুধু একটি সাধারণ লজিক থাকবে, এবং বাহির থেকে Props দিয়ে সেটি কাস্টমাইজ করা যাবে।
3. Flexibility (নমনীয়তা): Props ব্যবহার করে কম্পোনেন্টের আচরণ ডাইনামিকভাবে পরিবর্তন করা যায়, যেমন UI, ইভেন্ট হ্যান্ডলার, স্টাইল ইত্যাদি।

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

Riot.js-এ Props হল একটি কম্পোনেন্টে পাস করা ডেটা, যা মূলত সেই কম্পোনেন্টের ইনপুট হিসেবে কাজ করে। Props সাধারণত কম্পোনেন্টের বাইরের ডেটা বা পারেন্ট কম্পোনেন্টের থেকে নেয়া হয় এবং এটি কম্পোনেন্টের ভিতরে ব্যবহৃত হয়।

Props এর জন্য ডিফল্ট মান সেট করা এবং ভ্যালিডেশন (validation) নিশ্চিত করা, কোডের নির্ভরযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা নিশ্চিত করতে গুরুত্বপূর্ণ।

১. Props এর জন্য ডিফল্ট মান (Default Values):

Riot.js-এ, আপনি একটি prop এর জন্য ডিফল্ট মান সেট করতে পারেন, যাতে কম্পোনেন্টের বাইরে থেকে কোনো মান না পাঠানো হলে, ডিফল্ট মান ব্যবহার করা হয়।

এটি করার জন্য, আপনাকে opts অবজেক্ট ব্যবহার করতে হবে, যেটি কম্পোনেন্টে পাস করা প্রপার্টি ধারণ করে। আপনি onMounted() মেথডে ডিফল্ট মান প্রদান করতে পারেন অথবা সরাসরি destructuring assignment ব্যবহার করতে পারেন।

ডিফল্ট মানের উদাহরণ:

<!-- DefaultProps.riot -->
<default-props>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        // Set default values if props are not provided
        this.opts.title = this.opts.title || 'Default Title';
        this.opts.message = this.opts.message || 'This is a default message.';
      }
    }
  </script>
</default-props>

ব্যাখ্যা:

• এখানে, opts.title এবং opts.message এর জন্য ডিফল্ট মান দেয়া হয়েছে। যদি কোনও মান পাস না করা হয়, তবে 'Default Title' এবং 'This is a default message.' ব্যবহার হবে।

২. Props এর জন্য ভ্যালিডেশন (Validation):

Props এর জন্য ভ্যালিডেশন নিশ্চিত করতে, আপনি prop types যাচাই করতে পারেন। Riot.js নিজে সরাসরি prop validation সমর্থন করে না, তবে আপনি JavaScript কোড ব্যবহার করে এই validation করতে পারেন।

ভ্যালিডেশন করার উদাহরণ:

<!-- PropsValidation.riot -->
<props-validation>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        // Validate the props
        this.validateProps();
      },

      validateProps() {
        if (typeof this.opts.title !== 'string') {
          console.error('Invalid prop: title should be a string');
        }
        if (typeof this.opts.message !== 'string') {
          console.error('Invalid prop: message should be a string');
        }
      }
    }
  </script>
</props-validation>

ব্যাখ্যা:

• এখানে, validateProps() মেথডটি opts.title এবং opts.message এর টাইপ চেক করে। যদি এগুলি সঠিক টাইপের না হয়, তাহলে একটি কনসোল এরর মেসেজ দেখাবে।
• আপনি এই ধরনের ভ্যালিডেশন ফাংশনগুলোকে কম্পোনেন্টের onMounted() ফাংশনে বা যখন Props পাস করা হবে তখন কল করতে পারেন।

৩. Props এর ডিফল্ট মান এবং ভ্যালিডেশন একসাথে:

আপনি ডিফল্ট মান এবং ভ্যালিডেশন একত্রে ব্যবহার করতে পারেন, যাতে Props সঠিক মানে প্রবাহিত হয় এবং ডিফল্ট মান ব্যবহৃত হয় যদি কোন মান প্রদান না করা হয়।

<!-- DefaultAndValidation.riot -->
<default-and-validation>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script>
    export default {
      onMounted() {
        // Set default values if props are not provided
        this.opts.title = this.opts.title || 'Default Title';
        this.opts.message = this.opts.message || 'This is a default message.';
        
        // Validate the props
        this.validateProps();
      },

      validateProps() {
        if (typeof this.opts.title !== 'string') {
          console.error('Invalid prop: title should be a string');
        }
        if (typeof this.opts.message !== 'string') {
          console.error('Invalid prop: message should be a string');
        }
      }
    }
  </script>
</default-and-validation>

ব্যাখ্যা:

• এখানে, প্রথমে ডিফল্ট মান সেট করা হয়েছে যদি Props প্রদান না করা হয়।
• তারপরে, validateProps() ফাংশনটি Props এর ধরন (data type) যাচাই করবে এবং সঠিক না হলে একটি কনসোল এরর দেখাবে।

৪. Type Checking (অপশনাল):

যদিও Riot.js সরাসরি prop-types বা TypeScript এর মতো প্রপার্টি টাইপ চেকিং সাপোর্ট করে না, আপনি JavaScript বা TypeScript ব্যবহার করে কোডের মধ্যে টাইপ চেকিং বা ভ্যালিডেশন যুক্ত করতে পারেন।

TypeScript Example:

যদি আপনি Riot.js এর সাথে TypeScript ব্যবহার করেন, আপনি Props এর টাইপ সুনির্দিষ্টভাবে ঘোষণা করতে পারেন:

// Example of TypeScript with Riot.js
<default-and-validation>
  <h1>{opts.title}</h1>
  <p>{opts.message}</p>

  <script lang="ts">
    export default {
      opts: {
        title: String,
        message: String
      },

      onMounted() {
        this.opts.title = this.opts.title || 'Default Title';
        this.opts.message = this.opts.message || 'Default message';
      }
    }
  </script>
</default-and-validation>

সারসংক্ষেপ:

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