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-এ পুনঃব্যবহারযোগ্য কম্পোনেন্ট তৈরি করা খুবই সহজ। আপনি ছোট, স্বতন্ত্র এবং একক দায়িত্বের কম্পোনেন্ট তৈরি করে, সেগুলিকে আপনার অ্যাপ্লিকেশনের যেকোনো জায়গায় পুনঃব্যবহার করতে পারেন। এটি কোডকে আরও মডুলার, পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
Read more
