Riot.js এ HTML, CSS, এবং JavaScript একসঙ্গে ব্যবহার করা হয় একটি কম্পোনেন্ট ফাইলের মধ্যে। Riot.js কম্পোনেন্ট ফাইলের একক ইউনিট হিসেবে HTML, CSS, এবং JavaScript কন্টেন্ট রাখার মাধ্যমে একটি পুরো UI উপাদান তৈরি করতে সাহায্য করে। প্রতিটি কম্পোনেন্টের মধ্যে তিনটি অংশ থাকে:
- HTML (টেমপ্লেট)
- CSS (স্টাইল)
- 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>
বিস্তারিত ব্যাখ্যা:
- HTML (টেমপ্লেট):
<h1>{opts.title}</h1>: এখানেopts.titleএকটি প্রপার্টি যা কম্পোনেন্টের বাইরের জায়গা থেকে পাস করা হয়।{opts.title}এক্সপ্রেশনটি ডাইনামিকালি এই মানটিকে UI তে রেন্ডার করে।<p>{message}</p>: এখানেmessageএকটি ভেরিয়েবল, যা কম্পোনেন্টের ডেটা স্টোরে সংরক্ষিত থাকে এবং এটি ব্যবহারকারীকে দেখানো হয়।
- CSS (স্টাইল):
<style>ট্যাগের মধ্যে সমস্ত CSS কোড লেখা হয়, যা শুধু এই কম্পোনেন্টের জন্য প্রযোজ্য হবে। এই স্টাইলটি অন্য কোন অংশকে প্রভাবিত করবে না। উদাহরণস্বরূপ,h1,p, এবংbuttonট্যাগের স্টাইল নির্ধারণ করা হয়েছে।
- JavaScript (লজিক):
- কম্পোনেন্টের স্ক্রিপ্ট অংশে
onMounted()ফাংশন ব্যবহার করা হয়েছে, যা কম্পোনেন্টটি DOM এ মাউন্ট হওয়ার পর প্রথমে রান হবে। এতেmessageভেরিয়েবলকেহ্যালো, বিশ্ব!এর মান দেওয়া হয়েছে। changeMessage()ফাংশনটি বোতাম ক্লিক হলে কল করা হয়, এবং এটিmessageভেরিয়েবলটি পরিবর্তন করে।
- কম্পোনেন্টের স্ক্রিপ্ট অংশে
Riot.js কম্পোনেন্টের কাঠামো:
- HTML অংশে, আপনি কম্পোনেন্টের UI গঠন করেন, যা ব্যবহারকারী দেখতে পাবে।
- CSS অংশে, আপনি UI উপাদানের জন্য স্টাইল নির্ধারণ করেন।
- JavaScript অংশে, আপনি UI-এর আচরণ এবং ডেটা স্টোরেজ পরিচালনা করেন।
উপকারিতা:
- সব কিছু এক জায়গায়: HTML, CSS, এবং JavaScript একত্রে থাকা কারণে কম্পোনেন্টটি খুবই স্বতন্ত্র এবং পুনঃব্যবহারযোগ্য।
- শুদ্ধ কোড অর্গানাইজেশন: একক কম্পোনেন্টের মধ্যে তিনটি গুরুত্বপূর্ণ অংশ থাকে, যা ডেভেলপারদের কোডটি সংগঠিত এবং পরিষ্কার রাখে।
- স্বয়ংক্রিয় ডাটা বাইন্ডিং: JavaScript ব্যবহারকারীর ইনপুট অনুযায়ী ডাটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়, যার ফলে কোড সহজ এবং রিয়েকটিভ হয়ে ওঠে।
Riot.js কম্পোনেন্টে HTML, CSS, এবং JavaScript একত্রে ব্যবহার করা অত্যন্ত সহজ এবং কার্যকরী। এটি ডেভেলপারদের কোডিং ও রক্ষণাবেক্ষণ প্রক্রিয়া সহজ করে তোলে, কারণ সমস্ত উপাদান একত্রে থাকে এবং UI, স্টাইল এবং লজিকের মধ্যে সোজাসুজি সম্পর্ক তৈরি হয়।
আপনি যদি Riot.js ব্যবহার করতে চান বা এর মধ্যে কিছু নতুন কনসেপ্ট জানতে চান, তাহলে আমি আরও সাহায্য করতে পারি।
Read more
